SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Not able to get it right

    Hello,

    I have designed a page with Photoshop and I'm trying to code it now. I did the (X)HTML without any problem but when it got to CSS I got stuck.

    Design: http://yizi.co.uk/code/design.jpg
    Code: http://yizi.co.uk/code

    You can see the CSS from the source view if you need to. As you see the problems are the bar and the top and the picture. Also I couldn't manage to centre the writings. I have the HTML utopia in front of me but I still can't figure out how to sort these out, I guess its just experience and you need to learn from it.

    Thanks,
    Yizi
    The quieter you become the more you are able to hear

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Yizi,

    Rather than explain everything, I just worked your code out according to your image.

    I have put a border around the wrapper for demo visibility, and a body bg color for contrast. Feel free to remove them.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Yizi | Creative Solutions</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
     
    </head><body>
     
    <div id="wrapper">    
        <div id="header">
            <ul>
                <li><a href="#">Login</a></li>
                <li class="last"><a href="#">Register</a></li>
            </ul>
        </div> <!-- header -->
     
    <div id="content">
            <div id="logo">
                <img src="img/logo.gif" alt="logo" height="67" width="153" />
            </div> <!-- logo -->
            <div id="footer">
                <ul id="navlist">
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">About</a></li>
                    <li class="last"><a href="#">Contact</a></li>
                </ul>
            </div>            
        </div> <!-- content -->
    </div> <!-- wrapper -->
    </body></html>
    Code CSS:
    /* CSS Document */
    * {margin:0; padding:0;}
     
    body {
        margin: 0;
        padding: 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        background:silver;
    }
     
    #wrapper {
        width:750px;  
        margin:10px auto;
        border:1px solid #333; 
        background:#fff;
    }
     
    #header {
        background-color: #333333;
        color: #999999;
        margin:0;
        padding:0;
        height:20px;
        line-height:20px;
        text-align: right;
    }
     
    #header li {
        list-style:none;
        display: inline;
        text-align: right;
        padding:0 8px;
        border-right:1px solid #999;
    }
    #header li a {color: #999999; text-decoration:none;}
    #header li.last {border:none;}
    #header li a:hover {color:#fff; text-decoration:underline;}
     
    #content {
        min-height:350px;
        width:100%;
    }
    * html #content {height:350px;}
    #logo {
        width:153px;
        height:67px;
        margin:0 auto;
        padding-top:250px;    
    }
    #footer {
        height:auto;
        width:100%
        clear:both;
    }
    #navlist {
        font-weight:normal;
        text-align:center;
    }
    #navlist li {
        display:inline;
        padding:0 8px;
        border-right:1px solid #999;
    }
    #navlist li.last {border:none;}
     
    #navlist a {
        color:#009;
        text-decoration:none;
        color: #999;
    }
    #navlist a:hover {
        color:#333;
        text-decoration:underline;
    }

    Hope that helps explain things better
    Last edited by Rayzur; Jul 10, 2008 at 21:00.

  3. #3
    SitePoint Enthusiast ydesignsx™'s Avatar
    Join Date
    Dec 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Yizi,

    Here is another alternative.

    Please see the attachment.
    Attached Files Attached Files

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2008
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ydesignsx™ that's what i was exactly looking for, works perfectly. Thanks very much.
    The quieter you become the more you are able to hear

  5. #5
    SitePoint Enthusiast ydesignsx™'s Avatar
    Join Date
    Dec 2007
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome Yizi.


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
  •