...

View Full Version : Brain fried... need creative H3 solution



boogily
11-19-2011, 06:31 AM
I have a site that I am developing and I want to create a good way to display this H3. http://www.happydogwebproductions.com/h3.jpg

What I'm looking to accomplish: the text needs no (transparent) background, while the rest of the area on the right preferably will have the repeating yellow stripes.

Issues I'm facing: Each h3 title will have a different length, so my issue is adjusting the yellow stripes background via css to adjust/move with the type/title.

Is there a way to do this with css?

abduraooft
11-19-2011, 11:16 AM
Please post a link to your page so that we'll get a glance at what you've at your end.

Amphiluke
11-19-2011, 11:31 AM
IMHO, this is only possible with use of extra-markupů

Something of the kind

<h3 class="hdr"><span class="hdr-text">HISTORY</span><span class="hdr-bg">&nbsp;</span></h3>


.hdr {
display:table;
width:100%;
}
.hdr span {
display:table-cell;
}
.hdr-text {
padding-right:10px;
white-space:nowrap;
width:1%;
}
.hdr-bg {
background:red;
}

This will not work in IE6,7 though.

Amphiluke
11-19-2011, 11:39 AM
And the following seems to be a cross-browser solution.


<h3 class="hdr">HISTORY<span class="hdr-bg">&nbsp;</span></h3>


.hdr {
overflow:hidden;
white-space:nowrap;
_width:100%;
}
.hdr-bg {
background:red;
display:inline-block;
margin-left:10px;
width:100%;
}

coothead
11-19-2011, 01:06 PM
Hi there boogily,

this example is the CSS3 method but, as yet, will only work in modern gecko and webkit browsers...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>CSS3 - display:box, box-orient, box-flex</title>

<style type="text/css">
body {
font-family:arial,sans-serif;
font-size:16px;
background:url(gradient.jpg);
}
h1,h2,h3,h4,h5,h6 {
width:100%;
font-size:100%;
color:#fff;
box-shadow:#000 10px 10px 20px;
}
h1,h2,h3,h4,h5,h6,.text,.background {
display:-moz-box;
display:-webkit-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
}
.text {
padding:5px;
}
.background {
-moz-box-flex:1;
-webkit-box-flex:1;
background:url(diag_stripe.jpg);
background-position:right center;
}
</style>

</head>
<body>

<h1>
<span class="text">Philosophy</span>
<span class="background"></span>
</h1>
<h2>
<span class="text">Physics And Chemistry</span>
<span class="background"></span>
</h2>
<h3>
<span class="text">History</span>
<span class="background"></span>
</h3>
<h4>
<span class="text">Geography</span>
<span class="background"></span>
</h4>

</body>
</html>

Further reading:-
CSS3 Flexible Box (http://www.google.com/search?q=CSS3+flexible+box)
coothead

boogily
11-21-2011, 04:15 PM
Thanks guys. Boy I can't wait until CSS3 is more cross-browser



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum