css and div tag format help

Discussion in 'Web Design and Development' started by canucksfan88, May 31, 2010.

  1. canucksfan88 macrumors 6502a

    canucksfan88

    Joined:
    Oct 28, 2007
    #1
    Hey everyone, im creating a website using CSS and HTML, but I'm not sure how to have the menu bar next to the content.

    originally i floated the div tags (left and right) but then it caused an error with the footer div tag

    below is the code.

    if you have any suggestions on what to do, or improvements for the site, please let me know! and thanks

    example of site: http://www.sfu.ca/cmnsfrosh/cmnsu
    code follows

    HTML:
    <!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>Communication Student Union - Home Page</title>
    </head>
    
    <body>
    <link href="cmnsu.css" rel="stylesheet" type="text/css">
    <br />
    <br />
    <br />
    
    <div id="container">
    	<div id="banner"></div>
    		<div id="maincontent">
    		<div id="leftnav">
            <ul>
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="What is Communications Frosh?">Events</a></li>
                <li><a href="#" title="What events are there?">About</a></li>
                <li><a href="#" title="Who are the Directors?">Events</a></li>
                <li><a href="#" title="Who are the Mentors?">Resources</a></li>
                <li><a href="#" title="Register Now!">Contact</a></li>
     
            </ul>
           
            </div>
    		<div id="middle">
                        <h1>Welcome to Communication Frosh 2010</h1>
                <p>
                
                Hey first years! Is television, radio, Internet, journalism, fashion, or 					
                graphics your thing?<br /><br />
                  
                Then get your Frosh on at this year’s SFU Communication Frosh 2009!<br />
                    
                Communication Frosh 2009 is an exciting two-day orientation to the School of
                Communication for first year students (aka Froshees). This amazing program is 
                put on by the Communication Student Union (CMNSU) and is a chance for Froshees 
                to meet new people, discover valuable resources and have the time of their 
                lives all before the end of their first week at SFU!<br /><br />
                On Friday, September 11th and Saturday, September 12th, join other first year 
                students as they get a chance to learn things like:<br /><br />
                >	How to be the ultimate Communication student<br />
                >	What exactly the Sonic Room is<br />
                >	Why Communication courses are so awesome<br />
                >	Where the best place to sleep at SFU is in case a blizzard hits (it tends 
                to happen when your school's on a mountain…) <br />
                >	Which industries can you work in once you've survived SFU and finally 
                graduated<br />
                Spaces are limited, so don’t miss out…Register today! <br /></p>
            
            
            </div>
        </div>
    	</div>
       
    </div>
     <div id="footer">foot</div>	
    </body>
    </html>

    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    body{
    
    	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color:#000000;
    	margin-top: 0;
    	margin-bottom: 0;
    	line-height: 18px; 
    	background-color: #ffffff;
    
    
    }
    
    #container{
    	margin: 0px auto 0px auto;
    	width: 1000px;
    	height:auto;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-top: 1px solid #000000;
    	background:3a3a3e;
    }
    
    #banner{
    	background-image: url("banner_home.png");
    	background-repeat: no-repeat;
    	height: 300px;
    	border-left: 1px solid #c3d1df;
    	border-right: 1px solid #c3d1df;
    	border-bottom: 1px solid #c3d1df;
    	border-top: 1px solid #c3d1df;
    }
    
    #maincontent{
    	width: 1000px;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-top: 1px solid #000000;
    
    
    }
    
    #leftnav{
    	list-style:none;
    	width:200px;
    	padding:0px;
    	float: left;
    	display:inline;
    		border-left: 1px solid #c3d1df;
    	border-right: 1px solid #c3d1df;
    	border-bottom: 1px solid #c3d1df;
    	border-top: 1px solid #c3d1df;
    }
    
    #middle{
    	width:795px;
    	height:auto;
    	padding:0px;
    	float: right;
    	display:inline;
    	border-left: 1px solid #c3d1df;
    	border-right: 1px solid #c3d1df;
    	border-bottom: 1px solid #c3d1df;
    	border-top: 1px solid #c3d1df;
    }
    
    
    #rightnav{
    	width:0px;
    	padding:0px;
    	float:left;
    	border-left: 1px solid #c3d1df;
    	border-right: 1px solid #c3d1df;
    	border-bottom: 1px solid #c3d1df;
    	border-top: 1px solid #c3d1df;
    }
    
    #footer{
    	width: 1000px;
    	height: 25px;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	border-top: 1px solid #000000;
    
    	
    }
    
    ul {
    
    width:140px;
    list-style:none;
    list-style-type:none;
    margin:0 auto;
    padding:0;
    position: inherit;
    
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    
    }
    
    li {
    list-style:none;
    display:block;
    position:relative;
    border-width:1px 0;
    border-color:#27bbbb;
    border-style:solid;
    margin:4px 1px;
    }
    
    
    li a {
    list-style:none;
    display:block;
    position:relative;
    margin:0 -1px;
    border-width:0 1px;
    /* links bacground colour idle */
    border-color:#27bbbb;
    border-style:solid;
    background-color:#27bbbb;
    padding:2px 6px;
    color:#FFFFFF;
    text-decoration:none;
    }
    
    li:hover {
    list-style:none;
    border-color:#aaa;
    }
    
    li a:hover {
    /* hover background colour */
    list-style:none;
    border-color:#aaa;
    color:#333;
    background-color:#FFFFFF;
    }
     
  2. design-is macrumors 65816

    design-is

    Joined:
    Oct 17, 2007
    Location:
    London / U.K.
    #2
    Hi canucksfan88 :)

    Sorry, not sure what you mean...

    I see the site with the footer below the content, where I guess it should be. And the menu bar is to the left of the main content.

    Did you fix it already?

    /Doug
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    The link tag can not go inside the body tag. It's only allowed inside the head tag.

    You have a CSS syntax issue for this line in container,
    Code:
    background:3a3a3e;
    Colors need to start with a #.
     
  4. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #4
    You'll have to be specific about what the error is. I see that your footer div is outside of the shaded area, but not sure if that is what you want or not.

    Assuming not you just need to move the footer inside the div above, or re-style it to match the div above (id="container")

    There aren't any significant code errors (i.e missing tags) as reported by safari, just a few validation bits as pointed out by angelwatt
     
  5. canucksfan88 thread starter macrumors 6502a

    canucksfan88

    Joined:
    Oct 28, 2007
    #5
    hey guys, thanks for the help

    it seems that when i preview in firefox via Dreamweaver (F12), the site displays weird

    the error im having is i cant seem to get the footer aligned within the container.
    [​IMG]


    this is what it looks like, when i go to the url directly
    [​IMG]
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    If you want the footer to be centered like the container you need the margin line from the container,
    Code:
    margin: 0 auto;
    The auto (which is applied to left and right) is the key part for centering the element.
     
  7. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #7
    And unless you're targeting IE 5 then you should be using HTML 4.01 or XHTML 1.0 STRICT instead of transitional.
     

Share This Page