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 4 of 4
  1. #1
    Junior Member
    Join Date
    Jan 2006
    Posts
    7
    Member #
    12295
    Im just starting to get heavily into site design as I am going to school for Web Development, and I am having a bit of trouble with using <div>'s instead of tables for layout. Specifically with the .leftnav and .content div's not actually being inside the .contentwrap div (which I intend to be the container for those). Also, in Firefox and Chrome the margin-top:85px; attribute on the .contentwrap class pushes ALL the divs down 85 pixels from the top of the page, instead of just the .contentwrap div. Ironically, the page looks exactly how I want it to look in IE :ermm: . It also displays how I would like it to in the Design view in Dreamweaver, which im using to code.

    Any help would be greatly appreciated to get it to have the .leftnav and .content divs inside of the .contentwrap container and to display properly. Im hoping its something small and im just a noob haha. Thanks!

    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=utf-8" />
    <title>.at</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div class="wrapper">
    <!--- BEGIN HEADER SECTION -->
    	<div class="logo">
        <img src="images/logoimg.png" alt="at" width="83" height="70" />
    	</div>
        <div class="nav">
        asdfasdfasdfkljasd;lkfjei;onao;ivje
        </div>
    <!--- BEGIN PAGE CONTENT SECTIONS -->
    <div class="contentwrap">
        	<div class="leftnav">
            <h1 class="h1nav">.main navigation</h1>
            asdf
            <h1 class="h1nav">.recent projects</h1>
            asdf
            </div>
            <div class="content">
            </div>
    </div>
    </div>
    </body>
    </html>
    Code:
    body {
    	margin:0px;
    	background-color:#FCFCFC;
    	background-image:url(images/topbg.png);
    	background-repeat:repeat-x;
    	font:Arial, Helvetica, sans-serif;
    	font-size:12px
    }
    /* MAIN WRAPPER */
    .wrapper {
    	width:950px;
    	height:700px;
    	margin-top:0px;
    	margin-right:auto;
    	margin-bottom:0px;
    	margin-left:auto;
    }
    /* HEADER CLASSES */
    .logo {
    	float:left;
    	width:100px;
    	margin-left:50px;
    }
    .nav {
    	float:left;
    	width:400px;
    	height:70px;
    	margin-left:100px;
    }
    /* CONTENT CLASSES */
    .contentwrap {
    	vertical-align:left;
    	margin-top:85px;
    	width:940px;
    }
    .leftnav {
    	float:left;
    	width:150px;
    	height:300px;
    	padding-top:10px;
    	border-right:1px solid #000000;
    }
    .content {
    	float:left;
    	margin-left:5px;
    	width:700px;
    	height:300px;
    }
    /* NAVIGATION CLASSES */
    .h1nav {
    	font:Arial, Helvetica, sans-serif;
    	font-size:15px;
    	display:block;
    	color:#FFFFFF;
    	background-color:#000000;
    	text-align:center;
    	margin:0px;
    }

  2.  

  3. #2
    Junior Member Jeo_james1984's Avatar
    Join Date
    Jun 2007
    Location
    Dallas, TX
    Posts
    14
    Member #
    15379
    add

    clear:both;

    to your .contentwrap CSS

    That will fix your Firefox layout problem. Now it looks the same in both browsers. If you want the contentwrap to be any lower I would suggest changing margin-top: 85px to padding-top: #px. That way it will drop your div however much you want and it will stay consistent among the browsers. Now I'm no CSS guru so if someone else sees a better way please chime in.

  4. #3
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    What is vertical-align: left? Vertical is top to bottom, not left to right. And it's not used for divs that I know of.

  5. #4
    Junior Member Jeo_james1984's Avatar
    Join Date
    Jun 2007
    Location
    Dallas, TX
    Posts
    14
    Member #
    15379
    Quote Originally Posted by aeroweb99 View Post
    What is vertical-align: left? Vertical is top to bottom, not left to right. And it's not used for divs that I know of.
    Yeah I noticed that line too. It's just extra. Not doing anything (good or bad) being there (other than adding more code). OriginalJava did this fix your problem?


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 11:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com