SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    London
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy CSS is driving me crazy

    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

  2. #2
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

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