Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest
[n00b] Navbar resizing webpage
-
23-03-2011 1:26pm#1Hi 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>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="menu/includes/ie6.css" media="screen"/>
<![endif]-->
<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 million0
Comments
Advertisement