I want to make a reusable tooltip. The span following the image is not showed, when you go over it the span must appear. But is doesn't work. Does anybody has an idea? The span stay forever in display none.
Html code
<div>
<div>Sharing</div>
<img class="info-tooltip" src="system-help.png" alt="Info">
<span>sdfmhdsjlfhsdljkqhfjkldsqfhljkqdshflsqd</span>
</div>
ccs code
.info-tooltip + span{
display: none;
}
.info-tooltip:hover + span{
display:block;
position:absolute;
width: 105px;
line-height:8px;
top:10px;
left:15px;
background-color: #E9F2FF;
padding:5px;
font-size:10px;
color:#444444;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
z-index:100040000;
}
you should try to surround your image with a div tag:
<div class="info-tooltip"><img src="system-help.png" alt="Info"></div>
Related
I want align the content in middle of the background image in css.
I was used the code like
section.center_content {
background: url(../images/center_bg.jpg) center no-repeat;
border-bottom: 1px solid #e5e5e5;
font-family:Arial, Helvetica, sans-serif;
margin-bottom: 40px;
background-size:100%;
height:190px;
}
.ticker-content {
vertical-align:middle;
}
.ticker-content h1 {
color:#FFFFFF;
font-size:45px;
}
.ticker-content h2 {
color:#BFBFBF;
font-size:35px;
}
.ticker-content p {
color:#BFBFBF;
font-size:20px;
}
Please give a solution. thanks a lot in advance
Add the following properties to your section.center_content:
section.center_content {
background:blue;
border-bottom: 1px solid #e5e5e5;
font-family:Arial, Helvetica, sans-serif;
margin-bottom: 40px;
height:190px;
width:100px;
/*Vertically center*/
display:table-cell; /*This makes the div behave like a table cell*/
vertical-align:middle; /*This property is only available on table cells*/
/*Horizontal center*/
text-align:center; /*This you know centers text horizontally*/
}
.ticker-content{
/*Remove vertical-align:middle; from here*/
}
DEMO
P.S. And keep this wonderful article for future reference.
The css property vertical-align applies to inline elements and table-cell element.
So add a display:table-cell to your element to be align in the middle.
You can always use line-height property that equalls to the height of the container that it is.
I am trying to add two different color underline in same text but not able to set 2nd underline its gone down from the first line.
Here is the link example "click here for exmple"
check the title's underline of this page Other Meetings , Church Services.
.zaptitle {
margin-bottom:20px !important;
}
.home_widget .page_title_s2, .home_widget .page_title_s3, .home_widget .page_title_s4,
.page_title_testimonials, .zaptitle {
border-bottom-color:#EDEDED;
border-bottom-style:solid;
border-bottom-width:1px;
color:#545454;
float:left;
font-family:Arial, sans-serif;
font-size:16px;
font-weight:bold;
margin:0 0 20px;
min-height:30px;
padding:0;
position:relative;
width:100%;
}
And
<div class="zaptitle page_title_s2 ">
<span class="page_info_title_s2" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(16, 185, 185);">Latest News</span>
</div>
The beauty about CSS is that things don't really have to be like they seem to be. You can create such a line using other elements.
JSfiddle
HTML:
<div id="hello">hello</div>
<div id="left_line"></div>
<div id="right_line"></div>
CSS:
#left_line {
background-color:black;
margin-right:90%;
float:left;
width:10%;
height:1px;
}
#right_line {
background-color:red;
float:right;
width:80%;
height:1px;
position:absolute;
left:10%;
}
Please add the following code in your existing CSS:--
.page_info_title_s2{
position: relative;
float: left;
padding-bottom: 10px;
line-height: 20px;
top: 1px;
vertical-align: baseline;
}
use above code to exact line overwriting. See the working fiddle:--
http://jsfiddle.net/npsingh/RgE2h/1/
you just need to add this class
.page_info_title_s2{
display:block;
float:left;
min-height:30px;
}
this is working Fiddle
I'm making a web design for my magazine. Right now, I'm trying to make something like the 1996 title you can see on the picture below. With a border going under the text, but a white background around the text. Anybody can help me to do this? :)
Sure, try this:
HTML
<div class="heading">
<h1>Heading Title</h1>
</div>
CSS
.heading {
text-align:center;
border-bottom:2px solid #d5d5d5;
}
.heading h1 {
display:inline-block;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:100;
font-size:36px;
position:relative;
top:18px;
background:#fff;
padding:0 12px;
}
div,h1 {
margin:0;
padding:0;
}
jsFiddle example
I want to make simple list but have some problem. When i put some tekst in li element i want to set li width same like li text is..
And also I want when I hover over the li link, to change full li element background color,not just of A element..
This is my code..
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
#mid_left li {
width:auto;
background-color:red;
margin:10px 0;
padding:5px;
}
#mid_left li a:hover{
background-color:blue;
}
Example what i try to do is on page..(see footer)
http://buildinternet.com/2010/07/when-to-use-_session-vs-_cookie/
Why don't you just use Firebug to read their CSS?
#mid_left li:hover{
background-color:blue;
}
should take care of your question.
Applies to the a element when you hover over the li.
#mid_left li:hover a{
background-color:blue;
}
Applies to the li element when you hover over it.
#mid_left li:hover{
background-color:blue;
width:200px;
}
Here is a working jsfiddle which (I believe) fits with what you're trying to do. Don't mind the colors, they're for illustration only.
http://jsfiddle.net/qwdd8/1/
edit: updated to remove inline-block, setting width:auto. I forced a height to the LI, but there may be better ways for keeping them from overlapping.
For the width-problem, don't set a width to the ul-element, so change:
#mid_left ul{
width:180px;
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
to
#mid_left ul{
list-style:none;
font-family:Verdana Helvetica, arial, sans-serif; font-size:15px;
}
Ok here is my problem, I've got a div with a hover effect on it, it changes colors when the mouse is over the div, in turn the text inverts colors so that it remains readable. Now my problem is that the links themselves don't follow the color schemes and attacking the links on their own outside the div won't work until the mouse hovers directly over the link itself. Can anyone point me in the right direction.
The HTML
<div id="gs_home_blackbar">
<div id="ic_box_1"><span style="LINE-HEIGHT: 24px; FONT-SIZE: 20px"><strong>An Emerging Leader </strong></span><br />
This is where text goes</div>
<div id="ic_box_2"><br /> This is where text goes</div>
</div>
<div id="ic_box_3" class="a"><br /><br />This is where my link goes</div>
</div>
and here is the CSS that controls this section
#ic_box_3 {
color:#fff;
position:absolute;
background:#000;
margin:-130px 0px 0 860px;
padding:27px 10px 10px 10px;
text-align:left;
width:230px;
height:93px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fff;
border-left:dotted 1px #fff;
}
#ic_box_3:hover {
position:absolute;
background:#fff;
margin:-130px 0px 0 860px;
padding:27px 10px 10px 10px;
text-align:left;
width:230px;
height:93px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000;
border-left:dotted 1px #000;
}
Use a selector like this:
#ic_box_3:hover a {
/* settings for anchors inside a hovered div */
}
Then if you need the situation where both are hovered, use this one:
#ic_box_3:hover a:hover {
/* etc */
}
It seems like you are trying to make a link look like a button with a hover over effect. You don't have put it in a div and style the div. You can just style the anchor tag itself. Basically apply all those styles that you gave to the div to the anchor itself and tweak as needed.