Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

css and div tag format help

canucksfan88

canucksfan88

macrumors 6502a
Original poster
Oct 28, 2007
560
64
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;
}
 
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
 
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 #.
 
canucksfan88 said:
originally i floated the div tags (left and right) but then it caused an error with the footer div tag
Click to expand...

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
 
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.



this is what it looks like, when i go to the url directly
 
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.
 
angelwatt said:
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.
Click to expand...

And unless you're targeting IE 5 then you should be using HTML 4.01 or XHTML 1.0 STRICT instead of transitional.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back