Tekforums

Thanks for getting back to me.  I didnt post the code for when I used the CSS stuff on my template.  Sorry about that.

I think I looked at divs but no matter what I did I couldnt get them to look like a table if that makes sense.  Will have a lookie now and see what I can come up with.

If you have any links to DIV tutorials that you recommend that would be great.

one cell of content in a table

one cell of content in a  table

one cell of content in a table

one cell of content in a  table

http://alistapart.com/articles/practicalcss/
http://www.dev-archive.net/articles/table-in-css.html

Thanks for the help. Looking into this already.

The problem that I have is that Im trying to modify the CSS so that when I get my information from the source I can display with the same tags just using CSS to manipulate the style if that makes sense?  Thats why I was wondering what formatting I could do with those tags

Then just create another set of code to represent the table layout which is exactly the same as the above but with different content.

Am I being very dense or does this code just show 4 rows saying "one cell of content in a table?"

Looking at the code, Id have said 2 rows of 2 columns; 4 cells total.

just 4 rows here  :(

probably due to float, as some browsers insist on putting a new div on a new line, only way to get around that is float... which is a little buggy

nige is your man, hes css god

What you had in the first post was fine, although you dont need to explicitly set width for the second table cell as you have already defined your table width (95%) as well as the first table cell width (30%), then second cell will take up the remaining available slack space.

Dont feel pressured to start replacing all your tables with divs, tables are still useful and are perfectly valid, the argument gets banded backward and forwards about using them, but if big sites like Google, etc are happy using them so am I and thats at a professional level. Using divs often requires a lot of floating and hacks to work on all browsers for things like page footers that sit at the bottom of the screen that are done easily with tables.

You can reduce your CSS down as well, you have a lot of unnecessary markup going on and dont get too reliant on CSS2 tags, keep things simple. font-weight: bold; is fine, you dont need font-weight: bolder; as it does nothing different at the moment.

for instance:
border-style: dashed, 1px;
border-bottom-width: thin;

can become:
 border: 1px dashed thin;

This is an excellent resource for reference to CSS properties and browser compliancy:
http://www.blooberry.com/indexdot/css/propindex/all.htm#

shiftlocked, you can always add more, I only typed it up fast as an example.

Just to add to clockeds post

For mutliple border types of different types or an object with different widths on the top, bottom etc..

--> border: 1px 3px 4px 5px;
In the order of - top right bottom left
same with padding and margins


 margin-left: auto;
margin-right: auto;


can be

margin-right, margin-left: auto;


How you getting on with it shiftlocked ?

Hi Guys,
Thanks for all the help, had forgotten about these forums till a short while ago.

With regards to the divs and floats and stuff, im not too proud to admit that its a bit complex for me at the moment, I understand it but its a question of time to learn it.

Thanks for the help in reducing the css code.  Could anyone help me with the CSS side to make the table look half decent so that it would look good displaying the details like the example I gave.  Just want it to look a bit more... ermm ... nicer lol

I had an idea of alternating row colours but dont think that can be done with CSS??

Alternating table row colours can be done easily with CSS.
give the alternating

interesting.  In FireFox, the dashed border doesnt appear but in IE it does.   God.. cross browser compatibility issues here I come

Both browsers should render the dashed border, albeit slightly differently. Paste your CSS for me, please?

Also get into good habits, start your sites with some uniformity and overwrite default browser settings for certain elements, like body and form margins, setting a default font for the site to use:


body, form { padding: 0; margin: 0; }
body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #656565; }

a img { border: 0; }

a { color: #333333; text-decoration: none; }
a:hover { color: #000000; text-decoration: none; }

I would also recommend you stop using imprecise measures like thin thick and use precise measures like pixels instead, you can guarantee how your sites will be rendered then.

Thanks for getting back to me Clockd help is muchos appreciated :D



.TechTable
{
width: 95%;
margin: auto;
padding: 15px;
border-collapse: collapse;
FONT-SIZE: smaller;
FONT-FAMILY: Arial;
}

.TechLeftColumn
{
width: 30%;
        text-align: left;
padding: 5px;
border-style: dashed, 1px;
}

.MainleftColumn
{
    FONT-SIZE: smaller;
    BACKGROUND-COLOR: #ffffcc
}


First of all - all lower case m8, keep everything lowercase and avoid using case in css and your xhtml
I know if you program you would make a function myClass in its naming format but in xhtml and css keep it lower case and your missing   a ; on your last line of code

w3 is the place to help you out by the way: http://www.w3schools.com/css/css_border.asp

(edited, intelligence chip just kicked in..)

Ill be changing things to keep lower case shortly, thanks for the tip and Oooops on that last;

.TechTable
{
width: 95%;
margin: auto;
padding: 15px;
border-collapse: collapse;
font-size: smaller;
font-family: Arial;
}

.TechLeftColumn
{
width: 30%;
    text-align: left;
padding: 5px;
border-bottom: 1px dashed #00FF00;

}

Thats the updated code, so from what I gather at the moment (please bear with me)

Centered Table
95% of the broswer screen
borders treated as one
Small Fonts

Left hand column
30% width
padded
and has a 1px green dash on there.

Am I correct in assuming that to set a style for the right hand column I would have to create another CSS style?

yes

If it different to the other

(small thing but still - your colour hex code - lower case :)

Dont worry about divs. Theyre a load of bollocks used by people who dont design sites for a living but design them for fun and thus can mess about for 12 hours to do what takes 10 minutes in a table.

Is there a way to make the background in the left column only populate say 80% of the cell?

Quote from: shiftlockedIs there a way to make the background in the left column only populate say 80% of the cell?

Not with tables no
Ignore Sam, he just cant grasp divs and css at all and what he cant grasp he tends to hate out right :( Clocked on the other hand picking it all up very well
And you can make full blown sites with easse as a working profession (since the company my brother works for does and so do most decent companies now :) )

Look nige agrees with me and so do google.
QED.

Funny how you like google and their opinion but not the iphone although they are putting a lot of money into and will be releasing more applications on it over time and they think it will be a big thing, but you dont  :P

Quote from: shiftlockedIs there a way to make the background in the left column only populate say 80% of the cell?

If you mean you want it to sit 20% inset just use background-position: 20% top;

I just found a really nice program for the mac CSSEdit which is making things a lot easier.

Today I r going to be with the table row and seeing how the color thing goes and then the background inset thing that was posted.  Can I just say again thanks to people for helping a noob out here :D

Divs and Floats... after I got this done thats my next thing :D

Quote from: shiftlockedDivs and Floats... after I got this done thats my next thing :D

need to read this then.

http://www.brainjar.com/css/positioning/

read it a few times. it takes a while to make sense of it.

Matt

QuoteIf you mean you want it to sit 20% inset just use background-position: 20% top;

Isnt that jsut for background images and not for borders?

Quote from: shiftlocked

QuoteIf you mean you want it to sit 20% inset just use background-position: 20% top;

Isnt that jsut for background images and not for borders?

Yes, but what do you want to do with your borders?