PC Review
Home Forums Reviews Articles Register
Member Login:

PC Review > Forums > Newsgroups > Microsoft Word > Microsoft Frontpage > CSS Menu and Frontpage 2003

Reply
Thread Tools Rate Thread

CSS Menu and Frontpage 2003

 
 
=?Utf-8?B?ZGF2b3Vk?=
Guest
Posts: n/a
 
      17th Jul 2005
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;
}
 
Reply With Quote
 
 
 
 
Mark Fitzpatrick
Guest
Posts: n/a
 
      17th Jul 2005
Often, the WYSIWYG editors show something a little different than the final
interpretation and closer to what the current physical layout is. FrontPage
(and other editors as well) don't apply the full range of CSS attributes to
an item during the design phase, which makes the programs a tad more stable
probably as they have less to visuall interpret in designer mode.
Dreamweaver does display something like this when in design mode, but then
again Dreamweaver tends to crash way too often for no good reason at all.

Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage

"davoud" <(E-Mail Removed)> wrote in message
news:FBBE04B3-3AF3-4919-91D9-(E-Mail Removed)...
> 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;
> }
>
>
 
Reply With Quote
 
=?Utf-8?B?ZGF2b3Vk?=
Guest
Posts: n/a
 
      17th Jul 2005
Hi Mark,

Thanks alot for your message I was just frustrated by this and your message
relieved me alot.

However, If you open the following page with frontpage, you will see that
the horizontal menu appears horizontally in the design tab. I would like to
know what is the difference between my design and this one. What makes the
this desing to appear horizontal in frontpage?

here it is the webpage:

http://techrepublic.com.com/







"Mark Fitzpatrick" wrote:

> Often, the WYSIWYG editors show something a little different than the final
> interpretation and closer to what the current physical layout is. FrontPage
> (and other editors as well) don't apply the full range of CSS attributes to
> an item during the design phase, which makes the programs a tad more stable
> probably as they have less to visuall interpret in designer mode.
> Dreamweaver does display something like this when in design mode, but then
> again Dreamweaver tends to crash way too often for no good reason at all.
>
> Hope this helps,
> Mark Fitzpatrick
> Microsoft MVP - FrontPage
>
> "davoud" <(E-Mail Removed)> wrote in message
> news:FBBE04B3-3AF3-4919-91D9-(E-Mail Removed)...
> > 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;
> > }
> >
> >
>
>
>
 
Reply With Quote
 
Murray
Guest
Posts: n/a
 
      17th Jul 2005
> Dreamweaver does display something like this when in design mode, but then
> again Dreamweaver tends to crash way too often for no good reason at all.

I sure take issue with that one, Mark. It just never crashes for me. I
think it would be fair to say that it crashes no more and no less than FP
does, based on the posts here....


--
Murray
============

"Mark Fitzpatrick" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Often, the WYSIWYG editors show something a little different than the
> final interpretation and closer to what the current physical layout is.
> FrontPage (and other editors as well) don't apply the full range of CSS
> attributes to an item during the design phase, which makes the programs a
> tad more stable probably as they have less to visuall interpret in
> designer mode. Dreamweaver does display something like this when in design
> mode, but then again Dreamweaver tends to crash way too often for no good
> reason at all.
>
> Hope this helps,
> Mark Fitzpatrick
> Microsoft MVP - FrontPage
>
> "davoud" <(E-Mail Removed)> wrote in message
> news:FBBE04B3-3AF3-4919-91D9-(E-Mail Removed)...
>> 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;
>> }
>>
>>
>
>
 
Reply With Quote
 
=?Utf-8?B?ZGF2b3Vk?=
Guest
Posts: n/a
 
      18th Jul 2005
Never mind. I figured it out. I had the float: left in a wrong place.

"Murray" wrote:

> > Dreamweaver does display something like this when in design mode, but then
> > again Dreamweaver tends to crash way too often for no good reason at all.
>
> I sure take issue with that one, Mark. It just never crashes for me. I
> think it would be fair to say that it crashes no more and no less than FP
> does, based on the posts here....
>
>
> --
> Murray
> ============
>
> "Mark Fitzpatrick" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > Often, the WYSIWYG editors show something a little different than the
> > final interpretation and closer to what the current physical layout is.
> > FrontPage (and other editors as well) don't apply the full range of CSS
> > attributes to an item during the design phase, which makes the programs a
> > tad more stable probably as they have less to visuall interpret in
> > designer mode. Dreamweaver does display something like this when in design
> > mode, but then again Dreamweaver tends to crash way too often for no good
> > reason at all.
> >
> > Hope this helps,
> > Mark Fitzpatrick
> > Microsoft MVP - FrontPage
> >
> > "davoud" <(E-Mail Removed)> wrote in message
> > news:FBBE04B3-3AF3-4919-91D9-(E-Mail Removed)...
> >> 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;
> >> }
> >>
> >>
> >
> >
>
>
>
 
Reply With Quote
 
 
 
Reply

« Re: Tool Tips Javascript | Missing banner »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
CASCADE MENU FRONTPAGE 2003 hc Microsoft Frontpage 1 18th Sep 2008 08:29 PM
How do I add a drop down menu to Frontpage 2003? =?Utf-8?B?bG9yZWVlZWU=?= Microsoft Frontpage 1 6th Jan 2005 10:40 PM
Frontpage 2003 menu =?Utf-8?B?SW4gbmVlZA==?= Microsoft Frontpage 3 13th Nov 2004 09:36 AM
menu builder Frontpage 2003 nsnews.microsoft.com Microsoft Frontpage 12 19th Mar 2004 01:49 PM
Drop down menu (frontpage 2003) =?Utf-8?B?RG9yaXNEZW5n?= Microsoft Frontpage 2 6th Nov 2003 09:38 AM


Features
Forums Startup Database Reviews Articles FAQ / Guidelines About Us
 

Advertising
 

Newsgroups
Windows Vista Windows XP Microsoft Word Microsoft DotNet Windows 2000 AntiSpyware Microsoft Access Microsoft Excel Microsoft Outlook Hardware
 


All times are GMT +1. The time now is 06:07 AM.
Powered by vBulletin®. Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2010, Crawlability, Inc.
Contact Us - Archive - Privacy Statement - Top