SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    couple of layout problems...

    Basically i have this design which needs to be chopped up...

    however, i think im doing a few things wrong, this is what i have so far..

    http://www.defactodesigns.co.uk/beamish/

    I think my 100% height is being broken by the left grey panels (#leftpanels)

    Can anyone give me some pointers - i thought i was doing so well too!

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

    You have your menu of about 500px height inside your picture div which is only about 300px height. Therefore you need to remove the height from the picture div and let it stretch. You can drag the welcome back into position with a negative margin seeing as you have a fixed height to play with.

    Then you need to clear the floats and change your id=leftpanesl into classes because you have used 3 of them. then just float them across.

    e.g.

    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>Beamish Park Hotel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* CSS Document */
    /* commented backslash hack v2 \*/ 
    html, body{
        height:100&#37;;
        background-color: #8e8e8e;
    } 
    /* end hack */ 
    
    body {
        padding:0;
        margin:0;
        background:#8e8e8e;
        color: #FFFFFF;
        text-align:center;
        font-family: "Trebuchet MS", Arial, Verdana;
        font-size: 12px;
    }
    a:link, a:active, a:visited, a:hover {
        font-size:12px;
        color: #ffffff;
        text-decoration: none;
        font-weight:bold;
    }
    a.white:link, a.white:active, a.white:visited, a.white:hover {
        font-size:12px;
        color: #ffffff;
        text-decoration: none;
        line-height: 24px;
        font-family: "Trebuchet MS", Arial, Verdana;
    }
    h1 {
        font-size: 16px;
    
    }
    #outer{
        min-height:100%;
        width:876px;
        background:url(http://www.defactodesigns.co.uk/beamish/images/backgroud.gif) repeat-y center top;
        color: #000000;
        margin:auto;
        text-align:left;
        position:relative;
    }
    * html #outer{height:100%} 
    #header {
        background:url(http://www.defactodesigns.co.uk/beamish/images/logo.gif) no-repeat 45px;
        height:49px;
        margin-left:14px;
        margin-right:15px;
    }
    #picture {
        margin-left:14px;
        margin-right:15px;
        background-image: url(http://www.defactodesigns.co.uk/beamish/images/pic.jpg);
        width: 848px;
        background-repeat: no-repeat;
    }
    #menu {
        background-color: #6A2626;
        width: 190px;
        border:1px solid #fff;
        border-top: none;
        margin-left: 45px;
        filter:alpha(opacity=80);
        -moz-opacity:.80;    opacity:.80;
        height: 450px;
    }
    #links {
        position:absolute;
        left:81px;
        top:54px;
        width:162px;
        height:276px;
        z-index:3;
        color: #FFFFFF;
    }
    #toplinks {
        position:absolute;
        left:593px;
        top:17px;
        width:261px;
        height:27px;
        z-index:3;
        text-align: right;
        color: #FFFFFF;
    }
    #welcome {
     float:left;
        margin:-130px 0 0 262px;
        width:600px;
        z-index:3;
        color: #FFFFFF;
        position:relative;
    display:inline;
    }
    .clearer{
        height:1px;
        overflow:hidden;
        margin-top:-1px;
        clear:both;
    }
    .leftpanels {
        background-color: #5f5f5f;
        border: 1px solid #FFFFFF;
        width: 185px;
        margin-left: 60px;
        margin-top: 10px;
        padding-top: 5px;
        padding-left: 5px;
        padding-bottom: 5px;
        color: #FFFFFF;
        height: 118px;
        display:inline;
    float:left;
    }
    
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <div id="toplinks"> <a href="#" class="white">Contact</a> | <a href="#" class="white">About Us</a> | <a href="#" class="white">About Us</a> </div>
        </div>
        <div id="picture">
            <div id="menu">
                <div id="links"> <a href="#" class="white">Home</a><br />
                    <a href="#" class="white">About Us</a><br />
                    <a href="#" class="white">Conferences &amp; Functions</a><br />
                    <a href="#" class="white">Weddings</a><br />
                    <a href="#" class="white">Restaurant &amp; Lounge</a><br />
                    <a href="#" class="white">Accomodation &amp; Rooms</a><br />
                    <a href="#" class="white">Golf</a><br />
                    <a href="#" class="white">Special Offers</a><br />
                    <a href="#" class="white">Views</a><br />
                    <a href="#" class="white">Location</a><br />
                    <a href="#" class="white">Contact Information</a> </div>
            </div>
        </div>
        <div id="welcome">
            <h1><img src="http://www.defactodesigns.co.uk/beamish/images/welcome.gif" alt="Welcome to the Beamish Park Hotel..." /></h1>
            <p>This is the content This is the content This is the content This is the contentThis is the content This is the contentThis is the content This is the contentThis is the content This is the contentThis is the content This is the contentThis is the content This is the contentThis is the content This is the content</p>
        </div>
        <div class="clearer"></div>
        <div class="leftpanels"></div>
        <div class="leftpanels"></div>
        <div class="leftpanels"></div>
        <div class="clearer"></div>
    </div>
    </body>
    </html>

    Use shorthand for border styles as it saves masses of code. The floats have the double margin bug in IE so display:inline has been added (see the faq on floats for more info)


    That should get you back on track

  3. #3
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul

    i was nearly there this time! lol


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
  •