CODEWITHSUNDEEP
css
fish man
fish man

Reputation: 2700

css position:absolute problem

I have some css problem. here is what I need.

enter image description here

No matter how many words the title have(example: title could be What's new today?, could be hello world)

it always have a background line pass through the whole div, and the word's background is white. (the word should be text-align:center; and it's background looks like broken the line)

Here is my code:

<style> 
.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-col: white;
margin-left: -10px;
padding: 5px;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-18px;
width: 960px;
}
</style> 
<div class="ocell">
<div class="wd">Title</div>
<div class="line"></div>
</div>

also in http://jsfiddle.net/zApLA/ may be also can use a background-image instead of the line. Thanks.

Upvotes: 0

Views: 997

Answers (2)

Litek
Litek

Reputation: 4888

This can be achieved by simply using div with border-bottom for the line, and positioning element with text on that line. Fiddle here.

Upvotes: 2

Doug McK
Doug McK

Reputation: 468

Couple of problems with your CSS.

One - the .wd div spans the entire width of page (defaults to 100%) Two - no z-index sset to say which div should be on top of which.

Try this code (worked in fiddle)

.ocell {
width:960px;
height:42px;
text-align:center;
padding: 20px 0 20px 0;
}
.wd {
margin: 0 auto;
background-color: #f0f;
margin-left: -10px;
padding: 5px;
font-size:20px;
    z-index:10;
    border:1px solid #f0f;
    display:inline;
}
.line {
position: absolute;
border-bottom: solid 1px #999;
margin-top:-15px;
width: 960px;
    z-index:-1;
}

Upvotes: 1

Related Questions