Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: CSS help

  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS help

    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

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's something similar

    PHP Code:
    <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
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there dcslick,

    the span will not provide text-decoration:none. It needs to be set through the anchor tag...
    Code:
    <!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

  • #4
    New Coder
    Join Date
    May 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you both I really appreciate your assistance.

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

    PHP Code:
    <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!

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there dcslick,

    try this...
    Code:
    <!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

  • #6
    New Coder
    Join Date
    May 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot coothead, I really appreciate your assistance.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •