Table into CSS (2.0)

L

liunx

Guest
Hi There.

I build a menu in a table but I'm trying to figure out a way to get a smaller, cleaner code in CSS. Could you tell me if it's possible?

Here's the HTML code:

<table border="0" cellspacing="0" cellpadding="0" background="menuBG.jpg" style="text-align: center; font-weight: 700; font-size: 12px; color: #fff;">
<tr>
<td width="80">link1</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"menuOffEnd.jpg"></td>

<td width="80">link2</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"menuOffEnd.jpg"></td>

<td width="80">link3</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"menuOffEnd.jpg"></td>

<td width="80">link4</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"menuOffEnd.jpg"></td>

<td width="80">link5</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"menuOffEnd.jpg"></td>

<td width="80">link6</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"menuOffEnd.jpg"></td>

<td width="80">link7</td>
<td><img src=http://www.webdeveloper.com/forum/archive/index.php/"imgs/menuEnd.jpg"></td>
</tr>
</table>


Attached a photo of how it looks like.i think u could use a couple inline divs and use images as borders..talking about...?You could use a list. (Change the right padding value for li.menu to the width of the menuOffEnd.jpg graphic, more or less.)

<!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>Untitled</title>
<style type="text/css">
ul.menu {
background: url(menuBG.jpg) repeat;
width: 10em;
}
li.menu {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0 10px 0 0;
background: black url(menuOffEnd.jpg) repeat-y 100% 50%;
font-weight: 700;
font-size: 12px;
color: #fff;
}
</style>
</head>
<body>
<ul class=menu>
<li class=menu>link1</li>
<li class=menu>link2</li>
<li class=menu>link3</li>
<li class=menu>link4</li>
<li class=menu>link5</li>
</ul>
</body>
</html>I'm getting the links one under each other and not next to each other and I can't see the main background (menuBG) at all. Can it be fixed?

Thanks!... something like this :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu-demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
#menu {
margin:auto;
width:780px;
height:15px;
font-size:0.7em;
font-weight:bold;
font-family:Georgia, Times New Roman, Times, serif;
z-index:4;
text-align:center;
background-image: url(plane.jpg);}
</style>
</head>

<body>
<div id="menu">
| <span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"index.shtml">HOME</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"gen-info.shtml">GENERAL INFO</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"classes1.shtml">CLASSES</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"Schedule.htm">SCHEDULE</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"cheers-teachers.htm">TEACHERS</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"prices.htm">PRICES</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"discount.htm">DISCOUNT</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"friday.htm">NIGHTS</a></span> |
<span> <a href=http://www.webdeveloper.com/forum/archive/index.php/"Map.htm">MAP</a></span> |
</div>
</body>
</html>


See it here (<!-- m --><a class="postlink" href="http://cheers-sendai.com/menu-demo.htm">http://cheers-sendai.com/menu-demo.htm</a><!-- m -->) and here (<!-- m --><a class="postlink" href="http://cheers-sendai.com">http://cheers-sendai.com</a><!-- m -->) ....Would you like to expand a little?
What's the difference? What do you need exactly?I attached to my first post.HTML

<ul id="menu">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a></li>
<li id="last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a></li>
</ul>

CSS

#menu {
padding: 0;
margin: 0;
border-right: 1px solid #000;
list-style: none;
}
#menu li {
display: block;
width: 90px;
text-align: center;
float: left;
background: #ccc url(images/bg.gif) no-repeat right top;
}
#menu li a:link,
#menu li a:visited {
display: block;
padding: 1px 0;
width: 100%;
font-size: 85%;
color: #000;
text-decoration: none;
border: 1px solid #000;
border-right: 0;
}
#menu li#last a {
border-right: 1px solid #000;
}

***EDIT: Moved background property from A to LIthat's not it...

I want the text to be link and not the whole "LI"Originally posted by weee
that's not it...

I want the text to be link and not the whole "LI"
No one is going to post something that is exactly what you need; you’re going to have to modify the code to get it how you want it — that is just an example.If i knew how to modify it I wouldn't ask.Then learn! :D

For now, I have edited my first post — remove the parts in red.Originally posted by weee
If i knew how to modify it I wouldn't ask.

And you don't learn how to do things simply by expecting others to do things for you.to show me how to do it.What you do is take the code and play around with it. Change something and see what happens. Take something out and see what happens. A lot of the properties are pretty self explanatory - 'font-size' gives you the size of the font, 'position' lets you change the position of something.

If you need to know more about the properties and their attributes, read something - try w3schools for starters.

If someone tries to help you and you don't get exactly what you want, rather than just saying "that's not it," ask how to do something. Good questions get good answers.

Good luck.Thank you all guys!Well, it seems that you have a list of links serving as navigation that you want to tame, to fit your sites look. I think that ALA's 'Taming Lists' (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->) should be able to teach you how to do this very well. The basic premise of it is what Paul has been saying.
 
You must log in or register to reply here.
Back
Top