for some reason I don't manage to display 3 small images next to each other in 1 line. They are aligned vertically.
Code is like this:
var customOptions =
{
'maxWidth': '600',
'width': '400',
'className' : 'popupCustom'
}
var customPopup = "<b>Center</b>Test<br><br><div><center><a href=pinlisting.php?hideid=><img src=images/hide.png height=15.5 width=18></a><a href=delete2.php?delete&pin_db_id=1><img src=images/delete.png height=15.5 width=18></a><a href=index.php><img src=images/zoom.png height=15.5 width=18></a></center></div>";
L.marker(["coordinates"], {icon: "myIcon"}).addTo("myLayer").bindPopup(customPopup,customOptions);
Seems like some css problem but no clue
For demo purposes I made your code more static: I used HTML and CSS with flexbox, which can easily be converted to be generated by some JS:
<div class="map">
<h3>Map with Tooltip</h3>
<div class="tooltip">
<div class="arrow"></div>
<div class="title">Title</div>
<div class="desc">Description</div>
<div class="icons">
<a href="#">
<span class="icon icon-eye"></span>
</a>
<a href="#">
<span class="icon icon-trash"></span>
</a>
<a href="#">
<span class="icon icon-zoom"></span>
</a>
</div>
</div>
</div>
The tooltip is a flex column positioned absolutely at a random position in my fake map:
.tooltip {
display:flex;
flex-direction:column;
background:#ccc;
width:100px; height:100px;
position:absolute; top:20%; left:56%;
padding:10px;
border-radius:10px;
box-shadow:0 0.25em 1em 0 rgba(0,0,0,0.5);
}
The bottom arrow of the tooltip:
.arrow {
display:block;
background:transparent;
width:0;
height:0;
position:absolute;
bottom:-25px;
left:50%;
margin-left:-15px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top:30px solid #ccc;
}
The CENTER element is EXTREMELY deprecated, and there is really no reason to use it anymore, we have lost of powerful new positioning and layout tools in CSS now, so .icons container is a flex box row:
.icons {
flex:1 0 0;
display:flex;
flex-direction:row;
justify-content:space-evenly;
align-items:stretch;
align-content:center;
}
Each icon link shares this CSS rule:
.icons a {
flex:1 1 20px;
border-radius:0.25em;
background:white;
box-shadow:0 0.125em 0.125em 0 rgba(0,0,0,0.25);
padding:0.25em 0.125em;
margin:1px;
width:1em; height:1em;
text-align:center;
vertical-align:middle;
line-height:1;
}
You will want to override the default link style for the icons:
a, .icon {
color:black;
text-decoration:none;
}
And I created some random icons from HTML entities:
.icon-eye:before {
content:"\0260E";
}
.icon-trash:before {
content:"\02605";
}
.icon-zoom:before {
content:"\02665";
}
This entity chart is SUPER handy: https://dev.w3.org/html5/html-author/charref
I also created a :hover state for the icons:
.icons a:hover {
box-shadow:0 1px 0 0 rgba(0,0,0,0.125);
}
My JSBin: http://jsbin.com/saxivi/edit?html,css,output
Based on the vertical stack, it seems that your <a> style was overwritten with display: block;. You could give each <a> specific class name then give them display: inline-block to make them horizontally stacked.
First, give specific class to <a>:
var customPopup = "<b>Center</b>Test<br><br><div><center>
<a class='popupMarker' href=pinlisting.php?hideid=><img src=images/hide.png height=15.5 width=18></a>
<a class='popupMarker' href=delete2.php?delete&pin_db_id=1><img src=images/delete.png height=15.5 width=18></a>
<a class='popupMarker' href=index.php><img src=images/zoom.png height=15.5 width=18></a></center></div>";
Then add css style somewhere:
.popupCustom .popupMarker {
display: inline-block;
}
Declare the following class in your style sheet and use in your code.
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
It worked for me when i had a similar problem.
Change your code to this:
var customPopup = "<b>Center</b>Test<br><br><div><center><img src=images/hide.png height=15.5 width=18></div><img src=images/delete.png height=15.5 width=18></div><a href=index.php><div class="img-container"><img src=images/zoom.png height=15.5 width=18></div>
Related
I want to space out the contents to be evenly and then spaces to all have equal amount but I'm not sure how to do so. When I add padding to the list or increase the space in the column it messes up the format of the page
I have also tride putting an offset in the row but it still doesnt fix it
So I'm trying for it to be like:
Projects About Me Contact Me
Pic Pic Pic
But anytime I change something it changes to:
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<body style="background-color:mintcream">
<div class="header">
<span style="color:darkblue">const</span>
<span style="color:white">_name =</span>
<span style="color:darkblue">"My_Name"</span>
</div>
<div class="row">
<ul class="home" style="padding-top:20px;">
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">Projects</span>
<span><img src="https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class="col-md-3">
<a href="#">
<span style="font-size:35px">About Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class="col-md-2">
<a href="#">
<span style="font-size:35px">Contact Me</span>
<div><img src="https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>
As #apanesar11 pointed out, grids should resolve your problem.
Another solution is the use of the flexbox.
I made you and example with the snippet given by #mplungjan :
https://codepen.io/mdubus/pen/BvXXmJ
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}
If you're not satisfied with the alignment, you can also replace the justify-content:space-around; in .home with justify-content:space-between;.
I'm not sure about the kind of alignment you want, but hope it helps ! :)
EDIT :
I also changed the .home a with
display:flex;
flex-direction:column; so that your picture goes under your text.
have you used grid systems? It'll make everything a lot easier to do and your webpage much more responsive. Check out some of my sample code here: https://github.com/apanesar11/CSS-Grids
The reason you're having this behavior currently is because span is an inline element, whereas div is a block element. Because of this the about.png and phone.jpg images are positioned currently, because start a new, since they are wrapped in a div element. Your project.jpg img is wrapped within a span element and span elements do not start on a new line and they take only the space they need.
I am trying to find out how to set the thickness of an underline (the text decoration that happens when one hovers with the cursor) in JavaScript. Currently the text becomes underlined like this:
x.style.textDecoration = "underline";
and, "onmouseout", this is undone as follows:
x.style.textDecoration = "none";
All the advice I've seen online so far has to do with formatting the bottom borders of tags. I am not trying to format a menu bar or any other element, but ordinary hyperlinks. I've tried it in various browsers, and the default underline looks fine in Firefox, but in Chrome, the line is hairline-thin, in contrast with the bold text it underlines.
Any advice on how to fix this is greatly appreciated.
CSS :hover should be used for such tasks
.x{
/* default styles here */
}
.x:hover {
/* HOVER default styles here */
}
if you want to be able to control the thickness of your "underline"
use border-bottom instead or box-shadow inset.
Border on whole padded Anchor
.x{
display: inline-block;
color: magenta;
background: #ddd;
padding: 15px 15px 10px;
text-decoration: none;
border-bottom: 5px solid transparent;
transition: border-bottom 0.3s;
}
.x:hover{
border-bottom-color: magenta;
}
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
On Anchor's text only using inner <span> and inset box-shadow
.x{
display: inline-block;
color: magenta;
background: #ddd;
padding: 15px 15px 10px;
text-decoration: none;
}
.x span{
transition: 0.3s;
box-shadow: inset 0 -2px 0 0 trasparent;
}
.x:hover span{
box-shadow: inset 0 -2px 0 0 magenta;
}
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
<a class="x" href="#"><span>Link 1</span></a>
Using :after pseudo for more control
.x{
position: relative;
color: magenta;
text-decoration: none;
}
.x:hover:after{
content: "";
position: absolute;
left: 0;
bottom: -3px; /* Control bottom position */
width: 100%;
height: 5px; /* Set your desired thickness */
background: magenta;
}
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
<a class="x" href="#">Link 1</a>
If you want to use JavaScript to update the border-bottom style attribute, you can use:
someTag.style.borderBottom="3px solid blue";
Note that the CSS border-bottom is borderBottom in JavaScript
Try using css :after pseudo element , :hover , font-family set to block ; adjust font-size to change thickness of line, top to to change position of line corresponding to text of element
div {
width:24px;
}
div:after {
position:absolute;
top:-24px;
content:"_";
width:0px;
color:#000;
display:none;
font-weight:bold;
font-family:block;
font-size:48px;
}
div:hover:after {
cursor:pointer;
display:block;
}
<div>abc</div>
I need a curved vertical line with 5 dots like this -
On hovering over each dot, text should slide besdide it from left to right, and text should disappear on taking away the mouse.
So far I have only been able to indent and place those 5 dots by means of modifying margin-leftproperty for each item in the list. I am not able to get the curved line. How do I achieve that?
Background:
Border-radius is really great for creating the appearance of curves. The problem is that anything inside an container which is curved using this style ignores said curving. As you pointed out, we need to use margins. However, by keeping everything symmetric, we can keep the margin-lefts to three sets, one of which doesn't require a class.
Answer:
We can get away with a very simple structure here:
<ul>
<li><span>Text</span></li>
</ul>
We have the ul as the outer wrapper with the top and bottom horizontal borders. We use a ::before pseudo-element attached to the wrapper, to create the curved line. Each li is the menu entry. The blue circles are created with ::before pseudo-elements attached to the li, and we can achieve the text animation via the span inside. We could get away with not having a span, but we'd need to declare the actual text content in the CSS, and I think it belongs in the HTML.
The CSS isn't too bad. We curve the ul::before and give it the border. We make it larger than 100% because the curve you show cuts off the top and bottom.
Screenshot:
Code:
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-18%;
left:10px;
content:"";
}
li {
margin:28px 0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.right {
margin-left:30px;
}
li.middle {
margin-left:6px;
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="right"><span>Anecdotes</span></li>
<li class="middle"><span>Interviews</span></li>
<li><span>Records</span></li>
<li class="middle"><span>Recent Stats</span></li>
<li class="right"><span>Recent Snaps</span></li>
</ul>
Success! As mentioned, this might be better using Canvas, or possible SVG. But if you want to stay strictly with HTML & CSS, this should help.
Second Method
Another way we can do this, staying with HTML & CSS, is to use transform:translate. I thought this might be easier and more reliable, but it turns out it requires more CSS and more classes. However, I got it working so I'm going to post it here anyway, because despite that it's pretty cool I think.
ul {
height:300px;
width:300px;
margin:0;
padding:0;
list-style:none;
position:relative;
border-top:solid 2px black;
border-bottom:solid 2px black;
overflow:hidden;
}
ul::before {
height:133%;
width:133%;
border-radius:50%;
border:solid 2px black;
display:block;
position:absolute;
top:-17.5%;
left:10px;
content:"";
}
li {
margin:0;
color:lightblue;
font-style:italic;
font-weight:bold;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
line-height:30px;
margin-top:-15px;
}
li::before {
height:20px;
width:20px;
content:"";
display:inline-block;
background-color:lightblue;
border-radius:50%;
position:relative;
top:4px;
margin-right:6px;
}
li.one {
transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg);
}
li.two {
transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg);
}
li.three {
transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg);
}
li.four {
transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg);
}
li.five {
transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg)
}
li span {
position:relative;
left:-100%;
transition: left 200ms ease-in;
}
li:hover span {
left:0;
}
<ul>
<li class="one"><span>Anecdotes</span></li>
<li class="two"><span>Interviews</span></li>
<li class="three"><span>Records</span></li>
<li class="four"><span>Recent Stats</span></li>
<li class="five"><span>Recent Snaps</span></li>
</ul>
Here's how you can achieve the curve, dots, and text display below. You have to adjust it to suit your need.
#arch {
border-left: solid 2px black;
border-radius: 50%;
height: 500px;
width: 300px;
margin-left: 100px;
padding-top: 100px;
margin-top: -80px;
}
#arch-outer {
/* serves as a blade to cut off overly curved area */
height: 450px;
width: 300px;
overflow: hidden;
/* Cuts off the overly cured area */
}
#arch li {
font-size: 76px;
height: 85px;
color: rgb(153, 217, 234);
}
#arch li:nth-of-type(1) {
margin-left: 20px;
}
#arch li:nth-of-type(4) {
margin-left: 15px;
}
#arch li:nth-of-type(5) {
margin-left: 40px;
}
#arch li a {
font-size: 20px;
line-height: 76px;
vertical-align: middle;
color: rgb(153, 217, 234);
}
<div id="arch-outer">
<div id="arch">
<ul>
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
<li>Four
</li>
<li>Five
</li>
<ul>
</div>
<!-- End arch -->
</div>
<!-- End arch outer -->
View on jsfiddle
You can create 1 blank <div class="curve"></div> and display only left border of that div as below:
.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}
OR else
create 1 curve image and apply to that background div and with help of position float your dot div on it and with hover effect show your text.
check here http://jsfiddle.net/Lz97rgyf/2/
I don't probably know how to search for this precise question and I haven't found anything, so I am sorry if there is already asked somewhere.
I only have 3 buttons and the index is the "Inicio" page. I've applied a :hover to the buttons, but I want to keep it fixed for the button of the displayed page. Obviously, I want to have "Inicio" in this state at the beginning.
(jsfiddle below)
<!-- menu -->
<nav id="nav">
<ul>
<a id=inicio href=#><li class="boton"><p class="text_menu">INICIO</p></li></a>
<a id=productos href=#><li class="boton"><p class="text_menu">PRODUCTOS</p></li></a>
<a id=contacto href=#><li class="boton"><p class="text_menu">CONTACTO</p></li></a>
</ul>
</nav>
#nav {
padding-top: 27px;
padding-left: 25%;
}
#nav ul li {
list-style:none;
display:inline-block;
margin-left: 4%;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 100%;
color: #FFF;
}
.text_menu {
padding-top: 5px;
}
.boton {
width: 15%;
height: 57px;
background-color: #0099ff;
border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border: 0px solid #000000;
}
.boton:hover {
background-color: #0033ff;
}
Here is a jsfiddle:
http://jsfiddle.net/7jbUj/
Thanks for your responses.
U can simply add class like .hovered to current button like
HTML:
<li class="boton hovered"><p class="text_menu">CONTACTO</p></li></a>
CSS:
.hovered {
background-color: #0033ff;
}
UPD: Fiddle
UPD2: For page changing
U simply can add and remove class on `click' like:
$('nav ul a').on('click', function(){
$('nav ul a li.hovered').removeClass('hovered');
$(this).children('li').addClass('hovered');
})
Fiddle2
If you want to use without JQuery, you have to use it in javascript
HTML :
<a id="mnu1" class="mnu hovered" src="#" onclick="makeSelected('mnu1')"> One </a>
<a id="mnu2" class="mnu" src="#" onclick="makeSelected('mnu2')"> Two </a>
<a id="mnu3" class="mnu" src="#" onclick="makeSelected('mnu3')"> Three </a>
CSS :
.mnu{
background-color : #451;
margin-left:20px;
font-size:30px;
}
a:hover{
background-color:#ccc;
}
.hovered{
background-color:#ccc;
}
JS :
var prev_mnuid= "mnu1";
function makeSelected(mnuid){
document.getElementById(prev_mnuid).className = "mnu";
document.getElementById(mnuid).className = "mnu hovered";
prev_mnuid=mnuid;
}
Fiddle : http://jsfiddle.net/rajaveld/t31zc8jx/
I created a temporary snapshot of my site for the time being: http://hunpony.hu/today/
The problem is, in the right panel, the first div, div#randomTile.tile is kind of misplaced.
I don't know why. Here is some related HTML, CSS and JavaScript:
<div id="slideoutWrapper">
<div id="slideout">
<div id="slideoutTitle">
<h1 class="dyn"></h1>
</div>
<div id="slideoutInner">
<div id="randomTile" class="tile" style="">
<img class="small" src="img/small/vs.svg">
<h4>Random<br> </h4>
</div>
</div>
</div>
</div>
... in the CSS mean vendor prefixed attributes, I removed them because it makes the code block too long.
#slideoutInner .tile {
cursor: pointer;
margin:.5em;
text-align:center;
display:inline-block;
width:95px;
text-overflow: ellipsis;
...
transition-duration: 0.3s;
box-shadow:0;
height:127px;
white-space:nowrap;
...
filter: contrast(100%);
}
#slideoutInner .tile:hover { box-shadow:0px 0px 15px; ...; filter: contrast(150%) }
#slideoutInner .tile .small {
height:75px;
width:75px;
margin:5px auto;
display:block;
}
#randomTile { color:#777; background-color: #777 }
#slideoutInner .tile h4 {
line-height: 20px;
padding:0;
margin:0px auto 2px;
display:block;
text-shadow:none;
color:white;
}
Some referenced variables are too long to include here, the main js file is here, where all the code is.
$('#randomTile').on('click',function(){
changeBGImage(rndCharNumber);
}).hover(function(){
rndCharNumber = randomize(0,backImage.length-1);
$(this).css({color:colorz[rndCharNumber],backgroundColor:colorz[rndCharNumber]});
$(this).find('img.small').attr('src','img/small/'+backImage[rndCharNumber]+'.svg');
$(this).find('h4').html((longNames[rndCharNumber].indexOf(' ') != -1) ? longNames[rndCharNumber].split(' ').join('<br>') : longNames[rndCharNumber]+'<br> ');
},function(){
$(this).css({color:'',backgroundColor:''});
$(this).find('h4').html(locStr.randomTile[locale]);
$(this).find('img.small').attr('src','img/small/vs.svg');
});
$(document).ready(function(){
...
for (i=0;i<backImage.length;i++){
imgArray.push('<img class="small" src="img/small/'+backImage[i]+'.svg">');
}
for (i=0;i<longNames.length;i++){
h4Array.push('<h4>'+((longNames[i].split(' ').join('<br>').indexOf('<br>') != -1) ? longNames[i].split(' ').join('<br>') : longNames[i]+'<br> ')+'</h4>');
}
for (i=0;i < imgArray.length;i++){
htmlArray.push('<div class="tile" style="color:'+colorz[i]+';background-color:'+colorz[i]+';">'+imgArray[i]+h4Array[i]+'</div>');
}
$('#slideoutInner').append(htmlArray.join(''));
...
});
The issue is caused by white-spaces, they affect inline elements (.tile blocks). To fix it add font-size: 0 to #slideoutInner (parent container):
#slideoutInner {
overflow-x: hidden;
text-align: center;
font-size: 0;
}
and change margin of the #slideoutInner .tile rule, make it e.g. 4px. It will fix your problem.