Major CSS issues; Am I doing something wrong? Styleswitcher help!

Shadowstar · Feb 1, 2009

Okay, so I'm revamping TPPV. Yeeeaaaahhh. So I could have a style switcher and all that jazz. I got the first layout down, but when I add in the second style and the style switcher, the layout breaks, and now there's two on the same page. Help, please? I don't know what to do to make the accual style switcher to work, I think a code's in the wrong place or something...

HTML:

<html>
<head>
<title>:.:The PsyPearl Valley:.:</title>
<style>
/* CSS STARTS HERE */

/* This changes your link colors */
A:link 
{ text-decoration: none; color: #CC9900; }
A:visited 
{ text-decoration: none; color: #99FF00; }
A:active
{ text-decoration: none; color: #FFFFFF; }
A:hover 
{ text-decoration: none; color: #CC9900; }


/* This changes the basic properties of your layout */
body
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 9px;
background-color: #FFFFFF;
background-image: url('http://i652.photobucket.com/albums/uu245/Twistarx/tppvlayout.jpg');
text-align: justify;
margin-bottom: 5px; 
margin-right: 0px; 
margin-top: 5px;
}


/* This code centers your layout */
#centerlayout {
margin-left: -380px;
margin-right: 0px; 
margin-top: 0px; 
margin-bottom: 0px; 
width: 800px;
left: 50%;
top: 0%;
position: absolute;
}

/* This code controls the properties of your left menu */
#leftmenu
{ font-family: Verdana; sans serif; helvetica;
color: #FFFFFF;
font-size: 9px;
background-color: #00008b;
background-image: url(' ');
text-align: left;
border: 1px solid #000000;
border-bottom: 0px solid #000000;
border-top: 0px solid #000000;
width:125px;
height:300px;
}


/* This code controls the properties of your right menu */
#rightmenu
{ font-family: Verdana; sans serif; helvetica;
color: #000000;
font-size: 10px;
background-color: #1e90ff;
background-image: url(' ');
text-align: right;
border: 1px solid #000000;
border-bottom: 0px solid #000000;
border-top: 0px solid #000000;
width:125px;
height:300px;
}

/* This code controls the properties of your content */
#content
{ font-family: Verdana; sans serif; helvetica;
color: #FFFFFF;
width:550px;
height:300px;
font-size: 9px;
background-color: #000000;
background-image: url(' ');
border: 1px solid #000000;
}


/* This code controls the properties of your disclaimer */
#disclaimer
{ font-family: Verdana; sans serif; helvetica;
color: #000000;
font-size: 9px;
background-color: #336600;
background-image: url(' ');
border: 0px solid #000000;
text-align:center;
width:529px;
height:90px;
}


/* This code controls the properties of your banner */ 
#banner
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 9px;
background-color: #FFFFFF;
background-image: url('http://i652.photobucket.com/albums/uu245/Twistarx/Tppvbanner.png');
background-repeat : no-repeat;
border: 0px solid #000000;
text-align:center;
width: 529px;
height: 150px;
}

/* CSS ENDS HERE */
</style>
<link rel=”stylesheet” type=”/* This changes your link colors */
A:link 
{ text-decoration: none; color: #CC9900; }
A:visited 
{ text-decoration: none; color: #99FF00; }
A:active
{ text-decoration: none; color: #FFFFFF; }
A:hover 
{ text-decoration: none; color: #CC9900; }


/* This changes the basic properties of your layout */
body
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 9px;
background-color: #FFFFFF;
background-image: url('http://i652.photobucket.com/albums/uu245/Twistarx/tppvlayout.jpg');
text-align: justify;
margin-bottom: 5px; 
margin-right: 0px; 
margin-top: 5px;
}


/* This code centers your layout */
#centerlayout {
margin-left: -380px;
margin-right: 0px; 
margin-top: 0px; 
margin-bottom: 0px; 
width: 800px;
left: 50%;
top: 0%;
position: absolute;
}

/* This code controls the properties of your left menu */
#leftmenu
{ font-family: Verdana; sans serif; helvetica;
color: #FFFFFF;
font-size: 9px;
background-color: #00008b;
background-image: url(' ');
text-align: left;
border: 1px solid #000000;
border-bottom: 0px solid #000000;
border-top: 0px solid #000000;
width:125px;
height:300px;
}


/* This code controls the properties of your right menu */
#rightmenu
{ font-family: Verdana; sans serif; helvetica;
color: #000000;
font-size: 10px;
background-color: #1e90ff;
background-image: url(' ');
text-align: right;
border: 1px solid #000000;
border-bottom: 0px solid #000000;
border-top: 0px solid #000000;
width:125px;
height:300px;
}

/* This code controls the properties of your content */
#content
{ font-family: Verdana; sans serif; helvetica;
color: #FFFFFF;
width:550px;
height:300px;
font-size: 9px;
background-color: #000000;
background-image: url(' ');
border: 1px solid #000000;
}


/* This code controls the properties of your disclaimer */
#disclaimer
{ font-family: Verdana; sans serif; helvetica;
color: #000000;
font-size: 9px;
background-color: #336600;
background-image: url(' ');
border: 0px solid #000000;
text-align:center;
width:529px;
height:90px;
}


/* This code controls the properties of your banner */ 
#banner
{ font-family: Verdana; sans serif; helvetica;
color: #333333;
font-size: 9px;
background-color: #FFFFFF;
background-image: url('http://i652.photobucket.com/albums/uu245/Twistarx/Tppvbanner.png');
background-repeat : no-repeat;
border: 0px solid #000000;
text-align:center;
width: 529px;
height: 150px;
}” href=”yourdefaultstyle.css” title=”Eclipse” />
<link rel=”alternate stylesheet” type=”<html>
<head>

<style type="text/css">
body {
margin: 0px;
background-image:url ('http://i652.photobucket.com/albums/uu245/Twistarx/lunasliverstylebg.jpg');
}

td, tr {
font-family: verdana;
font-size: 13px;
}

a:link, a:active, a:visited {
color: #CCCCCC;
}

a:hover {
color: #CCCCC;
}

#leftnav {
background: #000066;
width: 17%;
}

#leftnav a {
display: block;
color: #000066;
text-decoration: none;
padding: 1px 0px 1px 3px;
border-bottom: 1px solid #000000;
}

#leftnav a:hover {
color: #FFFFFF;
background: #003333;
}

.title {
width: 100%;
font-weight: bold;
text-align: center;
background: #000000;
}

#content {
background: #000000;
padding: 3px;
width: 70%;
}

#rightnav {
width: 13%;
background: #000066;
}

#rightnav a {
display: block;
color: #000000;
text-decoration: none;
padding: 1px 3px 1px 0px;
border-bottom: 1px solid #000000;
text-align: right;
}

#rightnav a:hover {
color: #FFFFFF;
background: #003333;
}

#disclaimer {
background: #000033;
}
</style>

</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr><td colspan="3"><img src="http://i652.photobucket.com/albums/uu245/Twistarx/lunasliverstylebannertppv.png"></td></tr>

<tr>
<td width="120" valign="top" id="leftnav">
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</td>

<td valign="top" id="content">
I almost never use orange, but I was really feeling it when I made this layout. CSS rawks by the way. If you're going to steal this layout, give credit to me. It's the least you can do for me allowing you to be lazy, okay?? Testing the <a href="#">link color</a> contrast.

<p>Remember to spiffy it up with images!</p>
</td>

<td width="100" valign="top" id="rightnav">
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<div class="title">Section</div>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</td>
</tr>

<tr><td colspan="3" id="disclaimer"></td></tr>

</table>
</body>
</html> ” ref=”youralternatestyle.css” title=”Lunar” />
<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script type="text/javascript" src="/scripts/styleswitcher.js"></script>
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>

</head>
<body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10">
<div id="centerlayout">
<table cellpadding="4" cellspacing="2">
<tr><td id="leftmenu" rowspan="2" valign="top">



<!--LEFT MENU Starts Here-->

<center><b>Sitely</b></center><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a>

<br><br>

<center><b>Fun Stuff</b></center><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a>

<br><br>

<center><b>Fandom</b></center><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br><br>

<center><b>Websites</b></center><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a>
<br><br>

<center><b>Guides and Walkthroughs</b></center><br>
<a href="Writing Guide.htm">Writing Guide</a><br><br>


<!--// LEFT MENU ENDS Here-->



</td>
<td valign="top">
<table cellspacing="2" cellpadding="0" border="0">
<tr><td valign="top" align="center" id="banner">



<!--BANNER Image Here-->

<!--// Banner Editing Ends Here-->



</td></tr></table>
</td>
<td rowspan="2" id="rightmenu" valign="top">



<!--RIGHT Menu Starts Here-->

<center><b>AFFILIATES</b></center><br>

<center>
<a href="#">Affy 1</a><br>
<a href="#">Affy 2</a><br>
<a href="#">Affy 3</a>
</center>

<p>

<center><b>HEADER</b></center><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br>
<a href="#">Link Here</a><br><br><br><br><!-- Freewebs Sticker -->
<noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_circleblue.js">
</script>


<!--// RIGHT Menu Ends Here-->



</td>
</tr>
<tr>
<td width="529" height="250" valign="top">
<table cellspacing="2" cellpadding="7" width="529" height="300">
<tr><td id="content" valign="top">
<div align="justify">



<!--Start Editing CONTENT Here-->

<center><b><i><h1>.:. Updates! .:.</h1></b></i></center><br><br>
<p>
<table  width="364px"align="center" border="1">
<tr>
<th>
<img src="">
</th>
<th>
</th>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</p>


<!--// Stop Editing Content Here-->



</div>
</td>
</tr>
</table>
<table cellspacing="2" cellpadding="5">
<tr><td valign="top" id="disclaimer">



<!--Disclaimer Text Starts Here-->

The PsyPearl Valley is copywrited to Twilight, all images on this site are not to be used without permission, same goes for content. Twilight does not own Sonic, Warriors, Pokémon or any other subject under the fandom section of this site.<br><br><br>Online scince June 29, 2008!


<br><br>
<!--DO NOT REMOVE CREDITS BELOW-->
Layout Template by <a href="http://www.eonlightvalley.com">Eonlight Valley</a>.

<!--// Disclaimer Text Ends Here-->



</td>
</tr>
</table>
</body>
</html>

Negrek · Feb 1, 2009

There's... a lot of things wrong with this, honestly (you can tell just by the syntax highlighting; some of your CSS should not be white when the rest is dark blue) and it's kind of huge so I'm not going to look at it very carefully, but in general you need to be much more specific about your problems for coding help. For example, what on earth do you mean when you say the layout "breaks?"

You appear to have pasted a second stylesheet below the first... apparently inside the <link> tag... instead of making it external. There are other mistakes here, such as the fact that you've got some of those smart quotes that don't work for coding (they're the slanty kind ”) and that you're capitalizing stuff like A:hover that should't be capitalized. Really, though that pales in comparison to the fact that you actually have a random </html> tag in there and then a whole bunch of other stuff after it...and another one at the bottom.

It sort of looks like you just copy-pasted stuff from a bunch of free layouts/scripts that you thought you'd need and threw it together. If that's the case, I really encourage you to work bottom-up and learn at least the basics of doing this yourself before trying to modify other people's stuff. I'm afraid that at the moment the styleswitcher is the least of your problems; you've got a bit of a mess on your hands.

GiratinaGiratina · May 27, 2009

Well, for a start, you need to have both your stylesheets as external css files, for example style1.css and style2.css. All interchangable aspects of the CSS must be reliant on the CSS, (in other words, if you want the banner to change, you mustn't make your banner show using the <img src="banner"> tag).

If I'm totally honest, you're gonna need to start up from scratch. Everything is messy, it will be less effort to start again than to try and clear this up.

Lucas₇₅₅ · May 27, 2009

GiratinaGiratina said:
Well, for a start, you need to have both your stylesheets as external css files, for example style1.css and style2.css.

Not really.
It's usually a better idea to do so, but it's not necessary.

opaltiger · May 27, 2009

Lucas755 said:
Not really.
It's usually a better idea to do so, but it's not necessary.

Er, no, if you want a styleswitcher you need external stylesheets.

1. Luftballon · May 28, 2009

opaltiger said:
Er, no, if you want a styleswitcher you need external stylesheets.

Er, no, but it would be a really good idea unless the person wants to hardcode the css into a server-side styleswitcher. But then, when it gets sufficiently complex, they'll just move it to a different file anyway.

And, er, why is the css repeated in a the type field? type is for mime types, not for *idumpsdatahere*. btw, no doctype, and insert big number here errors.

But anyway, to the question, yes.

opaltiger · May 28, 2009

Er, no, but it would be a really good idea unless the person wants to hardcode the css into a server-side styleswitcher.

You're not meant to tell her that. >:(

Peter Shadeslayer · May 30, 2009

In summary, no you personally cannot use internal stylesheets in this style-switcher. I strongly suggest you look up a tutorial online somewhere. :]

1. Luftballon · May 31, 2009

Normally, I would say here that she can, but may not. And anyway, she'll look like an idiot for doing so.

But anyway, there is no styleswitcher code in there. Er.

Code:

No keyboard detected.
Press F1 to continue...

Major CSS issues; Am I doing something wrong? Styleswitcher help!

Shadowstar

I SWEAR I WILL GET ACTIVE AGAIN

Negrek

busy dizzy lazy

GiratinaGiratina

Two Giratinas are better than one.

Lucas₇₅₅

Screw the rules, I have green hair!

opaltiger

actually very huggable

1. Luftballon

Banned

opaltiger

actually very huggable

Peter Shadeslayer

New member

1. Luftballon

Banned