tables and divs

[tsinc80697]

I used to make websites a while ago using tables as the main layouts with images inserted into certain cells.
But ive recently started to try and make sites again as i need one to host my uni portfolio work.
I was told that tables ar ethe "wrong" thing to do for the layout of a website and should only be used for tabular data, which is understandable.
But is using divs the only "correct" way to do layouts now if i want to use CSS + xHTML ?
As many things that i want to do i cant seem to do, even simple things such as slicing and image i find difficult as the alignment never seems to work properly on anything i do!
If anyone has any time and they want to help me more than just posting on here, just add me to MSN thats in my trust and ill take any help you can give me , as i can show you the site and what i really want to do if possible.

ps. I have a BG colour set using hex, the colour is the same as an image in FF and IE7, but in IE6 its different so u can tell where the image ends, IE7 bug or my fault?

Any help mucho appreciated

 

[Mirage]

I'm in the process of moving away from tables, and generally getting my XHTML/CSS sorted out.

Must say that I'm finding it really hard pinning down the use of DIVs, I've always been able to picture layouts using tables but using DIVs just doesn't seem to have any similarities :/. Oh well, guess that's what I get for not doing any real HTML between now and 2002 .

 

[iCraig]

Don't try and replicate table based layouts with DIV's. It's a totally different element.

Use CSS and style all HTML elements accordingly. DIV's are used to group elements together, such as in a header, content, and footer DIV.

 

[shifty_uk]

It's a really good idea to get away from tables, it might be hard at first, but it's worth it. Stick at it!

Div's are for containing different elements which need to be styled using CSS, the styling you do will determine the layout.

Visit w3 Schools (google it) and you'll get some information

As for the problem your having, can you give a little more information, perhaps provide some markup and css?

 

[tsinc80697]

yeah ill upload what im working on soon, managed to add some links into the site, but they're positioned by using pixel placement on the page, which might be bad, but i don;t know!
Thanks for the replies so far

edit:

is there an easy way or having a sliced image as your website then, like you could with tables? What basic code does that require in order to have similar looks?

 

[techy6]

Glad it's not just me I have been churning out the "same old tables-based rubbish" since 1999, never had time to properly learn CSS / XHTML. I remember the days when nested tables were the way to impress your mates... aah happy days!

 

[Mattus]

is there an easy way or having a sliced image as your website then, like you could with tables? What basic code does that require in order to have similar looks?

Most likely, yes, but it's a bad idea. Sites which use solely images for layout take longer to load, are harder to use and less likely to be indexed by search engines than a site written in properly-formed XHTML and CSS. CSS can do the same things tables can but it's also a lot more powerful.

 

[Mirage]

How for example would I do this without tables?

Previously I would have done a single row, 3 column table. Height being the size of the last image.

I've attempted to do this today and basically what I had was a div for the two lines of text (which were in a <span>) with float: left.
I then had another div for the centre image with float: left.
Finally a div for the right image with float: right.

I'm finding it quite hard to pin it all down, I mean, some slight changes meant that the far right image would sit lower down, the top of it being the same height as the bottom of the middle image/text.

 

[Al Vallario]

How for example would I do this without tables?

Previously I would have done a single row, 3 column table. Height being the size of the last image.

It may just be me, but I'm struggling to understand what you're after in that example. Why would you want a layout like that? Is the image on the far right meant to form part of a sidebar, or something to that effect? Why is there a large gap between the two images? Are the two lines of text meant to be a header? Are the two images contextual or not? Perhaps showing us the code you've got at the moment would help.

xHTML and CSS is much simpler, and makes much more sense, than tabular layouts. Positioning is a bit of a pain, but once you've come across one or two tricky problems and worked out how to fix them, you just find it's the same problems every time and it becomes a breeze

 

[Mirage]

Its just the header layout of a page, basically the department I work within has a newsletter produced by someone in FrontPage. While this works fine I hate all the additional pointless tags that a WYSIWYG adds.
I wanted to rewrite the code in cleaner code.

Whilst I could do this particually easily and quickly using tables I want to try this whole <div> milarky .

To clear up the image I posted, the two lines of text I posted say something along the lines of:
Newsletter
Issue July

The center image is the newsletter image that sits alongside this text but does not span the entire of the header.

The right image is the companies logo, and sits at the right side of the newsletter.

 

[tsinc80697]

slightly off topic of divs and tables, but still in the context of CSS ans xHTML, i have an image centered on the page, and a background colour which is the same hex colour as the image. Im FF and SM you cant tell where the image ends and the background colour begins, but in IE7 and IE6 ( on seperate PCs ) the background colour is a lighter shade of red, even though the hex is the same setting :/ that just a bug with IE6/7 or something i havent set in CSS?

 

[Gman]

slightly off topic of divs and tables, but still in the context of CSS ans xHTML, i have an image centered on the page, and a background colour which is the same hex colour as the image. Im FF and SM you cant tell where the image ends and the background colour begins, but in IE7 and IE6 ( on seperate PCs ) the background colour is a lighter shade of red, even though the hex is the same setting :/ that just a bug with IE6/7 or something i havent set in CSS?

when i get that problem its usualy not a problem with the hex value of the css but the colour of the image background itself. To solve it i usualy play about with the image format i.e. if its a jpg, open it up in photoshop and save it as a png or a gif and vica versa, usualy that sorts out the colour differences between the browsers. Never actually looked into why it does it, could be something to do with using non web safe colours.

update
-------
Done a little searching and it is a known problem with IE7 and its ability/inability to render png's correctly, heres a link with some info and possible solution http://www.easy-reader.net/archives/2006/02/18/png-color-oddities-in-ie/

The solution they suggest is to use a tool such as http://entropymine.com/jason/tweakpng/ and remove the gamma chunk , never heard of that before but that tool should give you the option to do it

But like i said i usualy just save it in a nother format if i get that problem either jpg or gif.

 

[tsinc80697]

ah sweet, thanks a lot!
Solves one of my problems! Just gotta get my site, or what ive done so far, uploaded so people can help if they can!