I have a simple CSS help popup that's been working well for me in most simple layouts. But now it needs to work inside a scrolling div.
Given the example HTML:
<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>
(Note: in the real world there will be multiple things with tooltips inside the scrolling div)
I have the CSS:
a.tooltip span
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow;
text-decoration:none;
vertical-align:top;
}
a.tooltip:hover span
{
display:inline;
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow;
text-decoration:none;
vertical-align:top;
z-index:5;
}
a.tooltip
{
border-width:0px;
text-decoration:none;
}
a.tooltip:hover
{
border-width:0px;
text-decoration:none;
position:relative;
}
Is it possible to have the popup pop out of the scrolling div so it's readable without causing the div to scroll?
Is this achievable in CSS alone, without using javascript?
edit: Live Example kindly provided by Kyle Sevenoaks.
You can set the :hover on the entire DIV. and place your span directly in the div. (This solution does not work in IE6 for example).
see a working example here: http://jsfiddle.net/5mASU/1/
Or you could set i higher z-index to the tooltip and use position fixed, it works:
http://jsfiddle.net/5mASU/3/
also avoid resetting the same values in the hover here is a cleaned up version:
http://jsfiddle.net/5mASU/4/
if for example you set
a {
padding: 5px;
}
a:hover {
// no need to reset the padding here
}
you don't need to reset the padding in the :hover the hover heritages the padding form the style set for the a. Just reset values you want to change between the normal and the hover status.
I don't think it's possible, because z-indexes work from the parent, the child element won't be able to display the span over the top. This CSS tooltip just adds another element when the <a> is hovered. I think you might have to go the jQuery route.
Also, try to post live examples of your problem instead of a long list of HTML and CSS, it's easier for us to help you :)
Related
I tried to make a simple CSS hover but got a blinking image issue. Is there something I can do to fix that?
In the meantime, there is a empty gap between a H3 title and .term-image class because of my CSS settings for a class (.term-desc). Is there a way to eliminate this gap? It appears that the gap created by position:relative is not easy to be removed.
I need to hide the image when mouse hovers.
http://jsfiddle.net/fveqkcnj/
<div class="categorywrapper">
<div class="views-row views-row-1 views-row-odd views-row-first">
<h3 class="term-title">
Arts & Culture
</h3>
<div class="term-desc">
<p>This is Arts & Culture</p>
</div>
<div class="term-image"> <img src="http://placehold.it/235x150/ffffee" />
</div>
</div>
.categorywrapper {
width: 720px;
clear:both;
}
.categorywrapper .views-row {
float:left;
position:relative;
width:235px;
}
.categorywrapper .views-row h3 {
position:relative;
margin-left:30px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000;
width:80%;
min-height:38px;
}
.categorywrapper .views-row .term-desc {
position:relative;
top:100px;
left:20px;
width:200px;
}
.categorywrapper .views-row .term-image {
position:relative;
}
.categorywrapper .views-row .term-image:hover {
z-index:-2;
}
Add to your css: pointer-events:none; in the .categorywrapper .views-row .term-desc
Basically the result is:
.categorywrapper .views-row .term-desc {
pointer-events:none;
position:relative;
top:100px;
left:20px;
width:200px;
}
Additionally you use a negative z-index on your hover element which means it goes behind the parent elements and triggers the mouseout event which turns off the hover.
You can fix that by instead of applying the following css to the row instead of the image:
.categorywrapper .views-row:hover .term-desc {
z-index:2;
}
Here is the JSFiddle
If you want it over the image do the same but put the .term-desc element inside the tag.
I've never used z-index for image hovers, but I would imagine that if you move the z-index down, the browser no longer considers you to be hovering over the image, so you get the blinking effect you mention. Try producing your hover effect using an alternative background image instead. Or else by changing opacity.
I assume your intention is to show the text when hovering the image. If that is true, you've chosen not only a cumbersome approach, but also one that doesn't work.
Since your image is wrapped in a div already, it is extremely easy to achieve your goal: Just put the div with text that should appear inside the same container that has the image. Apply proper positioning and give it a default opacity: 0; so it's initially invisible.
Then
.categorywrapper .views-row .term-image:hover .term-desc {
opacity: 1;
}
To also get rid of the unwanted whitespace between your h3 and your image, just set the h3's margin-bottom: 0;
http://jsfiddle.net/fveqkcnj/5/
I'm trying to do something like this using css:
I need it to:
Only have background (with padding) around the text, and
Have a solid line occupying 100% page width thereafter
For example, I'd like to be able to do the following:
<div style="my-custom-style">T E X T</div>
Would appreciate some input
You can use the :after pseudo element to minimise markup.
The point is to position the pseudo element absolutly and keep the div's position to default static position. This way, setting the pseudo element to width:100%; will make it span the whole width of the divs parent (you will although need to set that parent to an other position than the default static position. In the following demo it is the body element) :
DEMO
CSS :
body{
position:relative;
}
div{
background-color:#FF7F27;
display:inline-block;
}
div:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
EDIT:
As stated in comments by #Paulie_D, you should be using a text node to display text like <span> <p> <li> <h1> <h2> ... Using this technique, <span> or a title tag should suit you depending on the content you need to display.
As Stated by #KheemaPandey using a manual space between the letters isn't the best considering HTML semantics , maintainability of your code and the "concept" of CSS styling.
You should be using letters-spacing to space your letters.
Considering both points, your code could look like this :
DEMO
HTML :
<span>TEXT</span>
CSS :
body{
position:relative;
}
span{
background-color:#FF7F27;
display:inline-block;
letter-spacing:0.5em;
}
span:after{
position:absolute;
display:block;
content:'';
width:100%;
height:5px;
background-color:inherit;
}
Try following code
DEMO
<div style="my-custom-style"><span>T E X T</span></div>
div{
border-bottom: 3px solid orange;
}
span{
display: inline-block;
padding: 3px 5px;
background: orange
}
I am trying to vertically align a SPAN element in the middle of a parent element.
This is what I am doing:
I am trying to get both the username and password labels to be vertically aligned (middle) with the input boxes.
This is my HTML code:
<div class="login_field_wrap">
<span>Username</span>
<input type="text" autocomplete="off" spellcheck="off" id="username" name="username">
<div class="clear"></div>
</div>
This is what I have tried:
.clear { clear:both; }
.login_field_wrap span {
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; }
.login_field_wrap input {
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA;
margin:0px; width:250px; }
Vertically aligning an image element inside of this wrapping DIV works absolutely fine, well in Chrome anyway, it just won't align with my SPAN!
Any help would be amazing.
Vertical aligning via CSS can be tricky, and while CSS3 brings about a slew of goodies to help with that, CSS3 support is lackluster in the current browser market.
To achieve this effect I set the line-height property of the child element equal to the height of its containing element.
For example, I would use the following CSS:
.login_field_wrap { height:30px; /* or whatever is appropriate for your design */
.login_field_wrap span { height:30px; line-height:30px; }
.login_field_wrap input { height:30px; line-height:30px; }
The only downside of using line-height to vertically align something is if the text overflows onto a second line, in which case your design will essentially break.
Just remove the float property from your span class and set it to display:inline-block and the vertical-align:middle property will work, like so:
.login_field_wrap span {
color: #333333;
display: inline-block;
font-size: 13px;
font-weight: bold;
text-align: left;
vertical-align: middle;
}
Edit: cleaned up your code a bit, here is a demo that should work across browsers.
http://jsfiddle.net/kUe3Y/
I found the easiest way to do this is to set the parent container display property to table and the child display property to table-cell
#parent{
display:table;
}
#child{
display:table-cell;
vertical-align:middle;
}
I was able to get this to vertically align an anchor element inside a div.
I put it into the terms of your question in this jsFiddle.
I have never been able to get vertical-align to work in anything other than <td>s.
A workaround I commonly use would be to define a height for .login_field_wrap, then set the line-height property in your <span> to be equal to .login_field_wrap's height.
I think text-align:center; should work on elements too. If I am not mistaken, that usually works even if not on text.
I'm building a site using the 960gs and some styling of my own. My navigation menu uses this code:
<nav class="push_1">
<div class="grid_2 alpha"><span>About</span></div>
<div class="grid_2"><span>Services</span></div>
<div class="grid_2"><span>Projects</span></div>
<div class="grid_2"><span>Client Stories</span></div>
<div class="grid_2"><span>Contact</span></div>
</nav>
And this CSS:
.container_12 .grid_2 {width:140px; display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px;}
nav{background:#666; z-index:2; font-family:tahoma, helvetica, sans-serif; font-weight:bold; letter-spacing:1px; overflow:hidden}
nav div{position:relative; background:url(http://placehold.it/140x250/z03); height:250px; display:inline-block }
.interior nav div{height:50px}
nav div span{display:block; background-color:#111; color:#fff; padding:.3em 0; text-align:center; border-bottom: 2px solid #777;opacity:.9}
nav div a{display:block; position:absolute; top:0; height:100%; width:100%; z-index:5}
Which works fine in Firefox, but fails miserably in IE7, where only the text within the <span> elements appears and all other styling is lost. I've run into this same issue when trying to use <li> items instead of divs as well. Curiously, the same code shows no problems in IE7 when the height of nav div is set to 50px, as it is on pages with class="interior set on the body. The HTML5 shim is in effect on this page. I've tried searching through various known IE7 bugs, but couldn't find one that quite matched the problem I'm having. If anyone has any suggestions, I'd be much obliged.
In IE8, I could replicate the issue. What I found was that is was the tags that were confusing it. If I changed those to and added "nav" as a class on those divs and then changed "nav" to ".nav" in the CSS, IE seems to be happy. You can see it in action here in this jsFiddle:
http://jsfiddle.net/jfriend00/Vz85f/
If you still want the tags in for other reasons, it appears that you can wrap the HTML in the fiddle with before and afterwards and it will still display appropriately in IE - just don't use nav in the CSS rules. I'm unsure why - just reporting what I found with experimentation.
So I am styling the Wordpress more link on the blog index page, and I've used some custom styles and markup that are displaying inconsistently between webkit based browsers (Safari and Chrome) and Firefox. All is well in Firefox, but in webkit it doesn't look as I'd like it to. I can't seem to find how to fix it in webkit.
The problem is that I have the more link text styled and then the end part wrapped in a span which I'm replacing with an arrow image, with the text floated left, and the arrow floated right. However, in the webkit browsers, the arrow span is not being styled inline with the text.
The markup looks like this:
<p>
<a href="http://link" class="more-link">
Read the rest of this entry
<span class="arrow">»</span>
</a>
</p>
And the Styles look like this:
.entry p a.more-link {
display:block;
float:right;
margin:20px 0px 10px;
padding:3px 12px;
background:#6e5e4c;
color:#e6decc;
font-style:italic;
text-decoration:none;
font-weight:bold;
font-size:14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
line-height:20px;
}
.entry p a.more-link:hover {
background:#92d400;
color:#faf7ee;
}
.entry p a.more-link .arrow {
float:right;
display:block;
width:10px;
height:14px;
text-indent:-9999px;
background:url(/img/cure-sprite-main-v2.png) no-repeat -310px -195px;
margin-top:3px;
margin-left:10px;
}
Feel free to view the actual live code as well here: http://cure.org/blog
Just move span to the beginning of the link. Also it can help to fix almost the same problem in ie7.
<p>
<a href="http://link" class="more-link">
<span class="arrow">»</span>
Read the rest of this entry
</a>
</p>
Decided just to change the style of the span arrow from floated right to absolutely positioned and gave the anchor extra right padding to compensate. That seems to have worked just fine.
This could also have been done by making the arrow portion a background image on the link. Less code, less hassle, and no absolutely positioned minutia.