CSS is driving me crazy

**Gazelle** · Nov 20, 2003 21:12

This is my first venture to css and I have a few problems... Below is a list of things I am trying to do.

1) Have a central coloum (div class kuca) which is 760px wide which always stays in the middle of the page (I have done this)

2) The top portion of the central colum is for thenavigation, should display 2 images at the top ( div id top) It does this)

3) Have a left colum which contains the navigation (div id left It does this but I want the background colour of the left coloum to go all the way down to the copywrite.

4) Have a central coloum which goes all the way down to the copy write. Have a central colum but not down to copywrite.

5)Have a copywrite which cover the total width of the div class kuca. COver class but is in wrong postion.

Hope that kind of makes sense..... Here is the code.

HTML Code:

<body>
<br />
<div class="kuca"> 
	<div id="top">
		<p><a href="home.htm"><img src="images/logo/logo.gif" border="0"  alt="KUCA logo link to main page" title="KUCA return to homepage"/></a><img src="images/navigation/navigation.gif" alt="banner for the site" title=""/></p>
	</div> 
	
	<div id="left">
		<div id="navigation">      
			<br />
			<p><a href="www.google.com">hello</a></p>
			<p><a href="www.google.com">hello</a></p>
			<p><a href="www.google.com">hello</a></p>
			<br />
		</div><!-- End of div Navigation -->
	</div><!-- End of div Left -->

	<div id="center"> 
		<p>SPAM SPAM SPAM </p>
	</div><!-- End of div Center -->
	
	<div id="bottom">
		<p>&copy; 2003</p>
	</div><!-- End of div bottom -->	
</div><!-- End of div KUCA -->

</body>

CSS

Code:

body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color:#6699FF
}

.kuca {
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 760px;
	text-align: left;
	}

#top{
	border: 0px none;
	background-image: url(images/background.gif);
	background-repeat: repeat;
}

}#top img{
	border: 0px none;
}
}#top a{
	border: 0px none;
}
/* Contains all the infroamtion for the left navigation */
#left {
	position: absolute;
	width: 120px;
	left: 0px;
	top: 50px;
	background-image: url(images/background.gif);
	background-repeat: repeat;
	border: 0px none;
	
}
#navigation a{
	text-align: center;
	list-style-position: inside;
	list-style-type: circle;
	background-color: #00CCFF;
	border: 1px dashed #FFFF00;
	left: 20px;
	height: 20px;
	width: 80px;
	position: relative;
}

}
#navigation a:hover{
	background-color:#00FF00;
}
/* end of left navigation */

#center {
	position: absolute;
	width: 640px;
	left: 120px;
	top: 50px;
	background-color: #009933;
	border: 0px none;
		
}

#bottom {
	width: 760px;
	background-color: #CC0033;
	border: 0px none;
	text-align: center;
	position: absolute;
	left: 0px;
	bottom: 0px;
}

hope that kind of makes sense, its 03.12 now and my brain is fried time for some sleep

**Fire59** · Nov 20, 2003 22:28

Here we go, i took the code from doug website and mod it to yours.

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Keeping it tall - redmelon.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/* Optional Code */

body { color: #000; background-color: #6699FF; text-align: justify; font-family: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica, sans-serif; font-size: 86%; }
p  { padding: 0.5em; margin: 0; font-size: 1em; }
h1 { padding: 0.5em; margin: 0; font-size: 1.3em; font-weight: normal; }
h2 { padding: 0.5em; margin: 0; font-size: 1em; font-weight: bold; }
ul { padding-right: 1em; text-align: left; margin-bottom: 1em; }


.normal { font-style: normal; }

.wrapper { min-width: 400px; }
          /* Allways good to have on full width liquid CSS layouts, 
             google "min-width IE" for JS solutions there */

.wrapper { border: 1px solid black; margin: 0 -1px; }
          /* this is a border with marginal compensation to stop scroll bars */

/* Setup (This all looks neater when it isn't put on display!) */

.wrapper {
	width: 760px;               /* total width */
	margin-left: auto;
	margin-right: auto;
}      

.outer {
	border-left-width: 120px;  /* left column width */
	border-left-color: #6699FF;   /* left column colour */
	
	border-right-width: 0px; /* right column width */
	border-right-color: #cfc;  /* right column colour */
	
	background-color: #009933; /* center column colour */
}

.left {
	width: 120px;              /* left column width */
	margin-left: -120px;       /* _negative_ left column width */
}


#bottom
{
background: #CC0033;
}
#top
{
background: #CC0033;
}
/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { margin: 0; width: 100%; }

.left { float: left; position: relative; z-index: 10; }
.center { float: left; width: 100%; position: relative; z-index: 12;}

.wide { width: 100%; position: relative; z-index: 13; }

.clear { clear: both; }

#navigation a{
	text-align: center;
	list-style-position: inside;
	list-style-type: circle;
	background-color: #00CCFF;
	border: 1px dashed #FFFF00;
	left: 20px;
	height: 20px;
	width: 80px;
	position: relative;
}

}
#navigation a:hover{
	background-color:#00FF00;
}
/* Mozilla code */
.outer > .inner { border-bottom: 1px solid transparent; }
.left { margin-right: 1px; }
.center { margin: 0 -3px 0 -2px; }

</style>
</head>
<body>

<div class="wrapper">

<div id="top">
<p><a href="home.htm"><img src="images/logo/logo.gif" border="0"  alt="KUCA logo link to main page" title="KUCA return to homepage"/></a><img src="images/navigation/navigation.gif" alt="banner for the site" title=""/></p>
</div> <!--End of Top -->

<div class="outer">
<div class="inner">

 <div class="left">
  <div id="navigation">      
			<br />
			<p><a href="www.google.com">hello</a></p>
			<p><a href="www.google.com">hello</a></p>
			<p><a href="www.google.com">hello</a></p>
			<br />
		</div><!-- End of div Navigation -->
 </div><!--End of Left -->
 <div class="center">
   <p>SPAM SPAM SPAM </p>
   <p>SPAM SPAM SPAM </p>
   <p>SPAM SPAM SPAM </p>
   <p>SPAM SPAM SPAM </p>
   <p>SPAM SPAM SPAM </p>
   <p>SPAM SPAM SPAM </p>
   <p>SPAM SPAM SPAM </p>
 </div><!--End of Center -->
 
 <div class="clear"></div> 
 
</div>
</div>

<div id="bottom">
<p>&copy; 2003</p>
</div> <!--End of Bottom -->

</div>

</body>
</html>

User Tag List

Thread: CSS is driving me crazy

Thread Tools

Display

CSS is driving me crazy

Bookmarks

Bookmarks

Posting Permissions