1 reply [Last post]
smythe01
Offline
newbie
red deer
Last seen: 9 years 40 weeks ago
red deer
Timezone: GMT-7
Joined: 2010-01-08
Posts: 1
Points: 2

I've been building my first CSS website and I have hit a wall. I'm not sure of the best way to build the top banner, normally I would split it up in tables and do a rollover for the links, but I know there is a better way in using CSS, I just don't know how.

Any suggestions on what would be the best way to set this up? I am a noob at this so any help is greatly appreciated.

http://www.robraeclothiers.com/website/dress.html

this is my css code:

@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
body {
	color: #B0B0B0;
	background-image: url(robraeback.gif);
	background-repeat: repeat;
	}
	p {
	font-size: 8pt;
	line-height: 1.2em;
	margin-bottom: 0em;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	padding-left: 20px;
	padding-right: 20px;
}
	a:hover, a:active { text-decoration: underline; }
	h1 {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #CCCCCC;
	padding-left: 20px;
	padding-top: 20px;
	font-size: 9pt;
}
	.clear { clear: both; }
	div#page-wrap {
	width:900px;
	margin: 0 auto;
	border-right-width: 0px;
	border-right-style: none;
}
	div#nav {
	height: 146px;
	width: 900px;
	background-image: url(images/robbanner.gif);
	background-repeat: no-repeat;
	vertical-align: top;
	list-style: none;
	padding-left: 125px;
	padding-top: 0px;
	 }
	div#main-content{
	width: 900px;
	margin: 0 auto;
	background-color: #000000;
}
	div#flash-content{
	float: left;
	width: 727px;
	height: 450px;
	border-left-width: 3px;
	border-left-style: solid;
	border-left-color: #999999;
	margin: 0px;
	border-right-width: 0px;
	border-right-style: none;
}	img.floatRight {
	float: right;
	margin-top: 70px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
}
	div#sidebar{
	float: left;
	width: 167px;
	height: 450px;
	background-color: #000000;
	border-right-width: 3px;
	border-right-style: solid;
	border-right-color: #999999;
	margin: 0px;
	padding-top: 0px;
	border-left-width: 0px;
	border-left-style: none;
}
div#footer{
	color: #999999;
	text-transform: uppercase;
	text-align: center;
	background-color: #000000;
	border-top-width: 0px;
	border-top-style: none;
	padding-top: 40px;
	padding-right: 0;
	padding-bottom: 350px;
	padding-left: 0;
	bottom: auto;
	background-position: top;
	border-right-width: 3px;
	border-left-width: 3px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #999999;
	border-bottom-color: #999999;
	}

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 13 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Take the navigation off of

Take the navigation off of the background image.
Mark it up as an unordered list.
Check out - http://css.maxdesign.com.au/listamatic/horizontal01.htm
Give the anchors display: block and float: left
Give each li a class or ID and provide each anchor it's own background image and height and width of the graphic for your page. - http://css-tricks.com/css-image-replacement/ (I personally use Technique #3)

That should get you going in the right direction.

On a side note.
You should be using a Strict doctype, since this is a new site.
You should only be using an H1 once per page, and it's debatable as to if it should be the page or the logo/company name. Both make sense to me, so I tend to leave that subject up to the person's own vices.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph