Example: if I have desain table like below, how make it with css version? This is table script: <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%"><h1>My Logo</h1></td> <td width="9%" align="center">Home</td> <td width="10%" align="center">Forum</td> <td width="14%" align="center">Hubungi Saya </td> <td width="42%"> </td> </tr> </table> HTML: I want change it with css, how that script?
There's a few different ways to approach that. How about a list? You'd need to code it first. I've assigned the first list item with a class since it will be larger. The rest of the items can share the same width, unless you'd like it otherwise. <ul> <li class="logo">Logo</li> <li>Home</li> <li>forum</li> <li>Hubungi Saya</li> </ul> HTML: Then you'll need to define the CSS. I won't post the CSS since I don't know what you want, and it'd take a while to write up, but there are a ton of tutorials out there on making horizontal menus out of lists.
Thing is there steelfrog - the logo is not part of the menu, neither is the 'says hi' text, so it's really inappropriate to put them in the list. Guessing here since without the ACTUAL appearance of the page that's all I can do - but for semantic markup I'd do that as: <h1> Site Title <span></span> </h1> <ul id="mainMenu"> <li><a href="#">Home</a></li> <li><a href="#">Forum</a></li> </ul> <div id="welcomeText"> Hubungi Saya </div> Code (markup): The empty span is for an image replacement technique since a logo is a presentational replacement for the name of the site. Presentational elements do NOT belong in the markup, so an IMG tag would be inappropriate. Without seeing what the page would look like though, I can't say for certain. Of course even as a table the original code is /FAIL/ after 1998. If I was doing that as a table it would simply read: <table id="header"> <tr> <th>My Logo</th> <td>Home</td> <td>Forum</td> <td class="welcome">Hubungi Saya</td> <td class="blank"></td> </tr> </table> Code (markup): with everything else you applied being set in the CSS.
Ok, this is preview code from "deathshadow" : Site Title Home Forum Hubungi Saya I want preview (show) like this: Site Title Home | Forum | Contact Us How do that?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <style type="text/css" media="screen"> ul#mainMenu li { display:inline; padding-right:20px; font:normal 12px tahoma, sans-serif; line-height:100%; } h1#sitetitle { padding-right:20px; display:inline; } </style> </head> <body> <ul id="mainMenu"> <li><h1 id="sitetitle"><span>Site Title</span></h1></li> <li><a href="#">Home</a> |</li> <li><a href="#">Forum</a> |</li> <li><a href="#">Contact Us</a></li> </ul> <div id="welcomeText"> Hubungi Saya </div> </body> </html>
Close there SibTiger, except the H1 is not a list item, but the header before the list - so it shouldn't be in the list, the presentational spaces and dividers are made of /FAIL/, since there should only be one h1 on a page there is no reason to waste a class on it, 100% line-height is made of /FAIL/ since it makes no room for descenders, etc, etc, etc... The reason I didn't include CSS is not enough information was given about what it should look like. I was thinking it would be more likely that acepsdr was thinking on something that should be done with floats.
the css i used was just an idea about how it could look easy to modify as you say deathshadow - take the header out of the li
I agree that a list would probably be the most appropriate. Something like this, I'm just writing it from my head so I don't guarantee it will work... First, HTML markup: <div id="csstable"> <h1>My Logo</h1> <ul> <li><a href="">Home</a></li> <li><a href="">Forum</a></li> <li><a href="">Hubungi Saya</a></li> </ul> </div><!-- close css table --> Code (markup): Styles: #csstable h1 { float:left; padding:5px; } #csstable ul { display:block; float:left; } #csstable a { display:block; float:left; padding:5px; } Code (markup):