Mignon, what visual effect are you trying to achieve with this design? Is
the site supposed to have a header, left navigation bar, right content box,
and footer? 

If you want the 1-2-1 arrangement, just expand on Tim's suggestion, leave
them all in the flow and float the nav and content, with a clearing div to
put the footer at the bottom. Your images can be the background to the nav
bar and the text will write over it. 

Why are you using absolute positioning? What effect are you trying to
achieve with that?

drew

-----Original Message-----
From: Mignon Hunter [mailto:[EMAIL PROTECTED]]
Sent: Tuesday, December 03, 2002 10:08 AM
To: [EMAIL PROTECTED]
Subject: [wdvltalk] CSS page layout


Thanks John for your input.  I think my problem is more complicated
although I have not ruled out the possibility that I may be making it
more complicated than it needs to be ...

The Topbar and Sidebar divs both have an image and an image slice.  The
image slice is supposed to take over where the regular image quits on
pages that load very long and/or wide content. In order for it to work I
had to make the Sidebar "120% height" anything less kept leaving a gap
at the bottom of the page.  But, this still doesnt work on really long
pages, the slice will not go all the way down.  This is problem 1)

My thinking is that this 120% long Sidebar div is also keeping the
footer div from loading across the full bottom.  This is problem 2)

I bought a book and have searched for some tutorials that may cover this
with little luck.  I would be greatful is anyone could steer me to a
good book and/or tuts.

It seems this should be a common usage of css - especially if the
general flow is away from tables.

Thanks

Mignon

PS I'll include code again - also if it would help - I can post an
example on my personal website...after hours.

<html><body>

        <div id="TopBar" style="position:absolute; width:105%;
height:100px; z-index:1; left: 0px; top: 0px; background-image: 
url(images/top_slice.jpg); layer-background-image: 
url(images/top_slice.jpg); border: 0px none #000000"><img
src="images/pic2.jpg">
        </div>

        <div id="SideBar" style="position:absolute; width:100px;
height:85%; z-index:2; left: 0px; top: 100px; background-image: 
url(images/SideBack.gif); layer-background-image: 
url(images/SideBack.gif); border: 0px none #000000"><img
src="images/pic1.jpg">
        </div>

       <div id="Nav" style="position:absolute; width:95px; z-index:3;
above=SideBar; top: 115px; left: -1px">All sorts <br>of Extra Stuff<br>
gets loaded here,<br>mainly navigation.</div>   
        
       <div id="Content" style="position:absolute; width:75%;
height:75%; z-index:4; left: 110px; top: 110px">  
       Content of site gets loaded here  
         
       </div>            
       
 <div id="Footer" style="z-index:5; width:100%; height:50px; left: 0px;
background-image:  url(themes/Jims/images/bottom_slice.jpg);
layer-background-image:  url(themes/Jims/images/bottom_slice.jpg);
border: none"><img src="themes/Jims/images/bottom.jpg"></div> 
 
     </body></html>


On Sun, 2002-12-01 at 20:20, Mignon Hunter wrote:
> 
> 
> -----Original Message-----
> From: John van Rompu [mailto:[EMAIL PROTECTED]]
> Sent: Friday, November 29, 2002 8:54 AM
> To: [EMAIL PROTECTED]
> Subject: [wdvltalk] RE: page layout
> 
> 
> 
> Hi ,
> 
> forget tables. You can use frames but htey are messy and issues arise with
> search engines etc.
> 
> Use style sheets. Use style classes which can allow positioning anywhere
you
> want.
> 
> I have included some code that may help. You are using styles on your divs
> you just need to elaborate them a little.
> 
> Main Page
> 
> <html>
> <head>
> <title>Untitled Document</title>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <link rel="stylesheet" href="../../../web%20tests/apisto/footer.css"
> type="text/css">
> </head>
> 
> <body bgcolor="#FFFFFF" text="#000000">
> <div id="Footer" class="footer"> <img
> src="../../../web%20tests/apisto/leluepi2.gif" width="100" height="75">
> </div >
> 
> </body>
> </html>
> 
> 
> Style Sheet
> 
> .footer {  float: left; position: relative; visibility: visible; left:
>          0px; top: 90%;z-index: 5; border: medium #000000 solid}
> 
> 
> Thanks,
> 
> John
> 
> 
> >Subject: page layout
> >From: "Mignon Hunter" <[EMAIL PROTECTED]>
> >Date: Thu, 28 Nov 2002 08:37:43 -0600
> >X-Message-Number: 11
> 
> >Hello list,
> 
> 
> >I am trying to figure out a way to make Footer span the total bottom of
> >page, to appear under both SideBar and Content divs.  I can get the
> >image to appear but it does so at the top of the page.  I could use
> >absolute positioning but the Content div will be dynamic and therefore I
> >will not know how long the page will be.
> 
> >Any advice on this issue will be greatly appreciated.
> 
> 
> 
> 
> 
> ____ * The WDVL Discussion List from WDVL.COM * ____
> To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
>        Send Your Posts To: [EMAIL PROTECTED]
> To change subscription settings to the wdvltalk digest version:
>     http://wdvl.internet.com/WDVL/Forum/#sub
> 
> ________________  http://www.wdvl.com  _______________________
> 
> You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
> To unsubscribe send a blank email to %%email.unsub%%
> 



____ * The WDVL Discussion List from WDVL.COM * ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] 
       Send Your Posts To: [EMAIL PROTECTED]
To change subscription settings to the wdvltalk digest version:
    http://wdvl.internet.com/WDVL/Forum/#sub

________________  http://www.wdvl.com  _______________________

You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to %%email.unsub%%

____ � The WDVL Discussion List from WDVL.COM � ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED] 
       Send Your Posts To: [EMAIL PROTECTED]
To change subscription settings to the wdvltalk digest version:
    http://wdvl.internet.com/WDVL/Forum/#sub

________________  http://www.wdvl.com  _______________________

You are currently subscribed to wdvltalk as: [email protected]
To unsubscribe send a blank email to [EMAIL PROTECTED]

Reply via email to