SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  2. #2
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok well as soon as your image is approved i'll have a look and help as best i can

  3. #3
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for the banner i'd use 3 divs and maybe a container to house them in

    Code CSS:
    #container {
    position: relative;
    width: 100%;
    height: 40px;
    background: #900000;
    }
    #left {
    position: absolute;
    left: 0px;
    width: 5px;
    height: 40px;
    background: url(left_side.jpg) no-repeat;
    }
    #centre {
    position: absolute;
    left: 5px;
    height: 40px;
    width: 300px;
    background: #900000;
    border-top: 5px solid #A80206; 
    border-bottom: 5px solid #A80206; 
    }
    #right {
    position: absolute;
    right: 0px;
    height: 40px
    width: 100px;
    background: #900000;
    }

    Code HTML4Strict:
    <div id="container">
               <div id="left">
               </div>
               <div id="centre">
                        <ul>
                              <li><a href="home.htm">Home</a></li>
                        </ul>
               <div id="right">
                        <img src="right_hand_image.jpg" />
               </div>
    </div>

    I'm sure you could use floats to position the 3 divs aswell.

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looking good now, if i were you I'd change the colour of the border in the images to match the border rendered by the browser using your css, rather than trying to make the browser render a colour that it (possibly) can't.

  5. #5
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems to look fine in ie7 to me

    you might need to spell check your text. in todays menu you have a section headed 'vegetrain'

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    The problem in iE6 is that you can't put anything bigger that the footer height inside the footer because it will stretch it. Your right image would be better as an absolutely placed image.

    Something like this:

    Code:
    #footer {
        width: 770px;
        background: #900000;
        float: left;
        position:relative;
        margin-right:-3px;/* ie duplicate character bug*/
    }
    .footer_left {
        width: 10px;
        height: 34px;
        background: url(http://r-interactive.net/clients/mr.chow/images/img_footer_left.jpg) no-repeat left top;
        margin-top: 23px;
        float: left;
    }
    .footer_centre {
        left: 10px;
        height: 32px;
        width: 635px;
        border-top:1px solid #ad0000;
        border-bottom: 1px solid #AD0000;
        margin-top: 23px;
        float: left;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #B84747;
    }
    .footer_right {
        position:absolute;
      height: 90px;
      width: 110px;
        background: url(http://r-interactive.net/clients/mr.chow/images/img_footer_right.jpg) no-repeat right top;
        overflow: hidden;
        top:0;
        right:20px;
    }
    .footer_text{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #B84747;
        text-align: left;
        clear: both;
        line-height: 18px;
        padding:6px 0 0 10px;
    }
    
    .footer_text a:hover{
        color: #DBA773;
    }
    Code:
        <!-- footer starts here -->
        <div id="footer">
            <div class="footer_left">&nbsp;</div>
            <div class="footer_centre">
                <div class="footer_text"><a href="index.html" class="footer_text">Home</a> | <a href="about.html" class="footer_text">About Us</a> | <a href="menu.html" class="footer_text">Menu</a> | <a href="nutrition_hygine.html" class="footer_text">Nutrition & Hygiene</a> | <a href="contactus.html" class="footer_text">Contact Us</a></div>
            </div>
            <div class="copyright_text">All content copyrights 2007 Mrchows.com  ||  Site Best Views in 1024 x 768 Screen Resolutions</div>
            <div class="footer_right">&nbsp;</div>
        </div>
        <!-- footer ends here-->
    </div>
    <!-- end of page width-->
    </body>
    </html>
    Hope that helps

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Did you miss my post nisha as it should address this issue


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
  •