CSS - Switching To Css Layout

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

Hi,
what I'd like to do is have a few style sheets, then have a dropdown box where the user can select a theme and it will switch the style sheet in the link rel= according to which theme they chose. This should be pretty simple but I'm not much of a programmer. Can anyone help me out with the code for this?

Thanks

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. ^__^;}

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 am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

thanks

Hi

I want to achieve this layout using CSS http://www.premier-resin-systems.co.uk/layout.jpg

I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div.

I would like some help if poss on how to put this design into divs before I plough staright in!!

Thanks for any help or advice!

Hi there.

I need help creating a certain layout. I need div borders around my layout, but without content inside them the background image is not seen. How could I resolve this without changing height:auto

Thanks in advance

Hi,

I am relatively new to CSS and am trying to come up with a layout very similar to Noteableapp.

What I like about that design is that the taskbar stays floated at the top, while the central column exands with the width of the browser. What I'm trying to do different is have a much more detailed background image, rather than a simple gradient. The problem I'm having is that the navigation divs seems to be transparent so the detailed texture shows through. I've tried building the divs from scratch without success as I can't seem to get the central column to stay in the centre of the page, so I had a look at the css for Noteableapp however its a bit complicated for me and raised more questions than answers!

Can anyone point me in the direction of a good tutorial to achieve a layout similar to Noteableapp or able to contact me and guide me through what is actually happening with the noteable css. My preference would be a tutorial so I can actually understand what is happening but any help would be much appreciated.