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
    Jun 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Perfect alignment issues

    Hi All,

    Am reasonably new to CSS - I do have a basic grasp and understanding of what I'm doing but I seem to be having trouble getting the fundamentals of layout right.

    I'm trying to make a simple band website for my friends, a 2 column site with header and footer. All the DIVs are defined and it displays reasonably ok, and comes up as completely valid, I just can't get the navigation bar to align perfectly with the two columns and footer - specifying anything 94px or over just sends the last <li> item onto a new line. This may be fairly arbitrary as I do intend to use images on these items soon but fear the problem may linger if I don't fix it now. I've tried defining a background colour to fill in the edges but it doesn't seem to appear, or want to align centrally either.

    I also had problems sitting the 2 columns perfectly beside each other with a border - the whole thing just doesn't seem to agree with the 600px restriction defined in my wrapper.

    It does, at least, now appear pretty much the same in IE as Firefox, which is one battle down.

    I'm guessing there's a basic flaw in my layout and therefore my entire understanding of CSS layouts - if anyone could help point me in the right direction I'd really appreciate it.

    Code:
    body, html {
         margin:0;
    	padding:0;
        font-family: tahoma, helvetica, arial, sans-serif;
        font-size: 9px;
        text-align: center;
    	background-color: #000;
        color: #ddd4d4;
        line-height: 2; /*Looks better in IE with this line removed, but worse in Firefox. */
    }
    
    /*All font sizes have now been regulated between IE and Firefox - just paragraph
    spacing which differs. */
    
    /* Set border around main content - define boundaries. */
    #wrapper {
    		width:600px;
    		margin:0 auto;
    }
    
    h2 {
    	font-size: 10px;
    	color: #eeb422;
    }
    
    h3 {
    	font-size: 9px;
    	color: #eedc82;
    }
    
    /* Restrict width of horizontal rule. */
    hr {
    	width: 50%;
    }
    
    /* Keeps header central. */
    #header {
    	margin-left:auto; 
    	margin-right:auto;
    	width: 600px;
    }
    
    /* Define Navigation bar. */
    #nav { 
    	margin-left:auto; 
    	margin-right:auto;
    	width: 600px;
        font-size: 10px;
        line-height: 2;	
    	/* Looks slightly better in IE only: width: 600px; background: #003f87;
        font-size: 10px; */
    }
    
    /* Remove visible list elements of Navigation bar. */
    #nav li {
        float: left;
        width: 93px;
        list-style: none;
        border-bottom: 3px solid black;
    }
    
    /* Define link appearance in Navigation bar and set colours. */
    #nav a {
        background: #003f87;
        color:#f0f8ff;
        font-weight: bold;
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 1px 0;
    }
    
    /* Mouseover effect on NavBar links */
    #nav a:hover {
    	background-color: #369;
    	color: #fff;
    }
    
    /* Define appearance of sidebar elements. */
    #sidebar {
    	float: left;
        width: 160px;
    /* Looks better in Firefox but not IE and footer drifts-	margin: 0 0 20px -557px; */
    	height: 600px;	
    	padding: 8px;
    	text-align: left;
    }
    
    /* Define appearence of main page content. */
    #content {
    	float: right;
        width: 400px;
    	/* Looks better in Firefox but not IE and footer drifts-margin: 0 0 20px 200px; */
    	height: 600px;	
    	background: #525C65;
    	padding: 8px;
    	text-align: left;
    }
    
    /* This makes the footer stay at the bottom. */
    #footer {
    	clear: both;
    	margin-left:auto; 
    	margin-right:auto;
    	width: 600px;
        background: #003f87;
    	border-top: 3px solid black;
    }
    
    /* Define appearence of other pages content, with no sidebar. */
    #pagescontent {
    	margin-left:auto; 
    	margin-right:auto;
    	background: #525C65;
    	padding: 10px;
    	float: left;
        width: 600px;
    	border: 1px solid #003f87;
    	padding: 10px;
    	text-align: left;
    }
    
    /* This is to make the text wrap nicely around the photos. */
    img.aboutpic { 
        float: left; 
        margin: 4px;
    }
    
    /* This is to centre the images in the table on the Photo gallery. */
    table.photos { 
    	margin-left:auto; 
    	margin-right:auto;
    }
    
    /* Mouseover effect on normal links (excludes NavBar) */
    a:hover {
    	background-color: #369;
    	color: #fff;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    CSS without its corresponding html is useless. Please post your complete code or a link to your page would be much better!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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