...

View Full Version : Question



Vernier
05-29-2012, 07: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, 08: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum