D
davoud
Hi,
I have designed a html file which uses a CSS horizontal menu. When
browsing the html file with frontpage 2003 the menu appears as a vertical
menu in the design tab. However when viewing it in a browser such as IE6,
Firefox 1.04 and netscape 7.2 it is a horizontal menu just the way that I
have designed it.
I have used display:inline and float:left in the css file but i do not
understand why frontpage shows it as a vertical menu.
Here it is my html and css:
<LINK rel="stylesheet" href="mystyle.css" type="text/css" >
<body>
<UL class=menu>
<LI><A
href="#">Link One</A>
<LI><A
href="#">Link
two</A>
<LI><A
href="#">Link
three</A>
<LI><A
href="#">Link
four</A>
<LI><A
href="#">Link
five</A>
</LI></UL>
..menu A {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 70%; WIDTH:7em; COLOR:
black; FONT-
FAMILY: VERDANA,GENEVA,ARIAL,HELVETICA,SANS-SERIF; HEIGHT: 1.1em;
TEXT-ALIGN: center; TEXT-
DECORATION: none; padding: 0;BACKGROUND-COLOR: blue;FLOAT:left;
}
..menu A:link {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT:
white 1px
solid; BORDER-BOTTOM: white 2px solid
}
..menu A:visited {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT:
white 1px
solid; BORDER-BOTTOM: white 2px solid
}
..menu A:hover {
BORDER-RIGHT: white 1px solid; BORDER-TOP: white 2px solid; BORDER-LEFT:
white 2px
solid; BORDER-BOTTOM: white 1px solid; BACKGROUND-COLOR: white
}
..menu li {
DISPLAY:inline;
}
I have designed a html file which uses a CSS horizontal menu. When
browsing the html file with frontpage 2003 the menu appears as a vertical
menu in the design tab. However when viewing it in a browser such as IE6,
Firefox 1.04 and netscape 7.2 it is a horizontal menu just the way that I
have designed it.
I have used display:inline and float:left in the css file but i do not
understand why frontpage shows it as a vertical menu.
Here it is my html and css:
<LINK rel="stylesheet" href="mystyle.css" type="text/css" >
<body>
<UL class=menu>
<LI><A
href="#">Link One</A>
<LI><A
href="#">Link
two</A>
<LI><A
href="#">Link
three</A>
<LI><A
href="#">Link
four</A>
<LI><A
href="#">Link
five</A>
</LI></UL>
..menu A {
DISPLAY: block; FONT-WEIGHT: bold; FONT-SIZE: 70%; WIDTH:7em; COLOR:
black; FONT-
FAMILY: VERDANA,GENEVA,ARIAL,HELVETICA,SANS-SERIF; HEIGHT: 1.1em;
TEXT-ALIGN: center; TEXT-
DECORATION: none; padding: 0;BACKGROUND-COLOR: blue;FLOAT:left;
}
..menu A:link {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT:
white 1px
solid; BORDER-BOTTOM: white 2px solid
}
..menu A:visited {
BORDER-RIGHT: white 2px solid; BORDER-TOP: white 1px solid; BORDER-LEFT:
white 1px
solid; BORDER-BOTTOM: white 2px solid
}
..menu A:hover {
BORDER-RIGHT: white 1px solid; BORDER-TOP: white 2px solid; BORDER-LEFT:
white 2px
solid; BORDER-BOTTOM: white 1px solid; BACKGROUND-COLOR: white
}
..menu li {
DISPLAY:inline;
}