SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with my banner made in CSS

    Please check this link: http://legaliza-te.com/lol/lulz.html


    I'm trying to do this banner for 2 days but i cant come over with a solution that's compatible with IE or Firefox...


    The expected result would be:


  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,

    Well very roughly I would make a start like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    
    body{
        min-width:500px;
        background:#fff;
    }
    #wrap{
        background:url(http://legaliza-te.com/lol/banner-2.png) repeat-x 0 0;
        width:80&#37;;
        margin:0 0 0 10%;
    }
    #outer{
        background:url(http://legaliza-te.com/lol/banner-1.png) no-repeat 0 0;
        width:100%;
    }
    #header{
        background:url(http://legaliza-te.com/lol/banner-3.png) no-repeat 100% 0;
        height:200px;
    }
    #allmenu{
        width:201px;
        float:left;
        background:url(http://legaliza-te.com/lol/menumeio.png) repeat-y 0 0;
        margin:-50px 0 0 0;
        position:relative;
    }
    #allmenu ul{
        margin:0;
        padding:110px 0 0 0;
        list-style:none;
        background:url(http://legaliza-te.com/lol/menutopo.png) no-repeat 0 0;
    }
    #allmenu li{}
    .menufundo {
        background:url(http://legaliza-te.com/lol/menufundo.png);
        width:201px;
        height:4px;
        overflow:hidden;
    }
    
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="outer">
            <div id="header"></div>
            <div id="allmenu">
                <ul>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                    <li>menu stuff</li>
                </ul>
                <div class="menufundo"></div>
            </div>
        </div>
    </div>
    </body>
    </html>
    The top of the menu should be a normal image and not a png and include the background in the corners otherwise you will have to hack ie6.

    That's a rough guide as I am just on my way out

  3. #3
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!
    Nice trick!


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
  •