[n00b] Navbar resizing webpage

KeelanM90 · 23-03-2011 02:26PM #1

Hi all,
I'm currently trying to build my first web page for a local club. I'm having a spot of bother with it as my navbar is pushing my webpage out to the right and making the page larger than I would like. Its hard to explain so I'll attach a screenshot.

My code is:
HTML:<Head>
<style media="all" type="text/css">@import "menu/menu_style.css";</style>

<title>Roscrea RFC - Home</title>

</head>

<body>

<div id="Crest">

<img src="menu/images/Crest.png" width="174" height="172" alt="Roscrea RFC"
hspace="257"
vspace="13"
/>

</div>


<div class="wrapper1" >
<div class="wrapper" style="width:1200px;">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation" style="width:1183px";>

<li class="#">
<a href="Home.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">HOME</span>
<span class="menu-right"></span>
</a>
</li>

<li class="#">
<a href="News.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">NEWS</span>
<span class="menu-right"></span>
</a>
</li>

<li class="#">
<a target="_self">
<span class="menu-left"></span>
<span class="menu-mid">HISTORY</span>
<span class="menu-right"></span>

</a>
<div class="sub">
<ul>
<li>
<a href="Club History.html" target="_self">Club History</a>
</li>
<li>
<a href="Club Honours.html" target="_self">Club Honours</a>
</li>
<li>
<a href="History of Roscrea.html" target="_self">History Of Roscrea</a>
</li>
</ul>
</li>

<li class="#">
<a target="_self">
<span class="menu-left"></span>
<span class="menu-mid">ADULT RUGBY</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="First XV.html" target="_self">First XV</a>
</li>
<li>
<a href="Second XV.html" target="_self">Second XV</a>
</li>
</ul>
</li>

<li class="#">
<a target="_self">
<span class="menu-left"></span>
<span class="menu-mid">YOUTH RUGBY</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="Under 19.html" target="_self">Under 19</a>
</li>
<li>
<a href="Under 17.html" target="_self">Under 17</a>
</li>
<li>
<a href="Under 15.html" target="_self">Under 15</a>
</li>
<li>
<a href="Under 11.html" target="_self">Under 11</a>
</li>

</ul>
</li>

<li class="#">
<a href="Gallery.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">GALLERY</span>
<span class="menu-right"></span>
</a>
</li>

<li class="#">
<a href="Shop.html" target="_self">
<span class="menu-left"></span>
<span class="menu-mid">SHOP</span>
<span class="menu-right"></span>
</a>
</li>

<li>
<a href="Contact Us.html" target="_self">

<span class="menu-mid">CONTACT US</span>

</a>
</li>

</ul>
</div>
<div class="nav-right"></div>
<br><br>
</div>
</div>
</div>
<br/><br/><br/>

And CSS:

body{
background: #800000 url('Images/bgimage.jpg') no-repeat top left;
margin: 0;
font-family: ColumnaSolD;
color: #666666;
height:1714px;
border-right:none;

}

.crest{
float:left;
}

.wrapper1{
color: #747474;
font: 13px "Columna SolD";
font-weight:bold;
max-width:500px;

}
.wrapper1 a{
color: #747474;
text-decoration: none;
}
.wrapper1 a:hover {

background: #000000 url(images/nav_hover.png) repeat-x;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
}
.wrapper {
margin: -7px 228px ;

}
.nav {
background: #000000 url(images/nav_bg.png) repeat-x;
float: left;
padding-left: 0px;
padding-right: 20px;
width:861px;
height: 38px;

}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(images/nav_left.png) no-repeat top left;
float: left;
width: 5px;
height: 38px;
}
.nav-right {
background: url(images/nav_right.png) no-repeat top right;
float: left;
width: 5px;
height: 38px;
}
.nav ul {

height: 38px;
float: left;
margin: 0;
padding-top: 0px;
list-style: none;
font-size: 13px;
}
.nav li {
float: left;
height: 38px;
padding: 0 0px;
background: url(images/lidiv.jpg) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
padding: 0px 20px 0px;
}

a .menu-mid {

line-height: 38px;
display: block;
float: left;
padding: 0px 0px 0px;
}

.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -38px;
line-height: 38px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #e2b01d;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}

.nav li .sub {
display: none;
position: absolute;
top: 38px;
left: 0px;
background: url(images/submenu_top.png) no-repeat;
width: 186px;
padding-top: 0px;
}
.nav li ul {
background: url(images/submenu_bg.png) repeat-y;
width: 130px;
height: auto;
margin: 0;
padding: 0 10px 10px;
list-style: none;
font-size: 13px;
}

.nav li:hover li,
.nav li.active li {

padding: 1px 0 2px;
border-bottom: 0px #999 solid;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #747474;
background: none !important;
line-height: normal;
width: 120px;
padding: 14px 0px 9px 10px;
text-indent: 0px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #ffffff;
background: transparent url(images/Divid1.png) repeat-y !important;
border-left: 0px;
text-decoration: none;
font-weight: bold;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #2f2f2f;
background: #2f2f2f !important;
text-decoration: none;
line-height: normal;
}
/**/

Any help is greatly appreciated and I understand if no-one can go through it for me! Thanks a million

Malice · 23-03-2011 02:55PM

The screenshot is coming up as a red X for me. I'm in work though so that could have something to do with it. Also I'd recommend wrapping your HTML and CSS in code tags to improve readability.

tricky D · 23-03-2011 03:07PM

ul id="navigation" style="width:1183px

might be the cause, pushing that width from the navwrapper not the page left hand side.

Get yourself firebug to diagnose this type of stuff.

KeelanM90 · 23-03-2011 04:06PM

tricky D wrote: »

ul id="navigation" style="width:1183px

might be the cause, pushing that width from the navwrapper not the page rhs

Get yourself firebug to diagnose this type of stuff.

That was it thanks a million! Thanks for the suggestion too

[n00b] Navbar resizing webpage

Comments