SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with CSS layouts

    Hello,

    Ive seen alot of information about layouts online
    fixed layouts, liquid layouts, and even fixed liquid layouts and so called perfect layouts and even three columned layouts

    I dont know how to apply them. Can someone tell me when i should use a liquid layout over a fixed layout.
    and when should i use a three column layout instead of a page with multiple layouts.

    Can someone some me some real live sites with three column layouts. Ones that are a popular site.

    Ben

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Ben, and Welcome to Sitepoint

    Generally, I find that design-oriented sites are fixed width, as the designer wants total control over the layout.
    Content-based sites need to deliver more information so have a more newspaper like feel and generally will be fluid to fit the most on screen.

    There's no formula, and you should choose the layout that suits each site individually.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'm going to echo what Mark just said here (hope he doesn't mind).

    Hi Ben, and welcome to SitePoint!

    I think of HTML in structural terms, and then use CSS to apply any number of possible layouts to it, depending on what mood I'm in. A lot of people for example will put the menu inside the header, but I always keep them separate. In case you're wondering, I always start with the header, then the menu, followed by the content (which is in turn followed by any non-menu sidebars I have), and finish off with the footer.

    • Header
    • Menu(s)
    • Content
    • Sidebar(s)
    • Footer
    Once I have that setup working, I'll go to my stylesheet, zero out all the margins and padding on non-form elements/controls, and then position what I want where I want it using a combination of floats and margins (including negative margins).

    If you'd like me to whip up a couple sample stylesheets that use the same HTML (literally), just let me know and I'll show you what I mean.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed layouts are generally a lot easier to work with, although I believe it is better to go with a fluid design to accommodate every resolution a visitor is likely to have.

    I recently changed from a fixed width to fluid design to see if I could increase traffic to my website from widescreen users because it is a gaming website. It really depends on the target audience you will have. More general users will be using standard resolutions. You can use Google Analytics to gauge the resolutions visiting your site, and then go from there.

    I managed to get a fluid 3 column layout that passes xhtml 1.1

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not reallly, given that screen resolutions are not only meaningless but also have no bearing on how large the browser's viewport really is.

    And if you really got that page to serve as valid legitimate XHTML 1.1 then I can guarantee you that it won't work 80-85% of the time since Internet Explorer does not support XHTML served as an application of XML (which XHTML 1.1 is required to do).

    Changing from a fixed width to a fluid width (or better yet, constrained elastic width) layout shouldn't be that hard to do at all, if the site was developed properly anyway.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I serve my pages as text/html, so I only get a warning for MIME type when validating. I developed the site using Firefox, Opera, IE6 and IE7, and all work.

    When you reduce the width of the screen either by resolution or by dragging the side, your content should all be viewable in the browser window, which is what I was trying to get at. While fixed width design will eventually display a horizontal scroll bar when the width is reduced. But, like mark said I would go with a fixed width for complete control.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In which case you might as well be using an XHTML 1.0 Strict DOCTYPE since XHTML 1.1 must be served as an XML application. There's simply no way around it.

  8. #8
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,335
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    If you'd like me to whip up a couple sample stylesheets that use the same HTML (literally), just let me know and I'll show you what I mean.
    [b]I[/] sure would like to see that.

    Thanks, in advance Dan.
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. It may take me a couple days (really really busy right now - that and the city's coming along for the annual property inspection soon), but I'll get something set up for you.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan Schulz,

    You mentioned 'zero out all the margins and padding on non-form elements/controls'
    I understand zero out all margins and paddings but what do you mean by non-form elements/controls. Are you referring to block-level tags or inline level tags?

    And why would you want to zero out all the margins and padding on form element rightaway? is it because it is easier for you that way, meaning you have control of what you display on the screen?

    Ben

  12. #12
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Well, here's a start on Dan's example page..
    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>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <div class="inner">
          <h1>Flexible Markup</h1>
        </div>
      </div>
      <ul id="menu">
        <li><a href="#">asdf</a></li>
        <li><a href="#">asdf</a></li>
        <li><a href="#">asdf</a></li>
        <li><a href="#">asdf</a></li>
        <li><a href="#">asdf</a></li>
      </ul>
      <div id="content">
        <div class="inner">
          <h2>This CSS stuff is really good</h2>
          <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam  tortor nisl, fringilla nec, pulvinar quis, aliquam sed, justo. Aenean  cursus orci et augue. Nunc vel urna. Suspendisse potenti. Duis  volutpat, ante id ullamcorper aliquet, nibh lectus egestas magna, in  vestibulum nisi nisl eget eros. Donec eget ligula. Cras dapibus, arcu  quis egestas congue, dolor ante bibendum velit, non placerat risus nunc  a nunc. Fusce rutrum pharetra metus. Curabitur at lectus eu ipsum  consectetuer tempus. Nam dignissim lacus vitae nisl. Curabitur libero  diam, semper vitae, vehicula condimentum, fermentum ut, ipsum. Sed quis  erat eget magna pretium hendrerit. Maecenas luctus. Quisque vitae nibh  nec libero pretium mattis. Etiam ante odio, lacinia vitae, commodo  egestas, dapibus a, dolor. Nulla facilisi. Praesent orci. Pellentesque  volutpat. Sed lacus. </p>
          <p>Quisque dolor. Proin commodo elementum lorem. Vestibulum sit amet  nisl non libero accumsan dictum. Maecenas ac nibh. Pellentesque  scelerisque, nulla vitae consectetuer volutpat, ipsum urna semper  neque, eu tincidunt nisi nulla ac est. Suspendisse gravida lobortis  nibh. Suspendisse potenti. Donec tempor, sapien in cursus adipiscing,  mi elit auctor lacus, ut volutpat elit est non urna. Vestibulum quis  nunc non dui varius ultricies. Phasellus ac pede. Donec erat felis,  mattis at, tempus vitae, tristique id, justo. Nulla et orci non nulla  pretium mattis. Cras scelerisque, quam a porttitor venenatis, tellus  massa sagittis quam, quis dictum lacus pede vitae magna. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur ridiculus  mus. Nunc fringilla adipiscing lacus. Etiam placerat. Aenean in tellus  id nibh tristique lacinia. Nullam varius eros at neque. </p>
          <p>Nullam luctus, lacus in convallis ultrices, magna risus porta est,  eu accumsan metus ante quis quam. Praesent dui velit, bibendum eu,  congue at, dignissim non, pede. Proin commodo. Integer vestibulum  molestie eros. Curabitur in sapien quis elit eleifend sagittis. Mauris  ac dolor. Donec in lorem. Integer at enim. Proin vestibulum, sem vitae  posuere ornare, dui odio suscipit pede, nec dignissim quam nibh ac  turpis. Curabitur commodo. </p>
          <p>Curabitur nulla. Donec sed augue. Integer dignissim. Vivamus orci.  In hac habitasse platea dictumst. Nulla nibh metus, scelerisque ut,  iaculis ut, tempor vitae, orci. Maecenas adipiscing dapibus mauris.  Etiam et ligula. Vivamus dignissim massa vitae nisl. In luctus mauris  in nunc fringilla faucibus. Nullam ac mi. Duis sagittis felis at  ligula. Aenean nulla. Sed bibendum enim sit amet ipsum. Aenean vitae  erat et sapien viverra facilisis. </p>
          <p>Nullam sapien turpis, dapibus sit amet, consequat nec, congue eget,  libero. Nam fringilla posuere arcu. Morbi vitae erat. Phasellus in mi.  Integer dapibus. Morbi vitae lorem. Fusce molestie, dui in lacinia  eleifend, erat nisl sodales magna, suscipit auctor dui nisi quis urna.  Vivamus ullamcorper urna ac ipsum. Aliquam euismod turpis eu dui.  Integer ut sem. </p>
        </div>
      </div>
      <div id="sidebar">
        <div class="inner">
          <p>Some content for the sidebar</p>
        </div>
      </div>
      <div id="footer">
        <div class="inner">
          <p>Some content for the footer</p>
        </div>
      </div>
    </div>
    </body>
    </html>
    Stylesheet 1: centered fixed width, horizontal menu, 2 column layout.
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    h1,h2,p {margin-bottom: 1em; line-height: 1.3em}
    #wrapper {
            margin: 0 auto;
    	width: 760px;
    	background: #FBF7EE
    }
    #wrapper .inner { padding: 1em; }
    #menu {
    	list-style: none;
    	overflow: hidden;
    	background: #69C;
    	width: 100&#37;
    }
    #menu li { float: left }
    #menu li a {
            float: left;
    	line-height: 2em;
    	padding: 0 1em;
    }
    #content {
    	float: left;
    	width: 550px;
    }
    #sidebar {
            float: right;
    	width: 200px;
    }
    #footer {
            clear: both;
    	background: #F90;
    }
    Stylesheet 2: fixed width, 3 column layout
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    h1, h2, p {
    	margin-bottom: 1em;
    	line-height: 1.3em
    }
    #wrapper {
    	margin: 0 auto;
    	width: 760px;
    	background: #FBF7EE
    }
    #header { border-bottom: 2px solid #69C }
    #wrapper .inner {
    	padding: 1em;
    }
    #menu {
    	list-style: none;
    	float: left;
    	background: #69C;
    	width: 200px;
    }
    #menu li {
    	float: left;
    	width: 100%;
    }
    #menu li a {
    	float: left;
    	line-height: 2em;
    	width: 100%;
    }
    #content {
    	float: left;
    	width: 350px;
    }
    #sidebar {
    	float: right;
    	width: 200px;
    }
    #footer {
    	clear: both;
    	background: #F90;
    }
    Stylesheet 3: fluid, 2 column layout
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    h1, h2, p {
    	margin-bottom: 1em;
    	line-height: 1.3em
    }
    #wrapper {
    	background: #FBF7EE;
    }
    #header { border-bottom: 2px solid #69C }
    #wrapper .inner {
    	padding: 1em;
    }
    #menu {
    	list-style: none;
    	overflow: hidden;
    	background: #69C;
    	width: 100%
    }
    #menu li { float: left }
    #menu li a {
            float: left;
    	line-height: 2em;
    	padding: 0 1em;
    }
    #content {
            float: left;
            width: 100%;
            margin-left: -200px;
    	background:#FF6666
    }
    #content .inner {
    	padding-left: 220px;
    }
    #sidebar {
    	float: right;
    	width: 200px;
    	background:#66CC33
    }
    #footer {
    	clear: both;
    	background: #F90;
    }
    I haven't tested the above in IE6 so there's probably a few problems..
    Create your own stylesheet and add it here.
    I think.. there is a lot of different layouts you can create with the markup above.

  13. #13
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You mentioned 'zero out all the margins and padding on non-form elements/controls'
    I understand zero out all margins and paddings but what do you mean by non-form elements/controls. Are you referring to block-level tags or inline level tags?
    Code:
    * { margin: 0 ;padding: 0 }
    Sets the margin and padding to 0 on every element, because this breaks the style of some form elements most people avoid setting form elements like select, option, input, etc.. in their reset.

    See here for an example:
    http://meyerweb.com/eric/thoughts/20...eset-reloaded/

  14. #14
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Too much code there, Mark.


    As Mark said though, the universal selector (which he was also kind enough to provide an example of) has been known to break form controls (select, input, textarea, and so forth). Here's what I use instead (and this goes at the very top of the stylesheet).

    Code:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }
    Hang on, I'll whip up those examples (Mark will recognize one of them from a PM I sent him a while back).

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:


    Too much code there, Mark.
    righto, There's too much code in your reset!

  16. #16
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Mine doesn't affect form controls though - but it can affect inline elements once their displays have been set to block.

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's the HTML I'd use. I'll whip up some CSS for you to look at. Just make sure you do not touch the HTML or try to add any CSS when viewing these examples (note, these examples all use a combination of floats and margins, sometimes even negative margins - oh, and the copyright symbol is really &#169 ; but without the space between the 9 and the semicolon).

    HTML 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" lang="en">
    <head>
    	<title>Untitled Document</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta name="description" content="A brief description of the current page goes here." />
    	<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    	<link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection" />
    </head>
    <body>
    <div id="container">
    	<div id="header">
    		<img src="images/logo.png" width="240" height="80" alt="Web site logo" title="" />
    	</div>
    	<ul id="menu">
    		<li><a href="#">Item 1</a></li>
    		<li><a href="#">Item 2</a></li>
    		<li><a href="#">Item 3</a></li>
    		<li><a href="#">Item 4</a></li>
    		<li><a href="#">Item 5</a></li>
    		<li><a href="#">Item 6</a></li>
    	</ul>
    	<div id="content">
    		<div class="wrapper">
    			<h1>Web Page Title</h1>	
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
    				sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
    				Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
    				ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
    				ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
    				elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
    				hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
    				nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
    				lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
    				libero, id consequat quam lorem vitae orci.
    			</p>
    			<p>
    				Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
    				Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
    				scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
    				auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
    				nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
    				libero.
    			</p>
    			<p>
    				Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut
    				tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget,
    				lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit,
    				lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat.
    				Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a
    				imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In
    				hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna.
    				Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium
    				augue. Nam sollicitudin rutrum turpis. Quisque imperdiet.
    			</p>
    			<p>
    				Integer turpis arcu, hendrerit id, lacinia non, volutpat quis, quam. Nunc pharetra.
    				Vestibulum posuere lorem vitae odio. Donec risus mi, accumsan sed, mattis ut, gravida
    				vehicula, massa. Duis auctor dui eu tellus. Nam hendrerit pulvinar est. Aenean nunc. In
    				consectetuer. Duis rutrum sollicitudin tellus. Donec rutrum mollis eros. Aliquam eget
    				odio vel pede rutrum dictum.
    			</p>
    		</div>
    	</div>
    	<div id="sidebar">
    		<p>
    			Suspendisse potenti. In elit. Nunc nibh. Proin ac enim. Nulla tellus. Nunc ipsum mi,
    			ornare dictum, hendrerit lobortis, pellentesque sit amet, magna. Sed dui nisi, dictum
    			ac, auctor eu, tincidunt nec, nunc. Donec mattis, nisi non posuere accumsan, nulla sem
    			congue elit, sit amet eleifend velit lacus sed dui. Duis urna est, iaculis non,
    			malesuada ut, faucibus sit amet, dui. Nunc elementum, augue sed auctor imperdiet, risus
    			nibh nonummy erat, in rutrum mi felis eu augue. Phasellus eros. Phasellus scelerisque
    			pede id nisl. Sed ornare, ante ac laoreet blandit, sem lacus feugiat diam, eget
    			consectetuer lorem massa in massa. Fusce commodo lectus vitae quam.
    		</p>
    	</div>
    	<div id="advertisements">
    		<!-- there are obviously no ads in this HTML, but if there were, they would go here -->
    	</div>
    	<div id="footer">
    		<em>Copyright &#169; 2006-2007, The Monster Under the Bed. All Rights to Scare Unsuspecting Children Reserved.</em>
    		<ul>
    			<li><a href="#">Item 1</a></li>
    			<li><a href="#">Item 2</a></li>
    			<li><a href="#">Item 3</a></li>
    			<li><a href="#">Item 4</a></li>
    			<li><a href="#">Item 5</a></li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>

  18. #18
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.csszengarden.com/

    Click on all the different stylesheet links on the sides, all the pages use the same HTML.

    Dan: The copyright symbol is also &copy; ?

  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here's the first example (oh, by the way, not a hack in sight too). It's a two column layout with the menu running across the top. You'll notice the right column has two sidebars, the first being the actual sidebar, and the second being the ad panel (which is given a background color and a height to simulate its presence). Since it's getting late (and I have to get to bed), any mistakes in here are my own and I will take full responsibility for them. I'll be gone all day tomorrow (today), but I'll toss up a couple more in the evening.

    Code CSS:
    html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
    dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
    a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
    strong, sub, sup, textarea, tt, var {
    	margin: 0;
    	padding: 0;
    }
     
    body {
    	background: #FFF;
    	color: #000;
    	font: normal 85&#37;/140% tahoma, verdana, arial, helvetica, sans-serif;
    	letter-spacing: 1px;
    	margin: 0 auto;
    	max-width: 1150px;
    	min-width: 750px;
    }
     
    h1, h2, h3, h4, h5, h6 {
    	font-family: georgia, garamond, "times new roman", times, serif;
    	font-weight: bold;
    }
     
    h1 {
    	font-family: garamond, "times new roman", times, serif;
    	font-size: 1.75em;
    	line-height: 1.8em;
    }
     
    h2 {
    	font-size: 1.5em;
    	line-height: 1.55em;
    }
     
    h3 {
    	font-size: 1.05em;
    	line-height: 1.1em;
    }
     
    h4 {
    	font-size: 0.95em;
    	line-height: 1em;
    }
     
    h5 {
    	font-size: 0.85em;
    	line-height: 0.9em;
    }
     
    h6 {
    	font-size: 0.75em;
    	line-height: 0.8em;
    }
     
    img {
    	border: 0;																/* this squashes a Firefox bug */
    	display: block;
    }
     
    #container {
    	background: #EEE;
    	color: inherit;
    	margin: 0 auto;
    	overflow: hidden;
    	width: 96%;
    }
     
    #header {
    	background: #09C;
    	color: #FFF;
    	height: 80px;
    }
     
    #menu {
    	background: #CFC;
    	color: inherit;
    	height: 2em;
    	line-height: 2em;
    	list-style: none;
    }
    	#menu li {
    		display: inline;
    		white-space: nowrap;
    	}
     
    	#menu a {
    		background: #0ED;
    		color: inherit;
    		float: left;
    		height: 2em;
    		margin-right: 1px;
    		padding: 0 0.5em;
    		text-decoration: none;
    	}
     
    	#menu a:hover, #menu a:active, #menu a:focus {
    		background: #FFC;
    		color: inherit;
    	}
     
    #content {
    	background: #FFF;
    	color: inherit;
    	float: left;
    	margin-right: -14em;
    	width: 100%;
    }
    	#content .wrapper {
    		background: #FCC;
    		color: inherit;
    		margin-right: 14em;
    		padding: 0.5em 1em 0 1em;
    	}
     
    	#content p {
    		padding-bottom: 0.5em;
    	}
     
    #sidebar {
    	background: #FFC;
    	color: inherit;
    	float: left;
    	width: 14em;
    }
    	#sidebar p {
    		padding: 0.5em 1em;
    	}
     
    #advertisements {
    	background: #CCF;
    	color: inherit;
    	float: right;
    	height: 150px;
    	margin-right: -100%;
    	overflow: hidden;
    	width: 14em;
    }
     
    #footer {
    	background: #8EF;
    	clear: both;
    	color: inherit;
    	padding: 0.5em 1em;
    }
    	#footer em {
    		display: block;
    		font-style: normal;
    	}
     
    	#footer ul {
    		height: 1.5em;
    		line-height: 1.5em;
    		list-style: none;
    	}
    		#footer li {
    			display: inline;
    			white-space: nowrap;
    		}
     
    		#footer li a {
    			float: left;
    			height: 1.5em;
    			padding-right: 1em;
    			text-decoration: none;
    		}

  20. #20
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by znebojsa View Post
    http://www.csszengarden.com/

    Click on all the different stylesheet links on the sides, all the pages use the same HTML.
    Too much HTML. I'm a minimalist.

    Quote Originally Posted by znebojsa View Post
    Dan: The copyright symbol is also &copy; ?
    Yes, it can also be &copy; - I prefer using numeric based character entities though nowadays.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •