CSS Project (in Progress)

saint-michael

Nov 30 2006, 03:22 PM

http://www.trap17.com/forums/index.php?sho...mp;#entry297172
this is also on trap but would like some input from asta as well you can see the live version here

http://saint-michael.trap17.com/css/index.html

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?

latest code

CSS

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.csscreator.com/attributes/containedfloat.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

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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>

pyost

Nov 30 2006, 04:08 PM

QUOTE(saint-michael @ Nov 30 2006, 04:22 PM)

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?

I am trying to solve the same problem as we speak. But yours doesn't seem as complicated as mine - you just need to add the z-index property on several places in your CSS file. You might want to check out this topic for my problem, and this link for some details on z-index.

saint-michael

Dec 1 2006, 07:48 PM

well after taking a break and out of dumb luck I put the z-index in the right spot

. Hopefully I can get this down in a few weeks since this will get me out of doing a class in college

saint-michael

Dec 11 2006, 06:41 AM

UPDATED LINK:

http://saint-michael.trap17.com/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

CODE

@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.csscreator.com/attributes/containedfloat.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

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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.

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE