SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS Help

  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Manchester UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help

    Hello, I'm redesigning my blog for the new year, and this forum has helped me greatly so far. However, I've run across a small problem. I've put my current template up at the following address:-

    http://mysite.freeserve.com/rhyswynne/template.htm

    As you can see, the sidebar goes over the end of the site. Of course, this won't be much of a problem as my blog will take up more space than the sidebar. However, there are some archives with only two or three short entries, so it could be a problem there.

    The css file is the following:-

    Code:
    #head {
       position:relative;
       height:104px;
     
    background-image:url("http://mysite.freeserve.com/rhyswynne/side.GIF");
     background-repeat:repeat-x;
      }
    #headbanner {
       position:absolute;
       left:0px;
       top:0px;
       height:104px;
       width:404px;
     
    background-image:url("http://mysite.freeserve.com/rhyswynne/corner.GIF");
     background-repeat:no-repeat;
      }
    #menu{
     position:absolute;
     right:0px;
    	top:0px;
     
    background-image:url("http://mysite.freeserve.com/rhyswynne/menu.GIF");
     width:366px;
     height:104px;
     background-repeat:no-repeat;
    }
    
    #blog{
     margin-left:0px;
     backgound:#99CCCC;
    }
    
    #content{
     margin-left: 153px;
     border-left:3px solid #000;
     border-bottom:4px solid #000;
     background:#fff;
     padding: 12px;
    }
    
    #menubar{
     position:absolute;
     top:87px;
     right:10px;
     font-align: right;
     font-family: Verdana;
     color:black;
     size:11px;
     font-size: 10px;
     }
    
    #side {
    	position:absolute;
    	left:20px;
    	top:130px;
    	font-align: right;
    	font-family: verdana;
    	font-size: 12px;
    	width:120px;
    	
    }
    
    #inset {
    	background-color: #669999;
    	border: 1px solid #000000;
    	color: #FFF;
    	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	padding: 5px;
    	width:99px;
    	left: 20px;
    	text-align:left;}
    
    #menubar p{margin-top:0}
    
    #endcorner{
     position:relative;
     top:-7px;
    	
    background-image:url("botcorner.GIF");
     width:366px;
     height:104px;
     background-repeat:no-repeat;
    } 
    body {
     background-color:#99CCCC;
     margin:0;
     padding:0;
     color: #000000;
     font-family:verdana;
    }
    Any help will be greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are two things you could do.

    1) Float your side bar to the left instead of absolutely placing it then you will be able to keep the footer stuff below it.
    Code:
    #side {
     float:left;
     margin-left:5px;
     text-align: right;
     font-family: verdana;
     font-size: 12px;
     width:120px;
    }
    Or if you want to keep your sidebar absolute then just wrap the footer stuff up in a div and give it a margin-left to clear the sidebar.
    e.g.
    Code:
    #footer {margin-left:153px}
    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Manchester UK
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks


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
  •