| Author |
 Topic  |
|
|
The Impact
Junior Member
Australia
398 Posts |
 Posted - 31 July 2005 : 07:11:18
|
I'm converting an header made with tables to one made with CSS and Divs was hoping that a CSS guru here at Snitz would be able to help me with some problems I've encountered.
This is what the header should look like:
And when the browser window is resized it should look like this:
So I'm converting it to CSS, and what I've come up with so far is this. I am unsure how to get the bottom corners, even after searching around the net for tutorials they don't seem to work correctly for me.
Anyone who would be able to help it would be much appreciated.
Thanks, Josh  |
|
|
laser
Advanced Member
Australia
3859 Posts |
Posted - 31 July 2005 : 07:30:12
|
I'd make sure you have the equivalent to this :
<div class="top-left"></div>
<div class="top-right"></div>
but with "bottom" settings |
 |
|
|
The Impact
Junior Member
Australia
398 Posts |
Posted - 31 July 2005 : 07:40:10
|
Yes, have tried that using vertical-align:bottom; and it looks like this.  |
|
|
|
laser
Advanced Member
Australia
3859 Posts |
Posted - 31 July 2005 : 09:04:59
|
I think you code should look like :
<body>
<div id="header">
<div class="top-left"></div>
<div class="top-right"></div>
<div id="header-left"><img src="header2.gif" width="365" height="80" /></div>
<div id="header-right">
<div id="header-tabs">
<div class="tab-entire-left">
<div class="tab-left"></div>
<div class="tab-right"></div>
<div class="tab-middle">V8 Supercars Series</div>
</div>
<div class="tab-entire-right">
<div class="tab-left"></div>
<div class="tab-right"></div>
<div class="tab-middle">V8 Supercar Development Series</div>
</div>
</div>
</div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
</body>
|
|
|
|
-gary
Development Team Member
406 Posts |
Posted - 31 July 2005 : 13:57:21
|
I couldn't find a decent way to make the divs wrap like you want, but here's some examples of other things you could do with an emphasis on less code in the html. They all degrade nicely also.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
div#header1 { display: block; height: 80px; background-color: #D13538; }
div#header1 div { background: url(top_left.gif) no-repeat top left; }
div#header1 div div { background: url(top_right.gif) no-repeat top right; }
div#header1 div div div { background: url(bottom_left.gif) no-repeat bottom left; }
div#header1 div div div div { background: url(bottom_right.gif) no-repeat bottom right; }
div#header1 div div div div div { margin-left: 20px; height: 80px; width: auto; padding-right: 20px; }
div#header1 div div div div div h1 { height: 80px; width: 365px; background: url(header2.gif) no-repeat top left; margin: 0px; text-indent: -9999px; }
div#header2 { display: block; height: 80px; background-color: #D13538; }
div#header2 div { background: url(top_left.gif) no-repeat top left; }
div#header2 div div { background: url(top_right.gif) no-repeat top right; }
div#header2 div div div { margin-left: 20px; height: 80px; width: auto; padding-right: 20px; }
div#header2 div div div h1 { height: 80px; width: 365px; background: url(header2.gif) no-repeat top left; margin: 0px; text-indent: -9999px; }
div#text2 { display: block; height: 20px; background-color: #D13538; }
div#text2 div { background: url(bottom_left.gif) no-repeat bottom left; }
div#text2 div div { background: url(bottom_right.gif) no-repeat bottom right; }
div#text2 div div div { margin-left: 20px; height: 20px; width: auto; }
div#text2 div div div ul { color: #FFFFFF; list-style: none; display: inline; }
div#text2 div div div li { margin-right: 20px; float: right; }
div#container3 { background-color: #E4E4E4; }
div#header3 { display: block; height: 80px; background-color: #D13538; }
div#header3 div { background: url(top_left.gif) no-repeat top left; }
div#header3 div div { background: url(top_right.gif) no-repeat top right; }
div#header3 div div div { margin-left: 20px; height: 80px; width: auto; padding-right: 20px; }
div#header3 div div div h1 { height: 80px; width: 365px; background: url(header2.gif) no-repeat top left; margin: 0px; text-indent: -9999px; }
div#text3 ul { height: 80px; background: none; color: #000000; list-style: none; display: inline; }
div#text3 li { margin-right: 10px; float: right; }
div#body3 { padding: 10px; }
</style>
<body>
<div id="header1"><div><div><div><div><div><h1>v8impact.com</h1></div></div></div></div></div></div>
<br /><br />
<div id="header2"><div><div><div><h1>v8impact.com</h1></div></div></div></div>
<div id="text2"><div><div><div><ul><li>V8 Supercars Series</li><li>V8 Supercar Development Series</li></ul></div></div></div></div>
</div>
<br /><br />
<div id="container3">
<div id="header3"><div><div><div><h1>v8impact.com</h1></div></div></div></div>
<div id="text3">
<ul><li>V8 Supercars Series</li><li>V8 Supercar Development Series</li></ul>
<div id="body3">
<br />Some text here<br />
</div></div></div>
</body>
</html>
|
KawiForums.com
 |
|
|
|
muzishun
Senior Member
United States
1079 Posts |
Posted - 31 July 2005 : 17:26:59
|
Actually, it should be pretty simple to do without adding a lot of tags. Something like this ought to work (still untested.. I'll see if I can get a working demo later tonight):
CSS Code
div#left {float: left; width: 150px; margin: 0; padding: 2px;}
div#right1 {float: left; margin: 3em 0 0 0; width: 15%;}
div#right2 {float: left; margin: 3em 0 0 0; width: 25%;}
div.clear {clear: both;}
HTML Code
<div id="header">
<div id="left">
IMAGE HERE
</div>
<div id="right1">
Text
</div>
<div id="right2">
Text
</div>
<div class="clear">
& n b s p ; (no spaces)
</div>
</div>
|
Bill Parrott
Senior Web Programmer, University of Kansas
Co-Owner and Code Monkey, Eternal Second Designs (www.eternalsecond.com)
Personal Website (www.chimericdream.com) |
Edited by - muzishun on 31 July 2005 17:27:31 |
|
|
|
The Impact
Junior Member
Australia
398 Posts |
Posted - 01 August 2005 : 07:47:27
|
laser, your example doesn't align the bottom corners to the bottom even though it has vertical-align:bottom; set. 
muzishun, that's like what I've got now but it doesn't include the CSS to align the corners.
-gary, your second example is what I want but is there anyway to get the whole thing into a height of 80px like in the first example. The V8 Supercar Series and V8 Supercar Development Series tabs drop down to the next line for some reason making the div too high. I tried using floats but it seems to ruin the corners.
Any ideas ? |
|
|
|
Ghostnetworks
New Member
95 Posts |
Posted - 02 August 2005 : 03:37:27
|
I think this might be what you're looking for.
Make the background of the center block an image with the white letters.
This way, the corners will have no impact on it.
The other tabs can be aligned right at relative width inside the bottom row. |
 |
|
|
|
davemaxwell
Access 2000 Support Moderator
USA
3020 Posts |
|
|
MarcelG
Retired Support Moderator
Netherlands
2625 Posts |
Posted - 02 August 2005 : 14:59:59
|
quote:
Originally posted by Ghostnetworks
I think this might be what you're looking for.
Make the background of the center block an image with the white letters.
This way, the corners will have no impact on it.
The other tabs can be aligned right at relative width inside the bottom row.
I've tried that one, but it seems to fail miserably in IE... At least on my PC... |
portfolio - linkshrinker - oxle - twitter |
Edited by - MarcelG on 02 August 2005 15:01:45 |
|
|
|
Ghostnetworks
New Member
95 Posts |
Posted - 02 August 2005 : 23:26:51
|
That's strange... It seemed to work for me.
Did you try overflow:hidden on the corner div's? Somtimes that takes care of a lot of positioning and size issues.
Also, before adding any div styles, I usually remove any presets a browser may have by giving margin:0em; padding:0em; to the div block in my CSS. |
|
|
|
| |
Topic |
|
Topic Locked
