PDA

View Full Version : N00bish CSS/HTML Question

skyclaw441
12-27-2009, 09:40 PM
OK, so I'm trying to format an unordered list on my webpage, but I already used an unordered list to make a banner. How can I format this list (change font, bullet image) without fucking up the whole banner?

<title>Da Bridge :: skyclaw441 :: Study Guides</title>
<head>
<STYLE TYPE-"type/css">

<!--
BODY {background-color: #000000}
A:link {color: #FFFFFF; text-decoration:none}
A:visited {color: #FFFFFF; text-decoration: none}
A:hover {color: #CCC;}
H1 {font-size: 30pt; font-family: arial; color: #FFFFFF}
H2 {font-size: 18pt; font-family: arial; color:#FFFFFF}
H3 {font-size:14pt; font-family: arial; color: #FFFFFF}
H4 {font-size: 12pt; font-family: arial; color: #FFFFFF}
H5 {font-size: 11pt; font-family: arial; color: #FFFFFF}
P {font-size: 9pt; font-family: arial; color: #FFFFFF}


-->

</STYLE>
</head>

<div align="center">

<p><a href="http://www.freewebs.com/skyclaw441">skyclaw441 :: back to home</a></p>
<img src="http://www.freewebs.com/skyclaw441/bridgeshrink_GREY0.jpeg"><br><br>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--

#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
background: url(http://www.freewebs.com/skyclaw441/bannerback.jpg);
}

#navbar ul li {
display: inline;
}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: transparent;
font-family:sans-serif;
}

#navbar ul li a:hover {
color: #000;
background-color: #CCC;
}

-->
</style>

</head>
<body>
<div id="navbar">
<ul>
<li><a href="http://www.freewebs.com/skyclaw441/dabridge.html">Home: Da Bridge</a></li>
<li><a href="http://www.freewebs.com/skyclaw441/studyguides.html">Study Guides</a></li>
<li><a href="http://www.freewebs.com/skyclaw441/files.html">Files</a></li>
<li><a href="http://www.freewebs.com/skyclaw441">skyclaw441</a></li>
<li><a href="http://neodomainforums.proboards.com/">BBS</a></li>
</ul>
</div>
</body>
</html>
</div>
<br>

<div align="center">

<h2>STUDY GUIDES</h></div><br><br>

<h3>Chemistry</h3>
<ul>
<p><li><a href="http://skyclaw441.webs.com/periodiclaw.html">Periodic Law</a></li>
<li><a href="http://skyclaw441.webs.com/chapter4guide.html">Light, Electrons, and Orbitals</a></li>
<li><a href="http://skyclaw441.webs.com/intro2bonding.html">Introduction to Bonding</a></li>(COMING SOON)

Should my information outside of the </body> be inside of </body>? That's one thing that I notice in which I differ from CSS for Dummies. :confused:
Jack
12-27-2009, 09:53 PM
Is this supposed to be one page? There should only be one doctype declaration, one head, one body, one title. Also, all the CSS should be in one chunk (or preferably external (http://www.google.com/search?q=external+stylesheet).) I'll rearrange things as if it's one page, anyway, because I can't think straight with all this shit scattered around. :P Note the locations of opening and closing html, head, and body tags.

Here we added #guides {} to the stylesheet and changed <ul> to <ul id="guides"> -- of course if we want to be more specific we can create different formatting for the Chemistry guides than for the other types.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<head>
<STYLE TYPE="text/css">


BODY {background-color: #000000}
A:link {color: #FFFFFF; text-decoration:none}
A:visited {color: #FFFFFF; text-decoration: none}
A:hover {color: #CCC;}
H1 {font-size: 30pt; font-family: arial; color: #FFFFFF}
H2 {font-size: 18pt; font-family: arial; color:#FFFFFF}
H3 {font-size:14pt; font-family: arial; color: #FFFFFF}
H4 {font-size: 12pt; font-family: arial; color: #FFFFFF}
H5 {font-size: 11pt; font-family: arial; color: #FFFFFF}
P {font-size: 9pt; font-family: arial; color: #FFFFFF}

#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
background: url(http://www.freewebs.com/skyclaw441/bannerback.jpg);
}

#navbar ul li {
display: inline;
}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: transparent;
font-family:sans-serif;
}

#navbar ul li a:hover {
color: #000;
background-color: #CCC;
}

#guides {
list-style-type: square;
font-family: monospace;
color: #f00;
background-color: #fff;
}

</STYLE>
</head>

<div align="center">

<p><a href="http://www.freewebs.com/skyclaw441">skyclaw441 :: back to home</a></p>
<img src="http://www.freewebs.com/skyclaw441/bridgeshrink_GREY0.jpeg"><br><br>

</head>-

<body>

<div id="navbar">
<ul>
<li><a href="http://www.freewebs.com/skyclaw441/dabridge.html">Home: Da Bridge</a></li>
<li><a href="http://www.freewebs.com/skyclaw441/studyguides.html">Study Guides</a></li>
<li><a href="http://www.freewebs.com/skyclaw441/files.html">Files</a></li>
<li><a href="http://www.freewebs.com/skyclaw441">skyclaw441</a></li>
<li><a href="http://neodomainforums.proboards.com/">BBS</a></li>
</ul>
</div>
</div>
<br>

<div align="center">

<h2>STUDY GUIDES</h></div><br><br>

<h3>Chemistry</h3>
<ul id="guides">
<p><li><a href="http://skyclaw441.webs.com/periodiclaw.html">Periodic Law</a></li>
<li><a href="http://skyclaw441.webs.com/chapter4guide.html">Light, Electrons, and Orbitals</a></li>
<li><a href="http://skyclaw441.webs.com/intro2bonding.html">Introduction to Bonding</a></li>(COMING SOON)
</ul>

</body>

</html>
skyclaw441
12-27-2009, 09:57 PM
Is this supposed to be one page? There should only be one doctype declaration, one head, one body, one title. Also, all the CSS should be in one chunk (or preferably external (http://www.google.com/search?q=external+stylesheet).) I'll rearrange things as if it's one page, anyway, because I can't think straight with all this shit scattered around. :P Note the locations of opening and closing html, head, and body tags.

Here we added #guides {} to the stylesheet and changed <ul> to <ul id="guides"> -- of course if we want to be more specific we can create different formatting for the Chemistry guides than for the other types.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<head>
<STYLE TYPE="text/css">


BODY {background-color: #000000}
A:link {color: #FFFFFF; text-decoration:none}
A:visited {color: #FFFFFF; text-decoration: none}
A:hover {color: #CCC;}
H1 {font-size: 30pt; font-family: arial; color: #FFFFFF}
H2 {font-size: 18pt; font-family: arial; color:#FFFFFF}
H3 {font-size:14pt; font-family: arial; color: #FFFFFF}
H4 {font-size: 12pt; font-family: arial; color: #FFFFFF}
H5 {font-size: 11pt; font-family: arial; color: #FFFFFF}
P {font-size: 9pt; font-family: arial; color: #FFFFFF}

#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
background: url(http://www.freewebs.com/skyclaw441/bannerback.jpg);
}

#navbar ul li {
display: inline;
}

#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: transparent;
font-family:sans-serif;
}

#navbar ul li a:hover {
color: #000;
background-color: #CCC;
}

#guides {
list-style-type: square;
font-family: monospace;
color: #f00;
background-color: #fff;
}

</STYLE>
</head>

<div align="center">

<p><a href="http://www.freewebs.com/skyclaw441">skyclaw441 :: back to home</a></p>
<img src="http://www.freewebs.com/skyclaw441/bridgeshrink_GREY0.jpeg"><br><br>

</head>-

<body>

<div id="navbar">
<ul>
<li><a href="http://www.freewebs.com/skyclaw441/dabridge.html">Home: Da Bridge</a></li>
<li><a href="http://www.freewebs.com/skyclaw441/studyguides.html">Study Guides</a></li>
<li><a href="http://www.freewebs.com/skyclaw441/files.html">Files</a></li>
<li><a href="http://www.freewebs.com/skyclaw441">skyclaw441</a></li>
<li><a href="http://neodomainforums.proboards.com/">BBS</a></li>
</ul>
</div>
</div>
<br>

<div align="center">

<h2>STUDY GUIDES</h></div><br><br>

<h3>Chemistry</h3>
<ul id="guides">
<p><li><a href="http://skyclaw441.webs.com/periodiclaw.html">Periodic Law</a></li>
<li><a href="http://skyclaw441.webs.com/chapter4guide.html">Light, Electrons, and Orbitals</a></li>
<li><a href="http://skyclaw441.webs.com/intro2bonding.html">Introduction to Bonding</a></li>(COMING SOON)
</ul>

</body>

</html>


Ah, thanks. I was planning on making the CSS external, but this is only the second page that I built so I lazily slopped the CSS from the previous page onto this one. I guess I'll move my CSS to an external sheet. Thank you very much for the edit.EDIT: The only question is, what should I move to maintain a working banner?
Jack
12-27-2009, 10:05 PM
You don't have to move anything, though I'm not sure what you mean.

You just need to specify formatting for elements with id guides (#guides) so that when you assign an UL id guides (<ul id="guides">) it will apply only to that UL and that UL will not take on the formatting of the banner (which is specified here as #navbar).