...

View Full Version : CSS help



dcslick
06-03-2005, 07:50 PM
I am in a intro web class and we are discussing css. I need to create one for some of my pages. But I have a question, how do I create a css sheet for this page below but to allow it to have the blue and greens and the color of the text as the code shows below. When i try to create the css sheet it changes the background to all the same and the text to all the same color. I want the green background and back text on the first line and then the blue background and orange text on the next lines. What am I doing wrong on the css sheet that this is not allowing me to have those changes.

TIA



<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Main</title>
</head>

<body link="#E46A1E" vlink="#E46A1E" alink="#E46A1E">


<div align="center">
<table border="1" width="32%" id="table2" height="147">
<tr>
<td bgcolor="#7CC142">
<p align="center"><b><font size="4">Click on your location</font></b></td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table3" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font size="5" color="#E46A1E">
<a target="_self" href="az.htm">
<span style="text-decoration: none">Arizona</span></a></font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" bgcolor="#424284" id="table4">
<tr>
<td>
<p align="center"><b><font size="5" color="#E46A1E">
<a target="_self" href="ore.htm">
<span style="text-decoration: none">Oregon</span></a></font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" bgcolor="#424284" id="table5">
<tr>
<td>
<p align="center"><b><font size="5" color="#E46A1E">
<a target="_self" href="sc.htm">
<span style="text-decoration: none">Southern
California</span></a></font></b></td>
</tr>
</table>
</td>
</tr>
</table>

</div>

</body>

</html>

Mr J
06-03-2005, 08:21 PM
Here's something similar


<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Main</title>

<style>
.div1{
width:32%;
background-color:#7CC142;
font-size:18px;
font-weight:bold;
margin-bottom:5px;
padding:5px;
border:2px ridge #FFFFFF;
}

.div2{
width:32%;
background-color:#424284;
color:#E46A1E;
font-size:24px;
font-weight:bold;
margin-bottom:5px;
padding:5px;
border:2px ridge #FFFFFF;
}
</style>
</head>

<body link="#E46A1E" vlink="#E46A1E" alink="#E46A1E">

<div style="text-align:center">

<div class="div1">
Click on your location
</div>

<div class="div2">
<a target="_self" href="az.htm"><span style="text-decoration: none">Arizona</span></a>
</div>

<div class="div2">
<a target="_self" href="ore.htm"><span style="text-decoration: none">Oregon</span></a>
</div>

<div class="div2">
<a target="_self" href="sc.htm"><span style="text-decoration: none">Southern California</span></a>
</div>


</div>

</body>

</html>

coothead
06-03-2005, 08:57 PM
Hi there dcslick,

the span will not provide text-decoration:none. It needs to be set through the anchor tag...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Main</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
font-family:arial,verdana,helvetica,sans-serif;
}
#container {
width:32%;
margin:auto;
border:1px solid #000;
padding-bottom:1px;
}
#location {
font-size:22px;
font-weight:bold;
text-align:center;
background-color:#7cc142;
border:3px double #000;
margin:2px 2px 1px 2px;
}
.states {
font-size:27px;
font-weight:bold;
text-align:center;
background-color:#424284;
border:3px double #000;
margin:2px 2px 1px 2px;
}
.states a{
color:#e46a1e;
text-decoration:none;
}
/*//]]>*/
</style>

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

</head>
<body>

<div id="container">

<div id="location">Click on your location</div>

<div class="states">
<a href="az.htm">Arizona</a>
</div>

<div class="states">
<a href="ore.htm">Oregon</a>
</div>

<div class="states">
<a href="sc.htm">Southern California</a>
</div>

</div>

</body>
</html>

coothead

dcslick
06-03-2005, 09:39 PM
Thank you both I really appreciate your assistance.

Coolhead, how can i do something similiar to this page?



<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Arizona</title>
</head>

<body link="#E46A1E" vlink="#E46A1E" alink="#E46A1E">

<table align=left border="1" width="25%" id="table1" height="45%" cellspacing="1" cellpadding="0">
<tr>
<td>
<table border="1" width="100%" id="table2" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">
<a target="_self" href="main.htm">
<span style="text-decoration: none">HOME</span></a></font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table3" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">PHONE EXTENSIONS</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table4" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">AZ LINKS</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table5" bgcolor="#424284">
<tr>
<td>
<p align="center"><b>
<a target="_blank" href="http://www.hrh.com/pages/home.asp">
<font color="#E46A1E"><span style="text-decoration: none">
HRH.COM</span></font></a></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table6" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">
<a target="_blank" href="http://infosource.hrh.com/home.asp">
<span style="text-decoration: none">INFOSOURCE</span></a></font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table7" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">AZ CALENDAR</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table8" bgcolor="#424284">
<tr>
<td nowrap>
<p align="center"><b><font color="#E46A1E">AZ ANNOUNCEMENTS</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table9" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">FUN COMMITTEE</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1" width="100%" id="table10" bgcolor="#424284">
<tr>
<td>
<p align="center"><b><font color="#E46A1E">AUTOMATION</font></b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p align="center"><b><font color="#E46A1E">TBD</font></b></td>
</tr>
</table>

<div align="left">
<table border="0" width="75%" id="table11" height="74%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" width="75%" height="50%">
<p align="center"><b><font color="#E46A1E" size="5">NEWS AND NOTES
FOR HRH OF ARIZONA</font></b><ul>
<li>
<p align="left"><b><font size="4" color="#7CC142">Welcome to the
new HRH of Arizona Employee Website</font></b></li>
<li>
<p align="left"><font size="4" color="#7CC142"><b>Future news
and information for the Arizona offices will be located here</b></font></li>
</ul>
</td>
</tr>
</table>
</div>

</body>

</html>



thanks again!

coothead
06-03-2005, 10:53 PM
Hi there dcslick,

try this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Arizona</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
#left {
font-family:arial,verdana,helvetic,sans-serif;
font-size:18px;
font-weight:bold;
width:24%;
float:left;
border:1px solid #999;
padding-bottom:4px;
}
.links {
background-color:#424284;
border:3px double #999;
padding:3px 0px;
margin:4px 4px 0px 4px;
text-align:center;
}
.links a {
color:#e46a1e;
text-decoration:none;
}
#right {
width:75%;
float:left;
}
#right h1 {
font-size:27px;
color:#e46a1e;text-align:center;
}
#right li {
font-size:24px;
color:#7cc142;
}
/*//]]>*/
</style>

</head>
<body>

<div id="left">

<div class="links"><a href="#">HOME</a></div>
<div class="links"><a href="#">PHONE EXTENSIONS</a></div>
<div class="links"><a href="#">AZ LINKS</a></div>
<div class="links"><a href="#">HRH.COM</a></div>
<div class="links"><a href="#">INFOSOURCE</a></div>
<div class="links"><a href="#">AZ CALENDAR</a></div>
<div class="links"><a href="#">AZ ANNOUNCEMENTS</a></div>
<div class="links"><a href="#">FUN COMMITTEE</a></div>
<div class="links"><a href="#">AUTOMATION</a></div>
<div class="links"><a href="#">TBD</a></div>

</div>

<div id="right">

<h1>NEWS AND NOTES FOR HRH OF ARIZONA</h1>

<ul>
<li>Welcome to the new HRH of Arizona Employee Website</li>
<li>Future news and information for the Arizona offices will be located here</li>
</ul>

</div>

</body>
</html>


coothead

dcslick
06-04-2005, 12:00 AM
Thanks a lot coothead, I really appreciate your assistance.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum