Forum Moderators: open
Anybody go a link ?
Thanks.
Do a search for div and css and you should find a few threads on that topic.
Try this also to give yourself a good idea. Use dreamweaver to create two layers. Put a bit of content in each one and see how the page looks then cut and past the second DIV above the first . The page should look the same.
Try this out in the body of a blank page.
<div id="top">
top content
</div>
<div id="bottom">
bottom content
</div>
then do the switheroo. Couple that with CSS positioning and things start to look good. So much so you can get the very first line of Body text to be a H1 keyword rich term.
Cheers
<table>
<tr>
<td>
<!-- extra space at top of left side -->
</td>
<td rowspan="2">
<!-- main section on the right side spans two rows -->
</td>
</tr>
<tr>
<td>
<!-- lower section of left side, where navigation goes -->
</td>
</tr>
</table>
And thanks ukgimp, I don't know how to do that with css, I'll give it a try.
Looks fab in IE5 & up. But apparently 'top' attribute isn't supported in NS4.x or IE3.x, which I would almost be prepared to let go of (almost), but it isn't working in Opera - the divs appear in the order they appear in the code, rather than css positioning, or worse, they sit on top of each other.
<style type="text/css">
.topnav {
position: absolute;
top: 0 px;
}
.content {
position: absolute;
top: 180 px;
}
</style>
.......
<body>
<div class="content">
H1 heading and content - appears after navigation
</div>
<div class="topnav">
logo, navigation and breadcrumb - appears above content.
</div>
</body>
I'm learning CSS on the fly, so it's entirely possible I'm missing something dead simple. Would be interested in hearing if either of you get it to work.
<style type="text/css">
.topnav {
position:absolute;
left:0px;
top:0px;
width:100%;
height:75px;
background-color: #0033FF"
}
.content {
position:absolute;
left:0px;
top:75px;
width:100%;
height:100%;
}
</style>
you can use % and pixel points.
Still got some tidying up to do, but it's working in Opera now.
Thank you.
I stuggled for days with the last one because Dreamweaver keeps putting in heights for tables that I had to keep removing it in the text editor.
I use it when I want a photo on the top of the left side, and what I did to control the placement was make a 5 pixel wide transparent gif and adjust the height as a filler to keep the links in place.
It looks like it'll be a lot easier to do it this other way.
