question using css

[aaron.270]

I am working on a web site and am just learning css.  I can set up a table using percents but want to get an image to fill the entire width of the table cell.  I am trying to fill then entire width of the page no matter what screen resolution it is being viewed on.

[51]

you can set up your image to display as a background in the table and then put content as well as images in each individual cell. so you could say have a page with a background and then a table with a background as well matching up with the main background if you get what i mean.

[TMD_ NemesisX2]

Bling bling.

[MotoX395]

Try to not use tables for layouts thoguh since they are made for tabular data and nothing else actually. There are better choises out there to use.

[51]

gimme some better choices because im using tables alot because im not very skilled in the coding end of web design. i need good tutorials as well.

[VMX_SKYmx99]

Simon can explain more about the coding (he taught me everything. lol)  But as for tuts... try www.w3schools.org or www.csszengarden.com

[Toast36]

The key is to use semantic markup. IE. Use a <table> for a table, a <ol> for an ordered list, etc. Using a table for a list is stupid. People often just replace tables with <div>'s and call their code "good". Unfortunately, it's not that simple minded. As 51 said, just set the background image of the table to accomplish this.

Code Select Expand


table.class {
     background:     url(../images/whatever.ext) ;
}


[MotoX395]

It is even more to it though, I'll try to make up a couple of examples.

Using a table is only allowed when you shall store tabular data.
Columns, headers or other layout and design related things are not tabular data.

For example. Instead of using a table to make a header like this:

Code Select Expand

<table>
   <tr>
      <td>
         <img ... /> + some other stuff
      </td>
   </tr>
</table>

You should instead use something like this:

Code Select Expand

<h1>Heading text<h1/>

Then using some very, very basic Css you can make that look exactly the same as the, not so good, table example.

The reason for this is not to make the code smaller. The codes do get smaller in the long run but that's just a small part of why to do like this. The reason is to keep everything accessible and semantic. When you code a sites html/xhtml like this you won't have to touch the html/xhtml to redesign it later on either. This is because you have no design related elements in the code.

With html you can still get around making sites without Css. In xhtml you MUST know Css to make a good looking page with it. This is because everything that's design related such as the <font> that came from the html isn't allowed. This is why all web standards aware coders use xhtml now days, preferably strict too.

<div> tags are good, if you use them as they should be used.

Wrong: (un-semantic)

Code Select Expand

<div id="menu">
<a href="http://###.com/">Wohoo</a><br>
<a href="http://###.com/">Wohoo</a><br>
<a href="http://###.com/">Wohoo</a><br>
<a href="http://###.com/">Wohoo</a><br>
<a href="http://###.com/">Wohoo</a><br>
</div>

Correct: (semantic)

Code Select Expand

<ul id="menu">
<li><a href="http://###.com/" title="Menu item">Wohoo</a></li>
<li><a href="http://###.com/" title="Menu item">Wohoo</a></li>
<li><a href="http://###.com/" title="Menu item">Wohoo</a></li>
<li><a href="http://###.com/" title="Menu item">Wohoo</a></li>
<li><a href="http://###.com/" title="Menu item">Wohoo</a></li>
</ul>

As you can see the later example which is what you should use for this, as in this case a menu, is the semantic choice but it is much longer in terms of the code.

To kill of some things that can be thought about all this:

Using div's make the code accessible = wrong
Replacing all tables with div's is good = wrong
Taking out all tables and replacing them with div's make the code validating = wrong
Having validating code means that I have coded it good and that it is accessible = wrong

There is no dreamweaver or similar product that can make the code both accessible and semantic without you adjusting it at least. Your best bet is always to do it yourself.

One thing that makes it easier to start doing it all on your own is to use something like Notepad++. I used it for Css, xhtml and xml. It is great since it does all the sweet stuff as syntax highlighting without doing the bad stuff as filling in code on its own or making full lines of code on its own.


Now, div's are not only meant to be excluded in code, that'd be stupid. Div stands for "Division". What it is good at is to define areas in your code. Let's make another example:

You have coded a full page with a header, a menu, a main area, a sub area (usually laid out as a side column on pages) and footer. The only problem is that without Css it's all stacked in a row, white on black (usually). This is of course a very readable page but it looks about as good as those notepad text documents.
With Css you can do a lot now, with Css 3 (whenever we will be able to use that, *nods IE*) we could do even more, but that's not possible at this point so lets stick to the topic. The problem so far is that you don't know how to get the sub area to be on the side of the main area. To do this we first must define those two areas in the html. We put a div around each of the two areas and give them both a unique ID. Now even though the html isn't affected in any kind of way, we still have a way to bind the contents of those two areas together with Css. You define widths and floats to both the div's in the Css and viola! The Columns you want appear. Well it usually takes a bit more then that but you get the point.

That is how to use div elements.

"What's the difference you idiot?"

The difference is that when you use a div to only surround a single element, like a link element, then you do something really un necessary.  The div has NO properties defined to it by default, except for "display: block;" But without any other Css defined to it, you wouldn't be able to see that.
Other elements have margin, padding and other things already defined to them though. Take the <blockquote> element (used for longer quotes) as an example. By default it is adjusted to the right. By clearing the margin and padding in the Css this is solved though, but people forget to take advantage of these things. If I want a box that is green and you can click on then a code like this:

Code Select Expand

<div><a href="link"></a></div>

Is uncalled for... A code like this:

Code Select Expand

<a href="link"><div></div></a>

Is not even correct. You can't have block-level elements within an inline element. Using some old doctypes and some funky browser might make this to work but if that is what it takes then it's clear that it is another way.

Let's try this:

Code Select Expand

<a href="link">link</a>

BINGO! That's the one. If people tried this and started to style it just like they would style a div they would do exactly what they should. Sadly though, they'd soon realise that the stupid <a> element don't listen to everything they say. Fear not though, apply this; "display: block;" and your problems will be solved and terrorism in the world will be a thing from the past.



I think I've been giving enough random examples for today, my point with this whole rambling is that the only way to create a good code is to really think; what kind of content is this text, link or image? If you figure out that it's a longer quote, then you use the <blockquote>.
If it'd be an image you'd have to think; is this image content or is it design? It is easy to find out, is the image there only to look good as in graphics on the site or button design, etc, etc? Then it is design related. If that's the case then wait with that until you start with the Css because that's where you shall apply those images. If it is content then apply it with a <img> tag though.




Also, example given above should better of be something like:

Code Select Expand

table.class {
   background: url(image.gif);
   }


Assuming that you referred to the code as if the table had a class defined. If it was referring to an example in which the table is inside another element, lets say a div, which had a class defined to it then here is how it should have looked:

Code Select Expand

.class table {
   background: url(image.gif);
   }


Also, take this in consideration; is it the only element on this page that shall have that style applied to it? If the answer is no as in that you will use this very style to more tables on the page then use example given above. If it is only appearing once in the page then you should use an id (#id) though.


As I've hopefully made clear with this post it's hard to say "use this instead of that table" since it depends on what it's content represents.

[Toast36]

woops, did mine backwards. Thanks for pointing that out