SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Layout Problem

  1. #1
    SitePoint Guru themightystephen's Avatar
    Join Date
    Mar 2005
    Location
    England
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Layout Problem

    Hi all,

    I am creating the layout of a website using CSS and it's not going too badly. However I cannot work out why I have a huge amount of space at the bottom of my page, and obviously I need to fix it. Heres the link:

    http://www.flywalk.co.uk/streetboarddotbiz/index.html - Sorry about the slow loading of the png image. I will convert it to a gif or jpg later. If anyone has any solutions to this problem, that would be great.

    And another question: does anyone know how to make the corners of the boxes curved while keeping the opacity as well? Any other help or advice on my code is appreciated. Here are the html and css below:

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Streetboard.BiZ - Streetboards, Bindings, and Parts</title>
    <link rel="stylesheet" href="mainstyle.css" />
    </head>
    <body>
    <div id="maincontainer">
    <div id="menucontainer">
    <img class="menubuttons" src="Menu/boards2.gif" alt="See our streetboard range" />
    <img class="menubuttons" src="Menu/bindings2.gif" alt="Find the bindings you need for your streetboard" />
    <img class="menubuttons" src="Menu/parts.gif" alt="See our range of streetboard parts" />
    <img class="menubuttons" src="Menu/help.gif" alt="Need help? Click here!" />
    </div>
    
    <div id="leftbgcontainer"><div id="lefttext"></div><div id="leftwords">
    <h3>Most Recent Products</h3><p class="bold"><a href="index.html">See our range of Streetboards</a></p>
    <p>
    <img src="board1.gif" border="0" /> 
    <img src="board1under.gif" border="0" />
    </p></div></div>
    
    <div id="contentbgcontainer"><div id="contenttext"></div><div id="contentwords">
    <h3>Content</h3><p class="bold"><a href="index.html">See our range of Streetboards</a></p>
    <p>
    <img src="board1.gif" border="0" /> 
    <img src="board1under.gif" border="0" />
    </p></div></div>
    
    </div>
    </body>
    </html>
    And the CSS:

    Code:
    body {
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    text-align:center
    }
    a:link,a:visited {color:#CC3300;text-decoration:none;}
    a:hover,a:active {color:#FF0000;text-decoration:underline;}
    #maincontainer {
    width:780px;
    height:570px;
    border:1px solid black;
    background:url('backflipbg.png') center top no-repeat;
    text-align:left;
    }
    #menucontainer {
    position:relative;
    left:5px;
    top:5px;
    }
    .menubuttons {
    display:block;
    }
    #leftbgcontainer {position:relative; left:10px; top:90px; width:200px; height:300px; border:0px solid #000;}
    #lefttext {position:relative; top:0; left:0px; width:200px; height:300px; background:#999999; padding:10px; border:0px solid black}
    #lefttext {filter: alpha(opacity=40);
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
     -moz-opacity: 0.40; opacity:0.4;
    }
    #leftwords {position:absolute; top:0; right:0; width:200px; height:300px; background:transparent; padding:10px; border:0px solid black}
    
    #contentbgcontainer {position:relative; left:360px; top:-400px; width:390px; height:470px; border:0px solid #000;}
    #contenttext {position:relative; top:0; left:0px; width:390px; height:470px; background:#999999; padding:10px; border:0px solid black}
    #contenttext {filter: alpha(opacity=40);
     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
     -moz-opacity: 0.40; opacity:0.4;
    }
    #contentwords {position:absolute; top:0; right:0; width:390px; height:470px; background:transparent; padding:10px; border:0px solid black}
    Thanks for your help.
    Get your heelys now at flywalk.co.uk - But what are heelys?
    Heelys are simply shoes with wheels in the heels!

    Flywalk.co.uk - The UK Heelys Retailer

  2. #2
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because your content is pushing the DIV downward, and you dont have much content.
    an easy fix could be in your left content and main content containers:
    (Sorry I cannot read through all your code, i have no idea whats going on)
    Code:
    /* to make a minimum height */
    min-height: 500px; /* for firefox */
    height: !important; height: 500px; /* for ie bug fix */
    Drop that in an #contentbgcontainer or #contentbgtext to see what i mean.

    You should try and use more defined names because that seems very confusing, unless its easy to you, it just seems very very tricky!

    usually you only need:
    #fit
    -#header
    -#left
    -#content
    -#footer
    /end fit

  3. #3
    SitePoint Guru themightystephen's Avatar
    Join Date
    Mar 2005
    Location
    England
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thank you...I'll try the code later.
    Get your heelys now at flywalk.co.uk - But what are heelys?
    Heelys are simply shoes with wheels in the heels!

    Flywalk.co.uk - The UK Heelys Retailer

  4. #4
    SitePoint Guru themightystephen's Avatar
    Join Date
    Mar 2005
    Location
    England
    Posts
    608
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm...didn't work but I'll use your advice on the names of my ids.
    Get your heelys now at flywalk.co.uk - But what are heelys?
    Heelys are simply shoes with wheels in the heels!

    Flywalk.co.uk - The UK Heelys Retailer


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
  •