Newbie looking for some CSS help ^^

**TreLeCoco** · Apr 28, 2009 18:00

I've recently started doing web design using CSS to control the layout, but I keep running into trouble with a few things >.<;

edit - I figured out some of the problems I was having, but still need help on two >.<;

Firstly, here is my HTML and CSS for the webpage:

Code:

/*
CSS for My Portfolio
*/


/*
Overall Site Properties
*/
body {
	font-family: verdana, helvetica, arial, sans-serif;
	background-color: #abcdef;
	text-align:center;
	padding: 0;
}


/*
Container Property
*/
#container {
	width:800px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
}	


/*
Header Properties
*/
#header {
	height: 150px;
	text-align: right;
	position: relative;
	top: 20px;
}


/*
Navigation Properties
*/
#navigation {
	background-color:#FFFF99;
	width: 800px;
	height: 40px;	
}

#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#navigation li {
	margin: 10px;
	padding: 0;
	float: left;
	position: relative;
	top: -30px;
}

/*
Navigation Link Properties\
*/

#navigation img {
	border: none; 
}



/*
Main Contents Properties
*/

#content {

	background-color:#FFFFFF;
	min-height: 500px;
}

#bodycopy {
	float: left;
	position: absolute;
	width: 598px;
	min-height: 500px;
	padding-left: 5px;
}

#sidebar {
	background-color: #CCCC99;
	float: right;
	position: relative;
	width: 200px;
	min-height: 500px;
	padding-left: 5px;
}



/*
Footer Properties
*/
#footer {

	background-color:#FFFF99;
	height: 50px;
	text-align: center;
	padding-bottom: 15px;
	padding-top: 1px;
}

Code:

<body>
	<div id="container">
		<div id="header">
    		<img src="images/navicon1.gif" height="150px" width="400px" alt="Logo"/>
		</div>
		<div id="navigation">
   		  <ul>
			  <li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Home" /></li>
				<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="About" /></li>
				<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Gallery" /></li>
				<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Contact" /></li>
            	<li class="nav"><img src="images/navicon1.gif" height="40px" width="40px" alt="Link" /></li>
			</ul>
		</div>
  		<div id="content">
        	<div id="bodycopy">
				<h2>Update</h2>
				<h3>27/04/09, 2.45pm</h3>
			<p>Information here :)
        	</div>
		  	<div id="sidebar">
			<h2>Welcome</h2>
		  <p>This is the personal portfolio of Chloe Runco, containing design work from my past courses and industry experience - including company branding and stationary, advertising, photography, vector designs, and pixel art.		  
			</div>
		</div>
		<div id="footer">
			<p>All content &copy; Tre Le Coco 2006-2009
		<br>| Site Map | FAQ | Contact | Commission | Link |
        </div>
	</div>
</body>
</html>

I had to remove the links because of the stupid ruling this forum has, and I can't add screenshots either xP so I can't visually show my problem.

For some reason, the footer looks different between IE and FF - IE looks fine, but in FF the text within the footer seems to be pushed down to the bottom, how can i get it back up and sit in the middle?

Another thing I would like help with, i've most likely coded the navigation links wrong for this, but when a person hovers their mouse over the image im using for my links, i want it to change to another image, how do i do this using the CSS? I know how to do it with text in that section instead of an image, so its confused with it now >.<;

I thank anyone who can help me out with this! Truly grateful

**molona** · Apr 28, 2009 22:50

if you want to change the pictures with CSS only, they should be background pictures.

Regarding the footer, try to put the copyright in one and the links in another . The should only be used in extreme cases.

Also, try to add a clear:both in your CSS.

I am not sure what's the problem now (I need to go to work

) but if that doesn't work, I will have a look later.

**J32** · Apr 28, 2009 23:09

close the tags and delete the height in the #footer css.

**molona** · Apr 29, 2009 03:48

Originally Posted by J32

close the tags and delete the height in the #footer css.

I didn't even see that the tag was open (I should have scrolled to the right

)

Definately, that will help!

**TreLeCoco** · May 2, 2009 17:13

thanks for the help on the footer ^^ I closed the too, i have a bad habit of forgetting to close them >.<;

what does the clear:both actually do? I've never used one before

**Black Max** · May 2, 2009 17:22

Originally Posted by TreLeCoco

what does the clear:both actually do? I've never used one before

http://reference.sitepoint.com/css/clear

The SP reference in the above link is invaluable.

**Dan Schulz** · May 2, 2009 20:43

Just so you know, you probably don't need the DIV around your menu. You should be able to put the ID on the menu UL and then style it directly.

I also recommend (though many don't) using some sort of a basic "reset" CSS rule at the top of your stylesheet to remove the margins and padding from almost every HTML element. I also recommend setting a default font size for your text (body text and headings).

I don't have access to "my" computer at the moment, so I can't load your code into my armada of browsers to see what else I'd recommend changing though. I will when I can though (work load permitting, of course).

User Tag List

Thread: Newbie looking for some CSS help ^^

Thread Tools

Display

Newbie looking for some CSS help ^^

Bookmarks

Bookmarks

Posting Permissions