Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Location
    Paradise, CA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning of div classes

    I've been banging my head on this issue for several hours. I am using Dreamweaver CS3.

    See below for the CSS and HTML.

    The problem is that I have actually 3 nested div classes in the the content div (.left1, .left2, and .right). The .left1 and .left2 are behaving nicely but the .right is not nesting right in the content div... plus as I look at it in Dreamweaver, in properties, it is showing grayed out, like it is not an option.

    I am sure there is a simple solution (there always is), but my poor feebled mind is not picking it up.

    CSS below:
    * {
    padding: 0;
    margin: 0;
    }

    body {
    background: #fff;
    background-repeat: repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .74em;
    }

    a {
    color: #B22037;
    text-decoration: none;
    }

    a:hover {
    text-decoration: underline;
    }

    #header
    {
    margin: 0 auto;
    width: 800px;
    height: 150px;
    background: #fff url('header.jpg');
    background-repeat: no-repeat;

    }

    #header h1 { padding-left: 30px; padding-top: 15px; font-size: 18px; color: #CC9900; }
    #header h1 a { font-size: 1.4em; color: #FFF; text-decoration: none;}
    #header h2 { padding-left: 30px; padding-top: 0px; font-size: .8em; color: #FFF;}

    #wrap {
    margin: 0 auto;
    width: 800px;
    background: #eee url('midwrap.jpg');
    background-repeat: repeat-y;
    }

    #topwrap {
    background: #eee url('topwrap.jpg');
    background-repeat: no-repeat;
    width: 800px;
    height: 40px;
    margin: 0 auto;
    }

    #botwrap {
    background: #eee url('botwrap.jpg');
    background-repeat: no-repeat;
    width: 800px;
    height: 40px;
    margin: 0 auto;
    }

    #content {
    padding: 0 30px 0 30px;
    width: 780px;
    }

    #content h1 {padding-left: 30px; padding-top: 15px; font-size: 18px; color: #CC9900;}

    #content h2 {font-size: 1.4em; color: #CC9900; text-decoration: none;}

    .right {
    float: right;
    width: 500px;
    margin: 0 5px;
    font-size: 1em;
    color: #fff;

    }
    .right h2 {color: #B22037; font-size: 14px; margin-bottom: 10px;}

    .left1 {
    float: left;
    width: 150px;
    margin: 0 10px 0 10px;
    }

    .left1 ul {
    padding: 0px 0px 15px 0px;
    margin:0;
    }

    .left1 li {
    margin-bottom:5px;
    list-style-type: none;
    color: #CC9900;
    background: #CC9900;
    padding: 5px;
    font-size: .9em;
    }

    .left1 li a{ color: #01210e; }

    .left2 {
    float: left;
    width: 150px;
    margin: 0 10px 0 10px;
    left: 32px;
    top: 337px;
    }

    .left2 ul {
    padding: 0px 0px 15px 0px;
    margin:0;
    }

    .left2 li {
    margin-bottom:5px;
    list-style-type: none;
    color: #FF0099;
    background: #CC9900;
    padding: 5px;
    font: 18px;
    }

    .left2 li a{ color: #01210e; }




    #clear {
    display: block;
    clear: both;
    width: 100%;
    height:1px;
    overflow:hidden;
    }

    #footer {
    margin: 0px auto 0 auto;
    text-align: center;
    padding: 10px 0 10px 0;
    color: #666;
    background: #eee;
    }

    img { border: none;}

    HTML below:

    <!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>
    <title>RDC</title>
    <meta http-equiv="Content-Language" content="English" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
    <body>

    <div id="header">
    <!-- Just and example how to put some banner in the header -->
    <div style="float: right; padding-top: 15px; padding-right: 32px;"><!-- End of example -->
    <img src="../images/RDClogo_NEW_on green.jpg" alt="" width="120" height="115" /></div>
    <h1>Richards Design Concepts</h1>
    <p>&nbsp;</p>
    </div>

    <div id="topwrap"></div>

    <div id="wrap">

    <div id="content">

    <table width="150" border="0" cellpadding="10">
    <tr>
    <td> <div class="left1">

    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">THE RDC SERVICE TOUCH</a></li>
    <li><a href="#">ABOUT RDC</a></li>
    <li><a href="#">ORDER INFO</a></li>
    </ul>
    </div></td>
    </tr>
    <tr>
    <td height="13">&nbsp;</td>
    </tr>
    <tr>
    <td height="31"><h2>Products</h2></td>
    </tr>
    <tr>
    <td><div class="left2">
    <ul>
    <li><a href="#">Executive Gifts</a></li>
    <li><a href="#">Plaques</a></li>
    <li><a href="#">Crystal Awards</a></li>
    <li><a href="#">Picture Frames</a></li>
    </ul>
    </div></td>
    </tr>
    </table>


    <div class="right">
    <h2>ome lorem ipsum...</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia dictum massa. Vivamus fermentum. Curabitur congue purus at sem. Proin tincidunt lorem in nibh. Fusce vitae arcu ut ligula viverra auctor. Maecenas nonummy lorem sed erat. Ut id eros id tortor varius eleifend. Aliquam erat volutpat. Sed augue. Ut a ligula at sapien dignissim sollicitudin. Vestibulum lorem tellus, fermentum nec, posuere et, lacinia id, velit. Sed condimentum tincidunt quam. Suspendisse eget lectus. In hac habitasse platea dictumst. Vivamus volutpat. Ut pellentesque quam ac dui. Sed interdum. Suspendisse faucibus arcu. Integer id nisi nec odio laoreet cursus. Sed fermentum accumsan leo.
    <br /><br />
    Vestibulum accumsan, velit sed scelerisque lobortis, magna lectus imperdiet quam, non ultricies enim nibh sit amet felis. Quisque feugiat. Sed tristique enim in neque. Cras velit. Duis erat dui, dignissim quis, nonummy egestas, semper quis, nisi. Donec cursus posuere arcu. Pellentesque malesuada. Sed odio. Maecenas rutrum urna vel neque fringilla mollis. Ut scelerisque rhoncus lorem.
    <br /><br />
    Aenean aliquet varius enim. In mi enim, cursus ac, molestie id, molestie sit amet, urna. Nunc eu magna. Phasellus turpis felis, feugiat vel, congue vel, ullamcorper quis, tortor. Maecenas tristique. Nunc et diam. Cras sagittis ligula vel elit. Donec ut augue. Quisque lorem neque, eleifend in, vestibulum sit amet, faucibus placerat, tortor. Morbi pharetra augue quis lorem. Vestibulum venenatis porta ipsum. Mauris tellus arcu, euismod non, auctor eu, dictum eget, dui. Morbi purus. Nam vitae elit. Cras felis. Fusce vel nunc.
    </div>

    </div>

    <div id="clear"></div>

    </div>

    <div id="botwrap"></div>

    <div id="footer">
    Design by #####
    </div>

    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    I'd recommend you to check http://bonrouge.com/2c-hf-fixed.php, to see how to make a good 2 column layout.

    plus as I look at it in Dreamweaver, in properties, it is showing grayed out, like it is not an option.
    Never trust DW's design view. It's not a browser, so it can't render the styles that you have used in your CSS. Instead test your document in standards browsers like FF.

    Don't you know why tables for layout is very bad?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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