Really stuck on how to lay this out

Printable View

Mar 25, 2011, 08:56
rctneil

Really stuck on how to lay this out
Hi, I have this site mockup:

http://dl.dropbox.com/u/1509145/mockup.jpg

Can anyone post some CSS of how YOU would go about laying this out?

I just want to see what the best way would be:

I have had a few attempts and found a few problems.

- When I added the logo on the top left, I positioned it relative and moved down a bit and was left with a large blank space where it originally was.

Things like that, I would like to see how you more experienced people would go about it to be honest.

My HTML code for this bit would be:
Code HTML4Strict:

<div id="container"> <div id="header"> <img src="images/gplogo.png" alt="Logo" /> <h1>A New Site...<br />stuff stuff</h1> <ul id="nav"> <li><a href="index.php">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="content">
All help is MUCH appreciated.

Thanks
Mar 25, 2011, 09:40
rguy84

I would make everything besides the text a bg image to not worry about the logo.
Mar 25, 2011, 10:53
dresden_phoenix

that's what happens when you position something relatively. It still occupies its original space, but it's displayed in the coordinates given ( relative to it's original position).

try this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> body {background:#878787} body {background:#878787} * {padding:0; margin:0; } #container {width:927px; margin:0 auto;} #header {position:relative; overflow:hidden; background:url(images/mockup_07.jpg) no-repeat bottom left;} #nav {position:absolute; bottom:50px; right:30px; list-style:none;} #nav li { float:left; } #nav a { display:block; padding:0 .5em;} #nav li + li a { border-left:1px solid #000; } #nav a , h1 a { text-decoration: none; color:#000; font-family:Arial, Helvetica, sans-serif} h1 { background:url(images/mockup_03.jpg) no-repeat bottom left; padding-left:129px; min-height:157px; float:left; margin-left:17px} h1 a{ display:block; padding-top:50px; padding-bottom:25px;} </style> </head> <body> <div id="container"> <div id="header"> <h1><a href="#">A New Site...<br />stuff stuff </a></h1> <ul id="nav"> <li><a href="index.php">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="content"> </div></div> </body> </html>

where:
mockup_03.jpg is your logo
and mockup_7.jpg is an image of the top part of your content area (the rounded corners)
Mar 25, 2011, 11:57
rctneil

Hello,

Thanks for posting. I have not yet tried this out as I have a few other things I have to get on with first.

One thing I want to mention is that the content area with the rounded corners you see int he image will be a division with css rounded corners and a drop shadow.

Will this have any impact on your code snippet above?

EDIT: What's the </div></div> for?

Thanks.

Neil
Mar 25, 2011, 12:37
rguy84

Neil,
To do the shadow, you would simply make an image 1 by however wide the white area + the shadow is and set it to repeat-y.

The /div /div is to close the container and content divs. Dresden just didnt indent them
Mar 25, 2011, 12:51
rctneil

Sorry, yes, I have just noticed that they close those other divs. That's me being thick. Sorry

I know you can do a shadow like that, I wasn't asking HOW to do a shadow but STATING that that area will be made with a div and CSS rounded corners and a CSS shadow and wondered if by me doing it that way, would ahve any effect on the snippet of code written above?
Mar 25, 2011, 13:59
rguy84

Well, like I suggested, and Dresden too, you set the background to the image you posted and have real text positioned within that. The worst thing that you could do is not set up the positioning correctly, so it could look off. Another drawback is if thee text size increases, your layout may break or again look off. Does taht help?
Mar 25, 2011, 14:49
rctneil

Hey,

Please can you let me know what the position: relative and overflow: hidden do on the header?
Mar 25, 2011, 19:26
dresden_phoenix

overflow :hidden helps clearing floats. Position relative can do several things; however in the in my specific example , it merely sets the point of origin for any child elements that get position:absolute.

In another words: I set the header position relative, so that when I set #nav to position absolute; bottom:50px; right:30px; .. the RIGHT EDGE of #nav is placed 30px from (left of) the right of edge #header, and the BOTTOM EDGE UP 50px from the bottom edge of #header.

If you dont use position:relative on a parent element when you intend to AP child elements, they will end up being positioned from the body element...

Try my code, it's actually relatively flexible with content amount and flex size.
Mar 26, 2011, 05:29
rctneil

I understand now about the position: relative.

So position: relative; actually has two purposes then:

1. To provide an origin for absolutely positioned child elements
2. To move the element from it's original location in the flow of the document using coordinates.

Is that correct?
Mar 26, 2011, 11:37
Candygirl

@rctneil
Seems correct

Quote:

Originally Posted by dresden_phoenix

If you dont use position:relative on a parent element when you intend to AP child elements, they will end up being positioned from the body element...

That's kind of retail but they will end up being positioned from the initial containing block, not the body element:

Quote:

The containing block for a positioned box is established by the nearest positioned ancestor (or, if none exists, the initial containing block, as in our example)

and futherer the definition of the initial containing block:

Quote:

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin
Mar 26, 2011, 13:10
dresden_phoenix

Quote:

That's kind of retail but they will end up being positioned from the initial containing block, not the body element

The language in the spec can get confusing, as some one new to positioning might assume that using a page wrapper div constitutes a container block...

Candygirl is right tho, but in essence it is the width of the view port. I suppose I could have said a phantom tag prior to the HTML or BODY ( sine is good to note that BODY and HTML DON'T have 100% height by default) ....

Hey,

An update about this. Thanks for your example with this site.

I have decided I want the logo image to be an actual elemtn in the page rather than as an image background therefore I can make it and the text next to it a link back to the homepage.

I have got this code so far:

Code HTML4Strict:

	<body>
		<div id="container">
			<div id="header">
				<img id="logo" src="images/gplogo.png" alt="Logo" />
				<h1>Site Title<br />Other text - - -</h1>
				<ul id="nav">
					<li><a href="index.php">Home</a></li><!--
				 --><li><a href="about.php">About</a></li><!--
				 --><li><a href="trips.php">Trips</a></li><!--
				 --><li><a href="contact.php">Contact</a></li>
				</ul>
			</div><!--header-->
			<div id="content">

Code CSS:

/* Reset Across Browsers */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, section, header, footer, aside, nav {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
display: block;
margin: 0;
}
 
html
{
height: 100%;
overflow-y: scroll;
}
 
body
{
min-height: 100%
}
 
body
{
background: fuchsia;
background: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.25, rgb(135,135,135)),
			color-stop(1, rgb(48,48,48))
			);
background: -moz-linear-gradient(
			center top,
			rgb(135,135,135) 25%,
			rgb(48,48,48) 100%
			);
background: -o-linear-gradient(
			top,
			rgb(135,135,135) 25%,
			rgb(48,48,48) 100%
			);
font-family: arial, sans-serif;
font-size: 16px;
text-align: justify;
}
 
#container
{
width: 900px;
margin-left: auto;
margin-right: auto;
border: 0px solid yellow;
margin-top: 50px;
margin-bottom: 2em;
}
 
#header
{
border: 1px solid yellow;
position: relative;
overflow: hidden;
}
 
#header #logo
{
float: left;
border: 1px solid yellow;
position: absolute;
}
 
#header h1
{
border: 1px solid red;
float: left;
font-size: 26pt;
margin-top: 30px;
margin-left: 145px;
}
 
#nav
{
border: 1px solid red;
position: absolute;
bottom: 50px;
right: 30px;
list-style: none;
}
 
#nav li
{
float: left;
}
 
#nav li
{
border-right: 1px solid;
padding-right: 5px;
margin-right: 5px;
}
 
#nav li:last-of-type
{
border-right: 0px;
padding-right: 0px;
margin-right: 0px;
}
 
#nav a , h1 a
{
text-decoration: none;
color: #000000;
}
 
#content
{
background: #ffffff;
background: rgba(255, 255, 255, 0.9);
 
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
 
padding: 1em;
 
-webkit-box-shadow: 0px 0px 25px #333;
-moz-box-shadow: 0px 0px 25px #333;
box-shadow: 0px 0px 25px #333;
}

and here's a screenshot of it:
http://dl.dropbox.com/u/1509145/screenshot.jpg

As you can see, I have floated both the logo image and the h1 to the left. It all is just as I want it except the bottom of the log is cut off due to the overflow property of the #header div. If I remove that overflow property, it all messes up.

Any ideas?

Mar 26, 2011, 15:54
Paul O'B

Hi,

It's hard to tell from that but it looks as though you meant to float the logo but you made it absolute instead. That means it won't stretch the header and it will get cut off because the header is only as tall as the real content.

Code:

#header #logo { float: left; border: 1px solid yellow; position: absolute; }

The absolute positioning wins out in the above rule and the logo is now removed from the flow and will not stretch the header.

If that's what you wanted and you want the logo to overlap the header then remove the overflow:hidden from the header and use another clearing mechanism for the floats.

If you meant to float the log as well then that was your problem so remove the absolute positioning.

The image should be in a suitable block container to be semantically and not by itself.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> /* Reset Across Browsers */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, section, header, footer, aside, nav { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; margin: 0; } html { height: 100%; overflow-y: scroll; } body { min-height: 100% } body { background: fuchsia; background: -webkit-gradient( linear, left top, left bottom, color-stop(0.25, rgb(135,135,135)), color-stop(1, rgb(48,48,48)) ); background: -moz-linear-gradient( center top, rgb(135,135,135) 25%, rgb(48,48,48) 100% ); background: -o-linear-gradient( top, rgb(135,135,135) 25%, rgb(48,48,48) 100% ); font-family: arial, sans-serif; font-size: 16px; text-align: justify; } #container { width: 900px; margin:50px auto 2em; } #header { border: 1px solid yellow; position: relative; /*overflow: hidden;*/ width:898px; } #header:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } #header #logo { float: left; border: 1px solid yellow; margin:0; } #header h1 { border: 1px solid red; float: left; font-size: 26pt; margin:30px 0 0 145px; } #nav { border: 1px solid red; position: absolute; bottom: 50px; right: 30px; list-style: none; } #nav li { float: left; } #nav li { border-right: 1px solid; padding-right: 5px; margin-right: 5px; } #nav li:last-of-type { border-right: 0px; padding-right: 0px; margin-right: 0px; } #nav a, h1 a { text-decoration: none; color: #000000; } #content { background: #ffffff; background: rgba(255, 255, 255, 0.9); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; padding: 1em; -webkit-box-shadow: 0px 0px 25px #333; -moz-box-shadow: 0px 0px 25px #333; box-shadow: 0px 0px 25px #333; clear:both; } </style> </head> <body> <div id="container"> <div id="header"> <p id="logo" ><img src="http://www.sitepoint.com/forums/images/gplogo.png" alt="Logo" /></p> <h1>Site Title<br /> Other text - - -</h1> <ul id="nav"> <li><a href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="trips.php">Trips</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div> <div id="content"></div> </div> </body> </html>

Hey Paul,

Yes, I want the logo to overlap the content division below it slightly.

Here is my updated CSS without the overlapping bit:

Code CSS:

/* Reset Across Browsers */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, section, header, footer, aside, nav {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
display: block;
margin: 0;
}
 
html
{
height: 100%;
overflow-y: scroll;
}
 
body
{
min-height: 100%
}
 
body
{
background: fuchsia;
background: -webkit-gradient(
			linear,
			left top,
			left bottom,
			color-stop(0.25, rgb(135,135,135)),
			color-stop(1, rgb(48,48,48))
			);
background: -moz-linear-gradient(
			center top,
			rgb(135,135,135) 25%,
			rgb(48,48,48) 100%
			);
background: -o-linear-gradient(
			top,
			rgb(135,135,135) 25%,
			rgb(48,48,48) 100%
			);
font-family: arial, sans-serif;
font-size: 16px;
text-align: justify;
}
 
#container
{
width: 900px;
margin-left: auto;
margin-right: auto;
border: 0px solid yellow;
margin-top: 50px;
margin-bottom: 2em;
}
 
#header
{
border: 1px solid yellow;
position: relative;
}
 
#header:after{
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;    
}
 
#header #logo
{
float: left;
border: 1px solid yellow;
}
 
#header h1
{
border: 1px solid red;
float: left;
font-size: 26pt;
margin: 30px 0 0 145px;
}
 
#nav
{
border: 1px solid red;
position: absolute;
bottom: 20px;
right: 20px;
list-style: none;
}
 
#nav li
{
float: left;
}
 
#nav li
{
border-right: 1px solid;
padding-right: 5px;
margin-right: 5px;
}
 
#nav li:last-of-type
{
border-right: 0px;
padding-right: 0px;
margin-right: 0px;
}
 
#nav a , h1 a
{
text-decoration: none;
color: #000000;
}
 
#content
{
background: #ffffff;
background: rgba(255, 255, 255, 0.9);
 
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
 
padding: 1em;
 
-webkit-box-shadow: 0px 0px 25px #333;
-moz-box-shadow: 0px 0px 25px #333;
box-shadow: 0px 0px 25px #333;
}

I have added a div around the image with the id as logo.

Should I position the #logo div absolutely and then give the h1 a bigger left margin?

Would that work?

Mar 27, 2011, 02:07
Paul O'B

Quote:

Originally Posted by rctneil

I have added a div around the image with the id as logo.

Should I position the #logo div absolutely and then give the h1 a bigger left margin?

Would that work?

Yes that sounds ok.:)

If you want the logo to overlap the header then you probably want to set the height for the header or make sure that existing content creates the header height that you need.

The overflow:hidden should be removed and any floats are cleared with the :after rule I gave you (IE needs haslayout to clear which is why I added a width) .

Then you can place your logo absolutely and it will overlap as required. If the element below the header is position:relative also then you will need to ensure that the header has a higher z-index.