Moh
18-06-2008, 01:08 PM
I am currently having a problem with a navigation.
With 3 divs in a row
Left|Mid|Right
The only problem is, the right is merging with the mid, and the left isn't displaying at all (or could be behind the mid).
My full code is:
<html>
<head>
<style>
body {
background:#FFFFFF url('images/bg.gif') repeat-x fixed; margin-top:0px;
background-possision:top;
}
.container {
width:960px;
margin:auto;
}
.header {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
height: 100px;
width:960px;
color:#6E97C5;
}
.nav_contain {
height:51px;
width:960px;
}
.nav_left {
float:left;
height:51px;
width:15px;
background-image: url(images/nav-left.gif);
background-repeat: no-repeat;
}
.nav_mid {
float:left;
height:51px;
width:930px;
color:#FFFFFF;
background-image: url(images/nav-mid.gif);
background-repeat: repeat-x;
}
.nav_right {
float:right;
height:51px;
width:15px;
background-image: url(images/nav-right.gif);
background-repeat: no-repeat;
}
.menu_item {
float: left;
position: relative;
padding-top:15px;
margin-right: 20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="nav_contain">
<div class="nav_left"><div>
<div class="nav_mid">
<div class="menu_item">HOME</div>
<div class="menu_item">IMAGES</div>
<div class="menu_item">VIDEOS</div>
<div class="nav_right"><div>
</div>
</div>
</body>
</html>Thanks.
With 3 divs in a row
Left|Mid|Right
The only problem is, the right is merging with the mid, and the left isn't displaying at all (or could be behind the mid).
My full code is:
<html>
<head>
<style>
body {
background:#FFFFFF url('images/bg.gif') repeat-x fixed; margin-top:0px;
background-possision:top;
}
.container {
width:960px;
margin:auto;
}
.header {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
height: 100px;
width:960px;
color:#6E97C5;
}
.nav_contain {
height:51px;
width:960px;
}
.nav_left {
float:left;
height:51px;
width:15px;
background-image: url(images/nav-left.gif);
background-repeat: no-repeat;
}
.nav_mid {
float:left;
height:51px;
width:930px;
color:#FFFFFF;
background-image: url(images/nav-mid.gif);
background-repeat: repeat-x;
}
.nav_right {
float:right;
height:51px;
width:15px;
background-image: url(images/nav-right.gif);
background-repeat: no-repeat;
}
.menu_item {
float: left;
position: relative;
padding-top:15px;
margin-right: 20px;
font-weight:bold;
}
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="nav_contain">
<div class="nav_left"><div>
<div class="nav_mid">
<div class="menu_item">HOME</div>
<div class="menu_item">IMAGES</div>
<div class="menu_item">VIDEOS</div>
<div class="nav_right"><div>
</div>
</div>
</body>
</html>Thanks.