CSS - Switching A File With A Dropdown

I'm used to using PHP includes and the like to make my pages. I like having header, footer, and navbar files so I can edit things once across a site.

I just took some advice about ditching tables and using CSS for layout. It works fine if I just layout a single page but when I try touse includes everything is all over the place. Still a table-like headache.

I'm sticking with it but I thought that CSS would allow me to put everything where i want it, maybe just beginner's problems but I try to put things exactly where I want them or use percentages, nothing works in IE & Netscape at the same time.

Any advice on the best layout practices?

Hi, I'm using a regular drop-down manu for a CSS change. I can easily get regular links to work, but the drop-down menu will only work in Mozilla. In IE, if I add a 'submit' or 'change' button, the page is reloaded to the home page, and I don't want to make a million different menus, one for each page. Anyone know how to fix it?

Here's the page's URL, and the code I use for the drop-down.
http://www.pokevista.com/home.shtml

<form name="change" method="change" action="http://www.pokevista.com/home.shtml?"><select>
<option>Style Switch:</option>
<option value="#"onClick="setActiveStyleSheet('nav1'); return false;" style="background-color: rgb(0, 33, 87); color: rgb(125, 167, 217);">Winter</option>
<option value="#"onClick="setActiveStyleSheet('nav2'); return false;" style="background-color: rgb(101, 189, 96); color: rgb(0, 94, 15);">Spring</option>
<option value="#"onClick="setActiveStyleSheet('nav3'); return false;" style="background-color: rgb(240, 112, 0); color: rgb(255, 255, 0);">Summer</option>

<option value="#"onClick="setActiveStyleSheet('nav4'); return false;" style="background-color: rgb(153, 37, 7); color: rgb(255, 185, 0);">Autumn</option>
</select></form>

{yes, I'm 15 and a Pokemon fan. Bite me. ^__^;}

I have a personal website that has 13 different styles - easily switchable through a drop-down menu. Is it possible to insert background music (bgsound=) in CSS and make it work with the switching I have?

Here is the URL: http://brandon.ennis.tv/home.shtml

Hey Guys,

I have been working on a template type site where each visitor will be able to click an Href to select a style for the page. I found this code at another site and it works awesome on my local host, but when I upload the files, it doesnt inherit a default style.

Here is the Java in my header:

Code:

<script>
var StyleFile = "style" + document.cookie.charAt(6) + ".css";
document.writeln('<link rel="stylesheet" type="text/css" href="' + StyleFile + '">');
</script>
<SCRIPT type="text/javascript" id="wa_u" ></SCRIPT><SCRIPT type="text/javascript" src="/tracking.js"></SCRIPT>

And here are the links in my page:

Code:

<b>Select Page Style:</b> 
<a href="javascript: document.cookie='style=1'; window.location.reload();">Red</a> |
<a href="javascript: document.cookie='style=2'; window.location.reload();">Blue</a> |
<a href="javascript: document.cookie='style=3'; window.location.reload();">Green</a> | 
<a href="javascript: document.cookie='style=4'; window.location.reload();">Yellow</a> |
<a href="javascript: document.cookie='style=5'; window.location.reload();">Earth</a> |
<a href="javascript: document.cookie='style=6'; window.location.reload();">Black</a>

Any ideas how to have a default style on the page before the user switches? I want to stick with java if possible rather than PHP or some other language.

Please let me know.

Thanks

I'm in need of a method to change an image to different images in the same spot when the user hovers over their respective text links.

So far I have only found methods that work with only 2 different images or they just change upon hovering over the image itself and not text located elsewhere.

THanks.

i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes.

so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all.

the code i'm having a problem with reads like this:
<td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'">

it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative.


oh, and by the way i'm using IE 6.0.2600

Is it possible to change the bullets of an unordered list when you hover over the <li> element using CSS?

I've tried something like this..

Code:

#ulist ul{
	list-style: none;
}
#ulist li a{
	list-style: square;
}

the list
Code:

<ul id="ulist">
   <li><a href="#">Element 1</a></li>
   <li><a href="#">Element 2</a></li>
   <li><a href="#">Element 3</a></li>
   <li><a href="#">Element 4</a></li>
</ul>

But that doesn't work, the reason I think is because the list-style is being applyed to the <a> and not the <li> element.

If not a CSS, how would I use JavaScript to determine the <li> element and add the "square" bullet style to it?

Cheers,
Fozzy

Hello,
I came to this forum for help a couple months ago and was very impressed with how my questions were answered, so I hope nobody minds me coming around again.
I've begun to create a stylesheet for my website that is completely fluid, rather than the 500px wide container my old stylesheet has. I've run into a couple problems that may or may not be related:
1) In my header div, I have an <h1> element and a <ul> that I'd like to be on the same line, but they're on different ones.
2) Both Firefox and Safari draw unnecessary scroll bars (both vertical and horizontal).
3) Sometimes my footer div will inch up from the bottom of the screen, where I'd hoped to leave it anchored.

Here is a test html: http://www.bsuto.com/test.html
and here is the css: http://www.bsuto.com/fluid.css

Thanks!
-Brian

hello,

i was reading the well-known suckerfish dropdown tutorial and was trying to do something like it. i thought i had understood the logic behind it, but i can't get it to work.

the nested unordered lists appear like so:

ITEM1
subitem1 subitem2 subitem3
ITEM2
subitem1 subitem2 subitem3

i wanted them to appear like so:

subitem1____subitem1
subitem2____subitem2
subitem3____subitem3
ITEM1_______ITEM 2

the positioning isn't too relevant, all i really wanted was to pull the nested ul out of the flow...

i made sure that the li ul part was positioned absolutely, but i can't do anything with it (no styling, no anything). my css/code must be the problem, but i can't see what i'm doing wrong. here's the relevant code:

CSS:
Code:

#menu ul { 
position: relative;
margin: 8em 0 0 0;
float: left; 
background-color: #D60078;
list-style-type: none;
}

#menu li 	{ 
display: inline; 
padding: 0 2.5em 0 0;
position: relative; 
}

#menu li a:link, a:visited { 
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li a:hover, a:active 	{ 
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}

#menu li ul { position: absolute; 
left: 0; top: 0; 
background-color: #FFF;
display: block; 
} 

HTML:
Code:

<ul id="menu">
<li><a href="">ITEM1</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

<li><a href="">ITEM2</a>
<!-- SUBMENU -->
<ul>
<li><a href="">subitem1</a></li>
<li><a href="">subitem2</a></li>
<li><a href="">subitem3</a></li>
</ul>
</li>

</ul>

i hope that made sense (after working on this for hours and trying everything that came to mind, i'm getting a little incoherent).

thanks for any help!

I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems.

First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should.

The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now.
Code:

Ex:
[Link1][Link2][Link3]  *with the mouse over the link 1

|Url1      |
|Url2      |
|Much Longer|

instead of

[Link1][Link2][Link3]  *with the mouse over the link 1
|Url1 |
|Url2 |
|Much|
|Longer|

I think this has something to do with the width of the li, so I set the width to auto. No change.

To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line
I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages.

I made a drop down menu with css and I can't get it to work with IE6. Can anyone help?

You can view an example of what I have at the following url

mentalgameofmoney.co.uk/example.html

Here is the CSS
Code:

#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px; 
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}

Here is the HTML
Code:

<div  id="menu">
  <a href="#">
  <div id="spacer"></div></a>
   <a  href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a> 
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
   <a href="#"><div id="link_box">Link</div></a>
  </div>

Hi,

I'm trying to solve a little CSS issue with, guess what!, IE6.

92 (dot) 48 (dot) 108 (dot) 113 (forward slash) ~anyjob

In FF all is good, but when viewed in IE the nav bar has been forced down to misalign with my background red strip.

Also the dropdowns don't work.

Could anyone point me in the right direction. I don't think this is a float issue and I've read up as much as possible but this is really confusing me. Any help would be very much appreciated.

Thanks,

Brian

Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds.
but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories.
2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top.
can someone help me plz?

here my code
Code:

#suckerfishnav,
#suckerfishnav ul {
  float: left;
  height: 2.98em;
  width: 960px;
  list-style: none;
  line-height: 1;
  background: white;
  font-weight: bold;
  margin: 0.1em 0.1em 0.1em 0.1em;
  padding: 0;
}

#suckerfishnav a {
  display: block;
  color: #7c6240;
  text-decoration: none;
  padding-top: 0.25em;
  padding-right: 0.7em;
  padding-bottom: 0.1em;
  padding-left: 0.2em;
}

#suckerfishnav li {
  float: left;
  padding: 0;
  width: 13em;
  height: 2.8em;
}

#suckerfishnav ul {
  position: absolute;
  left: -999em;
  height: auto;
  margin-left: 2em;
  line-height: 1;
  z-index: 500;
}

#suckerfishnav li li {
  width: 9.6em;
  border: solid #eda;
  border-width: 1px;
  padding-top;
  10px;
}

#suckerfishnav li ul a {
  width: 9.8em;
}

#suckerfishnav li ul ul {
  margin: -0.20em 0 0 9.8em;
}

#suckerfishnav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 9.9em;
  w\idth: 9.8em;
  font-weight: normal;
  border-width: 0.20em;
  margin: 0;
  z-index: 500;
}

#suckerfishnav li ul a {
  width: 9.9em;
  w\idth: 9.8em;
}

#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
  left: -999em;
}

#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
  left: auto;
}

#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
  background: #eda;
  width: 9.5em;
  w\idth: 9.4em;
}

In today's Website Development world, which kind of Drop Down menus do the pro's prefer to use, pure CSS without Javascript or CSS with Javascript?

And also, can pure CSS Drop Down menus be used in Dynamic Websites?

Thank you.

Hi. I'm trying to create a dropdown menu using some code from son-of-Suckerfish. It's simple enough in concept - just a few lines of Javascript


<!-- SON OF SUCKERFISH DROP DOWN MENU -->

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>



</head>

<body>
<!-- Open Wrapper -->
<div id="wrapper">
<!-- Open Header -->
<div id="header">
</div>
<!-- Close Header -->

<!-- Open Menubar -->

<div id="menubar">
<ul id="nav">

<li id="home"><a href="../home">Home</a></li>

<li id="aboutus"><a href="../aboutus">About Us</a>
<ul>
<li id="aboutus2"><a href="#meetthestaff">Meet the Staff</a></li>
<li id="aboutus2"><a href="#healthyeating">Healthy Eating</a></li>
<li id="aboutus2"><a href="#ourcharity">Our Charity</a></li>
</ul>
</li>

<li id="daynursery"><a href="../daynursery">Day Nursery</a>
<ul>
<li id="daynursery2"><a href="#dormice">Dormice & Hedgehogs</a></li>
<li id="daynursery2"><a href="#sensory">Sensory Room</a></li>
<li id="daynursery2"><a href="#activity">Activity Room</a></li>
<li id="daynursery2"><a href="#outdoor">Outdoor Area</a></li>
</ul>
</li>

<li id="preschool"><a href="../preschool">Pre-School</a>
<ul>
<li id="preschool2"><a href="#rabbits">Rabbits & Squirrels</a></li>
<li id="preschool2"><a href="#montessori">Montessori Room</a></li>
</ul>
</li>

<li id="parents"><a href="../parents">Parents</a>
<ul>
<li id="parents2"><a href="#news">News and Events</a></li>
<li id="parents2"><a href="#parentspartnership">Parents in Partnership committee</a></li>
<li id="parents2"><a href="#testimonials">Testimonials / references</a></li>
<li id="parents2"><a href="#ofsted">Ofsted</a></li>
<li id="parents2"><a href="#swapshop">Swap Shop</a></li>
</ul>
</li>

<li id="contact"><a href="../contact">Contact</a>
<ul>
<li id="contact2"><a href="#findus">How to Find Us</a></li>
<li id="contact2"><a href="">Our Prospectus</a></li>
</ul>
</li>
</ul>
</div>

CSS code is:


@charset "utf-8";
/*
Design by Creative Media Heroes
littleowlsnursery/devsite
*/


* { padding: 0; margin: 0; }

body {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
margin: 0;
padding: 0;
color: black;
}

.nurserycol {
color:#000;}

.preschoolcol {
color:#000;}

.parentscol {
color:#000;}




#wrapper, #header, #menubar {width: 775px; margin: 0; padding: 0;}


/*#wrapper, #header, #infobar, #menubar, #menubar2, #optionbox, #sidebar, {
display:inline;}*/

#header, #infobar, #menubar, #content{
float: left;
}

#wrapper {
border: 1px solid #FF3300;
border-top: none;
border-bottom: none;
background-color: white;
margin: 0 auto;
}

#header {
height: 274px;
background:url(../images/lon-head-temp.jpg) no-repeat;
}

#content {
clear: both;
width: 650px;
margin: 0 0 0 0;
padding: 15px 0 15px 0;
min-height: 400px;
/*border-right: 1px solid #CCC;*/
}

#sidebar {
float: right;
margin: 0px 0px 5px 0px;
padding: 0px;
height: 335px;
width: 120px;
background: #E7DBD5;
}

#rightcolumn {
float: right;
color: #333;
margin: 15px 0 0 0;
padding: 0;
width: 120px;
display: inline;
/*height: 480px;
background: #E7DBD5;*/
}


img.left {
float: left;
}

img.right {
float: right;
}



/* Dropdown menu*/

#nav { float: left; width: 775px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; list-style: none; line-height: 17px; clear: both;}
#nav li { height: 50px; }
#nav li a { float: left; ; height: 0; padding-top: 50px; overflow: hidden; }

/*#menubar ul, #menubar ul a { background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; }*/





#nav ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
line-height: 17px;
color: white;
}

#nav a {
display: block;
width: 105px;
list-style-type: none;
}

#nav li {
float: left;
width: 105px;
color: white;
line-height: 17px;
}

#nav li ul {
position: absolute;
color: white;
width: 105px;
left: -999em;
line-height: 17px;
}

#nav li:hover ul, #nav li:hover ul a, #nav li.sfhover ul {
/*float: left;*/
left: auto;
color: white;
line-height: 17px;
margin-top: 50px;
}



/* BUTTONS */
#nav li#home{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: 0 0px; }
#nav li#aboutus{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px 0px; }
#nav li#daynursery{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px 0px; }
#nav li#preschool{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px 0px; }
#nav li#parents{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px 0px; }
#nav li#contact{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px 0px;}

/* ON STATES */
#nav li#home a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-position: 0 -50px; }
#nav li#aboutus a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px -50px; }
#nav li#daynursery a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px -50px; }
#nav li#preschool a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px -50px; }
#nav li#parents a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px -50px; }
#nav li#contact a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px -50px;}


#nav li#home2 { width: 105px; height: 17px; display: block; background:#0099FF;}
#nav li#aboutus2 { width: 105px; height: 17px; display: block; background:#6FAADF;}
#nav li#daynursery2 { width: 125px; height: 17px; display: block; background:#AC2282;}
#nav li#preschool2 { width: 125px; height: 17px; display: block; background:#E74C15;}
#nav li#parents2 { width: 105px; height: 17px; display: block; background:#0F549D;}
#nav li#contact2 { width: 105px; height: 17px; display: block; background:#D4B2A1;}

#nav li#daynursery2 :hover { width: 125px; height: 17px; display: block; background:#D4B2A1;}


[if lte IE 6]>
<style type=text/css">
div.nav a:hover {visibility:visible;}
</style>
[endif]



/* Footer bar*/

.footer {
float: left;
clear: both;
width: 775px;
margin: 5px auto;
padding: 0;
display: inline;
color: #999999;}

.footer a {
border: none;
color: #88746a;
text-decoration: none;
font-size: 9px;
}

.footer ul {
margin: 0;
padding: 3px 0 3px 0;
list-style: none;
}

.footer li {
display: inline;
}

.footer ul a {
float: left;
padding: 1px 10px;
border-left: solid 1px #95a2c0;
color: #88746a;
text-decoration: none;
font-size: 9px;
}

.footer a:hover {
color:#400000;
text-decoration: none;
}


The CSS code is a bit jumbled because I've been trying all I can to fix the problems I'm getting. Basically I have a single-graphic hover menu which works fine, but then the drop-down menus (in their separate colours) are just not coming in underneath in IE7 - ok in Firefox on pc and mac, plus fine is Safari on mac - but they should be normal wording links as 11px text with 17px line-height. I am getting the single-graphic coming in instead. I know this must have something to do with the nested ul in the li, but just can't stop this happening. So, it's really a 2 stage HELP. PLEASE!!!!

Oh, I know I can't put a url link in. It's basically in a devsite folder of the main site I'm talking about here!