immanuelx2 Posted June 3, 2007 Share Posted June 3, 2007 Hi, I'm trying to get a menu for my page.... All I want is 1 <table>, 1 <tr> and 1 <td> to achieve the desired effect (see attachment). Basically, I have tried every combination of border-collapse, border-top, border-bottom, but I can't seem to get the 5px darker border (top/bottom) and the 1px white border (top/bottom) at the same time.... Any help is appreciated! [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted June 3, 2007 Share Posted June 3, 2007 Don't use a table, use a div. Look into using a list too but apply the principles below. html <div class="outer"> <a href="#"></a> </div> css .outer {width:200px; height:auto; background:#000; padding:5px 0;} .outer a {display:block; width:200px; height:30px; background:#c00; border-top:1px solid #fff; border-bottom:1px solid #fff;} Quote Link to comment Share on other sites More sharing options...
immanuelx2 Posted June 3, 2007 Author Share Posted June 3, 2007 how should i do the list If i want: > Home > Page1 > Page2 .... horizontally? Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted June 3, 2007 Share Posted June 3, 2007 You'd need html like this <ul id="menu"> <li><a href="link.html">Home</a></li> <li><a href="link.html">Page1</a></li> <li><a href="link.html">Page2</a></li> <li><a href="link.html">Page3</a></li> <li><a href="link.html">Page4</a></li> </ul> And css like this ul#menu {padding:0; margin:0; list-style-type:none;} /* removes all the default styles from the list */ ul#menu li {float:left;} /* the float makes the list elements horizontal */ ul#menu a, ul#menu a:visited {display:block; float:left;} Add a width and height to your list. Same for the <a> elements. Play around with styles and see how it comes out in your browser. Make sure that you check your css and markup are valid by using this website - http://www.w3.org/QA/Tools/. Hope that helps Quote Link to comment Share on other sites More sharing options...
immanuelx2 Posted June 4, 2007 Author Share Posted June 4, 2007 I followed your code in both replies.... i get something a little off http://tranceflow.com/aoc/index.php If you go to the Skills page, that it how it should look..... But that is using tables and a set height, with a background image on repeat-x.... not very practical Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted June 5, 2007 Share Posted June 5, 2007 Your markup and css are a mess - You closed the body or html tags. - You haven't modified the code I posted in anyway or made the additions I said would be required. - You've mistakenly tried to combine your tables, the div example, and the list example. ...I'm not even sure I understand what you are looking for anymore. So I'm just going to post some basic examples: A CSS horizontal list-based menu: <html> <head> <title>Website</title> <style type="text/css"> ul#menu {padding:0; margin:0; list-style-type:none; } /* removes all the default styles from the list */ ul#menu li {float:left;} /* the float makes the list elements horizontal */ ul#menu a, ul#menu a:visited {display:block; float:left; height:25px; line-height:25px; width:60px; background: #eeeedd; color:#6a0000; text-decoration:none; text-align:center; border-right:1px solid #fff;} ul#menu a:hover {background: #e4e4c3;} </style> </head> <body> <ul id="menu"> <li><a href="link.html">Home</a></li> <li><a href="link.html">Skills</a></li> <li><a href="link.html">Bestiary</a></li> <li><a href="link.html">Forums</a></li> </ul> </body> </html> The appearance you want for some sort of box containing links <html> <head> <title>Website</title> <style type="text/css"> .outer {width:300px; height:auto; background:#e4e4c3; padding:5px 0; } .inner {width:300px; height:50px; background:#eeeedd; border-top:1px solid #ffffff; border-bottom:1px solid #ffffff; } .inner a {color:#6a0000; text-decoration:none;} </style> </head> <body> <div class="outer"> <div class="inner"> » <a href="link.html">my link</a> » <a href="link.html">my link</a> » <a href="link.html">my link</a> » <a href="link.html">my link</a> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
immanuelx2 Posted June 5, 2007 Author Share Posted June 5, 2007 I appreciate it, the second set of code you gave me is perfect. I will work on the it, and i'll try to get rid of tables all together. One question though, how do i set a <div> to be in the center of a page? Should i use <center> before it or is there a better way? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.