Here is the page I'm working on:
http://www.villa-corti.com/menus.htm
The image divs are all in the right place but the navigation bars I can´t
seem to move. tabsH and navbar are the ones I want to move and they are in the
navshadow div which presently doen´t have a style. All the divs hare position
relative; and float left;
How can I move the navbars up? Thanks for any advice to the newbie.
<body>
<div id="navimagel"><img src="images/lake3.jpg"></div>
<div id="logo"><img src="images/lodgeadog.jpg" /></div>
<div id="navimager"><img src="images/dog1.jpg"></div>
<div id="tabsH">
<ul>
<li><a href="#" title="home"><span>home</span></a></li>
<li><a href="#" title="Link 2"><span>register</span></a></li>
<li><a href="#" title="Link 3"><span>aaaaaaaaa aaaa aa</span></a></li>
<li><a href="#" title="Longer Link Text"><span>aaaaa aa aaa
aaaaa</span></a></li>
<li><a href="#" title="Link 5"><span>about us</span></a></li>
</ul>
</div>
<DIV id=navshadow>
<DIV id=navbar>
<UL><LI><A href="">Search</A>
<LI><A href="">link</A>
<LI><A href="">linklink linklink</A>
<LI><A href="">link</A>
<LI><A href="">link link</A> </LI>
<br style="clear: both;" />
</UL></DIV>
</DIV>
> The blue background items should not be in the visible menu. They should
> fly-out when the item just above the two blue background items is
> hovered over. The blue background items are the "Exhibitor Info" and
<style type="text/css">
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
#navimagel {
position:relative;
width:85px;
height:115px;
z-index:1;
left: 13px;
top: 0px;
clear: left;
float: left;
}
#navimager {
position:relative;
width:239px;
height:90px;
z-index:3;
left: 250px;
top: 0px;
float: left;
}
#logo {
position:relative;
width:238px;
height:73px;
z-index:2;
left: 100px;
top: 46px;
float: left;
}
/*- Menu Tabs H--------------------------- */
#tabsH {
float:left;
width:100%;
background:#fff;
font-size:93%;
line-height:normal;
}
#tabsH ul {
margin:0;
padding:10px 10px 0 94px;
list-style:none;
}
#tabsH li {
display:inline;
margin:0;
padding:0;
}
#tabsH a {
float:left;
background:url("tableftH.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsH a span {
float:left;
display:block;
background:url("tabrightH.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsH a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabsH a:hover {
background-position:0% -42px;
}
#tabsH a:hover span {
background-position:100% -42px;
}
/*- Images for divs--------------------------- */
/* purple navigation */
#navbar {CLEAR: both; background:url("navtile.gif") repeat-x left top;
background-color: #9933CC; MARGIN: 0px; WIDTH: 760px;
}
#navbar UL {
PADDING-LEFT: 1em; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#navbar LI {
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px;
MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#navbar A:link {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 12px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #ccc; LINE-HEIGHT:
10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A:visited {
BORDER-RIGHT: #c63 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px;
FONT-SIZE: 1.1em; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #fff; LINE-HEIGHT:
10px; PADDING-TOP: 5px; WHITE-SPACE: nowrap; TEXT-DECORATION: none
}
#navbar A.active:link {
TEXT-DECORATION: underline
}
#navbar A.active:visited {
TEXT-DECORATION: underline
}
#navbar A:hover {
TEXT-DECORATION: underline
}
</style>
Send instant messages to your online friends http://uk.messenger.yahoo.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
