SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: td classes?

  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question td classes?

    Yesterday someone helped me create a horizontal menu with css-- but because the padding for the buttons was in ems instead of percentages, they are very inflexible and do weird things on different screens. Do I have to use a one row table and make each cell a menu option in order to have a flexible layout that won't wrap on a lower resolution screen? If so, can I make a td class with a hover attribute? The way I'm trying, it isn't working:

    td.menu {
    background-color: #ff9a00;
    border: 1px;
    border-style: solid;
    border-color: #707276;
    }

    td.menu:hover {
    background-color: #009dd9;
    }

    Or can only "a" tags get hovers? Am I just totally backwards? I wanted so badly to do this all in CSS, but I'm just CONFUSED!
    "Fear Me!" Viking Ninja Kitten

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Without your HTML it's difficult, hover in IE < 7 are only on A Tags , the last table is for IE < 7 also , maybe consider using a UL LI + A tags for a Menu
    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>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    .menu{
    background-color: #ff9a00;
    border:1px;
    border-style: solid;
    border-color: #707276;
    }
    
    table.menu{border:none;border-top:1px solid #000000;}
    
    .menu td,.menu a{
    background: #ff9a00;
    border:1px solid #707276;
    border-top:none;
    }
    
    .menu:hover,.menu td:hover,.menu a:hover{
    background: #009dd9;
    }
    .menu a{border:none;display:block;text-decoration:none;}
    .menu a:hover{background:#ffff00;}
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <table border="0" cellpadding="0" cellspacing="0">
    <tr ><td class="menu">1234567</td></tr>
    <tr><td>12345678</td></tr>
    <tr><td class="menu">123456789</td></tr>
    <tr><td>12345</td></tr>
    </table>
    <p>&nbsp;</p>
    <table border="0" cellpadding="0" cellspacing="0" class="menu">
    <tr>
    <td>12345</td>
    <td>1234567</td>
    <td>12345678</td>
    <td>123456789</td>
    </tr>
    </table>
    <p>&nbsp;</p>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td class="menu">12345</td>
    <td>1234567</td>
    <td  class="menu">12345678</td>
    <td>123456789</td>
    </tr>
    </table>
    <p>&nbsp;</p>
    <table border="0" cellpadding="0" cellspacing="0" class="menu">
    <tr>
    <td><a href="##">12345</a></td>
    <td><a href="##">1234</a></td>
    <td><a href="##">12345678</a></td>
    <td><a href="##">123456789</a></td>
    </tr>
    </table>
    
    </body>
    </html>

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tables should only be used for tabular data. For a menu you should be using an unordered list.

    This should help

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Horizontal CSS Navigation</title>
    <style type="text/css">
    * {
    	margin: 0; padding: 0;
    }
    body {
    	margin: 10px auto;
    	width: 600px;
    	background-color: #000;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 70&#37;;
    }
    h1 {
    	float: left;
    	width: 100%;
    	padding-top: 10px;
    	color: #C00;		
    }
    p {
    	margin-bottom: 10px;	
    }
    #container {
    	width: 600px;
    	float: left;
    	background-color: #FFF;	
    }
    #content {
    	padding: 10px;	
    }
    #navigation {
    	float: left;
    	width: 100%;
    	background-color: #C00;	
    }
    #navigation li {
    	float: left;
    	list-style-type: none;	
    }
    #navigation a, #navigation a:link {
    	margin: 1px 0px 1px 1px;
    	display: block;
    	padding: 5px 10px;
    	background-color: #CCC;
    	text-decoration: none;
    	color: #000;
    }
    #navigation a:hover {
    	color: #FFF;
    	background-color: #000;	
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<ul id="navigation">
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 4</a></li>
    		<li><a href="#">Link 5</a></li>
    	</ul>
    	<div id="content">
    		<h1>Header</h1>
    		<p>
    		Integer venenatis. Nulla turpis tortor, luctus a, laoreet non, faucibus hendrerit, sapien. Proin sapien risus, vulputate quis, faucibus vitae, condimentum sed, nisi. Suspendisse vitae augue. Curabitur a nisl. Pellentesque fermentum ante quis justo. Sed eu enim. In suscipit semper leo. Aliquam erat volutpat. Maecenas nec urna. Nulla tincidunt sagittis lectus. Maecenas quis est. Nulla vitae urna at purus laoreet dictum.
    		</p>
    		<p>
    		Pellentesque vehicula. Suspendisse vehicula semper quam. Aenean sit amet sapien quis justo venenatis iaculis. Ut odio felis, posuere sed, aliquam quis, scelerisque id, velit. Nam fermentum ultricies sem. Ut consequat turpis eget neque. Curabitur ac quam in velit tincidunt rutrum. In dignissim. Nullam quis purus ac urna fringilla sagittis. Aliquam ultrices magna eu dui. Sed ac arcu. Ut nibh orci, tincidunt at, semper quis, vestibulum et, sapien.
    		</p>
    		<p>
    		Ut vestibulum. Aliquam lectus augue, laoreet a, semper nec, rutrum sed, nibh. Vivamus sollicitudin pretium ligula. Curabitur est metus, dignissim et, semper quis, sollicitudin ac, sapien. Sed in orci sit amet dui dignissim pulvinar. Nulla vitae metus eu eros tempus fringilla. Curabitur nec ipsum et arcu mattis tempor. Quisque ligula felis, sodales quis, tempor et, malesuada sit amet, lacus. Vestibulum consequat accumsan sem. Etiam vehicula, erat ultrices porttitor posuere, felis tortor sollicitudin turpis, eget sagittis nibh velit et purus. Aliquam et eros. 
    		</p>
    	</div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry! My HTML is really simple:

    <tr>
    <td class="menu"><a class="menu">Weighting Evaluation</a></td>
    <td class="menu"><a class="menu">Weighting Evaluation</a></td>
    <td class="menu"><a class="menu">Weighting Evaluation</a></td>
    <td class="menu"><a class="menu">Weighting Evaluation</a></td>
    </tr>

    I made a td.menu class and an a.menu class-- this is just not working!
    The sad part is my pretty css ul menu worked perfectly, but kept wrapping to the next line on my boss's low-res monitor. Grrr.

    I don't understand this part:

    .menu:hover,.menu td:hover{
    background-color: #009dd9;
    }

    Can you tell me how that works?

    I know I'm really bad at this-- everyone on this forum board is amazing. I can't thank you enough for your help!

    Maybe the CSS that worked (that I can't use because of the width/flexibility issue) would show more clearly what I'm trying to do--

    ul {
    float:left;
    width:100&#37;;
    padding:0;
    margin:0;
    list-style-type:none;
    }

    li {
    display:inline
    }

    a.menu {
    font-family: bliss, trebuchet ms, arial, sans serif;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    padding: 10% 40%;
    background-color: #ff9a00;
    border-style: solid;
    border-color: #707276;
    border-width:0px 1px 1px 0px;
    float:left;
    }

    a.menu:hover {
    font-family: bliss, trebuchet ms, arial, sans serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    padding: 10% 40%;
    background-color: #009dd9;
    border-style: solid;
    border-color: #009dd9;
    border-width: 0px 1px 1px 0px;
    }

    And then:
    <ul>
    <li><a class="menu" href="#">Link One</a></li>
    <li><a class="menu" href="#">Link Two</a></li>
    <li><a class="menu" href="#">Link Three</a></li>
    <li><a class="menu" href="#">Link Four</a></li></ul>
    "Fear Me!" Viking Ninja Kitten

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    td.menu ????? or a.menu ? both lock op the class re-use

    .menu is fine to use on the table or ul tag , then it gets .menu a

    <table class="menu">

    or
    <ul class="menu">

  6. #6
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotcha, all4nerds; I didn't know there was a class re-use issue-- but it makes sense now that you mention it!

    csswiz, oh great guru who always fixes my problems and to whom I am eternally grateful, your code is lovely and it did help-- but I was really hoping there was a way to make those menu options stretch across the screen so that there wouldn't be a block of background color without the menu buttons-- and visa versa, when the window is not maximized, the buttons wouldn't wrap around to a second line, but just get shorter. Hopefully this would work if I had a page that had three menu options or six. Is this wishful thinking, or just too complex for my little aching brain cells?
    As always, thank you so much for your time. <bows and backs away humbly>
    "Fear Me!" Viking Ninja Kitten

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's certainly possible in CSS, using five menu options as an example you could use this although you'd need to change the width of the li if there were more options.

    I'm sure there's a more flexible solution whereby the menu's adjust automatically depending on the amount of menu items although that'll take some investigating when I've got a bit more time (If Paul doesn't beat me to it )

    In the meantime, something like this may work?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Horizontal CSS Navigation</title>
    <style type="text/css">
    * {
    	margin: 0; padding: 0;
    }
    body {
    	padding: 10px;
    	background-color: #000;
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 70&#37;;
    }
    h1 {
    	float: left;
    	width: 100%;
    	padding-top: 10px;
    	color: #C00;		
    }
    p {
    	margin-bottom: 10px;	
    }
    #container {
    	width: 100%;
    	float: left;
    	background-color: #FFF;	
    }
    #content {
    	padding: 10px;	
    }
    #navigation {
    	float: left;
    	width: 100%;
    }
    #navigation li {
    	float: left;
    	list-style-type: none;
    	width: 20%;
    	text-align: center;
    }
    #navigation a, #navigation a:link {
    	margin: 1px 1px 1px 1px;
    	display: block;
    	padding: 5px 0px;
    	background-color: #CCC;
    	text-decoration: none;
    	color: #000;
    }
    #navigation a:hover {
    	color: #FFF;
    	background-color: #000;	
    }
    </style>
    </head>
    <body>
    <div id="container">
    	<ul id="navigation">
    		<li><a href="#">Link 1</a></li>
    		<li><a href="#">Link 2</a></li>
    		<li><a href="#">Link 3</a></li>
    		<li><a href="#">Link 4</a></li>
    		<li><a href="#">Link 5</a></li>
    	</ul>
    	<div id="content">
    		<h1>Header</h1>
    		<p>
    		Integer venenatis. Nulla turpis tortor, luctus a, laoreet non, faucibus hendrerit, sapien. Proin sapien risus, vulputate quis, faucibus vitae, condimentum sed, nisi. Suspendisse vitae augue. Curabitur a nisl. Pellentesque fermentum ante quis justo. Sed eu enim. In suscipit semper leo. Aliquam erat volutpat. Maecenas nec urna. Nulla tincidunt sagittis lectus. Maecenas quis est. Nulla vitae urna at purus laoreet dictum.
    		</p>
    		<p>
    		Pellentesque vehicula. Suspendisse vehicula semper quam. Aenean sit amet sapien quis justo venenatis iaculis. Ut odio felis, posuere sed, aliquam quis, scelerisque id, velit. Nam fermentum ultricies sem. Ut consequat turpis eget neque. Curabitur ac quam in velit tincidunt rutrum. In dignissim. Nullam quis purus ac urna fringilla sagittis. Aliquam ultrices magna eu dui. Sed ac arcu. Ut nibh orci, tincidunt at, semper quis, vestibulum et, sapien.
    		</p>
    		<p>
    		Ut vestibulum. Aliquam lectus augue, laoreet a, semper nec, rutrum sed, nibh. Vivamus sollicitudin pretium ligula. Curabitur est metus, dignissim et, semper quis, sollicitudin ac, sapien. Sed in orci sit amet dui dignissim pulvinar. Nulla vitae metus eu eros tempus fringilla. Curabitur nec ipsum et arcu mattis tempor. Quisque ligula felis, sodales quis, tempor et, malesuada sit amet, lacus. Vestibulum consequat accumsan sem. Etiam vehicula, erat ultrices porttitor posuere, felis tortor sollicitudin turpis, eget sagittis nibh velit et purus. Aliquam et eros. 
    		</p>
    	</div>
    </div>
    </body>
    </html>

  8. #8
    SitePoint Member
    Join Date
    Jan 2007
    Location
    Elgin, Illinois
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OoooOooh! <delighted> That pretty much does what I need... It still wraps a bit oddly--sometimes-- when the window is resized, but for the most part it's lovely. Strangely, I had to put the "text-align: center" bit in the "#navigation a, #navigation a:link" section as well for the text to actually center, but it does work.
    I've never used IDs or DIVs before, so this is kind of exciting; I think I might see how this is working... I might be learning something! Thank you so much for your help, csswiz and all4nerds! ;D
    "Fear Me!" Viking Ninja Kitten

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I'd not tested it cross browser so presumably it could be the rounding bug as you shouldn't have &#37; adding upto exactly 100% for some browsers which is obviously the case with the five 20% list items.

    Hope it gives you a decent starting point though. There's a couple of CSS tutorials in the link on my signature for a couple of css layouts whilst you might find http://www.cssplay.com petty useful.

    Tables were only ever meant for displaying tabular data so for everything else you should be using CSS. You may have to think slightly differently but you can make that transition with a bit of practice.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, there's another way of making horizontal menus.

    Check this example out (ripped directly from my personal site, still under construction).
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    #menu {
    	background: #C9C69D;
    	border-bottom: 1px solid #000080;
    	color: inherit;
    	height: 1.5em;
    	line-height: 1.5em;
    	list-style: none;
    }
    	#menu li {
    		display: inline;
    		white-space: nowrap;
    	}
    	
    	#menu a {
    		background: #C9C69D;
    		border-right: 1px solid #000080;
    		color: #000;
    		float: left;
    		font-family: arial, helvetica, sans-serif;
    		height: 1.5em;
    		padding: 0 0.5em;
    		text-decoration: none;
    	}
    
    	#menu a.current-page {
    		background: #F5F5DC;
    		color: #000;
    		font-weight: bold;
    		position: relative;
    			bottom: -1px;
    	}
    
    	#menu a:hover {
    		background: #E5E5E5;
    		color: #000;
    	}
    
    	#menu a.current-page:hover {
    		background: #F5F5DC;
    		color: #000;
    		text-decoration: underline;
    	}
    Code:
    <ul id="menu">
    	<li><a class="current-page" href="#" title="Go to (Snip) Home Page">Home</a></li>
    	<li><a href="#" title="About (Snip)">Who I Am</a></li>
    	<li><a href="#" title="(Snip)">Why You Should Hire Me</a></li>
    	<li><a href="#" title="(Snip)">What Have I Done Lately?</a></li>
    	<li><a href="#" title="(Snip) personal musings">My Writing</a></li>
    	<li><a href="#" title="Send (Snip) a Message">Contact (Snip)</a></li>
    </ul>
    Of course the (Snip) text is stuff I had to remove for the purpose of this post due to SitePoint's no self-promotion policy (in posts). Bear in mind the code isn't 100&#37; perfect, but that's why the site's still "under construction" so to speak.


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
  •