Jump to content

Wow, I didn't realize I was this much of a CSS newb - code looks fine...


DaveLinger

Recommended Posts

I'll explain to you what I'm trying to design first, then show you my code ;D

Basically it's a web layout. I have one div containing everything, #outer, that has a 10px white border around it. This div is centered using "auto" margins, and is exactly 730px wide, "auto" height.

Inside of #outer, I have #top and #middle, for 2 rows of stuff.

Inside of #top, I have #top_left, #top_center, and #top_right.

#top_left needs to be all the way in the top left corner, to display a logo. It needs to be exactly 125x125.
#top_right is in the same boat, but on the right. 125x125.
#top_center is the space between top_left and top_right which contains the page title banner.

Inside of #middle, I have #navigation and #window.

#navigation must be on the left (matching top_left), exactly 125px wide and as tall as #window.
#window takes up what's left of the horizontal room after #navigation and all of the vertical room it needs, as #window contains the dynamic page's data.

INSIDE OF #WINDOW, I have #main and #bottom.

#main is the content of the page
#bottom is the footer, must be at the bottom of #window, below the page content.

******************************
RECAP
******************************

#outer
    #top
          #top_left
          #top_center
          #top_right
    #middle
          #navigation
          #window
              #main
              #bottom

******************************
AND MY CODE...
******************************
[code]
<div id="outer">

<div id="top">
<span id="top_left">
<p>Meatball Logo</p>
</span>

<span id="top_center">
<p>Software Reuse Analysis Environment - Reuse Logo</p>
</span>
<span id="top_right">
<p>Reuse Logo</p>
</span>
</div>

<div id="middle">

<span id="navigation">
<p>Navigatey stuff goes here</p>
</span>

<span id="window">
<div id="main">
<p>main window contents</p>
</div>
<div id="bottom">

<p>footer contents</p>
</div>
</span>
</div>
</div>
[/code]
[code]
body{

background-color:#ccc;

text-align:center;

}

#outer{

margin-left:auto;

margin-right:auto;

border:10px solid #fff;

width:730px;

height:auto;

}

#top{

border:2px solid #006699;

border-bottom:0px;

height:125px;

}

#top_left{

background-color:#006699;

width:125px;

height:100%;

float:left;

}

#top_center{

height:100%;

width:auto;

float:left;

}

#top_right{

float:right;

width:125px;

height:100%;

}

#middle{

width:100%;

border:2px solid #006699;

}

#navigation{

float:left;

width:125px;

border-right:2px solid #006699;

}

#window{

float:left;

background-color:#fff;

}

#main{

vertical-align:top;

width:100%;

}

#bottom{

text-align:center;

vertical-align:bottom;

width:100%;

height:75px;

border-top:2px solid #006699;

}
[/code]

Example of this as it is...

http://www.davessonicsite.com/GST/test.htm

As you can see, it's totally screwed up. Gah!
Link to comment
Share on other sites

  • 11 months later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.