Div issue (spacing)

[chugger93]

Im having this div spacing issue that I cant figure out.

If you go here you'll see that everything is fine, but if you goto the bottom, theres a big gap between the bottom of the table and the browser
http://chugger.homeip.net/wed/testing1.html

If you view the source, you'll see the code, and I've narrowed it down to the obvious problem which I figured it was...

<div style="position:relative; top:-160px; width:802; z-index:1;">

It has something to do with that. Its the code right below the BODY tag.

Any ideas?

[PeOfEo]

You should not be using tables at all. Tables are not intended for layout so its best to use just css.


Get rid of the -160px for the top and you will solve your problem.

[chugger93]

Ya I know I should be using CSS, but I wouldnt even know where to begin to make all those colums and rows. Im assuming its just using DIV's.

But anyways, removing the -160 works, but doesnt. You then will have the same gap at the top of the page rather than the bottom. :(

[PeOfEo]

try using
margin-top:-160px;
I am not having any gap problems locally. I did not get your style sheet though, I just copied what was in your html source and saved it.

http://www.bluerobot.com has some basic examples of how css can be used to layout a site. If you must stick with tables the tables should be completely styled with css if you want to make a good hybrid. http://quasi-ke.servebeer.com/hybrid2.html is an accessible css table hybrid. Its very basic, I just made it to prove a point, but it can be extended. quasi-ke.servebeer.com will lag right now if you go to it, because that is my home server and I may or may not be using a p2p network to move files.

[chugger93]

wow, margin-top worked awesome! Thanks alot man...

I saw that table hybrid, it actually looks good. Maybe I'll try to incoporate more heights, width's margins etc in my CSS rather than in my tags.

Thanks for the advice :)

B.T.W what do you recommend for my navigation links? I want some kind of rolleover effect. Should I preload images, or use CSS to define a mouseover?

[PeOfEo]

no problem :D

I would suggest a css hover link. You can apply it to a text link to just change the link color, or you can make the link display as a blog element (like a div or table cell) and then change its color. If you want an image rollover you are going to have to use java script, the problem with java script is it does not have 100% support. I mean some users go around the internet with it turned off intentionally, and some just flat out do not support it. With css if a user does nto support it the page will degrade, but if you rely on java script it can cause the page not to work depending on what you are doing with the java script.

But if you are just doing a java script rollover, the rollover is going to work for the vast majority of your users and you should not have anny accessibility issues. So it would be an alright course of action.

Here is some code for a hoverlink

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#788282;text-decoration:none;}
a:active {color:#000000;text-decoration:none;}

I just changed the text color for a:hover, you can also make the link bold, or have it turn underlined (or not be underlined). Etc.
To make a link display like a blog use
style="display:block;"

[chugger93]

Ya I know all about CSS rollovers. I actually use alot of CSS in some of my other work. Im just not a total expert at it just yet.

The only problem is, I cannot use regular text for my navigation links. Im using a monica corsiva font or whatever which is a wedding type font and even my g/f likes it. SO I have to use graphics else the font wont show up for most users (as Im sure you know)

So I guess Im either stuck with preloading the images and having 2 seperate images per link. Or I guess you can do it with CSS too I thought with (background-image) then just use A:link A:hover, etc

right?

[PeOfEo]

I was not sure if you could flip the background image of a link on hover, but I played with it and was unsucessful. I know you can change the opacity of the image and do other neat things, but actually flipping ht eimage does not appear to work. What do you want this rollover to do, just make the image brighter or darker, or actually change colors, or what?
http://www.mandarindesign.com/troops.html has stuff on image opacity with css on it.

[chugger93]

Well I havnt decided just yet. Im debating on using just a color change rollover. (i.e going from purple to green when highlighted) or doing something neat like this site
http://da.amandaandscott.com/

and using some kinda of symbol to indicate a mouseover.

[PeOfEo]

Then I would say your best bet would probably be a java script rollover.