Question

Vernier · 05-29-2012, 06:39 PM

Hey, when I use this code:

html:

Code:

<!DOCTYPE html>
<html>
<head>
<LINK href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="logo"></div>
<div id="navigation">

<div class="home"></div>
<div class="upload"></div>
<div class="about"></div>
<div class="subjects"></div>

</div>
</body>
</html>

and

css:

Code:

body {
background-color: #f4f4f4;
}

#logo {
background: url('images/logo.gif');
background-position: center;
background-repeat: no-repeat;
height: 126px;
}

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

.home {
background: url('images/nav-home.gif');
background-repeat: no-repeat;
height: 41px;
background-position: center;
margin: 0;
padding: 5px;
}

.about {
background: url('images/nav-about.gif');
background-repeat: no-repeat;
height: 41px;
background-position: center;
margin: 0;
padding: 5px;
}

.upload {
background: url('images/nav-upload.gif');
background-repeat: no-repeat;
height: 41px;
background-position: center;
margin: 0;
padding: 5px;
}

.subjects {
background: url('images/nav-subjects.gif');
background-repeat: no-repeat;
height: 41px;
background-position: center;
margin: 0;
padding: 5px;
}

I get this result:

How can I get it to display inline, such as:

Code:

Menu Item | Menu Item | Menu Item | Menu Item

Instead of the current:

Code:

Menu Item

Menu Item

Menu Item

Menu Item

Cheers

~ David

_Aerospace_Eng_ · 05-29-2012, 07:39 PM

First off, use a list. It looks like your CSS was written for a list but then you changed your HTML. Not sure why you did that.

Code:

<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="logo"></div>
<ul id="navigation">
	<li class="home"></li>
	<li class="upload"></li>
	<li class="about"></li>
	<li class="subjects"></li>
</ul>
</body>
</html>

Then your CSS would look like this

Code:

html, body {
	background-color: #f4f4f4;
	margin:0;
	padding:0;
}
#logo {
	background: url('images/logo.gif');
	background-position: center;
	background-repeat: no-repeat;
	height: 126px;
}
ul#navigation {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow:auto;
}
#navigation li {
	float:left;
}
.home {
	background: url('images/nav-home.gif');
	background-repeat: no-repeat;
	height: 41px;
	background-position: center;
	margin: 0;
	padding: 5px;
}
.about {
	background: url('images/nav-about.gif');
	background-repeat: no-repeat;
	height: 41px;
	background-position: center;
	margin: 0;
	padding: 5px;
}
.upload {
	background: url('images/nav-upload.gif');
	background-repeat: no-repeat;
	height: 41px;
	background-position: center;
	margin: 0;
	padding: 5px;
}
.subjects {
	background: url('images/nav-subjects.gif');
	background-repeat: no-repeat;
	height: 41px;
	background-position: center;
	margin: 0;
	padding: 5px;
}

You will need to give widths to each of your LI elements to match the widths of the background images.