Could use some general layout guidance

Lambec · 31st July 12, 09:48 PM

Hi. I've been a lurker for a while, but now I'm learning and attempting some personal projects.

I'll try and be very clear so my questions make sense.

1. I'm looking for some general guidance on how to get this skeletal structure going. I'm not necessarily looking for complete solutions (I want to learn and retain).

2. I made a mock design in Photoshop so that you might see what I'm trying to accomplish: http://www.foolarchy.com/examp/examp.jpg

3. I'm trying to primarily stay within the realms of HTML5 & CSS2/3.

4. When looking at the supplied image, #2 is really straight forward to me in both html5 & CSS just using header tag and appropriate CSS.

5. When looking at the supplied image, #6 & #3 are just destroying me. Initially I thought I'd make a base layer background with the gray color, and then I'd layer up an new background color in the tan'ish color, but I fail each time. I can never pull off the | gray | tan | gray | look.

6. All the little "fluff" I have no clue how to approach or if it's even possible. (#4, #5, #7, #8, #9).

Any guidance from the experiences folk would be greatly appreciated.

Thanks!

meesa · 1st August 12, 05:09 AM

First off, your text is really hard to read, so please change the color for the future.

I'll answer a couple to get you started, then we can work through the rest if they aren't explained.

The gray, tan, gray look: Just make your body background grey, and your set-width body DIV tan. Then use margin:auto to center it.

For the half on/off stuff, what is going to move, and what is going to be static?

Lambec · 1st August 12, 03:48 PM

I'm slowly inching my way there. I put up a dev site to visually see the steps: http://www.foolarchy.com/dev/

Code:

<!-- html5 declaration -->
<!DOCTYPE html>

<html>

	<head>
    	<meta charset="UTF-8" />
    	<title>insert title</title>
        <script src="js/modernizr-1.5.js" type="text/javascript"></script>           
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    
	<body>
    	<header>	
        </header>
        
        <section>
        </section>
        
        <footer>
        </footer>
    </body>    

</html>

Code:

@import url(reset.css);

/* Styles for html */


/* Styles for body */
body {
	background-color: rgb(115, 115, 115);
}


/* Styles for header */
header {
	background-color: rgb(56, 43, 26);
	text-align: center;
	height: 3em;
	width: 100%;
}

I admit you kind of threw me with the:

Quote:

and your set-width body DIV tan. Then use margin:auto to center it.

Could you explain that in beginner-speak?

and if I use div tags in the html does that mean it is no longer a valid html5 doctype?

Lambec · 2nd August 12, 02:39 AM

Okay I think I'm making some slow headway here.

1. Dev work: http://www.foolarchy.com/dev/

2. I've switched my doctype from html5 to xhtml strict (I assume that once I start using div tags I'm no longer a pure html5 document?)

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" xml:lang="en">
	<head>
    	<meta charset="UTF-8" />
    	<title>insert title</title>
        <script src="js/modernizr-1.5.js" type="text/javascript"></script>           
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    
	<body>
    	<div id="header">
        header area
        </div>
        
        <div id="container">
        content area
        </div>
        
        <div id="footer">
        footer area
        </div>
    </body>    

</html>

Code:

@import url(reset.css);

/* Styles for html */


/* Styles for body */
body {
	background-color: rgb(115, 115, 115);
	margin: 0;
	padding: 0;
	text-align: center;
}

#container {
	margin: auto;
	width: 950px;
	background-color: rgb(110, 94, 68);
}


/* Styles for header */
#header {
	background-color: rgb(56, 43, 26);
	text-align: center;
	height: 3em;
	width: 100%;
}

/* Styles for footer */
#footer {
	margin: auto;
	width: 950px;
	background-color: rgb(110, 94, 68);
}

Is there a way to get the "content" area to autosense (for use of a better word) the height of the browser and auto fill that height even if there's no solid content there? Does that make sense? I'd like it to always be the max height of the browser.

meesa · 2nd August 12, 04:08 AM

Regarding the HTML5 and DIV tags -- I have no idea. I've yet to study HTML5.

For a fixed height, try this method (Study the code): http://www.css-lab.com/demos/stickfo...t-fixfoot.html

31st July 12, 09:48 PM	#1
Lambec WLC Member Join Date: Jul 2012 Posts: 3	Could use some general layout guidance Hi. I've been a lurker for a while, but now I'm learning and attempting some personal projects. I'll try and be very clear so my questions make sense. 1. I'm looking for some general guidance on how to get this skeletal structure going. I'm not necessarily looking for complete solutions (I want to learn and retain). 2. I made a mock design in Photoshop so that you might see what I'm trying to accomplish: http://www.foolarchy.com/examp/examp.jpg 3. I'm trying to primarily stay within the realms of HTML5 & CSS2/3. 4. When looking at the supplied image, #2 is really straight forward to me in both html5 & CSS just using header tag and appropriate CSS. 5. When looking at the supplied image, #6 & #3 are just destroying me. Initially I thought I'd make a base layer background with the gray color, and then I'd layer up an new background color in the tan'ish color, but I fail each time. I can never pull off the \| gray \| tan \| gray \| look. 6. All the little "fluff" I have no clue how to approach or if it's even possible. (#4, #5, #7, #8, #9). Any guidance from the experiences folk would be greatly appreciated. Thanks!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

1st August 12, 05:09 AM	#2
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Could use some general layout guidance First off, your text is really hard to read, so please change the color for the future. I'll answer a couple to get you started, then we can work through the rest if they aren't explained. The gray, tan, gray look: Just make your body background grey, and your set-width body DIV tan. Then use margin:auto to center it. For the half on/off stuff, what is going to move, and what is going to be static? __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.

2nd August 12, 04:08 AM	#5
meesa WLC Mod Join Date: Jul 2009 Location: Milky Way Galaxy Posts: 3,134	Re: Could use some general layout guidance Regarding the HTML5 and DIV tags -- I have no idea. I've yet to study HTML5. For a fixed height, try this method (Study the code): http://www.css-lab.com/demos/stickfo...t-fixfoot.html __________________ Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.