CSS help!

[Hamish]

I'm trying to get my navigation bar here to stay in the middle:

http://www.students.ncl.ac.uk/andrew.macbeth/index.php

at the moment it moves when the window is resized. when users log in it also gets loads more options on, so it either needs to start off on the left or resize correctly.

This is what it looks like when logged in as admin. Any ideas?

cheers

 

[jcb33]

I have had a quick play, and got it so your login section is in the header, and so that your menu is lined up with the left hand side of the header, and does not move, however It is above the "LCC DT Test Centre" text, I will keep playing and see what I can do, here is the new CSS...

I have altered the following:

/* LCC Website - style sheet, do not copy any of this without permission from the website owners */

body {
	font: 12px Trebuchet MS, verdana, helvetica, arial, sans-serif;
	background: #E3DDDD;
	color: #333333;
	text-align: justify;
	line-height: 20px;
	margin:30px 0 0 0;
	padding:0;
}

#head {
	/* top right bottom left */
	margin: 50px 5% 20px 210px;
	padding: 15px;
	background-image: url("images/header2.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	}


A:link, A:visited, A:active 
	{ color: #304C80; }
	
A:hover 
	{ color: #CA453F; }

h1, h2 {
	color: #330510;
	letter-spacing: 2px;
	text-transform: capitalize;
	}

h1 {
	font-size: 130%;
	}

h2 {
	font-size: 120%;
	}

img {
	margin: 5px;
	border: 1px solid black;
	}
	
img.icon {
	border: 0;
	margin: 0;
}

img.right {
	float: right;
	margin-left: 8px;
	}
	
img.left {
	float: left;
	margin-right: 8px;
	}
	
img.center {
	padding-left: auto;
	padding-right: auto;
	}

#container, #footer, #head {
	margin-left: 20%; 
	margin-right: 20%;
	width: 707px;
	border: 1px solid black;
	padding:20px;
	background: white;
	}
	
#container {
	background-image: url('images/lccback.gif');
	background-repeat: no-repeat;
	background-position: bottom right;
	}

#footer {
	text-align: right;
	font-size: 80%;
	margin: 10px 20% 50px 20%;
	}

/********************** NAVIGATION *****************/
#navigation {
	margin-top: 75px;
	margin-left: 20%;
	margin-right:20%;
}
#navigation ul {
	margin-top: 75%;
	padding:0;
	margin:0;
	}
#navigation li {
	float: left;
	list-style-type: none;
	background-color: #de3901;
	border: 1px solid black;
	font-family: 'Trebuchet MS', sans-serif;
	}
	
#navigation a {
	display:block;
	padding:2px 23px 2px 23px;
	color: white;
	text-decoration: none;
	font-size: 125%;
	}
	
#navigation A:hover {
	text-decoration: underline;
	}


tr.top {
	background-color: #C0C0C0;
	}
tr.on {
	background-color: #DDDDDD;
	}
tr.off {
	background-color: white;
	}
	
	/* Common CSS Stuff */


#messagebox {
	margin: 30%;
	padding: 10px;
	border: 1px solid black;
	background: white;
	}
	
#messageboxfooter { 
	position: absolute;
	top: 1px;
	border = 1px;
	color: black;
	background: white;
	font-size: 75%;
}

INPUT {
	color: white;
	font-size: 110%;
	background-color: #EE5020;
	border: 1px solid black;
	/*direction: rtl;*/
	}

#login {
	margin-top: -60px;
	font-size: 100%;
	float: right;
	margin-right: 50%
	}
	
#login span {
	font-weight: bold;
	}
	
#login {
	font-size: 80%;
	float: right;
	margin-right: 10%
	}
	
#login span {
	font-weight: bold;
	}

Even so however, this is still only in firefox, and not IE, your site is broken in IE to start with, and it will take a while to fix!

My best advice would be to try and do the CSS without any "Position: Absolute;" in it!

 

[psyr33n]

Rather than align each element to the centre, create a wrapper and align that - then all child elements will be lined up by default.