I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
Related
I get some HTML and CSS code.
https://codepen.io/lbebber/pen/pvwZJp
.menu-item,
.menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
I tried to use this code, but I did not succeed pushing the hamburger menu to be at the bottom-left corner.
I think something outside the part I copied here is blocking the menu to get it to the bottom.
The second thing, I wanted to use little pictures instead of icons.
Do you have an idea how?
When I add a picture, I am getting weird behavior.
Thank you for your help in advance.
Code is Fixed!
So in your .menu attribute, I added the following. These attributes move your menu (.menu) in a fixed position in the bottom left of the screen.
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
I removed the margin-left:-80px; as this caused your menu to warp halfway off the left of the screen when I added the other attributes above. So your .menu attribute should look like this when the proper attributes are edited:
.menu{
#extend %goo;
$width:650px;
$height:150px;
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
This resulted (on codepen) with your site looking like this. Of course, the gooey menu opens as shown below. I cannot insert the code into stack overflow as there were issues with layout and content. But if you make the changes to your CSS code above, you can see your menu working
[
I have a problem where I need to remove/hide a line behind my transparent logo:
The white line needs to be beside the logo, but it should not be shown behind. - And no, I will not add a black background..
Code:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
Span will become a transparent image, this is just for testing..
You can check out the Line-On-Sides Headers CSS Trick.
Something like this:
body {
background-color: black;
color: white;
}
.fancy {
line-height: 0.10;
text-align: center;
font-size: 81px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-top: 1px solid white;
top: 0;
width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>
Source
Since you have a transparent background, I think the only way is to duplicate the line div and divide it in two, one left and one right, I don't know the dimensions you need, but you should have something like this:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>
Hard to say the correct margins without knowing where they are contained, you should post the entire HTML if you want more help.
I would absolutely position the elements in a container and then arrange them with z-index to ensure they stack in the correct order. I have created a JSfiddle with a quick example of how to acheive this:
https://jsfiddle.net/bL0dfkvq/
The key here is the z-index on the text is:
z-index:10;
The z-index on the hr line is:
z-index:5;
Few things...
1. Your methods of positioning in the code snippet you included are, quite frankly, awful. I'd clean this up and not using things like padding: 43% to position your elements - make sure you have a sturdy foundation before you go building a house on it! I'd suggest checking out some resources in regards to positioning elements using CSS - given that you've provided just a 2-line snippet, I can't exactly go into what proper methods would be in your case.
2.
And no, I will not add a black background..
You're acknowledging the simplest working answer, yet you don't want to use it...? Why not? Do you mean you don't want to apply a background to the image? You can just add it to the span using background-color: black;
3. Again, I don't approve of position the elements in this manner, however using your snippet (and applying the 43% on the margin instead of padding), you can achieve this: https://jsfiddle.net/dgat2q34/
For additional space between the line and the text, you'd then use padding on the span.
EDIT: Kaiwen Huang brings up a good point - if you didn't want to use specifically black as I've included in my example, you can change the span's background to background-color: inherit; instead.
You might test this code:
<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333; font-size: 80px">LOGO</div></div></div>
Just set your logo to have a higher z-index: than the line.
Z-index is basically:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
i am trying to make something like this:
http://funedit.com/imgedit/soubory/small_6719449301396601413.jpg
The problem is i am totaly new in CSS and i have no idea how to make it, i just try something like:
.newsnames{
background-image: url("images/newsname-right.png");
background-repeat: repeat-x;
width:572px;
height:227px;
display:inline-block;
position: absolute; left: 415px; top: 39px; right: 0px; bottom: 0px;
font-family: Arial;
font-weight: 13px;
color: white;
text-decoration: none;
line-height: 45px;
}
But it just giving it that dark background and position , but what i need is to let everything looks like on image and i am completly lost, can somebody help me with it?
My actualy try can be see here: http://funedit.com/andurit/newnew/
p.s. Its really important that all image have to go to CSS not to HTML!
Shuld i divide it for 3 parts? (that blue arrow, mid, and right with date and chat buble? If yea how can i change 3 things with one a:hover?
you have to give z-index to your css so that the layer to your right will show on top of your image
.newsnames{
background-image: url("images/newsname-right.png");
background-repeat: repeat-x;
width:572px;
height:227px;
display:inline-block;
position: absolute; left: 415px; top: 39px; right: 0px; bottom: 0px;
font-family: Arial;
font-weight: 13px;
color: white;
text-decoration: none;
line-height: 45px;
z-index: 1000;
}
what happens is your image is projected outward in the z plane so it appears on top of your background image.
you can provide your other elements inside this div itself ...
Shuld i divide it for 3 parts? (that blue arrow, mid, and right with date and chat buble? If yea how can i change 3 things with one a:hover?
In my opinion your only chance is to use jquery to realize this demand (especially the last part).
For some reason my login textbox is not clickable in the main area, only on the bottom-border. I looked at other topics on this issue and people have been advised to check for transparent overlapping elements, I checked and I don't see any - also tried messing with a higher z-index but that also did not work. Would love some input!
.input_large {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border: 1px solid #929292;
padding:5px;
width:259px;
background-color:#f6f6f6;
}
this is the CSS. The problem is also viewable here: click
Thanks in Advance!
The span#status is overlapping the input. If you reduce the height of the span it allows the input to be clicked.
#status {
border-radius: 11px;
height: 50px; /*Height reduced*/
left: 0;
margin-top: -100px;
padding-top: 15px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 100%;
z-index: 0;
}
You could also not position this element absolutely, which will allow the input to be clicked. I'm not sure the reasoning behind this element being position:absolute.
The <span id=status> element is in the way. It is not visible (opacity: 0) and blocks the Username control. Instead of using opacity: 0, you can use visibility: hidden, but it seems like you could just tweak the height and positioning of the element so that it fills up the white space above the inputs instead.
I am currently working on my share buttons and I am trying to make them act like the share buttons on YouTube do, when a:hovered a span elemental appears with a text "Facebook/Twitter/RSS" etc.
The span element width should be auto since "Facebook" and "RSS" contains a different amount of letters, and I don't want to set a fixed width.
I want the span element to appear in the "middle" of it's current element, check the youtube share buttom for a hint.
I have come this far, see: http://jsfiddle.net/Kz2n2/
try this:
<span title="share">share</span>
css:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 100%;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
working jsfiddle:
demo
With jQuery UI Tooltip you can make tooltips for your social icons.
Check out the following example, here is the jQuery UI Tooltip implemented.
$('.tooltip').tooltip();
The title tag on your <a href='#'>` is used as the text for your tooltip.
#<span>RSS.</span>