Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
Photo
- - - - -

Pure Css Design (in Progress) suggestions/comments


13 replies to this topic

#1 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 11 November 2006 - 10:55 AM

Well I Thought I kill more time and junk and so I thought Why not try a pure css website :blink: I have the bare bones of the basic design 3 column with a header and footer. To make my life easier I used afew online tools to set most of it. The rest was just editing it to line up.


The few problems that I have run through so far is that my horizontal nav menu is verticle, havn't found why it is like that. Try changing numbers here and there nd nothing yet.

Next is my right column for some reason the div tag I am using for regular text is under the nav menu and I am using the same set up for left one and it doing what I want it to.

Although I maybe correct about this but want to double check. Do I need to put in a float for my banner to be center?

Then of course my worse problem or it's the fact I havn't slept yet (second one) drop menu's are kicking my butt. I copy and paste what I need but when it comes down to it I think I am missing something. Although it is not in the coding right now (future update) what do I need to add to the current code for the drop down to be successful once I had the javascript to it?

Of course My favorite Problem making sure it is fluid for IE, I know it's the positioning that getting me, but I figure that out once the FF version is done.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ansitional.dtd" ><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" ><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta name="generator" content="www.csscreator.com" /><link rel="stylesheet" href="main.css" type="text/css" /></head><body><div id="pagewidth" ><div class="rbroundbox">	<div class="rbtop"><div></div></div>	<div id="header" >								<div class="top">			<ul>			<li>			<a href-"">Home</a>			<a href-"">About</a>			<a href-"">Forum</a>  			</li>			</ul> 			</div>	</div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <BR />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <BR />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>			<div id="rightcol" > 						<div class="right">			<ul>			<li>			<a href="">Home</a>			<a href="">About</a>			<a href="">Forum</a>  			</li>			</ul> 			</div>			<div id="rightcol" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. 			</div>			</div>		</div> 			<div id="leftcol" >			<div class="left">			<ul>			<li>			<a href="">Home</a>			<a href="">About</a>			<a href="">Forum</a>  			</li>			</ul> 			</div>			<div id="leftcol" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. 			</div></div><div id="footer_wrapper">	<div id="footer" > Saint-Michael  	</div>	</div>	</div>	<!-- /rbcontent -->	<div class="rbbot"><div></div></div></div><!-- /rbroundbox --></body></html>


CSS


/* generated by csscreator.com */ html, body{  margin:0;  padding:0;  text-align:center;}  #pagewidth{  width:1000px;  text-align:left;  margin-left:auto;  margin-right:auto; }  #header{ background: url(logo.jpg) no-repeat;  position:relative;  height:145px;  background-color:#E0E9E9;  width:100%; border-bottom:solid 1px; } <!-- Top Nav -->/* LUL1.0 :: Generated CSS [Created: Sat Nov 11 2006 01:57:07 GMT-0500 (Eastern Standard Time)] :: http://www.listulike.com/ */.top,.top li,.top ul{margin:0;padding:0;list-style-type:none;}.top{position:relative;left:-498px;top:0;z-index:20000;width:7.2em;cursor:default !important;border:none;text-align:left;}.top{float:none;width:100%;}@media screen,projection{.top{float:left;}}@media screen,projection{.top:not(:nth-child(n)){float:none;}}.top{margin-top:102px;}.top>li:first-child{margin-left:459px;}@media Screen,Projection{.top>li:first-child{margin-left:0;margin-right:0;}}@media screen,projection{.top:not(:nth-child(n))>li:first-child{margin-left:459px;}}.top li{left:459px;}@media screen,projection{.top li{position:relative;}}ul[class^="top"] li{left:0;position:static;}@media Screen,Projection{ul[class^="top"] li{left:459px;position:relative;}}@media screen,projection{.top:not(:nth-child(n)) li{position:static;}}.top li{display:block;width:auto;float:left;}.top li a{position:static;display:block;float:left;white-space:nowrap;}@media screen,projection{.top l\i a{position:relative;float:none;}}ul[class^="top"] li a{position:relative;float:none;}@media screen,projection{* html .top li a{position:relative;float:none;}}@media screen,projection{.top li a:not(:nth-child(n)){position:static;float:left;}}.top li a{margin-left:-1px;}@media Screen,Projection{.top li{margin-left:-1px !important;}}@media Screen,Projection{.top li a{margin-left:0;}}@media screen,projection{.top:not(:nth-child(n)) li:first-child{margin-left:459px !important;}}@media screen,projection{.top:not(:nth-child(n)) li:first-child a{margin-left:-1px;}}.top a,.top a:link{background-image:none;background-color:rgb(138, 184, 193);cursor:pointer !important;z-index:1000;text-align:left;border-style:solid;border-color:rgb(109, 151, 159);padding-left:9px;padding-right:9px;padding-top:5px !important;padding-bottom:5px !important;text-decoration:none;color:#000000;border-width:1px;font-style:normal;font-family:tahoma,sans-serif;font-weight:bold !important;}.top a{font-size:75%;}.top li a,.top li a:link,.top li a:visited{letter-spacing:1px !important;}.top li a:visited{background-image:none;background-color:rgb(98, 135, 143);border-width:1px;color:#FFFFFF;font-style:normal;border-style:solid;border-color:rgb(138, 184, 193);}.top li a:hover,.top li a:focus,.top li a.nohref:hover,.top li a.nohref:focus{font-style:normal;background-image:none;background-color:rgb(224, 233, 233);text-decoration:none;color:#b05010;border-color:#ead4a4 #ead4a4 #fae4b4 #fae4b4;border-style:solid;border-width:1px; border-bottom: 10px solid blue;}* html .top li a:active{font-style:normal;background-image:none;background-color:rgb(224, 233, 233);text-decoration:none;color:#b05010;border-color:#ead4a4 #ead4a4 #fae4b4 #fae4b4;border-style:solid;border-width:1px;}@media screen,projection{* html .top li{display:inline;}}@media screen,projection{* html .top li{display/**/:block;float/**/:left;}}@media screen,projection{* html .top li{clear:none;}}#leftcol{ width:160px;  float:left;  position:relative;  background-color:#E0E9E9;;  } <!-- Left Nav -->/* LUL1.0 :: Generated CSS [Created: Sat Nov 11 2006 02:34:16 GMT-0500 (Eastern Standard Time)] :: http://www.listulike.com/ */.left,.left li,.left ul{margin:0;padding:0;list-style-type:none;}.left{position:relative;left:0;top:0;z-index:20000;width:200px;cursor:default !important;border:none;text-align:left;}.left{margin-left:-40px;margin-top:-45px;}.left li{display:block;width:150px;position:static;}@media Screen,Projection{.left/**/[class="left"] li{position:relative;}}.left li a{position:relative;display:block;}.left a{margin-top:-1px;}.left a,.left a:link{background-image:none;background-color:rgb(138, 184, 193);cursor:pointer !important;z-index:1000;text-align:left;border-style:solid;border-color:rgb(109, 151, 159);padding-left:9px;padding-right:9px;padding-top:5px !important;padding-bottom:5px !important;text-decoration:none;color:#000000;border-width:1px;font-style:normal;font-family:tahoma,sans-serif;font-weight:bold !important;}.left a{font-size:75%;}.left li a,.left li a:link,.left li a:visited{letter-spacing:1px !important;}.left li a:visited{background-image:none;background-color:rgb(98, 135, 143);border-width:1px;color:#FFFFFF;font-style:normal;border-style:solid;border-color:rgb(138, 184, 193);}.left li a:hover,.left li a:focus,.left li a.nohref:hover,.left li a.nohref:focus{font-style:normal;background-image:none;background-color:rgb(224, 233, 233);text-decoration:none;color:#b05010;border-color:#ead4a4 #ead4a4 #fae4b4 #fae4b4;border-style:solid;border-width:1px; border-left: 10px solid blue; border-bottom: 2px solid blue;}* html .left li a:active{font-style:normal;background-image:none;background-color:rgb(224, 233, 233);text-decoration:none;color:#b05010;border-color:#ead4a4 #ead4a4 #fae4b4 #fae4b4;border-style:solid;border-width:1px;}@media screen,projection{* html .left li{display:inline;}}@media screen,projection{* html .left li{display/**/:block;float/**/:left;}}     #twocols{ width:83%;  float:right;  position:relative;   } #rightcol{ width:180px;  float:right;  position:relative;  background-color:#E0E9E9; } <!-- Right Nav Menu -->/* LUL1.0 :: Generated CSS [Created: Sat Nov 11 2006 02:29:08 GMT-0500 (Eastern Standard Time)] :: http://www.listulike.com/ */.right,.right li,.right ul{margin:0;padding:0;list-style-type:none;}.right{position:absolute;right:0;top:0;z-index:20000;width:200px;cursor:default !important;border:none;text-align:left;}.right{margin-right:-10px;margin-top:-45px;}.right li{display:block;width:150px;position:static;}@media Screen,Projection{.right/**/[class="right"] li{position:relative;}}.right li a{position:relative;display:block;}.right a{margin-top:-1px;}.right a,.right a:link{background-image:none;background-color:rgb(138, 184, 193);cursor:pointer !important;z-index:1000;text-align:left;border-style:solid;border-color:rgb(109, 151, 159);padding-left:9px;padding-right:9px;padding-top:5px !important;padding-bottom:5px !important;text-decoration:none;color:#000000;border-width:1px;font-style:normal;font-family:tahoma,sans-serif;font-weight:bold !important;}.right a{font-size:75%;}.right li a,.right li a:link,.right li a:visited{letter-spacing:1px !important;}.right li a:visited{background-image:none;background-color:rgb(98, 135, 143);border-width:1px;color:#FFFFFF;font-style:normal;border-style:solid;border-color:rgb(138, 184, 193);}.right li a:hover,.right li a:focus,.right li a.nohref:hover,.right li a.nohref:focus{font-style:normal;background-image:none;background-color:rgb(224, 233, 233);text-decoration:none;color:#b05010;border-color:#ead4a4 #ead4a4 #fae4b4 #fae4b4;border-style:solid;border-width:1px; border-right: 10px solid blue; border-bottom: 2px solid blue;}* html .right li a:active{font-style:normal;background-image:none;background-color:rgb(224, 233, 233);text-decoration:none;color:#b05010;border-color:#ead4a4 #ead4a4 #fae4b4 #fae4b4;border-style:solid;border-width:1px;}@media screen,projection{* html .right li{display:inline;}}@media screen,projection{* html .right li{display/**/:block;float/**/:right;}}#maincol{background-color: #E0E9E9;   float: left;  display:inline;  position: relative;  width:77%;  } /* footer */#footer_wrapper {	margin:0 auto;	padding:0;	width:765px;	border-top:3px double rgb(138, 184, 193);	font-size:80%;	text-align:center;	clear:both;}#footer {	padding-right:5px;	margin:0;	line-height:190%;	text-align:right;	clear:both;	vertical-align:middle;}  /* *** Float containers fix: http://www.csscreato...tainedfloat.php *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 7px; }.rbroundbox { width: 100%; margin: 2em auto; }

So any suggestions on what to clean up or to fix the current problems I have at this time.

Edited by Saint_Michael, 20 January 2009 - 05:32 AM.

  • 0

#2 rvalkass

rvalkass

    apt-get moo

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 3,107 posts
  • Gender:Male
  • Location:Devon, England
  • Interests:At the moment, Physics mainly!
  • myCENT:-38.03
  • Spam Patrol

Posted 12 November 2006 - 09:01 AM

You have made the menus using lists and list items. These naturally display as block elements (they have a line break between each element). This makes the list appear vertical. If you set the CSS to display: inline; for the list items then you should get your menu going horizontally across the page. The problem here is that if the browser window is too narrow then your menu goes on to two lines, and wrecks the layout.

I can only guess that the reason the text is under the menu on the right is becuase you have removed the menu from the normal folw of the document and applied some odd absolute positioning to it. I tried looking through the code but I couldn't see where it was.

If you want to center the banner then you don't need to make it float, there are various ways to center a banner. The best (in my opinion) is to create a DIV the width of the banner, and put the banner in it. Then set the left and right margins of the DIV to auto, and it will center itself no matter what the width of the browser.

Copy and paste code is a bad way to build any website. Yes, use it to look at for ideas, snippets and little bits, but never copy the whole lot and bung it in a website. You are guaranteed that it will not work very well, as every website is set up differently. The most likely reason that it wont work with the menu is becuase the CSS for the menus is ridiculous. Find a tutorial for a drop down menu and follow that. Learn the code for it rather than copy and paste, then when something does go wrong you have a chance of fixing it, or at least guessing where the problem is.

Your CSS was, by the looks of it, generated by a website. This has made it nigh on impossible to actually read it and make sense of it. It is also not standards compliant and creates wildly different effects between standards browsers and IE. This is what I see:
Opera: Posted Image IE: Posted Image
Even the colours are wrong, which signifies there is something fundamentally wrong with the code, and certain bits are being understood by only select browsers. Perfect in some situations, but for colours?
  • 0

#3 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 12 November 2006 - 07:40 PM

Thanks for the help rval. This time i drop the junk nav and went with a more clean online tool. So here is the current updates to the code as you can see it is a bit cleaner this time YEAH for me :blink:

CURRENT HTML ERRORS

1. Error Line 26 column 37: required attribute "alt" not specified.

<div id="logo"><img src="logo.jpg" /> </div>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.


2. Error Line 47 column 12: ID "rightcol" already defined.

<div id="rightcol" >

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


3. Info Line 37 column 12: ID "rightcol" first defined here.

<div id="rightcol" >

4. Error Line 61 column 12: ID "leftcol" already defined.

<div id="leftcol" >

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


5. Info Line 51 column 12: ID "leftcol" first defined here.

<div id="leftcol" >

6. Error Line 70 column 6: end tag for "div" omitted, but OMITTAG NO was specified.

</body>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".


7. Info Line 9 column 0: start tag was here.

<div id="pagewidth" >



CURRENT CSS ERRORS

* Line: 46 Context : Top Nav

Parse Error - --> #miniflex { width: 100%; float: left; font-size: small; margin: 0; padding: 0 1px 0 1px; border-bottom: 1px solid #333; }
* Line: 81 Context : Left Nav

Parse Error - --> .left {width: 130px;}
* Line: 113 Context : Right Nav Menu

Parse Error - --> .right {width: 130px;}
* Line: 168 Context : .clearfix

Invalid number : display inline-block is not a display value : inline-block

Warnings
URI : file://localhost/webdeveloper__1163360705796.css

* Line : 19 (Level : 1) You have no color with your background-color : .container
* Line : 25 (Level : 1) You have no color with your background-color : #header
* Line : 63 (Level : 1) You have no background-color with your color : #miniflex a:visited
* Line : 63 (Level : 1) You have no background-color with your color : #miniflex a:visited
* Line : 69 (Level : 1) You have no background-color with your color : #miniflex a:hover
* Line : 69 (Level : 1) You have no background-color with your color : #miniflex a:hover
* Line : 69 (Level : 1) You have no background-color with your color : #miniflex a:hover
* Line : 76 (Level : 1) You have no color with your background-color : #leftcol
* Line : 84 (Level : 1) Same colors for background-color and border-left-color : .buttons a
* Line : 86 (Level : 2) Redefinition of padding-left : .buttons a
* Line : 97 (Level : 1) You have no background-color with your color : .buttons a:hover
* Line : 109 (Level : 1) You have no color with your background-color : #rightcol
* Line : 116 (Level : 1) Same colors for background-color and border-right-color : .buttonsa a
* Line : 118 (Level : 2) Redefinition of padding-left : .buttonsa a
* Line : 129 (Level : 1) You have no background-color with your color : .buttonsa a:hover
* Line : 131 (Level : 1) You have no color with your background-color : #maincol



HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...onal.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>CssCreator--&gt;XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /><script src="hover.js" type="text/javascript"></script> </head><body><div id="pagewidth" ><div class="rbroundbox">	<div class="rbtop"></div>	<div id="header" ><div class="container"><ul id="miniflex">	<li><a href="#" class="active">Welcome</a></li>	<li><a href="#" >Home</a></li>	<li><a href="#">About</a></li>	<li><a href="#">forum</a></li>	<li><a href="#">contact</a></li>	<li><a href="#">sitemap</a></li></ul></div>	<div id="logo"><img src="logo.jpg" />	  </div>	</div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>			<div id="rightcol" > <div class="right"><div class="buttonsa"><a href="#">Home</a><a href="#">About</a><a href="#">Forum</a><a href="#">Contact</a></div></div>			<div id="rightcol" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>			</div>		</div> 			<div id="leftcol" ><div class="left"><div class="buttons"><a href="#">Home</a><a href="#">About</a><a href="#">Forum</a><a href="#">Contact</a></div></div>			<div id="leftcol" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div></div><div id="footer_wrapper">	<div id="footer" > Saint-Michael	</div>	</div>	</div>	<!-- /rbcontent -->	<div class="rbbot"></div></div><!-- /rbroundbox --></body></html>


css


html, body{  margin:0;  padding:0;  text-align:center;}  #pagewidth{  width:1000px;  text-align:left;  margin-left:auto;  margin-right:auto; } .container {	padding: 1px;	margin: 1px 0 20px 0;	background: #E0E9E9;	} #header{ position:relative;  height:170px;  background-color:#E0E9E9;  width:100%; border-bottom:solid 1px; } #logo{position:relative;margin-left:auto; margin-right:auto;width:620px;height:120px;}<!-- Top Nav -->#miniflex {	width: 100%;	float: left;	font-size: small; /* could be specified at a higher level */	margin: 0;	padding: 0 1px 0 1px;	border-bottom: 1px solid #333;	}#miniflex li {	float: left;	margin: 0; 	padding: 0;	display: inline;	list-style: none;	}	#miniflex a:link, #miniflex a:visited {	float: left;	font-size: 85%;	line-height: 10px;	font-weight: bold;	margin: 0 10px 0 10px;	text-decoration: none;	color: #999;	}#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {	border-bottom: 4px solid #333;	padding-bottom: 2px;	color: #333;	}#leftcol{ width:170px;  float:left;  position:relative;  background-color:#E0E9E9;;  } <!-- Left Nav -->.left {width: 130px;}.buttons a {color: #FFFFFF;background-color: #8ab8c2;padding: 2px;padding-left: 3px;display: block;border-left: 10px solid #8ab8c2;font: 12px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: left;margin-top: 1px;}.buttons a:hover {border-left: 10px solid #E0E9E9;text-decoration: none;color: #FFFFFF;}#twocols{ width:81%;  float:right;  position:relative;   } #rightcol{ width:175px;  float:right;  position:relative;  background-color:#E0E9E9; } <!-- Right Nav Menu -->.right {width: 130px;}.buttonsa a {color: #FFFFFF;background-color: #8ab8c2;padding: 2px;padding-left: 3px;display: block;border-right: 10px solid #8ab8c2;font: 12px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: right;margin-top: 1px;}.buttonsa a:hover {border-right: 10px solid #E0E9E9;text-decoration: none;color: #FFFFFF;}#maincol{background-color: #E0E9E9;   float: left;  display:inline;  position: relative;  width:77%;  } /* footer */#footer_wrapper {	margin:0 auto;	padding:0;	width:765px;	border-top:3px double rgb(138, 184, 193);	font-size:80%;	text-align:center;	clear:both;}#footer {	padding-right:5px;	margin:0;	line-height:190%;	text-align:right;	clear:both;	vertical-align:middle;}  /* *** Float containers fix: http://www.csscreato...tainedfloat.php *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 7px; }.rbroundbox { width: 100%; margin: 2em auto; }

I know by the time I finish it my header logo will be a background due to the fact the background will cover most of it up. Also the fact any code I put in the header will push the image down as well.

Edited by Saint_Michael, 20 January 2009 - 05:30 AM.

  • 0

#4 Dooga

Dooga

    Coolio

  • Kontributors
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,346 posts
  • Gender:Male
  • Location:Canada
  • Interests:Eating SPAM
  • myCENT:66.95

Posted 12 November 2006 - 07:56 PM

Well I didn't check your code, but I highly recommend a web 2.0 design. This means simplicity, and reflections and beta tags (lol I'm kidding). But about the web 2.0 design... you should try to make one, since they turn out to be very beautiful!

check http://www.oswd.org to find some excellent examples.
  • 0

#5 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 12 November 2006 - 08:00 PM

Oh I know about them dooga knew about them for a good 2 years :blink:. I am taking very small snippets of code from templates and using specific online tools that don't produce any junk code.

btw a live version of what it looks like

NO LONGER VALID LINK

Funny Though IE version seems to look better go figure.

Edited by Saint_Michael, 20 January 2009 - 05:19 AM.

  • 0

#6 electriic ink

electriic ink

    Trap Grand Marshal Member

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPip
  • 1,262 posts
  • Gender:Male
  • Location:Heaven
  • Interests:Promotion: Aug 4 2005 8.24pm BST
  • myCENT:74.43

Posted 12 November 2006 - 08:13 PM

Let's see

1. Error Line 26 column 37: required attribute "alt" not specified.

<div id="logo"><img src="logo.jpg" /> </div>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.


For every image you put on a webpage, you must provide an alternative piece of text for the browser to display if the image becomes inaccessible for any reason. For instance for your logo you might have "Logo for my site..." as alternative text. This makes your new code:

<div id="logo"><img src="logo.jpg" alt="Logo for my site..." /> </div>

2. Error Line 47 column 12: ID "rightcol" already defined.

<div id="rightcol" >

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


3. Info Line 37 column 12: ID "rightcol" first defined here.

<div id="rightcol" >


You can't give more than one tag the same ID. IDs are unique wherever you are. You need to change one to "rightcol2" or something else. It looks are though you are using them for css which is fine, although I am sure it's preferable to use the class attribute instead. Anyway, once you've changed one of the attributes' values, you need to change your css too:

FIND:

#rightcol{display:none;}

REPLACE:

#rightcol,
		 #rightcol2 {display:none;}

4. Error Line 61 column 12: ID "leftcol" already defined.

<div id="leftcol" >

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).


5. Info Line 51 column 12: ID "leftcol" first defined here.

<div id="leftcol" >


Same applies as before.

6. Error Line 70 column 6: end tag for "div" omitted, but OMITTAG NO was specified.

</body>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

7. Info Line 9 column 0: start tag was here.

<div id="pagewidth" >


Somewhere in your code you opened a <div> tag but didn't close it (ie </div>). I counted one too many open <div> tags by the end of the page. I can't say what closes where, it's up to you. However, the validator suggests it was ID="pagewidth". Close that wherever necessary or remove it altogether.

[hr=shade]Screenshots for Fx2.0[/hr]

Posted Image
Posted Image
  • 0

#7 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 29 November 2006 - 11:38 PM

All right it's update time, although it is small changes in my header it's still a in improvement. Although I come across couple of problems 1 of them is not visible. That problem is that when I try to put a drop down menu in for some reason my main column cuts it off any idea's without the need of me showing the coding?

Now for the coding

html, body{  margin:0;  padding:0;  text-align:center;}  #pagewidth{  width:1000px;  text-align:left;  margin-left:auto;  margin-right:auto; border:solid 0px;} .container {position:relative; top: -8px;	padding: 0px;	margin: 1px 0 10px 0;	}	.container1 {position:relative; top: 0px;	padding: 7px;	margin: 1px 0 0px 0;	background: #E0E9E9;	 border:solid 0px;	}#header{ position:relative;  height:170px;  background-color:#FFFFFF;  width:100%; border-bottom:solid 1px; } #search{			margin-top: -20px;			margin-left: 800px;			color: #EFEFEF;		}#logo{position:relative;margin-left:auto; margin-right:auto;width:620px;height:120px;}.site-slogan-container  {width: 990px; height: 130px; top: 45px; position: absolute; z-index: 1; overflow: hidden; margin: 0px; padding-right: 15px; background-color: transparent;}.site-slogan {float: right; width: 700px; margin: 0px; padding: 0px; background-color: transparent; font-size: 10px;}.site-slogan p.title {float: right; width: 700px; margin: 0px; padding: 0px; color: #000000; font-family: arial, sans serif;  text-align: right; font-weight: bold; font-size: 220%;}.site-slogan p.subtitle {clear: both; float: right; width: 700px; margin: -5px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; font-size: 200%;}.site-slogan p.text {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 140%;}.site-slogan p.readmore {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 120%;}.site-slogan a {color: color: #000000); text-decoration: underline;}.site-slogan a:hover {text-decoration: none; color: color: #000000;}.img-header {clear: both; float: left; width: 1000px; height: 127px; margin: 0px; padding: 0px;}<!-- Top Nav -->#miniflex {	width: 100%;	float: left;	font-size: small; /* could be specified at a higher level */	margin: 0;	padding: 0 0px 0 0px;	border-bottom: 1px solid #333;	}#miniflex li {	float: left;	margin: 0; 	padding: 0;	display: inline;	list-style: none;	}	#miniflex a:link, #miniflex a:visited {	float: left;	font-size: 85%;	line-height: 10px;	font-weight: bold;	margin: 0 10px 0 10px;	text-decoration: none;	color: #999;	}#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {	border-bottom: 4px solid #333;	padding-bottom: 2px;	color: #333;	}#leftcol{ width:170px;  float:left;  position:relative;  background-color:#FFFFFF;  }#leftcol1{ width:170px;  float:left;  position:relative;  background-color:#FFFFFF;  }<!-- Left Nav -->.left {width: 130px;}.buttons a {color: #FFFFFF;background-color: #8ab8c2;padding: 2px;padding-left: 3px;display: block;border-left: 10px solid #8ab8c2;font: 12px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: left;margin-top: 1px;}.buttons a:hover {border-left: 10px solid #FFFFFF;text-decoration: none;color: #FFFFFF;}#twocols{ width:81%;  float:right;  position:relative;   } #rightcol{ width:175px;  float:right;  position:relative;  background-color:#FFFFFF; }#rightcol1{ width:175px;  float:right;  position:relative;  background-color:#FFFFFF; } <!-- Right Nav Menu -->.right {width: 130px;}.buttonsa a {color: #FFFFFF;background-color: #8ab8c2;padding: 2px;padding-left: 3px;display: block;border-right: 10px solid #8ab8c2;font: 12px Arial, sans-serif;font-weight: bold;text-decoration: none;text-align: right;margin-top: 1px;}.buttonsa a:hover {border-right: 10px solid #FFFFFF;text-decoration: none;color: #FFFFFF;}#maincol{background-color: #FFFFFF;   float: left;  display:inline;  position: relative;  width:76%;  } .curlycontainer{border: 1px solid #b8b8b8;margin-bottom: 1em;width: 610px;}.curlycontainer .innerdiv{background: transparent url(brcorner.gif) bottom right no-repeat;position: relative;left: 2px;top: 2px;padding: 1px 4px 15px 5px;} /* footer */#footer_wrapper {	margin:0 auto;	padding:0;	width:765px;	border-top:3px double rgb(138, 184, 193);	font-size:80%;	text-align:center;	clear:both;}#footer {	padding-right:5px;	margin:0;	line-height:190%;	text-align:right;	clear:both;	vertical-align:middle;}  /* *** Float containers fix: http://www.csscreato...tainedfloat.php *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 0px; }.rbroundbox { width: 100%; margin: 1em auto; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...onal.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>CssCreator--&gt;XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /><script src="hover.js" type="text/javascript"></script> </head><body><div id="pagewidth"><div class="rbroundbox">	<div class="rbtop"><div></div></div>		<div class="rbcontent">	<div id="header" ><div class="container1">	<ul id="miniflex">	<li><a href="#" class="active">Welcome</a></li>	<li><a href="#" >Home</a></li>	<li><a href="#">About</a></li>	<li><a href="#">forum</a></li>	<li><a href="#">contact</a></li>	<li><a href="#">sitemap</a></li></ul></div><div class="container">	  		<div id="search"><form name="form1" id="form1" method="post" action="">	  		<input type="text" name="textfield" value="Search..." />	  		<input class=" button" type="submit" name="Submit" value="GO" />			</form></div></div>	<div><img class="img-header" src="./logo.jpg" alt=""/></div>			<div class="site-slogan-container">			<div class="site-slogan">      	<p class="title">YOUR TEMPLATE PARTNER!</p>      	<p class="subtitle">Quality is our passion.</p>      	<p class="text">Serving the webcommunity<br />with XHTML/CSS designs</p>        <p class="readmore">&rsaquo;&rsaquo;&rsaquo;&nbsp;<a href="#">Go to templates</a></p>      </div>		</div>	</div>			<div id="wrapper" class="clearfix" > 		<div id="twocols" class="clearfix"> 			<div id="maincol" >			<br />			<div class="curlycontainer"><div class="innerdiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.</div></div></div>			<div id="rightcol" > <div class="right"><div class="buttonsa"><a href="#">Home</a><a href="#">About</a><a href="#">Forum</a><a href="#">Contact</a></div></div>			<div id="rightcol1" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.			</div>			</div>		</div> 			<div id="leftcol" ><div class="left"><div class="buttons"><a href="#">Home</a><a href="#">About</a><a href="#">Forum</a><a href="#">Contact</a></div></div>			<div id="leftcol1" > 			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.			</div></div>			<div id="footer_wrapper">	<div id="footer" > Saint-Michael	</div>	</div>	</div><!-- /rbcontent -->	<div class="rbbot"><div></div></div></div><!-- /rbroundbox --></div></div></body></html>

as you can see here my current problem is the top nav. I need to move it up into the container to get rid of the gap, it should be inline with the search box but for some reason it isn't even though they are both in the same container.

.mainflex is the top nav and .container1 of which I want to place that nav in.
Small Update the coding is up to date (100% valid at this point)

Edited by Saint_Michael, 20 January 2009 - 05:28 AM.

  • 0

#8 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 01 December 2006 - 08:01 PM

Well it is update time I started to put images in just to see what it would look like and it's not bad looking.

Two problems i would like to work on next is fix the overlapping in IE7. Basically the content is above the header.

Next is my left/right column nav menus for some reason they are going behind the divs below. Although I haven't tried it yet but I would think setting up a container element would fix this would I be correct on this assumption?

lates code
html, body{  margin:0;  padding:0;  text-align:left;}  #pagewidth{  width:1000px;  text-align:left;  margin-left:auto;  margin-right:auto; border:solid 0px;} .container {position:relative; top: -4px;	padding: 0px;	margin: 0px 0 0px 0;	}	.container1 {position:relative; top: 20px;	padding: 0px;	margin: 0px 0 0px 0;	background: #33729d;	 border:solid 0px;	}	#header{ position:relative;  height:170px;  background-color:#33729d;  width:100%; } #search{			margin-top: -14px;			margin-left: 780px;			color: #EFEFEF;		}.site-slogan-container  {width: 330px; height: 130px; top: 45px; position: absolute; z-index: 1; overflow: hidden; margin: 0px; padding-right: 15px; background-color: transparent;}.site-slogan {float: right; width: 700px; margin: 0px; padding: 0px; background-color: transparent; font-size: 10px;}.site-slogan p.title {float: right; width: 700px; margin: 0px; padding: 0px; color: #000000; font-family: arial, sans serif;  text-align: right; font-weight: bold; font-size: 220%;}.site-slogan p.subtitle {clear: both; float: right; width: 700px; margin: -5px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; font-size: 200%;}.site-slogan p.text {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 140%;}.site-slogan p.readmore {clear: both; float: right; width: 700px; margin: 10px 0px 0px 0px; padding: 0px; color: #000000; font-family: arial, sans serif; text-align: right; font-weight: bold; line-height: 1.0em; font-size: 120%;}.site-slogan a {color: color: #000000); text-decoration: underline;}.site-slogan a:hover {text-decoration: none; color: color: #000000;}.img-header {background: url("logo.jpg"); background-repeat: no-repeat; border: solid 1px; position:relative; top: -1px; clear: both; float: left; width: 998px; height: 200px; margin: 0px; padding: 0px;} <!-- Top Nav -->#miniflex {	width: 100%;	float: left;	font-size: small; /* could be specified at a higher level */	margin: 0;	padding: 0 0px 0 0px;		}#miniflex li {	float: left;	margin: 0; 	padding: 0;	display: inline;	list-style: none;	}	#miniflex a:link, #miniflex a:visited {position:relative; top: -20px;	float: left;	font-size: 85%;	line-height: 10px;	font-weight: bold;	margin: 0 10px 0 10px;	text-decoration: none;	color: #999;	}#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {position:relative; top: -20px;	border-bottom: 4px solid #333;	padding-bottom: 2px;	color: #333;	}#leftcol{ width:170px;  float:left;  position:relative; left: 0px; background-color:#33729d;  }#leftcol1{ width:170px;  float:left;  position:relative; top: -40px; background-color:#33729d;  }<!-- Left Nav -->.left {width: 130px;}.menu {z-index:1000;font-size:90%;height:235px;}/* remove all the bullets, borders and padding from the default list styling */.menu ul {padding:0;margin:0;list-style-type:none;width:170px;position:relative;border:1px solid #888;border-width:1px 1px 0 1px;background:#8ab8c2;}.menu li {background:transparent;height:26px;}* html .menu li {margin-left:-16px; margin-lef\t:0;}/* get rid of the table */.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}/* style the links */.menu a, .menu a:visited {display:block; text-decoration:none;height:25px;line-height:25px;width:170px;color:#000;text-indent:5px;border-bottom:1px solid #888;background:transparent;}/* style the link hover */* html .menu a:hover {color:#fff; background:#999;}.menu :hover > a {color:#fff; background:#999;}/* hide the sub levels and give them a positon absolute so that they take up no room */.menu ul ul {visibility:hidden;position:absolute;top:-1px;left:100px;}/* make the second level visible when hover on first level list OR link */.menu ul li:hover ul,.menu ul a:hover ul {visibility:visible;background:#dde;}/* keep the third level hidden when you hover on first level list OR link */.menu ul :hover ul ul{visibility:hidden;}/* keep the fourth level hidden when you hover on second level list OR link */.menu ul :hover ul :hover ul ul{visibility:hidden;}/* make the third level visible when you hover over second level list OR link */.menu ul :hover ul :hover ul{ visibility:visible;background:#ded;}/* make the fourth level visible when you hover over third level list OR link */.menu ul :hover ul :hover ul :hover ul { visibility:visible;background:#edd;}.menu ul.top2 {top:25px;}.menu ul.top3 {top:51px;}.menu ul.top4 {top:77px;}.menu ul.top5 {top:103px;}.menu ul.top6 {top:129px;}.menu ul.top7 {top:155px;}#twocols{ width:81%;  float:right;  position:relative;   } #rightcol{ width:170px;  float:right;  position:relative; left: 0px; background-color:#33729d;  }#rightcol1{ width:170px;  float:right;  position:relative; top: -40px; background-color:#33729d;  } <!-- Right Nav Menu -->.right {width: 130px;}.menu1 {z-index:1000;font-size:90%;height:235px;}/* remove all the bullets, borders and padding from the default list styling */.menu1 ul {padding:0;margin:0;list-style-type:none;width:170px;position:relative; left: -2px;border:1px solid #888;border-width:1px 1px 0 1px;background:#8ab8c2;}.menu1 li {background:transparent;height:26px;}* html .menu1 li {margin-left:-16px; margin-lef\t:0;}/* get rid of the table */.menu1 table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}/* style the links */.menu1 a, .menu1 a:visited {display:block; text-decoration:none;text-align:right;height:25px;line-height:25px;width:170px;color:#000;text-indent:5px;border-bottom:1px solid #888;background:transparent;}/* style the link hover */* html .menu1 a:hover {color:#fff; background:#999;}.menu1 :hover > a {color:#fff; background:#999;}/* hide the sub levels and give them a positon absolute so that they take up no room */.menu1 ul ul {visibility:hidden;position:absolute;top:-1px;left:100px;}/* make the second level visible when hover on first level list OR link */.menu1 ul li:hover ul,.menu1 ul a:hover ul {visibility:visible;background:#dde;}/* keep the third level hidden when you hover on first level list OR link */.menu1 ul :hover ul ul{visibility:hidden;}/* keep the fourth level hidden when you hover on second level list OR link */.menu1 ul :hover ul :hover ul ul{visibility:hidden;}/* make the third level visible when you hover over second level list OR link */.menu1 ul :hover ul :hover ul{ visibility:visible;background:#ded;}/* make the fourth level visible when you hover over third level list OR link */.menu1 ul :hover ul :hover ul :hover ul { visibility:visible;background:#edd;}.menu1 ul.top2 {top:25px;}.menu1 ul.top3 {top:51px;}.menu1 ul.top4 {top:77px;}.menu1 ul.top5 {top:103px;}.menu1 ul.top6 {top:129px;}.menu1 ul.top7 {top:155px;}#maincol{background-color: #33729d;   float: left;  display:inline;  position: relative;  width:77%;  border:solid 0px; } .content1-pagetitle {overflow: hidden; width: 400px; margin: 0px 0px 5px 0px; padding: 0px 0px 2px 0px; border-bottom: solid 1px rgb(88,144,168);); color: rgb(88,144,168); font-weight: bold; font-size: 120%;}.curlycontainer{background: url("grad1.jpg"); background-repeat: no-repeat;border: 1px solid #b8b8b8;margin-bottom: 1em;width: 620px;}.curlycontainer .innerdiv{background: transparent url(brcorner.jpg) bottom right no-repeat;position: relative;left: 2px;top: 2px;padding: 1px 4px 15px 5px;} /* footer */#footer_wrapper {	margin:0 auto;	padding:0;	width:765px;	border-top:3px double rgb(138, 184, 193);	font-size:80%;	text-align:center;	clear:both;}#footer {	padding-right:5px;	margin:0;	line-height:190%;	text-align:right;	clear:both;	vertical-align:middle;}  /* *** Float containers fix: http://www.csscreato...tainedfloat.php *** */ .clearfix:after { content: ".";  display: block; height: 0;  clear: both;  visibility: hidden; } .clearfix{display: inline-block;}/* Hides from IE-mac \*/* html .clearfix{height: 1%;}.clearfix{display: block;}/* End hide from IE-mac */    /*printer styles*/  @media print{ /*hide the left column when printing*/ #leftcol{display:none;} /*hide the right column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;}}/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop div { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot div { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop div, .rbtop, .rbbot div, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 0px; }.rbroundbox { width: 100%; margin: 1em auto; }

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...onal.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>CssCreator--&gt;XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main.css" type="text/css" /></head><body><div id="pagewidth"><div class="rbroundbox"><div class="rbtop"><div></div></div><div class="rbcontent"><div id="header" ><div class="container1">	<ul id="miniflex">	<li><a href="#" class="active">Welcome</a></li>	<li><a href="#" >Home</a></li>	<li><a href="#">About</a></li>	<li><a href="#">forum</a></li>	<li><a href="#">contact</a></li>	<li><a href="#">sitemap</a></li></ul></div><div class="container">	  		<div id="search"><form name="form1" id="form1" method="post" action="">	  		<input type="text" name="textfield" value="Search..." />	  		<input class=" button" type="submit" name="Submit" value="GO" />			</form></div></div><div class="img-header"><div class="site-slogan-container">			<div class="site-slogan">      	<p class="title">YOUR TEMPLATE PARTNER!</p>      	<p class="subtitle">Quality is our passion.</p>      	<p class="text">Serving the webcommunity<br />with XHTML/CSS designs</p>        <p class="readmore">&rsaquo;&rsaquo;&rsaquo;&nbsp;<a href="#">Go to templates</a></p>      </div>		</div></div></div><div id="wrapper" class="clearfix" ><div id="twocols" class="clearfix"><div id="maincol" ><br /><div class="content1-pagetitle">Welcome</div><div class="curlycontainer"><div class="innerdiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.</div></div><div class="curlycontainer"><div class="innerdiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.</div></div></div><div id="rightcol"><div class="right"><div class="menu1"><ul><li><a href="#nogo">Item 1</a></li><li><a href="#nogo">Item 2</a></li><li><a href="#nogo">Item 3 <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul class="top3">	<li><a href="#nogo">Item 3a</a></li>	<li><a href="#nogo">Item 3b <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top2">			<li><a href="#nogo">Item 3bi</a></li>			<li><a href="#nogo">Item 3bii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top2">					<li><a href="#nogo">Item 3bii-1</a></li>					<li><a href="#nogo">Item 3bii-2</a></li>					<li><a href="#nogo">Item 3bii-3</a></li>					<li><a href="#nogo">Item 3bii-4</a></li>					<li><a href="#nogo">Item 3bii-5</a></li>					<li><a href="#nogo">Item 3bii-6</a></li>					<li><a href="#nogo">Item 3bii-7</a></li>					<li><a href="#nogo">Item 3bii-8</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3biii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top3">					<li><a href="#nogo">Item 3biii-1</a></li>					<li><a href="#nogo">Item 3biii-2</a></li>					<li><a href="#nogo">Item 3biii-3</a></li>					<li><a href="#nogo">Item 3biii-4</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 3c</a></li>	<li><a href="#nogo">Item 3d</a></li>	<li><a href="#nogo">Item 3e</a></li>	<li><a href="#nogo">Item 3f</a></li>	<li><a href="#nogo">Item 3g <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top7">			<li><a href="#nogo">Item 3gi <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top1">					<li><a href="#nogo">Item 3gi-1</a></li>					<li><a href="#nogo">Item 3gi-2</a></li>					<li><a href="#nogo">Item 3gi-3</a></li>					<li><a href="#nogo">Item 3gi-4</a></li>					<li><a href="#nogo">Item 3gi-5</a></li>					<li><a href="#nogo">Item 3gi-6</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3gii</a></li>			<li><a href="#nogo">Item 3giii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top3">					<li><a href="#nogo">Item 3giii-1</a></li>					<li><a href="#nogo">Item 3giii-2</a></li>					<li><a href="#nogo">Item 3giii-3</a></li>					<li><a href="#nogo">Item 3giii-4</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3giv</a></li>			<li><a href="#nogo">Item 3gv</a></li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 3h</a></li>	<li><a href="#nogo">Item 3i</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li><li><a href="#nogo">Item 4</a></li><li><a href="#nogo">Item 5</a></li><li><a href="#nogo">Item 6 <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul class="top6">	<li><a href="#nogo">Item 6a</a></li>	<li><a href="#nogo">Item 6b <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top2">			<li><a href="#nogo">Item 6bi</a></li>			<li><a href="#nogo">Item 6bii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top2">					<li><a href="#nogo">Item 6bii-1</a></li>					<li><a href="#nogo">Item 6bii-2</a></li>					<li><a href="#nogo">Item 6bii-3</a></li>					<li><a href="#nogo">Item 6bii-4</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 6c</a></li>	<li><a href="#nogo">Item 6d</a></li>	<li><a href="#nogo">Item 6e</a></li>	<li><a href="#nogo">Item 6f</a></li>	<li><a href="#nogo">Item 6g <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top7">			<li><a href="#nogo">Item 6gi <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top1">					<li><a href="#nogo">Item 6gi-1</a></li>					<li><a href="#nogo">Item 6gi-2</a></li>					<li><a href="#nogo">Item 6gi-3</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 6gii</a></li>			<li><a href="#nogo">Item 6giii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top3">					<li><a href="#nogo">Item 6giii-1</a></li>					<li><a href="#nogo">Item 6giii-2</a></li>					<li><a href="#nogo">Item 6giii-3</a></li>					<li><a href="#nogo">Item 6giii-4</a></li>					<li><a href="#nogo">Item 6giii-5</a></li>					<li><a href="#nogo">Item 6giii-6</a></li>					<li><a href="#nogo">Item 6giii-7</a></li>					<li><a href="#nogo">Item 6giii-8</a></li>					<li><a href="#nogo">Item 6giii-9</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 6h</a></li>	<li><a href="#nogo">Item 6i</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="#nogo">Item 7</a></li></ul></div></div><div id="rightcol1" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div></div></div><div id="leftcol" ><div class="left"><div class="menu"><ul><li><a href="#nogo">Item 1</a></li><li><a href="#nogo">Item 2</a></li><li><a href="#nogo">Item 3 <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul class="top3">	<li><a href="#nogo">Item 3a</a></li>	<li><a href="#nogo">Item 3b <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top2">			<li><a href="#nogo">Item 3bi</a></li>			<li><a href="#nogo">Item 3bii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top2">					<li><a href="#nogo">Item 3bii-1</a></li>					<li><a href="#nogo">Item 3bii-2</a></li>					<li><a href="#nogo">Item 3bii-3</a></li>					<li><a href="#nogo">Item 3bii-4</a></li>					<li><a href="#nogo">Item 3bii-5</a></li>					<li><a href="#nogo">Item 3bii-6</a></li>					<li><a href="#nogo">Item 3bii-7</a></li>					<li><a href="#nogo">Item 3bii-8</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3biii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top3">					<li><a href="#nogo">Item 3biii-1</a></li>					<li><a href="#nogo">Item 3biii-2</a></li>					<li><a href="#nogo">Item 3biii-3</a></li>					<li><a href="#nogo">Item 3biii-4</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 3c</a></li>	<li><a href="#nogo">Item 3d</a></li>	<li><a href="#nogo">Item 3e</a></li>	<li><a href="#nogo">Item 3f</a></li>	<li><a href="#nogo">Item 3g <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top7">			<li><a href="#nogo">Item 3gi <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top1">					<li><a href="#nogo">Item 3gi-1</a></li>					<li><a href="#nogo">Item 3gi-2</a></li>					<li><a href="#nogo">Item 3gi-3</a></li>					<li><a href="#nogo">Item 3gi-4</a></li>					<li><a href="#nogo">Item 3gi-5</a></li>					<li><a href="#nogo">Item 3gi-6</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3gii</a></li>			<li><a href="#nogo">Item 3giii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top3">					<li><a href="#nogo">Item 3giii-1</a></li>					<li><a href="#nogo">Item 3giii-2</a></li>					<li><a href="#nogo">Item 3giii-3</a></li>					<li><a href="#nogo">Item 3giii-4</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 3giv</a></li>			<li><a href="#nogo">Item 3gv</a></li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 3h</a></li>	<li><a href="#nogo">Item 3i</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li><li><a href="#nogo">Item 4</a></li><li><a href="#nogo">Item 5</a></li><li><a href="#nogo">Item 6 <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->	<ul class="top6">	<li><a href="#nogo">Item 6a</a></li>	<li><a href="#nogo">Item 6b <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top2">			<li><a href="#nogo">Item 6bi</a></li>			<li><a href="#nogo">Item 6bii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top2">					<li><a href="#nogo">Item 6bii-1</a></li>					<li><a href="#nogo">Item 6bii-2</a></li>					<li><a href="#nogo">Item 6bii-3</a></li>					<li><a href="#nogo">Item 6bii-4</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 6c</a></li>	<li><a href="#nogo">Item 6d</a></li>	<li><a href="#nogo">Item 6e</a></li>	<li><a href="#nogo">Item 6f</a></li>	<li><a href="#nogo">Item 6g <!--[if IE 7]><!--></a><!--<![endif]-->	<!--[if lte IE 6]><table><tr><td><![endif]-->		<ul class="top7">			<li><a href="#nogo">Item 6gi <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top1">					<li><a href="#nogo">Item 6gi-1</a></li>					<li><a href="#nogo">Item 6gi-2</a></li>					<li><a href="#nogo">Item 6gi-3</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>			<li><a href="#nogo">Item 6gii</a></li>			<li><a href="#nogo">Item 6giii <!--[if IE 7]><!--></a><!--<![endif]-->			<!--[if lte IE 6]><table><tr><td><![endif]-->				<ul class="top3">					<li><a href="#nogo">Item 6giii-1</a></li>					<li><a href="#nogo">Item 6giii-2</a></li>					<li><a href="#nogo">Item 6giii-3</a></li>					<li><a href="#nogo">Item 6giii-4</a></li>					<li><a href="#nogo">Item 6giii-5</a></li>					<li><a href="#nogo">Item 6giii-6</a></li>					<li><a href="#nogo">Item 6giii-7</a></li>					<li><a href="#nogo">Item 6giii-8</a></li>					<li><a href="#nogo">Item 6giii-9</a></li>				</ul>			<!--[if lte IE 6]></td></tr></table></a><![endif]-->			</li>		</ul>	<!--[if lte IE 6]></td></tr></table></a><![endif]-->	</li>	<li><a href="#nogo">Item 6h</a></li>	<li><a href="#nogo">Item 6i</a></li>	</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="#nogo">Item 7</a></li></ul></div></div><div id="leftcol1" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div></div><div id="footer_wrapper"><div id="footer" > Saint-Michael </div></div></div><!-- /rbcontent --><div class="rbbot"><div></div></div></div><!-- /rbroundbox --></div></div></body></html>

Small Update I fixed the menus after putting in the z-index in the right spot YEAH!!

Also to fix my header nav problems I went with a tab set up which isn't to bad either. Of course IE loves to destroy good work. most likely I javscript something instead of trying to fluid it.

Edited by Saint_Michael, 20 January 2009 - 05:32 AM.

  • 0

#9 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 11 December 2006 - 06:39 AM

UPDATED LINK:

http://saint-michael...css/index2.html

I thought I give everyone an update on my pure css site. Well for one when I started writing the tutorial found out that made a mistake on the fluid design so basically as I am writing this tutorial I am doing it by scratch or at least adjusting the code to the new design.

So instead of going all over the place I am doing one section at a time. So I did the header and that was fun to adjust for the most part.

So as you can in ff it is fine but if you opera, IE, nescape (for those who use it). it goes all screwy. Netscape I can easily fix since it is a padding issue but opera and ie it's a position thing so any suggestions on what I should change.

CSS
@media print {#twocols,#maincol {width:100%;float:none;}#leftcol,#rightcol {display:none;}}/* generated by csscreator.com */html,body {text-align:center;margin:0;padding:0;}/* Main Body  */#pagewidth {width:95%;text-align:left;margin-left:auto;margin-right:auto;}/* Header  */#header {position:relative;height:243px;background-color:#33729d;width:100%;}/* Header Image */.img-header {background:url("logo.jpg");background-repeat:no-repeat;border:solid 0;position:relative;top:-52px;clear:both;float:left;width:957px;height:100%;margin:0;padding:0px;}/* Nav Menu replacement */.container2 {background:url("navbar.jpg");background-repeat:no-repeat;position:relative;top:180px;left:0px;border-bottom:solid 1px;width:957px;height:21px;margin:0;padding:0;}/* Header Text Container */.site-slogan-container {width:330px;height:130px;position:absolute;top:50px;z-index:1;overflow:hidden;padding-right:15px;background-color:transparent;margin:0;}.site-slogan {float:right;width:700px;background-color:transparent;font-size:10px;margin:0;padding:0;}.site-slogan p.title {float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;font-size:220%;margin:0;padding:0;}.site-slogan p.subtitle {clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;font-size:200%;margin:-5px 0 0;padding:0;}.site-slogan p.text {clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;line-height:1em;font-size:140%;margin:10px 0 0;padding:0;}.site-slogan p.readmore {clear:both;float:right;width:700px;color:#000;font-family:arial, sans serif;text-align:right;font-weight:700;line-height:1em;font-size:120%;margin:10px 0 0;padding:0;}.site-slogan a {color:#000;text-decoration:underline;}.site-slogan a:hover {text-decoration:none;color:#000;}/* Search Box */.container {position:relative;top:-54px;margin-top:0;margin-left:760px;color:#EFEFEF;}input.blue {background-color:#33729d;font-weight:700;font-size:12px;color:#000;border:solid 1px;}input.blue1 {background-color:#33729d;font-size:10px;color:#000;border:solid 1px;}/* Top Nav Menu - Menu Tabs 10--------------------------- */#tabs10 {float:left;width:100%;font-size:93%;border-bottom:1px solid #000;line-height:normal;position:relative;top:-32px;}#tabs10 ul {list-style:none;margin:10px;padding:10px 10px 0 50px;}#tabs10 li {display:inline;margin:0;padding:0;}#tabs10 a {float:left;background:url("tableft10.gif") no-repeat left top;text-decoration:none;margin:0;padding:0;}/* Commented Backslash Hack hides rule from IE5-Mac \*/#tabs10 a span {display:block;background:url("tabright10.gif") no-repeat right top;color:#FFF;float:none;padding:5px 15px 4px 6px;}/* End IE5-Mac hack */#tabs9 a:hover span {color:#FFF;}-->#leftcol {width:140px;float:left;position:relative;left:0;background-color:#33729d;border:solid 1px;}#twocols {width:81.5%;float:right;position:relative;}#rightcol {width:140px;float:right;position:relative;left:0;background-color:#33729d;border:solid 1px;}#maincol {background-color:#33729d;float:left;display:inline;position:relative;width:77%;border:solid 1px;}#footer {height:150px;background-color:#33729d;clear:both;border-top:solid 1px;}/* *** Float containers fix: http://www.csscreato...tainedfloat.php *** */.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:block;}/* Hides from IE-mac \*/* html .clearfix {height:1%;}/* set millions of background images */.rbroundbox {background:url(nt.gif) repeat;width:100%;margin:1em auto;}.rbtop div {background:url(tl.gif) no-repeat top left;}.rbtop {background:url(tr.gif) no-repeat top right;}.rbbot div {background:url(bl.gif) no-repeat bottom left;}.rbbot {background:url(br.gif) no-repeat bottom right;}/* height and width stuff, width not really nessisary. */.rbtop div,.rbtop,.rbbot div,.rbbot {width:100%;height:7px;font-size:1px;}.rbcontent {margin:0;}#tabs10 a:hover,#tabs10 #current a {background-position:0 -42px;}#tabs10 a:hover span,#tabs10 #current a span {background-position:100% -42px;}

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...onal.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>CssCreator-->XTML 1.0 Transitional Template</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="main2.css" type="text/css" /></head><body><div id="pagewidth">  <div class="rbroundbox">    <div class="rbtop"></div>    <div class="rbcontent">      <div id="header" >        <div id="tabs10">          <ul>            <!-- CSS Tabs -->            <li id="current"><a href="Home.html"><span>Home</span></a></li>            <li><a href="Products.html"><span>Products</span></a></li>            <li><a href="Services.html"><span>Services</span></a></li>            <li><a href="Support.html"><span>Support</span></a></li>            <li><a href="Order.html"><span>Order</span></a></li>            <li><a href="News.html"><span>News</span></a></li>            <li><a href="About.html"><span>About</span></a></li>          </ul>        </div>        <div class="container">          <form name="form1" id="form1" method="post" action="">            <input class="blue" type="text" name="T1" size="20" value="Search..." />            <input class="blue1" type="submit" name="Submit" value="GO" />          </form>        </div>        <div class="img-header">          <div class="site-slogan-container">            <div class="site-slogan">              <p class="title">YOUR TEMPLATE PARTNER!</p>              <p class="subtitle">Quality is our passion.</p>              <p class="text">Serving the webcommunity<br />                with XHTML/CSS designs</p>              <p class="readmore">››› <a href="#">Go to templates</a></p>            </div>          </div>          <div class="container2"></div>        </div>      </div>      <div id="wrapper" class="clearfix" >        <div id="twocols" class="clearfix">          <div id="maincol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>          <div id="rightcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>        </div>        <div id="leftcol" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>      </div>      <div id="footer" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue. Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum. Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justo nunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blandit magna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio. </div>      <!-- /rbcontent -->      <div class="rbbot"></div>    </div>    <!-- /rbroundbox -->  </div></div></body></html>

As you can see my coding is a lot cleaner and of course more optimized :) YEAH ME!! so any suggestions before I continue to the 3rd part of my tutorial for this design?

Of course I am not going to worry about resolutions for the moment that will be a javascript thing (the image is the image is the problem.

Edited by Saint_Michael, 20 January 2009 - 05:24 AM.

  • 0

#10 hts

hts

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 138 posts
  • Location:Iasi, Romania

Posted 11 December 2006 - 11:24 PM

as a first suggestion: move the left column a bit to the right, and the right column a bit to the left :lol: (use margin-left/margin-right for those div`s ^_^ )..
also, at 800x600, the design is totally messed up :D...
besides, I think it would look better if the layout would fill the entire viewport (so no margins)

maybe I`ll come up with more comments some other time..good luck anyway..
  • 0

#11 matak

matak

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 416 posts
  • Location:Psychedelic Realms
  • Interests:Psychedelic

Posted 12 December 2006 - 01:05 PM

maybe by using tables in html you could make things a bit easier for yourself..

but anyway thanks for this CSS thingy i just started building a new template in joomla (v1.5. beta) and i need to start from scratch, so this could help a lot.

i'll post a tut later when i'm finished.. (but i don't think it's going to be quite soon anyway :lol: )

Edited by matak, 12 December 2006 - 01:16 PM.

  • 0

#12 hts

hts

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 138 posts
  • Location:Iasi, Romania

Posted 12 December 2006 - 01:16 PM

tables are deprecated...read more about why you should avoid using tables when creating the layout of a site here (from this site, especially this page) and here

but that`s already a bit offtopic :lol:
  • 0

#13 Saint_Michael

Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,486 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:88.15

Posted 12 December 2006 - 08:41 PM

With CSS you can create tables, they take a bit longer to design because of accuracy, but hopefully when I redesign my core then I can start adding in stuff like CSS frames, tables and other stuff that I find.
  • 0

#14 garbage

garbage

    Privileged Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 660 posts
  • Gender:Male
  • Location:Texas

Posted 13 December 2006 - 12:42 PM

Wow the thumbnails looks really good, Any possible way to teach us how to develope a css skin, or is it really difficult. Do we need to have some type coding scripting knowledge.
  • 0



Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users