Topic: Page in CSS: Attempt 2

I hate to have you guys hold my hand through the process of learning CSS, but I keep getting stumped...so...help. (I hate asking for help, but I guess sometimes its necessary)

Anyway, as you recall, in the other thread a bit ago I showed you my first go with CSS. It was decent, looked good in IE, but bombed Netscape. You guys suggested instead of relative position I use floats. And so I tried.

Here's what I came up with.

Now my problem is I want the menu to be centered around the right part of the background image (you'll see what I mean) and yet it's rendered differently. So it's probably bad coding on my part, but I'd like to know what I should do to get the layout I desire. Any further more tips? I only ask because I was told the layout I want was much easier than I made it, and so far it hasn't been.

Obviously any help would be great appreciated. Thanks.


-Chesta


In my genius, I entered the same address twice. Fixed now...hopefully.

[This message has been edited by Chesta (edited 05-15-2003).]

Now menu is sitting on red bar of image.
so you mean you want to put menu exactly centered on that bar???
Please tell me, if you don't mind.

Hiroki Kozai

Hmmm ... I tried what I was going to suggest and for some reason it didn't work ... so I deleted it ...

It's been a funny old day so far :/

[This message has been edited by trib (edited 05-16-2003).]

Hiroki: Yes I want to center it along the red bar going down (currently used as a background image). I've been considering if perhaps I should be not using it as a background image, but I don't know how to come up with the same effect in anyother way.
http://home.maine.rr.com/dbjqyoyoworld/Stuff/WIPTA/screenshot.gif


Trib: Thanks for trying, at least it stumped someone smarter than myself :-) . I didn't see what you were going to suggest but perhaps if you reposted it I could mess around with it myself? I dunno....




-Chesta

Hi, many thanks for your explanation.
Well, this is very interesting to me as it is good to know.
I will think and try it.
See how it goes.
Have a happy Saturday.
From JavaScript Lover,

Hiroki Kozai

I really shouldn't stick my nose in here but I have a hunch where the problem is.

In order to position the table in the center on the vertical whatever you need to use "negative margins"

copy paste out of your html file :

.right {
BACKGROUND: #999999; FLOAT: right; MARGIN: 0px 10px 0px 0px; WIDTH: 120px; BORDER-TOP-STYLE:

solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; HEIGHT: 195px; TEXT-ALIGN: left;

BORDER-BOTTOM-STYLE: solid
}

If you change your margins to read :

MARGIN: 0px 10px 0px -10px;

the -10px will move the table to the left a little. When I downloaded your page to fiddle with it for some reason the vertical bars went missing so couldn't really line the table up and I was just guessing on the margin value.

I cann't give you a technical explaination since I am a very lousy coder - I am sure someone will be able to explain it so it will make sense.

sib

Negative margins are magic when it comes to placing elements - Thanks Emps ;-)


edit: got my left and rights mixed up


[This message has been edited by sib (edited 05-17-2003).]

to center something in a page all you need to do is this:

position: absolute, or relative

top: 50%

left: 50%

margin-top: -100px // this value is exactly half the height of whatever it is you are centering - moves the object 100 pixels up

margin-left: -50px // this value is exactly half the width of whatever it is you are centering - moves the object 50 pixels left

The negative margins (so called because they are values below than zero) move the object by the number of pixels you specify in which ever direction you specify.

visit my CryoKinesis Online Gallery

Wow, I think I've got it. It's by no means pretty what I did, and likely the opposite, but it seems to work...

http://home.maine.rr.com/dbjqyoyoworld/Stuff/WIPTA/test1.html

For those who don't want to bother scanning the source....

I have a div containing 2 divs for the title and text portion, just as before.


Instead of putting the menu in this div, I used smonkey's centering suggestion and started messing with it. It's still a couple pixels off here and there from Netscape to IE when you get right down to it, but it seems a lot better, and looks like what I expect on each browser.

It still appears to validate even and looks to work at different resolutions. Could someone please check this in Opera or any other Broswer/OS combination just to make me feel better? Anyway, now to create the page and such.

-Chesta

Edit: I should stop going back and reading my posts, somehow they always end up being incoherent.

[This message has been edited by Chesta (edited 05-21-2003).]