convert tables to css

[cogumelo]

i'm used to designing with tables, but i'm really making an effort to change all my stuff from tables to css.

so i'd like to know if you people could help me out on what should be my approach on turning this table based website http://corfebolcarnaxide.blogs.sapo.pt into a similar css one.

is it possible to make it with css only?

how should i start (that's the main problem)

currently i only have the menu and the bottom rollovers made with css.

thx in advance

[ray326]

Nice clean layout. It should be a pretty simple rework. You start by recognizing what you have is a basic two column page with a full width header and footer.

[cogumelo]

ok.

here's what i've done so far.

the original one:
http://equipas.no.sapo.pt/competicoes/comp_04_05.htm

the ccs one:
http://equipas.no.sapo.pt/competicoes/css/comp_04_05_teste.htm

so here are some doubts i'd appreciate some help:

1: adding a 1px border positioned at 760 px (as the original layout)

2: how do i get the 2 rollovers at the bottom to be positioned side by side

3: the content in the original layout refers to matches and results, so how do i turn taht table into a (as simple as a table)css layout?

4: i set the width of 100% in the div, the horizontal scroller keeps showing up and some of the divs don't go the all 100% and i can't figure why.


thanx in advance to anyone that has the knowledge and the coolness to help out (ray326: thx for eh 1st pointers)

cheers

[NogDog]

Originally posted by cogumelo
1: adding a 1px border positioned at 760 px (as the original layout)
You coud add a border-right: solid white 1px; to the style for the image.

2: how do i get the 2 rollovers at the bottom to be positioned side by side
Perhaps use a relative position for the last one to move it up and to the right?
3: the content in the original layout refers to matches and results, so how do i turn taht table into a (as simple as a table)css layout?
I see no problem leaving that kind of information in a table, that's what tables are for.
4: i set the width of 100% in the div, the horizontal scroller keeps showing up and some of the divs don't go the all 100% and i can't figure why.
The "width" applies to the content. The total displayed width of a box equals width + (2 * padding) + (2 * margin) + border-left-width + border-right-width.

[ray326]

2: Add #rodape a { float:right } to your style sheet.

[cogumelo]

hi, thank you all for the help

here's what i've done so far:

http://equipas.no.sapo.pt/template/html/template.htm

i have 2 issues remaining that i could not sort out.

1. the bottom rollovers :confused: i really can't seem to get them on the right middle side.

/* CSS Rollover */

a.fpc{
width:184px;
height:30px;
background:white url(logo_fpc.jpg) no-repeat;
display: block;
}

a.fpc:hover{
background:white url(logo_fpc_on.jpg) no-repeat;
}

a.vik{
width:184px;
height:30px;
background:white url(logo_viking.jpg) no-repeat;
display: block;
}

a.vik:hover{
background:white url(logo_viking_on.jpg) no-repeat;}

2. on the left side of the layout i'm using 3 images as background for the info boxes. how can i convert that to css?

thx

[FrozenDice]

For your rollovers, simply change block to inline as shown here

http://www.quirksmode.org/css/display.html

[cogumelo]

thx for the link. I'll give it a try

[cogumelo]

not working either with the inline; any ideias?

http://corfebol.no.sapo.pt

just that detail to solve and it's a successfu change from a table layout to a css layout

[ray326]

#rodape a { float:right }

[FrozenDice]

Tried it with the code. It makes it go to the far right corner bottom. I think he wants it to just be directly right of the first rollover.

[cogumelo]

sorry if i didn't explain myself well.

i'm trying to get them both side by side on the right middle side.

the float makes the images go to the far right side (almost solved)., but i want the images to start from the right at 760px

should i add width:760px ?

#rodape {
background:#F6F6F6;
padding-top: 15px;
border-top: 1px solid #FFFFFF;
border-left: none;
border-bottom: none;
border-right: none;
width: 100%;
height: 70px;
margin:0;
}

#rodape a {
float:right
}
i can't change that width to 760px as this is setting the background color

[BonRouge]

Yes. Do that - change the width to 760px. That width doesn't control any background colour - don't worry about that (I took out the background colour and it made no difference.
I'd also suggest adding 'width:200px;' to #rodape a {}.

I hope this helps.

[cogumelo]

hi,

changing to 760px would solve it but it does affect the background color. the background:#F6F6F6; stops at 760px instead of 100%

how can i maintain the background color at 100% and still have the rollovers ending at 760px

thx

[BonRouge]

Yeah - sorry about that. My mistake.

Try this :

html

<div id="rodape">
<div id="seven-sixty">
<a href="http://www.fpcorfebol.pt/" target="_blank" class="fpc" title="Federa鈬o Portuguesa de Corfebol"></a>
<a href="http://www.kvviking.com/" target="_blank" class="vik" title="Clube G駑eo KV Viking"></a>
</div>
</div>


css

#seven-sixty {width:760px;}


That should do it.

I hope this helps.

[cogumelo]

yep. up and running. thx

i was trying to do it without the use of another div, but seems to be the only way to do it.

[design]

NONE