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] Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/ 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;} Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/#findComment-267372 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? Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/#findComment-267464 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 Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/#findComment-267473 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 Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/#findComment-267760 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> Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/#findComment-268483 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? Link to comment https://forums.phpfreaks.com/topic/54077-simple-tableborder-issue/#findComment-268854 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.