html to css help!!

K

Koolbreak

Ok I need help. im a newbie to css..i know most html. i need to change

this html to xhtml and css. Can someone just show me so that i can
learn? i tried all those online tutorials but its a no go. ok here:

<td height="78" align="left" valign="top"><img src="images/title.gif"
width="777" height="78"></td>
</tr>
</table>
<table width="777" border="0" align="center" cellpadding="0"
cellspacing="0">
<tr align="center">
<td width="200" align="left" valign="top"
background="images/bg-left.jpg"><table width="200" height="256"
border="0" align="center" cellpadding="0" cellspacing="0"
class="leftmenu">
<tr>
<td width="200" height="25" align="center" valign="top"
class="white-text">&nbsp;</td>
</tr>
<tr>
<td height="227" align="center" valign="top">&nbsp;</td>
</tr>
</table></td>
<td width="577" valign="top" bgcolor="#FFFFFF">
<table width="577" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="583" height="22" align="left" valign="bottom"
background="images/white-bar.gif" class="bar-spacing"><font size="2"
face="Arial, Helvetica, sans-serif" class="bar-text">Invite</font></td>

</tr>
</table>
<table width="577" height="344" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="555" height="344" align="left"
valign="top"><table width="577" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td align="center" valign="top" class="text">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="30" valign="bottom"
class="text-bold-blue"><table width="100" border="0" cellspacing="0"
cellpadding="0">
</table></td>
</tr>
</table>
<table width="437" border="0" cellspacing="0"
cellpadding="0" class="invite-form">
<tr>
<td width="435" align="center">
<table width="423"
border="0" align="center" cellpadding="0"
cellspacing="0" class="confirm">
<tr>
<td width="421" height="326"
valign="top"><table width="100%" height="97" border="0" cellpadding="0"

cellspacing="0" class="confirm-inner">
<tr>
<td height="24"
class="confirm-line"><span class="confirm-text">Send an Invite
</span></td>
</tr>
<tr>
<td valign="top"
class="confirm-info"><table width="100%" height="245" border="0"
cellpadding="0" cellspacing="0" class="confirm-info">
<tr>
<td height="245"
valign="top"><table width="408" border="0" cellspacing="0"
cellpadding="0">

<tr>

<td width="63" height="25"
class="bold-text-Black">From:</td>

<td width="345" height="25"
class="text-blue-no-underline">Matt Beckham &lt;[email protected]&gt;
</td>

</tr>

<tr>

<td height="25" class="bold-text"> To: </td>

<td height="25" class="text">Seperate email addresses
with
commas </td>

</tr>

<tr>

<td height="84" class="text">&nbsp;</td>

<td height="84" valign="top"><label>

<textarea name="textarea"
class="invite"></textarea>

</label></td>

</tr>

<tr>

<td height="25" valign="middle"
class="bold-text">Message:</td>

<td height="25" valign="middle" class="text">Send a
message
with the invite (optional). </td>

</tr>

<tr>

How do I take out the tables and turn it inot css? please help!! Thank

you...
 
K

Koolbreak

Sid said:
On 13 Aug 2006 16:51:50 -0700, "Koolbreak"

: How do I take out the tables and turn it inot css? please help!! Thank
:
: you...


You must attend a CSS course. Or study:
http://css.nu/articles/table-in-css.html

Sid

Thank you responding but can't anyone just show me how to do that?
like turn those into css and show me the html code? i'll figure it out
from there...
 
C

Chaddy2222

Koolbreak said:
Thank you responding but can't anyone just show me how to do that?
like turn those into css and show me the html code? i'll figure it out
from there...
Maybe take a look at my website (found in my sig) for an example of CSS
based layout.
Just a tip though, it's a different way of thinking then what you are
perhaps used to, as an example, there are no presontation settings (or
atrirbutes) in the HTML, that's all defined in the CSS file.
Taking my own site as an example (their are probably better ones
though,)it's just a bunch of div's or divisions, which actually are
just a devider in HTML plus I have included some other tags, such as
the <p> atributes for the paragraphs and some headings. But that's
about all, the rest is in the CSS.
Oh and there are those none breaking spaces which I used on the links,
which may or may not be a good thing, some purists would suggest not
to use them (they are not really samanticly correct, and those links
really should be a list).
Anyway, I hope this helps a bit, http://www.w3schools.com might also be
good.
 
J

Jim Moe

Koolbreak said:
Ok I need help. im a newbie to css..i know most html. i need to change
this html to xhtml and css. Can someone just show me so that i can
learn? i tried all those online tutorials but its a no go. ok here:

How do I take out the tables and turn it inot css? please help!! Thank
you...
Search for "2 column layout css" or "3 column layout css".
Also these sites a good references:
<http://css.maxdesign.com.au/>
<http://meyerweb.com/eric/css/>
<http://www.htmldog.com/>
 
S

Sym

One first start way to change to a tableless layout is to put divs in
place instead of the TR and TD's and call your divs rowe and rowo for
your even and odd rows, then call each column col1 col2 col3, then use
the css to define size etc for each of these.

Obviously this will not work first time, but you can then fine tune it
and get the idea of how such a design works. If someone where to just
give you the html, then firslty you would not have learned how to do it
and secondly everyone else on here would flame it and say it was wrong
and give an alternative way ;)

As above also look at the examples, once you pick up the idea you will
never look back !
rgds
Sym.
 
A

Andy Dingley

Koolbreak said:
Ok I need help.

You need help, we need a URL.
im a newbie to css..i know most html. i need to change this html to xhtml and css.

Forget XHTML. Convert it to CSS first. (HTML to XHTML is easy)

I tried all those online tutorials but its a no go.

This isn't quite "do my homework for me", but you're awfully close.

_Why_ should we do this for you? I do this for lots of people - they
pay me for it.

If you need something better than the (admittedly poor) on-line
tutorials, then get a copy of "Head First HTML & CSS"

If you want a quick example of how to do 3 column layout, then search
for "3 column CSS layout" rather than CSS tutorials. You'll find them
(bluerobot, glish, alistapart)
<td height="78" align="left" valign="top"><img src="images/title.gif"
width="777" height="78"></td>

That's not HTML. HTML begins with a doctype, or at least <html> As
you think we can work from a tiny fragment of your HTML without seeing
the whole thing, then I suggest the answer for the CSS would have to be
this
(it's real code, it's just not all of it):

.pink { background-color: pink; }
 
S

Sym

Beauregard said:
is to learn what TOFU is, and stop doing it. Thanks for your
consideration.

Sorry but was the default in the reader i was using on the move, i cant
be perfect all of the time ;)


anyway NBD for most.
 
K

Koolbreak

Sym said:
Sorry but was the default in the reader i was using on the move, i cant
be perfect all of the time ;)


anyway NBD for most.

thank you all for responding...im using the div tags to get rid of the
tables...but I don't know if thats going to do it. I mean imagine a
whole html layout using div's? yea i think im in way over my head
 
P

Paul Watt

Koolbreak said:
thank you all for responding...im using the div tags to get rid of the
tables...but I don't know if thats going to do it. I mean imagine a
whole html layout using div's? yea i think im in way over my head

Thats kind of the point

--
Cheers

Paul
le singe est dans l'arbre
http://www.paulwatt.info
 
S

Sym

Luigi said:
But tables should still be used to display data, should they not?

I agree, nothing wrong with tables to show tabular data. However i must
admit i rarely use them, i create tabular data using divs and format
using css, the reason being the customer almost always comes back
asking to move column 5 before column 2 etc, and it is quite often
easier to change the css than to change the source code that generated
the html table. + I can have one set of sourcecode + multiple outputs
for different customers from different css files.

Each case is different tho ...
 
L

Luigi Donatello Asero

Sym said:
I agree, nothing wrong with tables to show tabular data. However i must
admit i rarely use them, i create tabular data using divs and format
using css, the reason being the customer almost always comes back
asking to move column 5 before column 2 etc, and it is quite often
easier to change the css than to change the source code that generated
the html table. + I can have one set of sourcecode + multiple outputs
for different customers from different css files.

Each case is different tho ...


But styling tables does not imply not to use them, does it?
By the way, you seem to be a CSS expert anyway.
I am having problems with centering headers in the menu on the left on the
page
https://www.scaiecat-spa-gigi.com/it/svezia.html
browsing by Firefox (it works at IE).
Do you know what is wrong in the external style sheet which affects the
behaviour of these headers?
 
L

Luigi Donatello Asero

Sym said:
Try padding-left: 0px for your UL elements


Thank you!
It is working now!
It seems as it were the buttons which should be moved and not the headers as
I had thought before..
Do you think that it is easier to navigate by using an horizontal or a
vertical list of links in the list of contents?
 
D

dorayme

"Luigi Donatello Asero said:
But styling tables does not imply not to use them, does it?

Yes it does... of course it does... just as when you ask a barber
to style your hair, this implies that you are allowing the barber
to cut your head off.

Luigi, you are a wonder of the world and I am forwarding everything
you say to the Tasmanian government. They may make you an offer
regarding their museum.
 
D

dorayme

"Luigi Donatello Asero said:
Do you think that it is easier to navigate by using an horizontal or a
vertical list of links in the list of contents?

Do you ask house builders what sort of tool they find best to use
when making a house?
 
J

Jukka K. Korpela

Andy Dingley said:
Forget XHTML. Convert it to CSS first. (HTML to XHTML is easy)

I would rather say: Forget conversions. Start learning modern www authoring,
and design new pages well. "Cleaning up" existing pages is usually waste of
time or worse. As old programmers say: "There is always someone who rewrites
working code, to clean it up, or to speed it up." (The point is that Real
Programmers do something else, of course.)
This isn't quite "do my homework for me", but you're awfully close.

It could also be "I took a paid job, please do my work for me".
As you think we can work from a tiny fragment of your HTML without seeing
the whole thing, then I suggest the answer for the CSS would have to
be this
(it's real code, it's just not all of it):

.pink { background-color: pink; }


Unfortunately parodies usually fail. It's not real code, in the sense that
it does not comply with CSS specifications: the symbol pink is undefined
(not a defined color name). Conforming browsers are therefore required to
ignore the rule. Besides, it is bad practice to set background color without
setting foreground color (and background image, to none or to some other
value).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
474,444
Messages
2,571,709
Members
48,796
Latest member
Greg L.
Top