SitePoint Sponsor

User Tag List

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

    CSS Help for page layout.

    Hello, first time poster.

    I'm currently redesigning my blog/site as the previous one was quite slow.

    Anyway, I'm redesigning it in CSS primarily (trying not to use tables), and I've come accross a bit of bother.

    I've uploaded the basic layout so far here, and you should be able to see what's wrong with it.

    Basically, I want the curve to be at the bottom of the page, instead of over the text.

    Here is the contents of my CSS script:-

    HTML Code:
    #head {
      position:relative;
      height:104px;
    	background-image:url("side.GIF");
    	background-repeat:repeat-x;
      }
    
    #headbanner {
      position:absolute;
      left:0px;
      top:0px;
      height:104px;
      width:404px;
    	background-image:url("corner.GIF");
    	background-repeat:no-repeat;
      }
    
    #menu{
    	position:absolute;
    	right:0px;
            top:0px;
    	background-image:url("menu.GIF");
    	width:366px;
    	height:104px;
    	background-repeat:no-repeat;
    }
    
    #blog{
    	position:absolute;
    	left: 190px;
    	top: 110px;
    }
    
    #menubar{
    	position:absolute;
    	top:87px;
    	right:10px;
    	font-align: right;
    	font-family: Verdana;
    	color:black;
    	size:11px;
    	}
    
    #end {
      position:relative;
      height:104px;
    background-image:url("sidebot.GIF");
    	background-repeat:repeat-x;
      }
    
    #endcorner{
    	position:absolute;
    	bottom:0px;
    	left:0px;
    background-image:url("botcorner.GIF");
    	width:366px;
    	height:104px;
    	background-repeat:no-repeat;
    }	
    
    
    body {
    	background-color:#FFFFFFF;
    	background-image:url("top.GIF");#
    	background-repeat:repeat-y;
    }
    Any help will be greatfully recieved.

    Thanks

    Rhys

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

    I've tidied up your page a bit and here's the result.
    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">
    <head>
    <title>New Page 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #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: 153px;
    border-left:3px solid #000;
    border-bottom:4px solid #000;
    background:#fff;
    }
    #menubar{
    position:absolute;
    top:87px;
    right:10px;
    font-align: right;
    font-family: Verdana;
    color:black;
    size:11px;
    font-size: 10px;
    }
    #menubar p{margin-top:0}
    #endcorner{
    position:relative;
    top:-7px;
    	background-image:url("http://mysite.freeserve.com/rhyswynne/botcorner.GIF");
    width:366px;
    height:104px;
    background-repeat:no-repeat;
    } 
    body {
    background-color:#99CCCC;
    margin:0;
    padding:0;
    color: #000000;
    }
    </style>
    </head>
    <body>
    <div id="head"> 
    <div id="headbanner">Hiya!</div>
    <div id="menu"></div>
    <div id="menubar"> 
    	<p align="right">Blog | About | Posts | Games | Projects | Blokes | Links</p>
    </div>
    </div>
    <div id="blog">BLAAAAA!!! 
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    <p>BLAAAAA!!!</p>
    </div>
    <div id="endcorner"></div>
    <script type="text/javascript">
    <!--
    document.write('<img src="http://sitebuilder.freeserve.com/servlets/istat?site=rhyswynne&amp;page=/template.htm&amp;outil=ftpweb&amp;n='+Math.round(Math.random()*100000)+'" width=1 height=1>');
    -->
    </script>
    <script type="text/javascript"></script>
    </body>
    </html>
    Your postioning was a bit out and in the wrong context.

    Your content was absolutely placed so it was taking up no space so that it would be awkward to place anything underneath.

    The left side border on your blog could just be done with borders and avoid the rerpeating image on the body.

    The layout below works in ie5.5 and 6 and mozilla but the bottom corner gif is slightly out in ie5. It would be better if you redid the bottom corner just as a little corner and then place it bottom left in the background of the blog.

    Also I've given the page a doctype because ie6 works in quirks mode without one and makes it harder to work with (as if it's not hard enough anyway).

    Hope this 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
  •