Page 1 of 1

Simple CSS Layout Rate Topic: ****- 6 Votes

#1 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 24 October 2007 - 09:45 PM

*
POPULAR

So today I am going to be giving you guys a pretty detailed example of a simple CSS layout, I am going to throw in some tips and best practices while I am at it. One thing to always keep in mind when doing a CSS layout is that Fire Fox/IE7 and IE 6 render margins and padding differently. So playing with margins and padding, taking them to extremes to see what is going on will help you troubleshoot many of your issues.

That is just one discrepancy with CSS over different browsers, through your journey of CSS layout, you will find more, and it just takes experience and patience. CSS is easy, so everyone says, but when you start wanting it to look exactly the same in all browsers…which YOU DO, it can be tricky. I suggest you first search the CSS forums for your problem because we have all run into these problems and been stumped. If you don’t find it, just post and we will be happy to inform you of what is going on…don’t spend more than an hour on troubleshooting, the answer is usually simple, you just have to have been there and done it.

Let’s get started…here is the CSS:
body{ 
/*global styles are not usually useful in a CSS layout, you want to specify your tags separatly for each div, it gives you more control and less .class span class garb everywhere, usually the only thing I style globally is the font in the body, because you only want ONE FONT for your whole site, in special circumstances you can specify otherwise*/
  background-color:#000;
  font-family:Arial, Helvetica, sans-serif;
}

/* You need something to wrap the whole thing up in, this will also control your overall width and positioning */
#wrapper{	/*find a coding standard that works best for you so that it is readable*/
  width: 900px;
  margin: 0 auto;	 /*this is how you center a div*/
  background-color:#666666;
}

/*Now we must start our layout*/
#header{
   width:900px;
   background-image:url(images/your_image_here.jpg); /*Of course this is optional but usually how I do it*/
   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/
   background-position:top;  /*Now we have our pic in the bg and can add all the text on top that we want*/
   background-color:#333333;
}

#header p{  /*We want to style the paragraph tags inside of the header*/
   color:#fff;
   font-size:14px;
   margin:0;
   padding: 82px 6px 0px 6px; /* Top Right Bottom Left (thanks Chris) 82px will push it down enough to show the whole background...it's a hack but that's how I roll*/
}

/*Let's start the menu8--this is a simple version of my vertical pretty css memu*/
/*We make menus by unordered lists*/
#menu{
	height:25px;
	font-size:11px;
	color:#fff;
	background-color:#999999;
}
#menu ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
#menu ul li{
	display:inline;
}
#menu ul li a{
	float:left;
	padding:6px 0;
	width:65px;
	text-align:center;
} /*See my Pretty CSS Menus Tutorial for a more detailed explanation*/

/*Now for our Content*/
#content{
  background-color:#CCCCCC;
  width:900px;  /* You know I am sure that some DIC Heads out there may think that specifying this width over and over is redundant...but I just like to for insurance*/
}

/*We style the p tag here again, as well as our h tags*/
#content h1{
  font-size:18px;
  font-weight:normal; /*All h tags are BOLDED by default*/
  margin: 0 6px;
  padding: 15px 0 3px 0;
}
#content p{
  color:#000;
  font-size:12px;
  margin: 0 6px; /* Top/Bottom Left/Right...we want the paragraph to flush rught up to the bottom of the h1*/ 
  padding: 0 6px 9px 6px; 
}

/* And now the fun part!*/
#information{
  margin:15px 6px; /*this will position it level w/ the h1 tag and a bit away from the edge...my preferance*/
  width:200px;
  float:right;
  background-color:#FF0000;
  border:1px solid #000;
}
#information p{
  font-size:11px;
  color:#fff;
  margin: 0;
  padding: 6px;
}

/*THE FOOTER IS THE MOST IMPORTANT PART WHEN USING ANY FLOATING DIVS*/
#footer{
  clear:both; /*This ensures that your floating information box pushes the wrapper to the bottom of the box, leaving this out would result in the information box poking out of the wrapper into the body like a tab...that’s bad...and ugly*/
  background-color:#FFFF00;
}

#footer p{
  font-size:15px;
  font-weight:bold;
  color:#000;
}



Now the HTML
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="/khprsnl/more.css" />
</head>
<body>
<!--OPEN WRAPPER-->
<div id="wrapper"> <!-- When writing your HTML always close your div tags as soon as you open them IE: <div> id="blah"></div> --then go back and work inside the div, this helps when you have a lot of divs inside each other --this is good advice for any tag or bracket-->
<!--OPEN HEADER-->
  <div id="header">
	<p>blah blah blah</p>
  </div>
<!--CLOSE HEADER-->   
  <!--Proper indention is useful for readability for others and when you come back to your code-->
<!--OPEN MENU-->  
  <div id="menu">
	<ul>
	  <li><a href="#">This</a></li> 
	  <li><a href="#">Menu</a></li>
	  <li><a href="#">Will</a></li>
	  <li><a href="#">Take</a></li>
	  <li><a href="#">You</a></li>
	  <li><a href="#">Nowhere</a></li>
	</ul>
  </div>
<!--CLOSE MENU-->
  
<!--OPEN CONTENT-->  
  <div id="content">
<!--OPEN INFORMATION BOX-->
	<div id="information">
	  <p>Special Information goes here</p>
	  <p>Search boxes</p>
	  <p>Links that have to do with this specific page</p>
	</div>
<!--CLOSE INFORMATION BOX-->
	<!--start content text-->	
	<h1>This is your h1 tag</h1>
	<p>Here is a paragraph</p>
<!--OPEN FOOTER-->
	<div id="footer">
	 <p>NEVER FORGET TO CLEAR YOUR FLOATING ELEMENTS</p>
	</div>
<!--CLOSE FOOTER-->		
  </div>
<!--CLOSE CONTENT-->	  
</div>
<!--CLOSE WRAPPER-->
</body>
</html>


you can find this layout here

This post has been edited by supersssweety: 31 October 2007 - 09:45 PM


Is This A Good Question/Topic? 9
  • +

Replies To: Simple CSS Layout

#2 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 31 October 2007 - 09:45 PM

Thank you...whoever approved this... I know its long...thanks
Was This Post Helpful? 0
  • +
  • -

#3 no2pencil  Icon User is offline

  • Head MFIC
  • member icon

Reputation: 5071
  • View blog
  • Posts: 26,456
  • Joined: 10-May 07

Posted 05 November 2007 - 11:46 AM

Thank you! I was able to use this example to wrap up a quick (in house) project I was working on & didn't have the time to trouble shoot my div tags/form/css issues.

Thanks again, saved me a few hours & head-ache.
Was This Post Helpful? 0
  • +
  • -

#4 supersssweety  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 22
  • View blog
  • Posts: 373
  • Joined: 16-March 07

Posted 10 November 2007 - 07:55 PM

no problem CSS is 'easy' in theory but in reality its a pain in the rear-end
Was This Post Helpful? 0
  • +
  • -

#5 7point8  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-October 08

Posted 04 December 2008 - 08:20 AM

Hi,
This code rocks, simple but very effective...........little tweaking and :)

I am looking for such a site for my college rich internet project but need the nav bar down the left side. How should the code be written?

Was This Post Helpful? 0
  • +
  • -

#6 ayman_mastermind  Icon User is offline

  • human.setType("geek");
  • member icon

Reputation: 126
  • View blog
  • Posts: 1,860
  • Joined: 12-December 08

Posted 16 December 2008 - 04:01 AM

thanks very much! thats what i was looking for! i searched on the net and i didnt find anything until i mad the choice to check the CSS tutorials here! thats a really great tutorial! keep up the good work.... ;) ;)
Was This Post Helpful? 2
  • +
  • -

#7 singularity  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Posted 24 September 2009 - 05:20 AM

I saved both of these respective files on my desktop one with css extension and one with html extension. Now when I open the html file I am not able to see the css effects. can anyone tell me how do I merge this css file with html file to see the results
Thanks for the help
Was This Post Helpful? 0
  • +
  • -

#8 cfakhar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 16-November 09

Posted 18 November 2009 - 06:31 AM

Hi supersssweety, thanks for your tutorial on css. It is the first chepter that I started to learn css.

Can anybody tell me a good ebook for css. Thanks in advance.
Was This Post Helpful? 0
  • +
  • -

#9 williamgeorgegardner  Icon User is offline

  • CEO of GeekTelligence
  • member icon

Reputation: 19
  • View blog
  • Posts: 584
  • Joined: 27-December 09

Posted 04 March 2010 - 03:21 PM

Thanks for this I have used it on my website as it is simple but professional.
URL: www.williamgardner.co.uk
Was This Post Helpful? 0
  • +
  • -

#10 JaxEffect  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 10-July 10

Posted 11 July 2010 - 12:10 PM

View Postsingularity, on 24 September 2009 - 04:20 AM, said:

I saved both of these respective files on my desktop one with css extension and one with html extension. Now when I open the html file I am not able to see the css effects. can anyone tell me how do I merge this css file with html file to see the results
Thanks for the help


Make sure they are in the same directory, or else they won't be able to find each other (so put them in the same folder).
Was This Post Helpful? 0
  • +
  • -

#11 julianht  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 18-December 10

Posted 19 December 2010 - 12:42 AM

thanks.. very useful for beginner like me.. I save this tutorial..

This post has been edited by julianht: 19 December 2010 - 12:43 AM

Was This Post Helpful? 0
  • +
  • -

#12 JaneRob  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-September 08

Posted 11 April 2011 - 05:07 PM

Thanks for this,

I volunteer at DP for the Project Gutenberg, and have has some major frustrations with CSS. I have been trucking along
on my own, or throw in some questions on the forum, but no-one is really an CSS expert at DP. I have also been touring the internet, have found some useful stuff on html, but have also found some conflicting info.

Basically, l have to put almost everything into CSS coding before the e-book gets created (we create out of copywrite e-books.)

I have used your demo for my menu links, works perfectly.

I have just one question, and l do not want to spend a lot of time looking for it. I is probably a simple one for you, and l bet it is staring at me in the face, only there are multi. ways of doing this, which have worked, but l need a way that is acceptable for PG.

How does one write up the CSS for changing font size in a single line? ie. in a title of a book which looks like this:

<hr style="width: 65%;" />
<h1><a name="SIR_MARTIN_MAR-ALL" id="SIR_MARTIN_MAR-ALL"></a>SIR MARTIN MAR-ALL;</h1>

<p class="center"><span class="smcap"><b>OR, THE</b></span></p>

<h3>FEIGNED INNOCENCE.</h3>

<p class="center"><span class="smcap"><b>A</b></span></p>

<p class="center"><b>COMEDY.</b></p>



Without constantly using headers, how would l change the font size for the last line (<b>COMEDY</b>) using CSS?
If l have this set out properly, l would not have to overdo the headers, which link all over the place in e-pub. These books get converted to e-pub and other readers.

l need to put the line in a class, don't ask me why, that is how they want it done at PG. If this is not the done thing, then span or div is fine.

Thanks

Jane
Was This Post Helpful? 0
  • +
  • -

#13 billj4u  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 59
  • Joined: 15-April 11

Posted 19 April 2011 - 04:19 PM

Hey Thanks

Very Very Useful..and a great start for us beginners...

Much Appreciated..Bud..
Was This Post Helpful? 0
  • +
  • -

#14 LivingDeadGirlUK  Icon User is offline

  • New D.I.C Head

Reputation: 13
  • View blog
  • Posts: 45
  • Joined: 05-August 11

Posted 28 February 2012 - 01:16 PM

Hey just wanted to say think you for this tutorial, it's really helped with my first attempts at styling a web page.
Was This Post Helpful? 0
  • +
  • -

#15 OhScee  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 12-May 12

Posted 12 May 2012 - 10:47 AM

Wow, great explanation!
Thank you so much~
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1