PDA

View Full Version : Resolved fluid & fixed navigation has me stumped!



adamkelly
Apr 15th, 2010, 01:15 PM
Hey guys,

I'm absolutely stumped on how to code something. If you look at the image attached, the navigation strip will be stretched to fit any screen resolution but I can't simply repeat the navigation strip across the whole page as a selected menu item will have a cut out bit. The site needs to be centred too.

This was my best guess but having percentages made the fixed width cells change size:



<table width="100%" align="center" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="25%" class="nav-bg"></td>
<td width="91px" class="nav-bg">Menu Item</td>
<td width="91px" class="nav-bg">Menu Item</td>
<td width="91px" class="nav-bg">Menu Item</td>
<td width="91px" class="nav-bg">Menu Item</td>
<td width="91px" class="nav-bg">Menu Item</td>
<td width="441px" class="nav-bg"></td>
<td width="25%" class="nav-bg"></td>
</tr>
</table>


Anyone have a clue as to how I can code this? The a:selected background for each link will be a png with transparency to allow for a change of background colour in case it runs in to the blue gap between the two DIVs.

I'm stumped so any help would be appreciated :)

Thanks,

Adam

adamkelly
Apr 15th, 2010, 01:27 PM
Tried using fixed attachment for a background image with the grey strip missing from the middle 896px (where site content will be) then a centralised DIV where I could of utilized an unordered list but obviously the fixed background means the grey strip will stay in position and be visible when scrolling down the page!

truly stumped!

adamkelly
Apr 15th, 2010, 02:26 PM
I've managed to crack it!

Here's the code for anyone interested:

CSS:


body {
background-color: #6284b8;
margin: 0px;
min-width: 920px;
}

.nav-bg {
height: 42px;
background-image: url(images/nav-bg.png);
background-repeat: repeat-x;
background-position: top center;
}

ul.nav-ul {
list-style-type: none;
margin: 0px;
padding: 0px;
height: 42px;
}

ul.nav-ul li {
width: 91px;
height: 42px;
background-image: url(images/nav-bg.png);
background-repeat: repeat-x;
background-position: top center;
display: inline;
padding: 11px 0 10px 0;
margin: 0px;
float: left;
text-align: center;
}

ul.nav-ul li:hover {
background-image: url(images/menu-hover.png);
background-repeat: no-repeat;
background-position: top center;
}

ul.nav-ul li.li-spacer {
width: 441px;
}

ul.nav-ul li.li-spacer:hover {
background-image: url(images/nav-bg.png);
background-repeat: repeat-x;
background-position: top center;
}



HTML:


<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<style type="text/css">

ul.nav-ul li.li-spacer {
width: 440px;
}

</style>
<![endif]-->
</head>

<body>

<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="nav-bg">&nbsp;</td>
<td width="896px" valign="top">
<ul class="nav-ul">
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li class="li-spacer"></li>
</ul>
</td>
<td class="nav-bg">&nbsp;</td>
</tr>
</table>

</body>


The li:hover won't work in IE but it is just there to test as it will be done in js or .net to be the a:selected attribute.