Jump to content


Photo

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


  • Please log in to reply
2 replies to this topic

#1 DaveLinger

DaveLinger
  • Members
  • PipPipPip
  • Advanced Member
  • 268 posts
  • LocationWV, USA

Posted 16 October 2006 - 07:49 PM

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...
******************************
<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>
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;

}

Example of this as it is...

http://www.davessoni...om/GST/test.htm

As you can see, it's totally screwed up. Gah!
http://www.DaveLinger.com
dave at linger dot com

#2 EvanAgee

EvanAgee
  • Members
  • PipPipPip
  • Advanced Member
  • 62 posts
  • LocationIndiana

Posted 25 September 2007 - 02:43 AM

Your example link is no longer available, did you get this figured out?

#3 bronzemonkey

bronzemonkey
  • Members
  • PipPipPip
  • Advanced Member
  • 433 posts

Posted 25 September 2007 - 12:19 PM

Just a quick look at the code you posted.

You're using spans everywhere (and inappropriately) and yet your css fails to turn them into block elements. top_center is also unnecessary.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users