SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS... some questions and critique

    Hello all,

    I am new to designing website and especially with CSS... Last night I took a stab at doing a design and layout for my new cycling teams website.

    I am not sure if I am using the div, span, etc. tags right... but that is different issue.

    Anyhow, I am looking to get alternating color bars behind the line of text that is the new result on the main page. Grey, white, grey.. I can't figure it out to save my life.

    I got the nav rollover to work, but I would like to make links not in the nav have a rollover function, and change color.

    Here is the link http://www.breakawayracing.org/csstest/csstest.html

    Also, any general comments, suggestions, critiques are very welcome.

    Cheers!

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get gray behind one line, and white behind the other, asign each line of text to a class, or id, and make it's background color gray or white, give it whatever width you want, height, border, and all that.

    If you want the background color to change, when moused over, you can use basically the same code you used for the menu rollovers, just don't link to anywhere.

    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">
    <head>
     <title>Alternating Text Background</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
       
       body{margin: 0;
    		padding:0;
    		background:lightslategray;}
      #container{position:relative;
    						   top:100px;
    						   left:300px;
    						   width:200px;
    	  border:solid black 1px;}
      .white{position:relative;
    					   top:0;
    					   padding-left:20px;
    					   background:white;}
      .gray{position:relative;
    					  top:0;
    		padding-left:20px;
    					  background:lightgrey;}
     
    
    </style>
    </head>
    <body>
     
     <div id="container">
     
       <div class="white">
    	This is on white
       </div>
       <div class="gray">
    		   This is on gray
       </div>
     
       <div class="white">
    	This is on white
       </div>
       <div class="gray">
    		   This is on gray
       </div>
       <div class="white">
    	This is on white
       </div>
     </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks pretty neat I have to say

    What you could do is put the menu at the bottom in your Source code, so it won't be indexed at first when googlebot arives. Put your content first.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks.

    Thanks for the kind words...

    Would you actually put the navigation at the bottom of the page? I don't really follow... I am new to this and I don't really understand code... Could you explain a little more?

    Also, the footer gets pushed down a bit in IE 5... is this just something I have to live with?

    What is the best way to make the 2 text boxes/area columns? That was a pain and I am not sure if it is the right way to do it... I had a really hard time with that and spent a few hours just on that.

    Thanks again for the help.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover

    Hey Doc... thanks!

    I want to do just a basic text rollover on the text links within paragraphs, lists, etc... like the "Register at Racelistings.com" I just want the text to change color when rollover...

    Not sure how to go about that...

    Thanks again.

  6. #6
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can put the menu in bottom of the code and absolute position it to the top of the document with CSS

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >What you could do is put the menu at the bottom in your Source code, so it won't be indexed at first when googlebot arives. Put your content first.

    You may want to consider the examples of Zeldman, Dan Cederholm and Doug Bowman etc - and, where the navigation is SIMPLE - leave it in the normal flow. Why? Because there are usability advantages to readers receiving unstyled content - specifically handhelds/impaired etc. With an appropriate meta tag description this need not be an impediment to search engines.


Bookmarks

Posting Permissions

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