Topic: CSS: Margins #2 (Page 2 of 2)

Status
I messed around with it last night and tried to get rid of all negative margins- like in my photography page (see below), and just use positive margins. This is what I got. On Mac, images are present but located 1/4 up the page. http://www.hotfrogdesign.com/index_cover3.htm

Hey Steve- DL's is the simplest version I may try and implement. You can test this: http://in-dented.com/temp/index_cover.htm

Also check out my photography page. Uses negative margins and looks fine on my Mac at work. This is the only thing that keeps me from proceeding to use DL's version. Keep thinking this can be done! http://www.hotfrogdesign.com/photography.htm

Oh yeah and DL- The reason why I said I had to use a table (width=90%) on my contact button is so it remains in the bottom right corner and resizes horizontally, but stays below the image. Unless I can give top = pixel measurement so it does not move up for down, and left = about 90% so it can slide horizontally. This sounds like the old fashioned way of doing things- I know

One last thing- I want to design this page in 1024, but I also want people with 800x600 to see everything on the screen. I may be asking for too much- what what the hell. I am very happy with the progress we've made and learning lots of good stuff. I trust you guys and will use whatever we decide together is best solution.

Thanks!
CRO8

[This message has been edited by CRO8 (edited 07-25-2003).]

Again, my version doesn't seem to have been Mac tested yet, and my site is currently down so it can't be tested at the moment.

Assuming it does work, however, the contact button will move just as you said you wanted it to. No need for a table - tables won't do anything in this case that the image on its own can't be made to do with the proper styling.

When I get home, if my site is still down I'll post the code here so someone can test it on a Mac.

I think you are still overcomplicating this, and possibly missing the simplicity in the code I posted. You don't need to position each graphic! That's a big part of what is causing the problems. You seem to be trying to exert control over somthing that will do what you want all on its own.

Thanks, looking forward to the code DL. I will be away from my computer this weekend attending a BBQ. I will most likely check back Sunday evening. Been so busy these past few weeks- with work and weekend plans- leaving little time for anything else, but I am determined to make this work!

Thanks.

DL's serv is still down, so I've uploaded the code ^above^ and set it up here:

http://ozphactor.home.comcast.net/asylum/hotfrog/

Well, I spent as much time screwing with it as I could afford this weekend, and couldn't get it all worked out. I will tell you one thing that helped: adding a height to the #background. Mac IE doesn't seem to take the background image into account when it draws the box, so it was collapsing to the height of the only content it was aware of: the "interactive print photography" graphics.

top: 50% seemed to put it in a good place but not dynamic (odd), and I never did get the contact button below the water.

Sorry

Thanks DL, Oz, and Steve for your assistance with this project. Been exposed to xhtml- good thing!

I will tell you how it works out.

Thanks again.

I'm a tad mystified as to why you have the water graphic as the background to a div instead of the background to the page itself. For instance (ignoring the navigation elements for the moment), adding this code to the body rule works just fine in IE 5:

background-image: 

url("images/water1280.jpg");

background-repeat: 

repeat-x;

background-position: 

0 50%;

}

The water graphic stays fluid (heh) with respect to the page height as the page is resized. With that moved to the body css rule, all you have to worry about is positioning the navigational elements.

Justa thought...

Steve - he did have it to the body. I just found it easier to control if it was in one <div> together.

Who this is good reading i do learn a looot from this.
If one off the MS' would be so kind to save this thread some day....

<edit>spelling</edit>
__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan
bookmarks

[This message has been edited by Rinswind 2th (edited 07-28-2003).]

I only poped in here bacause I though, 40+ posts about margins... what's up with that?

If anyone here ever wants me to test something on a Mac, just shoot me an email and I'll see what I can do. I know how annoying it can be to have someone tell you something breaks in a browser you can't test on.

Anyways, I've got a gruling 5 and a half hour break between classes tommorow so I'll have some time to play with this a little in the Mac labs and I'll see what I can do.

Just wanted to drop a note and say how thankful how helpful you cool cats were! and yes . . . you wear hats.

Thanks!
CRO8

My family members discourage me from wearing hats. They say I look foolish (not an exact quote exactly), but thanks anyway