External file for style sheets

[larthestar]

How do I do this to get better results
I would like to put the style sheet code in an external file. i am using 7728 bytes of style sheet code and i think it is affecting my rankings.
my site is www.southfloridarentals-homesales.com
thanks,
larry

[navaldesign]

Re: External file for style sheets

It will be something like

<link rel="stylesheet" href="path/style.css" type="text/css">



where path is your css file folder (though it can also be in public_html) and style.css is your css file

[larthestar]

Re: External file for style sheets

I guess this is a two part question. What do I put in the file. I tried to put in things but it messed up the page. I would like to get all the menu buttons in the file so my text is at the top of the page and not the menu button code.
Thanks for the help,
Larry
Since I would be using this on all pages I would like this in a seperate file if all this is needed. I am not sure if I am using extra lines of code in the file. Then is all of this replaced by the command that you gave me. Your help has really been appreciated

<script type="text/javascript" src="./jscookmenu.js"></script>
<style type="text/css">
.MenuBarMenuBar1Menu,.MenuBarMenuBar1SubMenuTable
{
font-family: Arial, arial, sans-serif;
font-size:16px;
color: #000000;
background-color: #97BEF4;
font-weight: bold;
font-style: italic;
padding: 0;
border: 0;
cursor: pointer;
}
.MenuBarMenuBar1SubMenu
{
position: absolute;
visibility: hidden;
border: 0;
padding: 0;
}
.MenuBarMenuBar1SubMenuTable
{
border-top: 1px solid white;
}
.MenuBarMenuBar1Menu td
{
padding: 0px 3px 0px 3px;
}
.MenuBarMenuBar1SubMenuTable td
{
white-space: nowrap;
}
.MenuBarMenuBar1MainItem,.MenuBarMenuBar1MainItemH over,.MenuBarMenuBar1MainItemActive,
.MenuBarMenuBar1MenuItem,.MenuBarMenuBar1MenuItemH over,.MenuBarMenuBar1MenuItemActive
{
white-space: nowrap;
}
.MenuBarMenuBar1MainItemHover,.MenuBarMenuBar1Main ItemActive,
.MenuBarMenuBar1MenuItemHover,.MenuBarMenuBar1Menu ItemActive
{
color: #FFFFFF;
background-color: #97BEF4;
font-weight: normal;
font-size: 16px;
}
td.MenuBarMenuBar1MenuSplit
{
overflow: hidden;
background-color: inherit;
}
div.MenuBarMenuBar1MenuSplit
{
height: 1px;
margin: 1px 0px 1px 0px;
overflow: hidden;
background-color: inherit;
border-top: 1px solid #000000;
}
.MenuBarMenuBar1MenuVSplit
{
display: block;
width: 1px;
margin: 0px 3px 0px 3px;
overflow: hidden;
background-color: inherit;
border-right: 1px solid #000000;
}
</style>
<style type="text/css">
.MenuBarMenuBar2Menu,.MenuBarMenuBar2SubMenuTable
{
font-family: Arial, arial, sans-serif;
font-size:16px;
color: #000000;
background-color: #97BEF4;
font-weight: bold;
font-style: italic;
padding: 0;
border: 0;
cursor: pointer;
}
.MenuBarMenuBar2SubMenu
{
position: absolute;
visibility: hidden;
border: 0;
padding: 0;
}
.MenuBarMenuBar2SubMenuTable
{
border-top: 1px solid white;
}
.MenuBarMenuBar2Menu td
{
padding: 0px 3px 0px 3px;
}
.MenuBarMenuBar2SubMenuTable td
{
white-space: nowrap;
}
.MenuBarMenuBar2MainItem,.MenuBarMenuBar2MainItemH over,.MenuBarMenuBar2MainItemActive,
.MenuBarMenuBar2MenuItem,.MenuBarMenuBar2MenuItemH over,.MenuBarMenuBar2MenuItemActive
{
white-space: nowrap;
}
.MenuBarMenuBar2MainItemHover,.MenuBarMenuBar2Main ItemActive,
.MenuBarMenuBar2MenuItemHover,.MenuBarMenuBar2Menu ItemActive
{
color: #FFFFFF;
background-color: #97BEF4;
font-weight: normal;
font-size: 16px;
}
td.MenuBarMenuBar2MenuSplit
{
overflow: hidden;
background-color: inherit;
}
div.MenuBarMenuBar2MenuSplit
{
height: 1px;
margin: 1px 0px 1px 0px;
overflow: hidden;
background-color: inherit;
border-top: 1px solid #000000;
}
.MenuBarMenuBar2MenuVSplit
{
display: block;
width: 1px;
margin: 0px 3px 0px 3px;
overflow: hidden;
background-color: inherit;
border-right: 1px solid #000000;
}
</style>
<style type="text/css">
.MenuBarMenuBar3Menu,.MenuBarMenuBar3SubMenuTable
{
font-family: Arial, arial, sans-serif;
font-size:16px;
color: #000000;
background-color: #97BEF4;
font-weight: bold;
font-style: italic;
padding: 0;
border: 0;
cursor: pointer;
}
.MenuBarMenuBar3SubMenu
{
position: absolute;
visibility: hidden;
border: 0;
padding: 0;
}
.MenuBarMenuBar3SubMenuTable
{
border-top: 1px solid white;
}
.MenuBarMenuBar3Menu td
{
padding: 0px 3px 0px 3px;
}
.MenuBarMenuBar3SubMenuTable td
{
white-space: nowrap;
}
.MenuBarMenuBar3MainItem,.MenuBarMenuBar3MainItemH over,.MenuBarMenuBar3MainItemActive,
.MenuBarMenuBar3MenuItem,.MenuBarMenuBar3MenuItemH over,.MenuBarMenuBar3MenuItemActive
{
white-space: nowrap;
}
.MenuBarMenuBar3MainItemHover,.MenuBarMenuBar3Main ItemActive,
.MenuBarMenuBar3MenuItemHover,.MenuBarMenuBar3Menu ItemActive
{
color: #FFFFFF;
background-color: #97BEF4;
font-weight: normal;
font-size: 16px;
}
td.MenuBarMenuBar3MenuSplit
{
overflow: hidden;
background-color: inherit;
}
div.MenuBarMenuBar3MenuSplit
{
height: 1px;
margin: 1px 0px 1px 0px;
overflow: hidden;
background-color: inherit;
border-top: 1px solid #000000;
}
.MenuBarMenuBar3MenuVSplit
{
display: block;
width: 1px;
margin: 0px 3px 0px 3px;
overflow: hidden;
background-color: inherit;
border-right: 1px solid #000000;
}
</style>
<style type="text/css">
.MenuBarMenuBar4Menu,.MenuBarMenuBar4SubMenuTable
{
font-family: Arial, arial, sans-serif;
font-size:16px;
color: #000000;
background-color: #97BEF4;
font-weight: bold;
font-style: italic;
padding: 0;
border: 0;
cursor: pointer;
}
.MenuBarMenuBar4SubMenu
{
position: absolute;
visibility: hidden;
border: 0;
padding: 0;
}
.MenuBarMenuBar4SubMenuTable
{
border-top: 1px solid white;
}
.MenuBarMenuBar4Menu td
{
padding: 0px 3px 0px 3px;
}
.MenuBarMenuBar4SubMenuTable td
{
white-space: nowrap;
}
.MenuBarMenuBar4MainItem,.MenuBarMenuBar4MainItemH over,.MenuBarMenuBar4MainItemActive,
.MenuBarMenuBar4MenuItem,.MenuBarMenuBar4MenuItemH over,.MenuBarMenuBar4MenuItemActive
{
white-space: nowrap;
}
.MenuBarMenuBar4MainItemHover,.MenuBarMenuBar4Main ItemActive,
.MenuBarMenuBar4MenuItemHover,.MenuBarMenuBar4Menu ItemActive
{
color: #FFFFFF;
background-color: #97BEF4;
font-weight: normal;
font-size: 16px;
}
td.MenuBarMenuBar4MenuSplit
{
overflow: hidden;
background-color: inherit;
}
div.MenuBarMenuBar4MenuSplit
{
height: 1px;
margin: 1px 0px 1px 0px;
overflow: hidden;
background-color: inherit;
border-top: 1px solid #000000;
}
.MenuBarMenuBar4MenuVSplit
{
display: block;
width: 1px;
margin: 0px 3px 0px 3px;
overflow: hidden;
background-color: inherit;
border-right: 1px solid #000000;
}
</style>
<style type="text/css">
.MenuBarMenuBar5Menu,.MenuBarMenuBar5SubMenuTable
{
font-family: Arial, arial, sans-serif;
font-size:16px;
color: #000000;
background-color: #97BEF4;
font-weight: bold;
font-style: italic;
padding: 0;
border: 0;
cursor: pointer;
}
.MenuBarMenuBar5SubMenu
{
position: absolute;
visibility: hidden;
border: 0;
padding: 0;
}
.MenuBarMenuBar5SubMenuTable
{
border-top: 1px solid white;
}
.MenuBarMenuBar5Menu td
{
padding: 0px 3px 0px 3px;
}
.MenuBarMenuBar5SubMenuTable td
{
white-space: nowrap;
}
.MenuBarMenuBar5MainItem,.MenuBarMenuBar5MainItemH over,.MenuBarMenuBar5MainItemActive,
.MenuBarMenuBar5MenuItem,.MenuBarMenuBar5MenuItemH over,.MenuBarMenuBar5MenuItemActive
{
white-space: nowrap;
}
.MenuBarMenuBar5MainItemHover,.MenuBarMenuBar5Main ItemActive,
.MenuBarMenuBar5MenuItemHover,.MenuBarMenuBar5Menu ItemActive
{
color: #FFFFFF;
background-color: #97BEF4;
font-weight: normal;
font-size: 16px;
}
td.MenuBarMenuBar5MenuSplit
{
overflow: hidden;
background-color: inherit;
}
div.MenuBarMenuBar5MenuSplit
{
height: 1px;
margin: 1px 0px 1px 0px;
overflow: hidden;
background-color: inherit;
border-top: 1px solid #000000;
}
.MenuBarMenuBar5MenuVSplit
{
display: block;
width: 1px;
margin: 0px 3px 0px 3px;
overflow: hidden;
background-color: inherit;
border-right: 1px solid #000000;
}
</style>
<style type="text/css">
.MenuBarMenuBar6Menu,.MenuBarMenuBar6SubMenuTable
{
font-family: Arial, arial, sans-serif;
font-size:16px;
color: #000000;
background-color: #97BEF4;
font-weight: bold;
font-style: italic;
padding: 0;
border: 0;
cursor: pointer;
}
.MenuBarMenuBar6SubMenu
{
position: absolute;
visibility: hidden;
border: 0;
padding: 0;
}
.MenuBarMenuBar6SubMenuTable
{
border-top: 1px solid white;
}
.MenuBarMenuBar6Menu td
{
padding: 0px 3px 0px 3px;
}
.MenuBarMenuBar6SubMenuTable td
{
white-space: nowrap;
}
.MenuBarMenuBar6MainItem,.MenuBarMenuBar6MainItemH over,.MenuBarMenuBar6MainItemActive,
.MenuBarMenuBar6MenuItem,.MenuBarMenuBar6MenuItemH over,.MenuBarMenuBar6MenuItemActive
{
white-space: nowrap;
}
.MenuBarMenuBar6MainItemHover,.MenuBarMenuBar6Main ItemActive,
.MenuBarMenuBar6MenuItemHover,.MenuBarMenuBar6Menu ItemActive
{
color: #FFFFFF;
background-color: #97BEF4;
font-weight: normal;
font-size: 16px;
}
td.MenuBarMenuBar6MenuSplit
{
overflow: hidden;
background-color: inherit;
}
div.MenuBarMenuBar6MenuSplit
{
height: 1px;
margin: 1px 0px 1px 0px;
overflow: hidden;
background-color: inherit;
border-top: 1px solid #000000;
}
.MenuBarMenuBar6MenuVSplit
{
display: block;
width: 1px;
margin: 0px 3px 0px 3px;
overflow: hidden;
background-color: inherit;
border-right: 1px solid #000000;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function OnGoMenuFormLink(GoList)
{
var url = GoList.options[GoList.selectedIndex].value;
var target = GoList.options[GoList.selectedIndex].className;
GoList.selectedIndex=0;
GoList.blur();
if (url)
{
NewWin=window.open(url,target);
window['NewWin'].focus()
}
}
//-->
</script>

[larthestar]

Re: External file for style sheets

thanks

[navaldesign]

Re: External file for style sheets

I beleive that this is the standard BV javascript related to dropdown menus.

Please have a look at Single Menu Page with Bv and PHP on how to acheive your goal easily.

[larthestar]

Re: External file for style sheets

I tried for hours and keep on getting error messages. I have a file menu.html. Can you tell me what coding i need to use to bring in onto my site. I would like to bring it on as a css file. I tried the php method and kept getting error messages when I used menu.php and index,php. I prefer css since it cuts down on the characters.
Thank you,
Larry

[navaldesign]

Re: External file for style sheets

Let me first explain that css is NOT a file type. CSS is a particular stylesheet programming language that allowes you to define the way that some (or all) the elements of your page will look like. The file, if external, is saved with a .css extension, to make possible a specific call to the css file. Otherwise, a css file is simply text (as html, xml, js -javascript- and php files).

With this said, let me explaon how css based menus work. CSS menus ar nothing more than lists of text, each one corresponding at one of your pages.

So usually a css menu will show in your page, a list, but since this list is formatted (styled) according to the css code that you are using, it will show as similar to a classic BV menu.

Now, the css ONLY MAKES THE STYLING. The actual menu code must be in your page. When visited, the page will retreive the styling information from the external css file, and will "format" the menu list accordingly.

So, your menu.html file can NOT be imported as css file in the rest of your pages. Also, usually, the code of a menu is very small, so you don't really need to cut down its size.

Now, in your particular case: Since you are using so many menus (i have seen your post above) that would be somewhat complicated for you to setup all those style sheets as individual external css files, and isolate the menu codes to have in your page. Also, though it would cut down the html file size, it will NOT make your pages load faster (for the user) because, at the end, ALL the code, including that of the css fils, have to be sent from the server to the visitors browser. There would be a slight (irrelevant, just milliseconds) DELAY instead, because the server would need to open more than one files.

So i suggest that you simply use the php method described in the Tips and Trics section to embedd in your page the menu.php page (it needs to be php) which, in this case, would have both the css styling and the menu(s) code already in it.

[larthestar]

Re: External file for style sheets

Just as an update, I put the style sheets in an external file and the java script for the menu code in external files. This will just make it easier when add items to the menu. Instead of changing each page, I can just change the files and hopefully all the pages will change. I just have to do the initial coding changes on all the pages.