Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Jan 2006
    Location
    new york
    Posts
    3
    Member #
    12286
    Hi,
    I have a design I'm trying to achieve without tables as much as possible. The look I want is here http://img299.imageshack.us/img299/9369/bluem5wm.jpg but I have a few snags to figure out.
    the page is here:
    http://papamuse.com/test/newscratch.html
    html code:
    HTML Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="newscratch.css" rel="stylesheet" type="text/css" />
    <SCRIPT type=text/javascript><!--//--><![CDATA[//><!--
    sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></SCRIPT>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <div class="hiddentext"><h1>American Men's Studies Association</h1><p>"Advancing the critical study of Men and Masculinities"</p></div>
    </div>
    <ul id="nav">
    <li><a href="#">conferences</a>
    <ul>
    <li><a href="#">register</a></li>
    <li><a href="#">AMSA</a></li>
    <li><a href="#">other</a></li>
    </ul>
    </li>
    <li><a href="#">journal</a>
    <li><a href="#">newsletter</a>
    <li><a href="#">join</a>
    <li><a href="#">resources</a>
    <ul>
    <li><a href="#">scholorships</a></li>
    <li><a href="#">academic</a></li>
    <li><a href="#">publications</a></li>
    <li><a href="#">men's issues</a></li>
     
    </ul>
    </li>
    <li><a href="#">about</a>
    <ul>
    <li><a href="#">board members</a></li>
    <li><a href="#">history</a></li>
    <li><a href="#">statement of purpose</a></li>
    <li><a href="#">bylaws</a></li>
    </ul>
    </li>
    <li><a href="#">contact</a>
    <!-- etc. -->
    </ul>
    <div id="content"><table width="700" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque mollis gravida neque. Sed a mi eu ante aliquam tempus. Nullam sed justo eu tortor gravida interdum. p>
    <p>Phasellus eu nunc vel arcu posuere malesuada. Duis et sapien et libero ullamcorper tincidunt. Morbi in ligula vitae risus lobortis feugiat. Vestibulum lorem purus, ultrices eu, placerat vel, tempor non, pede. Fusce non nibh. Morbi lorem turpis, commodo vitae, aliquet nec, consectetuer quis, nibh. In nec quam quis nisl elementum cursus. Aenean dui dolor, ornare et, suscipit eu, aliquam sit amet, neque.</p>
    <p>Vestibulum justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse nulla. Mauris magna elit, hendrerit vitae, tristique sed, viverra vitae, libero. Nullam nec tortor ac erat ornare mattis. Phasellus vitae mauris scelerisque nunc porta vulputate. Integer adipiscing dui et elit..</p>.
    </td>
    </tr>
    </table>
    </div>
    <div id="footer"></div>
    </div>
    </body>
    </html>
     
    css code:
    Code:
     
    body {
     font-family: Arial, Helvetica, sans-serif;
     margin-top: 0px;
     background-color: #D0D2D2;
    }
     
    #wrapper {
     padding:0;
     width:700px;
     position:absolute;
     background-color: #FFFF00;
     left:50%;
     margin-top: 0px;
     margin-right: 0;
     margin-bottom: 0;
     margin-left: -350px;
    }
    #header {
     height: 100px;
     width: 700px;
     background-color: #0066FF;
    }
    .hiddentext {
     display: none;
    }
    #nav {
     height: 30px;
     width: 700px;
     background-color: #E3DFD2;
     
    }
    #nav, #nav ul {
     padding: 0;
     margin: 0;
     list-style: none;
    }
    #nav a {
     display: block;
     text-decoration: none;
     color: #004A92;
     width: 88px;
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 5px;
     padding-right: 5px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bold;
     text-align: center;
    }
    #nav li {
     float: left;
     width: 92px;
    }
    #nav li ul {
     position: absolute;
     width: 140px;
     left: -999em;
     background-color: #E1DCCE;
     border-top-width: 1px;
     border-right-width: 1px;
     border-bottom-width: 1px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: none;
     border-left-style: solid;
     border-top-color: #1B1464;
     border-right-color: #1B1464;
     border-bottom-color: #1B1464;
     border-left-color: #1B1464;
    }
    #nav li ul a {
     width: 140px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     padding-left: 5px;
     text-align: left;
    }
    #nav ul li {
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #1B1464;
     width: 100%;
     padding: 0px;
    }
     
    #nav li:hover {
    }
    #nav li.sfhover {
    }
    #nav li:hover ul {
     left: auto;
    }
    #nav li:hover ul, #nav li.sfhover ul {
     left: auto;
    }
     
    #content {
     background-color: #F8F1E0;
     width: 700px;
     clear: left;
     padding: 10px;
    }
    #footer {
     background-color: #E1DCCE;
     height: 40px;
     width: 700px;
    }
    I realize my CSS code can be cleaned up a lot from what dreamweaver rendered.

    1. I tried using a suckerfish dropdown menu for the nav but can't seem to style the nav so that the main list looks centered horizontally and vertically like in my mockup.

    2. I'm concerned about browser compatibility using this method so if anyone knows of a better way to do drop downs I would appreciate hearing about it. I have seen the dynamic drive site but got just as lost using their anylink menu.

    3. I still can't seem to wrap my head around making padding and margins work in all browsers. When I added padding to my content div I discovered that:
    It didn't look right in either IE or Firefox. The yellow background appeared in IE. In Firefox it pushed the content div out to the right by the amount of padding added.

    Any help would be greatly appreciated..

  2.  

  3. #2
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    Firstly why have you chosen 700px as your page width?

    Next

    body {
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
    background-color: #D0D2D2;
    }



    #wrapper {
    padding:0;
    width:700px;
    position:absolute;
    background-color: #FFFF00; <--remove this to get rid of the yellow in i.e.
    left:50%; <-- there are better ways than this
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 0; <-- If the values are 0 you do not need them
    margin-left: -350px; <-- Why have you got this?
    }

    Code:
    #wrapper {
    width: 700px;
    margin-right: auto; 
    margin-left: auto;
    height:100%;
    }
    This looks better, though i recommend that you make the 700 800.

    #header {
    height: 100px;
    width: 700px;
    background-color: #0066FF;
    }

    This looks ok apart from the width.

    I won't help with the drop down boxes because i tried to make some myself and just found them way to much hassle.

    But i do have a CSS book and one of the resources is this... http://www.bbd.com/stylin/sections/chapter7.htm

    you might to have a look at what this guy did as he has created something very neat

  4. #3
    Junior Member
    Join Date
    Jan 2006
    Location
    new york
    Posts
    3
    Member #
    12286
    Hi,

    thx for the reply and the link. I'll check out your code tomorrow.

    I chose 700px for the width because this is a pretty content light site so I thought 700 looked good.

  5. #4
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    Yesterday when i posted i hadn't slept for 36 hours, dw everything i wrote was good, but i couldn't work out why your content was wider than the rest of your page.


    With a refreshed mind, heres the fix for this...

    #content {
    background-color: #F8F1E0;
    width: 700px;
    clear: left;
    padding: 10px;
    }

    remove the padding, or drop the width to 680.

    CSS adds up values. So the total width of something is width + border(x2) + margin +padding

  6. #5
    Junior Member
    Join Date
    Jan 2006
    Location
    new york
    Posts
    3
    Member #
    12286
    Perad,

    Thx for pointing out the padding error. It seems so obvious but that type of error plagues me still when laying out pages.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com