Question [Archive] - CodingForums.com

Vernier

05-29-2012, 06:39 PM

Hey, when I use this code:

html:

<!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:

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:

http://img571.imageshack.us/img571/3325/13ad70afe06e40ba9e494a4.png

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

Menu Item | Menu Item | Menu Item | Menu Item

Instead of the current:

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.
<!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
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.