feckin css

axer · 21-07-2006 8:31pm #1

Hey y'all,

taking the plunge into css but having difficulties. I am creating a horizontal menu in a page. I created a seperate div for each menu button and want them all to sit one after the other horizontally centred in the middle of the page (so that they fit into the cream strip - you'll see when you look at the page). I cannot for the life of me figure out how to do it.

The page is here:
http://d2602752.u29.ballinasloeweb.com/

Here is the 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>
<title>Test Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div class="frame">

	<div class="contentheader"><img src="images/top_design.jpg" alt="Top design" width="663" height="88" /></div>


	<div class="contentleft"><img src="images/top_left_corner.jpg" alt="Top Left Rounded Corner" width="75" height="75" /></div>
	
	
	<div class="contentcenter">
	  	<img src="images/temp_title.jpg" alt="Temporary Title" width="280" height="36" />
		<div class="maincontent">
					<div class="menuitems">Home</div>
					<div class="menuitems">About Us</div>
					<div class="menuitems">Products</div>
					<div class="menuitems">Contact Us</div>
		</div>

	</div>
	
	<div class="contentright"> 
	  <div align="right"><img src="images/top_right_corner.jpg" alt="Top Right Rounded Corner" width="75" height="75" /></div>
	</div>
	<br clear="all" />	
</div>

</body>
</html>

Here is the css:

body {
		text-align:center;
		background-color:#fffde5;
		}
	
	.frame {
		width:779px;
		margin-right:auto;
		margin-left:auto;
		margin-top:30px;
		padding:0px;
		text-align:center;
		background-image:url(../images/mainbg.jpg);
		background-repeat:repeat-y;
		}
		
	.contentleft {
		width:75px;
		padding:0px;
		float:left;
		}
	
	.contentcenter {
		width:629px;
		padding:0px;
		float:left;
		background:#fffef5;
		margin-top:10px;
		text-align:center;
		}
		
	.maincontent {
		padding-top:11px;
		width:100%;
		height:116px;
		background:#fffef5;
		background-image:url(../images/menu_design.jpg);
		background-repeat:no-repeat;
		}
		
	.menuitems {
		width:74px;
		float:left;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}

	.contentright {
		width:75px;
		padding:0px;
		float:left;
		}
	
	.contentheader {
		background:#fffde5;
		}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}

Everything I try either puts the menu items listed one after another vertically or else puts one after another horizontally (which is the way I want it) but aligned to the left i.e. not centred in the page.

Remember I am very new to css. Any help is much appreciated.

Noel.

Goodshape · 21-07-2006 8:34pm

try this :

.menu {
		padding-top:11px;
                margin-right : auto;
                margin-left : auto;
		height:116px;
		background:#fffef5;
		background-image:url(../images/menu_design.jpg);
		background-repeat:no-repeat;
		}

//edit
you may need to make another 100% width containing div for the menu's background design.

axer · 21-07-2006 8:42pm

Goodshape wrote:
try this :
.menu {
		padding-top:11px;
                margin-right : auto;
                margin-left : auto;
		height:116px;
		background:#fffef5;
		background-image:url(../images/menu_design.jpg);
		background-repeat:no-repeat;
		}
//edit
you may need to make another 100% width containing div for the menu's background design.

Hi Goodshape, Thanks for the response but no joy with that. I think I named that class wrong for its purpose. That class is the same width as the centre div (contentcenter) to show the background image that the menu will be displayed over and the main text etc. I have renamed it to maincontent. It is menuitems that I am having the problem with. Should all of those menuitems be put into one bigger div and centred inside that or can I float each next to the other and centre the whole lot like you would do with a images in html?

Goodshape · 21-07-2006 8:57pm

Ok, try something like this instead :

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>
<title>Test Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div class="frame">

	<div class="contentheader"><img src="images/top_design.jpg" alt="Top design" width="663" height="88" /></div>


	<div class="contentleft"><img src="images/top_left_corner.jpg" alt="Top Left Rounded Corner" width="75" height="75" /></div>
	
	
	<div class="contentcenter">
	  	<img src="images/temp_title.jpg" alt="Temporary Title" width="280" height="36" />
		<div class="maincontent">
				<div class="menu">
					<a href="blah">Home</a>
					<a href="blah">About Us</a>
					<a href="blah">Products</a>
					<a href="blah">Contact Us</a>
				</div>
		</div>

	</div>
	
	<div class="contentright"> 
	  <div align="right"><img src="images/top_right_corner.jpg" alt="Top Right Rounded Corner" width="75" height="75" /></div>
	</div>
	<br clear="all" />	
</div>

</body>
</html>

CSS ::

body {
		text-align:center;
		background-color:#fffde5;
		}
	
	.frame {
		width:779px;
		margin-right:auto;
		margin-left:auto;
		margin-top:30px;
		padding:0px;
		text-align:center;
		background-image:url(../images/mainbg.jpg);
		background-repeat:repeat-y;
		}
		
	.contentleft {
		width:75px;
		padding:0px;
		float:left;
		}
	
	.contentcenter {
		width:629px;
		padding:0px;
		float:left;
		background:#fffef5;
		margin-top:10px;
		text-align:center;
		}
		
	.maincontent {
		padding-top:11px;
		height:116px;
		background:#fffef5;
		background-image:url(../images/menu_design.jpg);
		background-repeat:no-repeat;
		}
		
	.menu {
		margin-right : auto;
		margin-left : auto
		white-space : nowrap;
	}
	
	.menu a {
		padding-left : 4px;
		padding-right : 4px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:12px;
		}

	.contentright {
		width:75px;
		padding:0px;
		float:left;
		}
	
	.contentheader {
		background:#fffde5;
		}
		
	p,h1,pre {
		margin:0px 10px 10px 10px;
		}
		
	h1 {
		font-size:14px;
		padding-top:10px;
		}
		
	#contentheader h1 {
		font-size:14px;
		padding:10px;
		margin:0px;
		}
	
	#contentright p { font-size:10px}

I got rid of the <div>'s for each menu item and put in <a> instead (this is assuming you want the menu items to be links in the endup), then put all the menu items in a <div class="menu">. Seems to work in IE6 and Firefox 1.5.

You might want to mess around with the padding on the ".menu a" class to get it right.

Goodshape · 21-07-2006 9:01pm

Heh, actually most of that doesn't even seem necessary. You can safely remove the CSS specifications for the menu class.

axer · 22-07-2006 11:12am

Thanks a million Goodshape. You saved me alot of headbanging.

feckin css

Comments