Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 5422

Jun 25th, 2004

Layout Tables to CSS

Expand Post »

I have been working on my site for some time and its not yet been released. What I want to do is modify my layout so that it works with CSS insted of tables. All my efforts so far have gone in vain because the gaps between the <div> and <span> tags are just to wide and I have tryed everything I know to reduce them but they are still huge.

Does anyone know of any good tutorials or can give me some pointers as to where I might have gone wrong?

Similar Threads

White Space Between Table Images in HTML and CSS
HTML Tables vs CSS & divs - examples/help in HTML and CSS

Ragnarok

Reputation Points: 10

Solved Threads: 0

Junior Poster in Training

Offline

94 posts
since Mar 2004

Permalink

Jun 29th, 2004

Re: Layout Tables to CSS

It's hard at first... but I eventually got mine to work, post your css code here and I"ll review it and see if I can help.

Slade

Slade

Reputation Points: 115

Solved Threads: 7

Practically a Master Poster

Offline

633 posts
since Mar 2004

Permalink

Jul 4th, 2004

Re: Layout Tables to CSS

Be sure to code for a browser, with CSS NS and IE dont' seem to agree on pixel locations. Like slade said, post your CSS along with your HTML page so he (and maybe I) may look it over. There are a buncha lil technical things that the W3C validators don't like, so don't mess with the pre-formated tags using style rules. If you want, I have a CSS tutorial at my site you could probably glance at, might help.

If you do visit my site, you'll notice that my content div is shifted, is there any way I can keep it aligned with the rest of the page at various resolutions? I'm using percent right now, but it's not working...

Innocent

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

5 posts
since Jul 2004

Permalink

Jul 4th, 2004

Re: Layout Tables to CSS

Div tags are generally used to encapsulate paragraphs, body content, and for text/image positioning and layout. Span tags are used to emphasize a word or two, such as

HTML and CSS Syntax (Toggle Plain Text)
<div>This is my paragraph. I would like to <span style="font-weight:bold">emphasize</span> this word.</div>
<div>This is my paragraph. I would like to <span style="font-weight:bold">emphasize</span> this word.</div>

cscgal

Administrator

Staff Writer

Reputation Points: 1422

Solved Threads: 162

The Queen of DaniWeb

Offline

13,645 posts
since Feb 2002

Permalink

Jul 4th, 2004

Re: Layout Tables to CSS

Quote originally posted by cscgal ...

Div tags are generally used to encapsulate paragraphs, body content, and for text/image positioning and layout. Span tags are used to emphasize a word or two, such as
HTML and CSS Syntax (Toggle Plain Text)
<div>This is my paragraph. I would like to <span style="font-weight:bold">emphasize</span> this word.</div>
<div>This is my paragraph. I would like to <span style="font-weight:bold">emphasize</span> this word.</div>

You could use

HTML and CSS Syntax (Toggle Plain Text)
<em>blahblah</em>
<em>blahblah</em>

but all the tags like that (ie, <strong>, <b>, <s>, etc) may soon be deperciated in favour of the span tag + style atribute. What cscgal said is correct though, just thought I'd expand

Innocent

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

5 posts
since Jul 2004

Permalink

Mar 9th, 2008

Re: Layout Tables to CSS

When I started out with CSS I got a lot of help from source code at the csszengarden.com , also I think it's great more people are switching to tableless layouting

Also the comment about coding for a browser is a good tip but you have to make sure you get it right for both IE and FF (the two most commonly used browsers), I think IE 8 is the most used version of IE now?

And yet another thing, if you're writing your css, you shouldn't use inline css (in my opinion). Your html should basicly only be

html Syntax (Toggle Plain Text)
<html>
<head>
<title>my page</title>
<link to your css file!>
<some meta tags>
</head>
<body>
<some divs>with content</div>
</body>
</html>
<html>
<head>
<title>my page</title>
<link to your css file!>
<some meta tags>
</head>
<body>
<some divs>with content</div>
</body>
</html>

and as above the link to your css file is linking... to a separate css page. This way you'll never have to search around for any styles you made. Use clear id's and classes as not to get confused.

I hope I haven't overposted here...

Last edited by peter_budo; Mar 10th, 2008 at 10:05 am. Reason: Keep It Organized - missing [code] tags

Aeneassan

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

15 posts
since Mar 2008

Permalink

Mar 10th, 2008

Re: Layout Tables to CSS

You just open 3 years old post, is there any need?

Last edited by peter_budo; Mar 10th, 2008 at 10:06 am.

peter_budo

Moderator

Featured Poster

Reputation Points: 2786

Solved Threads: 873

Code tags enforcer

Offline

6,656 posts
since Dec 2004

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Software info help :)

Next Thread in HTML and CSS Forum Timeline: Cross-browser relatively absolute positioning

DaniWeb Message

Cancel Changes

User Name
Password