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
Related
I have this block:
For example: I add the text: Last News in the world.
I would like to have the width of the block as wide as the text, but the corners should still remain as a curve.
CSS:
.cat-box-title h2 {
background: transparent url(.../images/testtitle.png) repeat-y;
padding-left: 5px;
color:#5E5E5E;
float:left;
margin-right:10px;
font-size: 22px;
font-family: BebasNeueRegular, arial, Georgia, serif;
}
HTML:
<div class="cat-box-title">
title
</div>
Your solution will be more easy if you use the border-radius instead of background image.
.round-btn
{
background:#4679bd;
color: #FFF;
border-radius:5px;
padding : 10px;
border:none;
}
of-course you need to check the browser compatibility whether your browser supports this property or not. If not then you need to use some hack.
JsFiddle Demo
and if you goes with background-image solution then you need to use two images; one for left side border-radius and another one for right side and use the background-color for rest of the button.
CSS:
.cat-box-title {
background-color: #4679bd;
color:#5E5E5E;
float:left;
border-radius:5px;
margin-right:10px;
font-size: 22px;
padding: 5px;
font-family: BebasNeueRegular,arial,Georgia, serif;
}
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 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>
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.