HTML help, please!

[Nando]

Hi,
I want some HTML help.
I have this pre-build design in my personal site, check it here:
http://209.51.138.218/~nando/blog/

Ok:

1 - I want to make a column on the right, just like the one in the left, leaving the the big column in the middle.

2 - I want the links to have some kind of efects when I put the mouse on it. Maybe a darker color in bold... This is CSS, right? I know noting about CSS.

Please help!

 

[Shadow2531]

we'll get you started with the mouse effects.

Yep you will want to use css.

here is what you need. specifically the hover one. When you hover over a link, you can define what colors you want to display.

<style type="text/css">
:hover {color: #ff0000; background-color:transparent }
:link { color: #ff0000; background-color:transparent}
:visited { color: #ff0000; background-color:transparent }
:active {color: #ff0000; background-color:transparent }
</style>

That will apply to all links on the page unless they are overridden.

Just change the color and background color to what you want. Link defines the color of an unvisited link. Visited is obvious. Active is when you actually click on the link. Hover is when you hover over the link.

now if you need to define a second set of link attributes you would add the following to the above

a.c2:hover {color: #ff0000; background-color:transparent }
a.c2:link { color: #ff0000; background-color:transparent}
a.c2:visited { color: #ff0000; background-color:transparent }
a.c2:active {color: #ff0000; background-color:transparent }

then if you have a link that you want to use the second set of colors, you do it like this

<a href="http://www.google.com" class="c2">Google</a>

you can view source of my page http://home.tbbs.net/shadow/mod.htm for an example

 

[Shadow2531]

now to add a right panel, you want to stick with tables.

basically what you need to do is add a cell, change the colspans to span across the new cell. and widen the table to accomodate the new cell.

this will get you started

<td>test</td>

now here is where I added that.

<P CLASS=left>

</TD><td>test</td>


<TR>
<TD bgcolor="#003366" COLSPAN="2">
<!-- begin footer -->

I added it right after the td close tag.
which is the tag that is closing the middle section. so you have to view your code and scroll down to just above where you put the footer in. Just remember, you will have to resize the tables and change the colspans to 3.

Just keep in mind, you will either have to shrink the size of the middle section or extend the table width off the page. (the page will then scroll left to right. Plus you will have to set the width of the new cell.

but now that you know where to put it, all you have to do is tweak the settings.

 

[Nando]

Thanks man!

I'll have to study that a little bit!

 

[Shadow2531]

this is probably close to how you want it

http://home.tbbs.net/shadow/tsgforums/blog/blog.htm

 

[Shadow2531]

attached is a text file with the changes I made to get it like it is at

http://home.tbbs.net/shadow/tsgforums/blog/blog.htm


attributes that I changed are encased in exclamation points.

e.g.

!!!!!attribute!!!!!

then you can use that info to tweak it.

keep in mind, I use 1024 x 768 screen resolution. (it all fits on the screen for me, but not sure if it will at other resolutions, but that's why I changed the width sizes to percentages.

ps. it looks pretty good maximized, but minimized the new column is not sized right.

Tweak away. Good luck

 

[Nando]

Thanks! It really helped!

 

[Nando]

PROBLEMS!!!

take a look:

http://209.51.138.218/~nando/blog/teste1.htm

(I know I still have to rename them to .php) But the tables just don't work...) See the blue tables? their size isn't right...

 

[Nando]

I want a 90% main table.

And maybe a 50% middle table and 20% each side tables. Do you understand what I mean?

 

[Nando]

Originally posted by Nando:
I want a 90% main table.

And maybe a 50% middle table and 20% each side tables. Do you understand what I mean?

ok, forget about it. I've solved it. Thanks anyway.

 

[Shadow2531]

take a look at this http://home.tbbs.net/shadow/tsgforums/blog/blog2.htm

you forgot to change the colspans to 3. That's why the blue parts didn't go over all the way.

Now you said that you wanted a 90% table.

with a 20% 50% 20% cells.

in the above link I set it to 20% 60% 20%. which equals 100%.

when you set the table to a width percentage, that width is the percentage of the screen. now when you set the width of a cell, that's the percentage of the table.

so you want the table to fill the screen 90%. Then you want the 3 cells to split 100% of the table. 20 + 60 + 20 = 100.

so your 3 cells should take up 100% of 90% of the screen. (not forgetting about cellpadding, borders and spacing of course)

I know that sounds weird, but just making a point that you can have the middle be 60 instead of 50 and still have the sides be 20.

now in this new link it is set up right for maximized, but it's not right when minimized because of the use of a percentage instead of a fixed width.

yet.


one thing. like I said before, as long as the window is maximize, it should look great in all browsers, but when minimized the widths go all funky. The page needs a fixed width and really needs to be built from scratch.

Sometimes it's easier to knock down a building and build a new one than repair an existing one.

but you should do fine, for now.

 

[Shadow2531]

if you cannot get it to work right, here is a template that you can use if you want.


http://home.tbbs.net/shadow/tsgforums/blog/blog3.htm

It will display perfect in everything, but Opera 7.00 Final and Netscapte 4.8. both of them don't make the right column wide enough.

In everything else, it looks perfect; even when minimized.

It is also html and css compliant.

http://validator.w3.org

Ok. done playing with tables for a while.

 

[Shadow2531]

ok now I am done playing

I fixed the http://home.tbbs.net/shadow/tsgforums/blog/blog3.htm

so it works in all browsers now.

no problems with column widths or anything. and it minimizes great also (at least with no text in the cells)

It's still html and css compliant.

you can also used fixed width instead of percentages, but if you do, the tables won't look right in netscape 4.8.


and here is another template that i made.

http://home.tbbs.net/shadow/tsgforums/blog/blog4.htm