www.webdeveloper.com
Results 1 to 2 of 2

Thread: alignment and layout issues

  1. #1
    Join Date
    Dec 2006
    Posts
    32

    alignment and layout issues

    I have decided to try to create my site using as little tables and html as possible. It hasn't been very successful so far. Please see attached sitesample.jpg to see how page is supposed to look. After coding in css, it became problem1.jpg. My top nav won't align to the right. The left edge of logo won't align with the left edge of the block with the 3 images (images look the same since they are just placeholder). Finally, the block with the three images won't go below the top menu even it is supposed to be a block element. Before I give up and get back to tables and cells, I would like to give this forum a try, please help.

    css
    @charset "utf-8";
    /* CSS Document */



    body{background-color: #f7f7f5; background-image: url("images/index_bg.gif"); background-repeat: repeat-x; background-attachment: fixed;}
    # {
    margin:0; padding:0; border: 0;
    }
    /* logo,top navigation...can't align this to the right, did the float: right but flip the nav order */

    div#topmenu {
    width: 693px;
    height: 35px;
    float:left;
    margin: 0 auto 15px auto;
    position: relative; top:10px; left:300px;
    }
    div#topmenu img {
    float:left;
    }
    /* top navigation...can't align this to the right, did the float: right but flip the nav order */
    div#topmenu ul{
    width: 493px;
    float:left;
    font-size:.9em;
    list-style-type:none;
    }
    div#topmenu li {
    padding:0 5px;
    float:left;
    }
    div#topmenu #b li {
    border-left: 1px dotted #ffffff;
    }
    div#topmenu a {
    text-decoration:none; color:#ffffff
    }
    div#topmenu a:hover {
    text-decoration:none; color:#000000
    }
    /* Second part with divsional images
    this just doesn't move underneath the top menu (where the logo and top links are) */
    div#header-wrap {
    width: 693px;
    height: 413px;
    display: block;
    margin: 0 0 auto 0;
    padding: 0;
    position: relative; left: 0;
    background: url(images/index_bg_top.gif); no-repeat ;
    }
    #header-wrap #res {
    width: 209px;
    height: 353px;
    position:relative; top:30px; left:20px;
    background: url(images/index_bg_res.gif); no-repeat ;
    }
    #header-wrap #cab {
    width: 209px;
    height: 353px;
    position:relative; top:0px; left:219px;
    background: url(images/index_bg_res.gif) top left no-repeat ;
    }
    #header-wrap #hos {
    width: 209px;
    height: 353px;
    position:relative; top:0px; left:219px;
    background: url(images/index_bg_res.gif) top left no-repeat ;
    }
    html
    <?xml version="1.0" encoding="UTF-8"?>
    <!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" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fairmont Designs</title>
    <link rel="stylesheet" type="text/css" href="general2.css" />
    </head>

    <body>
    <!--logo menu-->
    <div id="topmenu">
    <!--top logo--><a href="index.html"><img src="images/logo.gif" alt="Fairmont Designs Logo" border="0" /></a>
    <!--top links-->
    <div id="horimenu">
    <ul>
    <li><a href="#">About Us</a></li>
    <div id="b"><li><a href="#">Site Map</a></li></div>
    </ul></div></div>
    <!--divisions-->
    <div id="header-wrap">
    <div id="res">
    <div id="cab">
    <div id="hos"> </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I'd start by switching to strict HTML and running it through the validator. Even that stripped down markup has some rather serious errors like the div inside a list.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles