15 replies [Last post]
trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

I am trying to learn css, and move from table based design.
But whenever I try something new, I end up messing up the design. I have used ex-designz.net/template/tempdetail.asp?temp_id=282 as abase for me work.

I have added a footer and an cssplay.co.uk/boxes/snazzy.html
to make page centalized.

When ever I try to put cssplay.co.uk/menus/flyoutt.html menu where the original menu is, I end up messing up the layout. Things are not where they are supposed to be. And I do use @import statement, so really the one stylesheet should not screw up the other.

The markup validated as xhtml 1.1 transitional, same goes for css. So my markup is ok.

    Basically, how do I make a three colum layout with header and footer, all this wrapped withing an outerdiv that I use to centralize it all?
    And I need the markup to be soemthing like this for good SEO. Content as close to body as possible.
             <body>
                   <div id="container">
                      <div id="content"></div>
                   <div id="leftcol"></div>
                <div id="rightcol"></div>
              <div id="banner"></div>
           <div id="footer"></div>
        </body>
    </div>

How do I make leftcol stay to the left of content and under header, footer at the bottom and right col well, to the right of content?

This is so frustrating. With table this would be a breeze, cause the markup would look like crax, but the layout would look like I try to do it. I will be so greatfull for any and all help I can get on this matter. Any templates you know that might use similar markup or any quick fix you know to solve this, please help me.

[/][/]
ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 45 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Css and pagelayout gives me headache, is this valid code?

Take a look at this article. It will help you achieve all that you are wanting.

http://www.positioniseverything.net/articles/onetruelayout/

CSS is challenging and can be frustrating at times, but it is also very rewarding when you accomplish your goal...Don't give up. Laughing out loud

- r

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 week 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Css and pagelayout gived me headache

trond.rud wrote:

This is so frustrating. With table this would be a breeze, cause the markup would look like crax, but the layout would look like I try to do it.

But of course, that's because you know how to do things that way through experience. How easy was it to learn in the first place?

Quote:

I will be so greatfull for any and all help I can get on this matter. Any templates you know that might use similar markup or any quick fix you know to solve this, please help me.

The hardest part about learning something new is often the process of forgetting about the old. CSS is a better way, but you have to learn to think differently, and for most of us that's hard to do.

Layout with CSS is really no harder than with tables, in fact it is easier and faster, you are just unused to thinking in a new way.

That's frustrating but it's what everyone goes through when learning new methods and ways of looking at things.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

ragamuffin wrote:
Take a look at this article. It will help you achieve all that you are wanting.

http://www.positioniseverything.net/articles/onetruelayout/

CSS is challenging and can be frustrating at times, but it is also very rewarding when you accomplish your goal...Don't give up. Laughing out loud

- r

Greatt article. Read it, and finally got to the examples. There was an interactive example as well.

#block_1
	{
	float: left;
	width: 78%;
	margin-left: 11%;
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 11%;
	margin-left: -89%;
	}
#block_3
	{
	float: left;
	width: 11%;
	}
/* Start Mac IE5 filter \*/
#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#block_1, #block_2, #block_3
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#block_1:before, #block_2:before, #block_3:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/* End Mac IE5 filter */
#wrapper
	{
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
	}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
	{
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
	float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
	float/**/: none;
	}
/* easy clearing */
#wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	}
/*\*/
#wrapper
	{
	display: block;
	}
/* end easy clearing */
/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
	{
	position: relative;
	z-index: 1000;
	}

I am having a hard time understanding the css here. The values seems to be far from correct. Margin bottom 32 700 px? What is that? And as you see there are strange values all over the css? Is this css put up like a big joke for noob's to fail terrible or what is the deal here? If not and this is actually usable then I guess Css layout is doable after all.

The markup part could not be more simple to understand.

     <div id="wrapper">
       <div id="block_1">
	...
        </div>
       <div id="block_2">
	...
     </div>
    <div id="block_3">
	...
    </div>
  </div>

So anyone care to make comments on the css I posted here? The hacks that are put in this css, are they for real?

I will continue to test this, and see if I got it to work.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Css and pagelayout gives me headache, is this valid code?

Bl**dy h*ll, that's confusing.

Have a look at the Holy Grail article at www.alistapart.com. Much easier.

Verschwindende wrote:
  • CSS doesn't make pies

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

thepineapplehead wrote:
Bl**dy h*ll, that's confusing.

Have a look at the Holy Grail article at www.alistapart.com. Much easier.

Yes. It was clean and tidy. But the markup is not what I need.
If you view the source you will see that the markup is like this:
Here is alink to view the layout alistapart.com/d/holygrail/example_3.html

<body>

	<div id="header">This is the header.</div>

	<div id="container">

		<div id="center" class="column">
			<h1>This is the main content.</h1>
								</div>

		<div id="left" class="column">
			<h2>This is the left sidebar.</h2>
					</div>

		<div id="right" class="column">
			<h2>This is the right sidebar.</h2>
					</div>

	</div>

	<div id="footer-wrapper">
		<div id="footer">This is the footer.</div>
	</div>

</body>

As you see this does not have the contentdiv closest to the start body tag. The container tag is ok, but we have here even the header tag before the "content". This is in my HO not the best practice. When I try to change things, I end up messing up the layout.

Sure somone must have done a layout like this? I have read and tried out with fail and errors probably more then 30 tutorials over the past two weeks. Still I can not get the markup and layout to play to my needs. Whenever I make changes to the original markup I end up messing up the layout.

The whole point of moving to css and table less design was for me me to get a better and cleaner markup then what I achieved with tables. If I in reallity can not place the div's wherever I feel like in the markup, then what good is css for me? And this was a rhetorical question, I do know all about the advantages of css. But bottom line is if I can not make the layout the way I like, maybe css is not for me after all?

Please shine some light on this matter for me, before I am left with no hair on my head. *Pulling my hair while grunting, grrr*

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Css and pagelayout gives me headache, is this valid code?

You can position them wherever you want.

Put the header div last in the HTML, after the end container tag. Give the container div a top margin equal to the height of the header. Then, pull the header to the top with absolute positioning.

Verschwindende wrote:
  • CSS doesn't make pies

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

Thx pineapplehead. This just seems to be logic.
I will try this right away while I still have some hairs left on my head:-)

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

Hey that solved things for me.
But this being css, now Igot another problem:-)

I added an outerwrap div to get everthing centered.
For the outerwrap I put
width: 80%
margin-left:10%
margin-right: 10%

As one would think, this makes it all centered. And as the end div tag for outerwrap div comes just before the end body tag, this should center all of of it.

The new problem is that I put the width of the header to be 100%, which seems logic. So at the left side things are fine, but on the right side the header goes on all the way to the very right of the screen.

I would belive that the header being inside the outerwrap would prevent this behavior?

Below is markup and css:

<body>

	<!--  put outwrap here in fails -->
	<div id="outwrap">

	<div id="container">

		<div id="center" class="column">
			<h1>This is the main content.</h1>
					</div>

		<div id="left" class="column">
			<h2>This is the left sidebar.</h2>
					</div>

		<div id="right" class="column">
			<h2>This is the right sidebar.</h2>
					</div>

	</div>

	<div id="footer-wrapper">
		<div id="footer">This is the footer.</div>
	</div>
<div id="header">This is the header.</div>

<!-- Outwrap div   -->
</div>

</body>

/*** The Essential Code ***/

		body {
			min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
		}
		
		#outwrap{
		width: 80%;
margin-left: 10%;
margin-right: 10%;
}

		#container {
			
			padding-left: 200px;      /* LC fullwidth */
			padding-right: 190px;     /* RC fullwidth + CC padding */
			margin-top: 200px;}
		
		#container .column {
			position: relative;
			float: left;
		}
		
		#center {
			padding: 10px 20px;       /* CC padding */
			width: 100%;
		}
		
		#left {
			width: 180px;             /* LC width */
			padding: 0 10px;          /* LC padding */
			right: 240px;             /* LC fullwidth + CC padding */
			margin-left: -100%;
		}
		
		#right {
			width: 130px;             /* RC width */
			padding: 0 10px;          /* RC padding */
			margin-right: -100%;
		}
		
		#footer {
			clear: both;
		}
		
		/*** IE Fix ***/
		* html #left {
			left: 150px;              /* RC fullwidth */
		}

		/*** Equal-height Columns ***/

		#container {
			overflow: hidden;
		}

		#container .column {
			padding-bottom: 1001em;     /* X + padding-bottom */
			margin-bottom: -1000em;     /* X */
		}

		/*** Footer Fix ***/

		* html body {
			overflow: hidden;
		}
		
		* html #footer-wrapper {
			float: left;
			position: relative;
			width: 100%;
			padding-bottom: 10010px;
			margin-bottom: -10000px;
			background: #FFF;         /*** Same as body background ***/
		}

		/*** Just for Looks ***/

		body {
			margin: 0;
			padding: 0;
			background: #FFF;
		}

		#header
		{   height: 200px;
			width: 100%;
			font-size: large;
			text-align: center;
			padding: 0.3em 0;
			background: #999;
            position: absolute;
top: 0px;}
		
		#footer {
			font-size: large;
			text-align: center;
			padding: 0.3em 0;
			background: #999;
		}

		#left {
			background: #66F;
		}

		#center {
			background: #DDD;
		}

		#right {
			background: #F66;
		}

		#container .column {
			padding-top: 1em;
			text-align: justify;
		}

Any tips for me here?

Edited: I have tried all I can think of now to get the page to display things like intended, but not working. Just for fun I tried to view it in IE and here it was even worst then in FF.

When a div is nested inside another div, it should not be possible for that nested div to display anything outside the other div? Did that make sense at all:-)

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Giving in to the errors!

Ok, so now I so red-eyed I look like I have been on unlegal substances for some time. Yet the strongest I thouch is pepsi cola. All this css trail and errors is taken it's toll, and I am ready to give up my original goal for converting to css.

I can now get the holygrail to work for me in FF, if I do not thouch the markup. As you will see in the attached screenshot it displays like I intended. But it only works in FF, not even close in IE. I might be able to get this to work if someone knows what causes this odd behavior in IE.

I am not able to make the content div come before header div in the markup. That just breaks everthing. And things look even worst then the IE screenshot.

Is the markup really worth the effort?
How much of an impact can div order have on search engines?

Is it best just to leave things working like they do now, or should I put in even more hours to get it all positioned in the way I first intended, with content div closest to the outwrap div?

Also if people have hacks for IE pls gimme.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Css and pagelayout gives me headache, is this valid code?

Show us a link to the site, or the code Laughing out loud You're doing well, CSS is a difficult thing to learn.

Source order isn't THAT important for search engines.

Verschwindende wrote:
  • CSS doesn't make pies

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

Well it is standard holygrail now, except from the outer wrapper.

Markup:

<div id="outwrap">

	<div id="roundborder">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
   <div class="xboxcontent"> 

	<div id="header">This is the header.</div>

	<div id="container">

		<div id="center" class="column">
			<h1>This is the main content.</h1>
		
		
		</div>

		<div id="left" class="column">
			<h2>This is the left sidebar.</h2>
		
		</div>

		<div id="right" class="column">
			<h2>This is the right sidebar.</h2>
		
		</div>

	</div>

	<div id="footer-wrapper">
		<div id="footer">This is the footer.</div>

	</div>
	
	</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>  
	

			
<!-- Outwrap div   -->
</div>

Css

/***Almost orginal Holygrail***/
body {
			min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
		}
        /***Added to the HolyGrail***/

		#outwrap{
		width: 80%;
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 40px;
		
		}

         /*** End of Outwrap div   ***/

		#container {
			padding-left: 200px;      /* LC fullwidth */
			padding-right: 190px;     /* RC fullwidth + CC padding */
		}
		
		#container .column {
			position: relative;
			float: left;
		}
		
		#center {
			padding: 10px 20px;       /* CC padding */
			width: 100%;
		}
		
		#left {
			width: 180px;             /* LC width */
			padding: 0 10px;          /* LC padding */
			right: 240px;             /* LC fullwidth + CC padding */
			margin-left: -100%;
		}
		
		#right {
			width: 130px;             /* RC width */
			padding: 0 10px;          /* RC padding */
			margin-right: -100%;
		}
		
		#footer {
			clear: both;
		}
		
		/*** IE Fix ***/
		* html #left {
			left: 150px;              /* RC fullwidth */
		}

		/*** Equal-height Columns ***/

		#container {
			overflow: hidden;
		}

		#container .column {
			padding-bottom: 1001em;     /* X + padding-bottom */
			margin-bottom: -1000em;     /* X */
		}

		/*** Footer Fix ***/

		* html body {
			overflow: hidden;
		}
		
		* html #footer-wrapper {
			float: left;
			position: relative;
			width: 100%;
			padding-bottom: 10010px;
			margin-bottom: -10000px;
			background: #FFF;         /*** Same as body background ***/
		}

		/*** Just for Looks ***/

		body {
			margin: 0;
			padding: 0;
			background: #FFF;
		}

		#header, #footer {
			font-size: large;
			text-align: center;
			padding: 0.3em 0;
			background: #999;
		}

		#left {
			background: #66F;
		}

		#center {
			background: #DDD;
		}

		#right {
			background: #F66;
		}

		#container .column {
			padding-top: 1em;
			text-align: justify;
		}
		
		/****Round Borders Added***/

#roundborder h1, #roundborder h2, #roundborder p {margin:0 10px; letter-spacing:1px;}
#roundborder {font-size:2.5em; color:#fff;}
#roundborder {font-size:2em;color:#06a; border:0;}
#roundborder {padding-bottom:0.5em;}
#roundborder {padding-top:0.5em;}
#roundborder {background: transparent; margin:1em;}

#roundborder{ 
 width:82%;}
 
 #roundborder_content{
width:100%;
margin-top: -20px;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}

So now I run a standard holygrail 3 colum except for the outwrap and outborder. I have even left the markup order to the original in order to not mess the layout up.

Edited: I had some errors in the code part. Too hasty when Ctrl+C and Ctrl+V. It is now corrected, and is the same as I uses now.

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

Could there be any wrong markup or anything wrong with my css? Just to be sure I use xhtml1-transitional.dtd.

I have tried to switch to different DTD, but that changes nothing. Could someone try to make a page with this markup+css and see what they get? Is there any abvious error
I have made, or something that can be done to fix this?

The strange part is that when I fix one thing I end up corrupting something else.

I sam a good example here on the forum the other day, will try to find it back. It was similar to what I struggle with.

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Giving up, and will seattle for just a round corner.

This is a similar to what I try to achieve. redhorseoil.com/test/rssa/default2.html, here is the forumthread: csscreator.com/css-forum/ftopic17270.html

Ok, he uses 2 colum layout, but he has a header+footer. If people view his code they will see that he has used javascript to get the rounded corners, among others.

I will try to achieve this rounded corners without the use of javascript, so I need to implement this in a way to the 3 colum holygrail without corrupting the layout.

I will no longer try to change the markup in the original holygrail, as I just end up making things worst the whole time.
So this is the layout I will go for:alistapart.com/articles/holygrail/

I will continue my struggle to make the layout centered with rounded corners, like this: cssplay.co.uk/boxes/snazzy.html

Any and all tips will be highly appreciated.

-From here on, any bold spots on my think hat is directly correlated to css and rounded corners!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Css and pagelayout gives me headache, is this valid code?

I can see you're having an awful lot of problems with this Laughing out loud but you;re trying hard, which is the main thing. Let's start by getting the layout and columns sorted, and worry about rounded corners later.

Could you post a little image of what you want to accomplish, I'll see if there's an easier way.

Verschwindende wrote:
  • CSS doesn't make pies

trond.rud
Offline
Enthusiast
Last seen: 14 years 24 weeks ago
Joined: 2006-03-15
Posts: 64
Points: 0

Css and pagelayout gives me headache, is this valid code?

Ok, news at noon. Today I scrapped the holygrail. I has caused me nothing but grieves. And no matter how I change it, it just turn for the worst. So disregard all previews posts from me.

I found another layout I will use as a base, and is the 3 colum liquid layout from floatutorial: http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
As long as I do not thouch the markup it is all good. The tweaks done to the floatutorial is minor. I have changed colors, width, margin on the container. So the layout is now what I wanted all along. See printscreen included. The one called printscreen is a working layout with minor tweaks. This is good in both FF and IE. The last one printscreen_RC is not yet good. For the last file I have to get it centered.

Ultimatley I would like to change the markup, and have the content closer to the body tag, but it seems that I just have to learn to live without that. Cause with this layout as well, any attempt to change the order of the divs just throws everything off. It will just ruin the layout completly.

So, what to do and where to go?

Things works. That is the good news. The bad news is that I gave up changing the order of the divs.
I will continue to try to work in those snazzy rounded corners. That is the best rounded corners I have seen, and all without images or javascript.
I include a screenshot of that too. As you see the page is not centered, but goes to the left. If I can fix this alot is done.

Below are the NEW markup and Css. As you see some code are commented out, that is the markup for the snazzy corners. So the rounded corner markup and css does not impact the layout as long as it stays within the <!-- -->
And for the css, as long as the markup does not relate to the css it will not affect the layout.

<body>


		<!--  ***Rounded Corners commented out***
		<div id="roundborder"> 
					<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
				<div class="xboxcontent">
				 [End] -->

 <div id="container">
 
 				
				
				
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>

			 

</div>
	<!--  
			</div>
			<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
			</div> 
					-->

</body>

Css;

body {
background-color: #d8d8d8;}


/***This is the css for rounded corners***/
/#roundborder {/
/width:75%;/
/margin: 10px auto;}/


/***The values are for use without rounded corners**/
 #container
{
width: 75%;
margin: 10px auto;
background-color: #f1f1f1;
color: #333;
/border: 1px solid gray;/
line-height: 130%;
}


#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
background-color: #f1f1f1;}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
background-color: #f1f1f1;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }

/***Round Corners***/
#roundborder h1, #roundborder h2, #roundborder p {margin:0 10px; letter-spacing:1px;}/
/#roundborder h1 {font-size:2.5em; color:#fff;}/
/#roundborder h2 {font-size:2em;color:#06a; border:0;}/
#roundborder p {padding-bottom:0.5em;}
#roundborder h2 {padding-top:0.5em;}
#roundborder {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#d4d4d4; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#d4d4d4; border:0 solid #08c; border-width:0 1px;}