7 replies [Last post]
oscarm
oscarm's picture
Offline
newbie
Last seen: 8 years 17 weeks ago
Timezone: GMT+1
Joined: 2011-08-08
Posts: 1
Points: 2

I am making my first website so I am new to css, but have run into a problem. I have tried loads of workarounds but can't find a solution. My website isn't up yet, I am just working in dreamweaver.
What I want is the navigation bar right at the top of the page and run the full width of the browser but have the buttons themselves sharing center (I don't mean center the text within the buttons) so that stretch only to the width of the main container, let's say 900px, which will contain my text
the space either side of the buttons I would like another colour and possibly a home button in the far left corner. Any help would be appreciated. As I said I am new so there are probably a lot of random things in my code at the moment.

My Html is

<!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>
<link rel="stylesheet" href="bath.css" type="text/css" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>new</title>
</head>
 
 
<body>
 
<ul id="nav">
		<li class="about" ><a  href="#">one</a></li>
		<li class="products" ><a href="#">two</a></li>
		<li class="three" ><a href="#">three</a></li>
		<li class="four" ><a href="#">four</a></li>
		<li class="five" ><a href="#">five</a></li>
  	</ul>
 
 
<div id="container">
  <div id="container-four">
 
	<p>
  </div>
 
 
</div>
</div>
</body>
</html>

and my css is

@charset "utf-8";
/* CSS Document */
 
body
{
	font:9pt/1.6,color:#111;
	background:#CCC;
	margin:0 auto;
	left:200px;
	padding:0px;
 
}
h1{
	margin-bottom:15px;
 
 
}
 
 
h2, h3, h4, h5, h6, p {
	margin-top: 0;
	margin-bottom:0;
 
}
 
h1{
	font-family:"Segoe UI";
	font-weight:100;
 
 
}
 
p {
	font-size:18px;
	font-family:"Segoe UI";
 
}
 
h2{
 
	font:"Segoe UI";
	font-size:10px;
	background:#92CDDC;
	padding:2px;
}
 
 
h3{
	border-right:#92CDDC;
	border-left-style: solid;
	border-left-width:thick;
	border-left:#92CDDC;
	border-right-style: solid;
	border-righ-width:thick;
	font:Verdana, Geneva, sans-serif;
	font-weight:100;
 
 
 
 
}
 
 
#container
 
{	
 
	background:#FFF;
	height:800px;
	width:900px;
	margin: 0px auto;
	padding:0px;
 
}
 
 
 
#container-two{
	width:860px;
	background:#92CDDC;
	height:10px;
	float:left;
	margin: 0 auto;
 
 
 
}
 
#container-four{
	width:850px;
	background:#FFF;
	height:700px;
	float:left;
	border:#666;
	border-style:solid;
	border-width:5px;
	border-top-style:solid;
	border-top-color:#92CDDC;
	padding:20px;
	margin:0px, auto;
 
}
 
 
ul li.gom{
	background-image:url(Untitled.jpg);
	height:50px;
	width:50px;
	float:left;
}
 
 
 
#nav {
	width: 900px;
	height:68px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background-color: #666; }
 
 
 
 
 
#nav li {
	float: left; 
	width:20%;
	margin:0 auto;
 
	}
#nav li a {
	padding: 20px 20px;
	text-decoration: none;
	font-family:"Segoe UI";
	color: #FFF;
	font-size:20px;
	text-align:center;
	display:block;
 
	}
 
 
#nav li a:hover {
	background-color: #fff;
}
 
 
 
#nav .about a{
	background-color:#666;	}
 
#nav .products a{
	background-color:#666;	}
 
#nav .three a{
	background-color:#666;	}	
 
#nav .four a{
	background-color:#666;	}
 
#nav .five a{
	background-color:#666;	}
 
#nav .about a:hover {
	color:#92CDDC;
	background-color: #fff;}
 
#nav .products a:hover {
	color:#98D798;
	background-color: #fff; }
 
#nav .three a:hover {
	color:#FDD97F;
	background-color: #fff; }
 
#nav .four a:hover {
	color:#FF7C80;
	background-color: #fff; }
 
#nav .five a:hover {
	color:#A38EBC;
	background-color: #fff; }

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

There's a million different

There's a million different options depending on what else will be on your page.

You could just set the background of the nav-bar to be the background-image of BODY, which would make it look like it's the background of the nav.

Or you could add an extra div to contain your BG-image, or add borders, or fiddle around with left-and-right-margins, and use absolute positioning to put a HOME button at the top.

Give us more information and we can better help you.

Verschwindende wrote:
  • CSS doesn't make pies

crookward
crookward's picture
Offline
Regular
Last seen: 8 years 10 weeks ago
Timezone: GMT-5
Joined: 2011-01-12
Posts: 21
Points: 26

I use margins

I'd use margin-right attribute to space out horizontal nav links, and then place an inline style on the first li to get everything evenly spaced from left to right.

<ul>
   <li style="margin-left:15px;"><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
   <!-- etc... -->
</ul>

ul {
   width: 900px;
   height:68px;
   padding: 0;
   list-style: none;
   background-color: #666; 
}
 
ul li {
   float: left;
   margin-right: 15px; /* Tweak this space until your nav stretches to your liking */
}

~James~

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Don't overcomplicate things.

Don't overcomplicate things. Inline styling in a CSS-based layout kind of defeats the point.

Verschwindende wrote:
  • CSS doesn't make pies

crookward
crookward's picture
Offline
Regular
Last seen: 8 years 10 weeks ago
Timezone: GMT-5
Joined: 2011-01-12
Posts: 21
Points: 26

True...

I get your point; you could add left margin to your ul in this case. That being said, even though inline styles shouldn't be used often, in certain specific situations it makes sense (to me anyway). Maybe you have only one bit of text & the style is never reused. You're deciding between...

.unique-text { font-size: 17px; }
<p class="unique-text">the text</p>

or

<p style="font-size:17px;">the text</p>

Why not just place it inline?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

If you can find an actual

If you can find an actual example where that happens then I'll gladly find you a different piece of CSS to target the element.

I don't think there is ever a need for inline styling.

Don't forget (ignoring for the time-being the slightly iffy browser support) you can use first- and last-child selectors, sibling selectors, descendant and direct descendant > selectors, hell you can even target elements that have inline styling already applied to them!

Verschwindende wrote:
  • CSS doesn't make pies

crookward
crookward's picture
Offline
Regular
Last seen: 8 years 10 weeks ago
Timezone: GMT-5
Joined: 2011-01-12
Posts: 21
Points: 26

Fair enough.

I get your point. I've read about, but haven't used any of those special selectors due to the browser issues, but curious if there is a way to accomplish the following with cross browser compatibility?

/* CSS */
 
#content p {
   font-size: 16px;
   font-family: verdana;
}
 
<!-- HTML -->
 
<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
  <p>I want only this line to be underlined without adding anything to this p tag.</p>
</div>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

#content p:last-child

/edited to show browser support

#content p + p {text-decoration: underline;}

supported in IE7+, Firefox 1+, Safari 1+, Opera 6+ and Chrome 0.2+

You could also use:

#content p:last-child {text-decoration: underline;}

Supported in IE9+, FF1+, Safari 3.1+, Opera 9.5+ and Chrome 0.4+

Verschwindende wrote:
  • CSS doesn't make pies