PDA

Click to See Complete Forum and Search --> : Replacing tables

dartiss
07-27-2006, 06:15 AM
Hi,

I'm attempting to replace tables in my website with CSS. However, I'm struggling with conversion of the menu.

Rather than ramble on here I've written an example and commented it here:

http://www.bmtg.org.uk/test.html

Any assistance that you could give would be greatly appreciated - this is driving me mad now :(

David.
SuzanneB
07-27-2006, 06:58 AM
I think the main problem here is that the width of the highlighted area is not being specified. Since you have a variable width, it's no good fixing the width, but if you remove the padding statements and then adjust the margins of the highlight, it works.
Add the statement margin: 0 -4px 0 0; to make -

A.newmenu, A.newmenu:Active, A.newmenu:Visited
{font-weight: bold;
color: #6a612a;
text-decoration: none;
margin: 0 -4px 0 0;}
SuzanneB
07-27-2006, 07:04 AM
Hmm...I must admit that is not a good solution. It brings it's own problems.
dartiss
07-27-2006, 07:09 AM
Hmm...I must admit that is not a good solution. It brings it's own problems.

It does, as it doesn't appear to work with Firefox (although it corrects the problem in IE).

David.
SuzanneB
07-27-2006, 07:37 AM
The only way I have found so far is to just accept the gap and duplicate it on the other side! Not exactly a brilliant solution. I suppose you could duplicate it on all sides, although it is slightly bigger than the original gap in the original table.
dartiss
07-27-2006, 08:07 AM
Ok. I was coming to the conclusion that I may not actually be able to fix it ;)

Another quick question about table conversion...

I want to put a series of images in a row, each taking up a fixed amount of space. Using a standalone bit of code, this was fine by adding a "WIDTH: 100px" against the SPAN that I used to seperate each image. However, trying this on my site, for whatever, reason, it's not working - each SPAN division is only as big as the image within it.

I know you can't see the code I'm referring to, but any thoughts on what could be overriding this width?

David.
bokeh
07-27-2006, 12:33 PM
Ok. I was coming to the conclusion that I may not actually be able to fix itDon't be negative.

Your biggest error is not using a doctype. Using an HTML 4.01 strict is best in my opinion.

The other trouble is although you have dropped the <table> elements you are still thinking with tables mentality... i.e. Lego blocks. This also applies to your question below. For the menu check this out: http://bokehman.com/tests/CSS-menu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body{
font-family: arial, serif;
font-size: small;
margin: 0;
padding:0;
}

ul#menu{
margin:0;
padding:0;
}

ul#menu li{
list-style:none;
float:left;
margin:0;
padding:0;
margin-right:-1px;
text-align: center;
border: 1px solid #808080;
background:#F2EAAC;
}

ul#menu li a{
font-weight: bold;
color: #6a612a;
text-decoration: none;
margin:2px;
padding:0.1em 0.2em;
display:block;
}

ul#menu li a:hover{
color: #ffffff;
text-decoration: none;
background: #B08F40;
}

</style>

<title>CSS menu</title>
</head>

<body>

<ul id="menu">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="news.php">Latest News</a></li>
<li><a href="involve.php">Get Involved</a></li>
<li><a href="advertise.php">Advertise With Us</a></li>
<li><a href="shows.php">Our Shows</a></li>
<li><a href="contact.php">Contact Us</a></li>
<li><a href="guestbook.php">Guest Book</a></li>
</ul>

</body>

</html>



Another quick question about table conversion...

I want to put a series of images in a row, each taking up a fixed amount of space. Using a standalone bit of code, this was fine by adding a "WIDTH: 100px" against the SPAN that I used to seperate each image. However, trying this on my site, for whatever, reason, it's not working - each SPAN division is only as big as the image within it.

I know you can't see the code I'm referring to, but any thoughts on what could be overriding this width?

David.I don't know what you are up to here but it would probably be best to use a <ul> for this. Here's an example: http://www.revista-foto.es/foto-del-dia.php ... if all the images were the same size it could look even tidier. Also try to steer clear of using fixed sizes; let the document flow naturally.
dartiss
07-27-2006, 04:47 PM
I don't know what you are up to here but it would probably be best to use a <ul> for this.

Many thanks for the example code - it works a treat. I'll go away, dissect it and work out what I was doing wrong.

With regard to the second query, if you take a look at the merchandise links at the bottom of this page:

http://www.bmtg.org.uk/jcs.php

..I'm currently using a table to display a series of merchandise images (of varying sizes) with a description underneath. I've tried a CSS version but haven't quite yet worked out what I'm doing wrong (I managed to get it to work on a standalone version, but once I integrated it, the text underneath stopped flowing correctly under the images).

The menu example was relatively easy to work out because it was simply a number of pieces of text flowing each other. This is two lines, each lining up, and I'm getting stumped.

David.
bokeh
07-27-2006, 05:13 PM
What is the purpose of the secondary images?