I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
Related
I have an icon in a :before pseudoelement, and if the textelement becomes to long and goes to the next row, I want it to not wrap around my pseudoelement but keep it's distance.
Here is a link to my example:
http://jsbin.com/yosevagaqa/1/edit?html,css,output
If you resize the window so that the text is forces into a new line, you can see the problem.
How can I avoid this?
As you can see from the other answers, there are multiple solutions!
If the size of the square in :before is always the same, one other solution would be to add
.link {margin-left:25px; text-indent:-25px;}
to the CSS. This causes the entire block to be shifted to the right, except for the first line, containing the square, which gets "outdented".
http://jsfiddle.net/MrLister/3xbfyqkh/
Or what I would prefer, with sizes in ems, so that the red square depends on the font size.
.link:before {
/* .. */
width: 1em; height: 1em;
margin-right: .5em;
}
.link {margin-left:1.5em; text-indent:-1.5em;}
Making sure, of course, that the indentation is the same as the size + the margin of the square.
http://jsfiddle.net/MrLister/3xbfyqkh/1/
Another approach, since the purpose is to make a custom "bullet", would be to treat the h5 like a list item. Then you won't need the ::before trick. You will need other tricks to make the square the right size though...
.link {
display:list-item; list-style:square;
color:red;
font-size:2em; line-height:.5em;
margin:.5em 0 .5em 1em}
.link a {
font-size:.417em; vertical-align:.3em}
http://jsfiddle.net/MrLister/3xbfyqkh/5/
You can add following CSS:
.link{
float: right;
width: calc(100% - 25px);
}
.link{
position: relative;
padding-left: 25px;
}
.link:before {
content: "";
background: red;
background-size: contain;
width: 15px;
height: 15px;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
position: absolute; top: 0; left: 0;
}
<h5 class="link">A long link that might wrap and then it gets all weird and stuff</h5>
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I'm back with more questions!
It's likely something very simple, but it has confused the hell out of me. I have a layout set-up so that the H2 text on pages and posts (Wordpress) has a background image next to it on both sides, accomplished by use of span:before and span:after.
Here is how it is working correctly and what I would like the overall CSS to achieve:
http://www.weburton.co.uk/content/demo/?page_id=121
This is currently achieved by min and max-widths in the CSS. And I've had the width part set to auto, where it is under a parent element with the width of the page. I don't understand how the lines aren't automatically resizing based on the H2's width. See, the problem here:
http://www.weburton.co.uk/content/demo/?p=36
Here is the CSS that is used:
#pagewrapper{
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 140px;
text-transform: uppercase;
}
h2 span:before{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll left center transparent;content:" ";height:1px;margin-right:15px; left: 0%; position:absolute; margin-top: 15px; min-width: 25%; max-width: 50%; width: auto; }
h2 span:after{background:url("http://weburton.co.uk/content/demo/wp-content/themes/epic/images/header_bg.jpg") repeat-x scroll right center transparent;content:" ";height:1px; margin-left:15px; right: 0%; position:absolute; min-width: 25%; max-width: 50%; width: auto; margin-top: 15px; }
Basically, I've exhausted all options that I can think of. Is there something I'm missing here or is there another way to go about achieving this styling using something else but span that is easier?
Oh and I know I have some redundant styling calls, I'm in the process of cleaning it up. :)
Thanks in advance! :)
May be that is what you want
Remove min-width and max-width from h2 span:before and h2 span:after
h2 span {
position:relative;
}
h2 span:before {
left: -25%;
width: 20%;
}
h2 span:after {
right: -25%;
width: 20%;
}
without a fiddle it's hard to give you a definite answer, but I think that if you try changing the display property to display: inline-block it should do the trick.
This will cause the element to act as a block element while still being displayed inline (thus preserving your current layout - block elements typically take up the full available width and are followed by linebreaks).
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
i have a div with overflow-y: hidden; and a have a pseudo element to the right of the buttons that i want to position outside the div but it will not work. here is the fiddle - http://jsfiddle.net/PAdSd/1/.
But if i give the div no overflow it will sit out of the div fine. Here is that fiddle - http://jsfiddle.net/PAdSd/2/.
Any help would be wonderful
Remove position: relative from .nav. You can see the results in this jsfiddle.
A similar problem had me banging my head against the wall for days. Trial and error and pure chance produced the solution. Not sure about cross browser compatibility, but it works in chrome and firefox (as long as you prefix your css3 properties with -moz).
Here's another way of solving this problem (especially useful when you can't just remove position:relative because of say, using height:100%; on the pseudo element):
To make the content visible, add padding to the bottom, say 10px;
Then to remove the paddings effect for other elements use margin-bottom:-10px;
So:
.nav{
background: transparent;
height: auto;
overflow-y: hidden;
position: relative;
/*new stuff*/
padding-bottom:10px;
margin-bottom:-10px;
}
It's hidden because that is what you have told it to do.
http://jsfiddle.net/PAdSd/3/
If you don't want it hidden, but still want overflow hidden then you will need to reposition it higher. .nav:after will put content at the end, but inside of the nav tag.
You can position it higher by adjusting the top css value.
.nav:after{
content: "";
border-radius: 5px;
background: #000;
width: 10px;
height: 10px;
position: absolute;
left: 500px;
margin-left: 1px;
top: 10px;
box-shadow: -5px 5px 0px #8f0222;
z-index: 20;
}
Or you might want to use body:after instead, because it doesn't sound like you actually want it inside the nav bar.