Jump to bottom

Topic: CSS: Margins #2 (Page 2 of 2) Pages that link to <a href="https://ozoneasylum.com/backlink?for=11013" title="Pages that link to Topic: CSS: Margins #2 (Page 2 of 2)" rel="nofollow" >Topic: CSS: Margins #2 <span class="small">(Page 2 of 2)</span>\

 
CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

posted posted 07-25-2003 14:52

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).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 07-25-2003 18:42

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.



CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

posted posted 07-26-2003 17:10

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-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 07-26-2003 17:49
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>christopher obuck</title>

<script language="javascript" type="text/javascript">
<!--
//preload images
ImageA= new Image();
ImageA.src="images/interactive2.gif";

ImageB= new Image();
ImageB.src="images/print2.gif";

ImageC= new Image();
ImageC.src="images/photography2.gif";

function WinStatus(){
window.status="portfolio";
return true;
}
//-->
</script>

<style type="text/css">
<!--
a:link {color:#999;
text-decoration:none;
background-color:transparent;
}
a:visited {color:#999;
text-decoration:none;
background-color:transparent;
}
a:hover {color:#ccc;
text-decoration:none;
background-color:transparent;
}
a:active {color:#ccc;
text-decoration:none;
background-color:transparent;
}

body
{
background-color:#f0f0f0;
margin:0;
padding:0;
}

#background
{
position:absolute;
top:50%;
width:100%;
margin:0;
padding:0;
background-image:url(images/water1280.jpg);
background-repeat:repeat-x;
background-position:0 30px;
}

#left-space
{
margin-left:5%;
}

#contact
{
float:right;
margin-top:164px;
padding-right:1%;
}

img
{
border:0;
margin:0;
padding:0;
}
-->
</style>

</head>
<body>
<div id="background">

<span id="left-space"><a href="interactive.htm"
onmouseover="document.images[0].src='images/interactive2.gif';"
onmouseout="document.images[0].src='images/interactive.gif';WinStatus();"><img src="images/interactive.gif" name="interactive" width="174" height="39" alt=""></a>

<a href="print.htm"
onmouseover="document.images[1].src='images/print2.gif';"
onmouseout="document.images[1].src='images/print.gif';WinStatus();"><img src="images/print.gif" name="print" width="88" height="39" alt=""></a>

<a href="photography.htm"
onmouseover="document.images[2].src='images/photography2.gif';"
onmouseout="document.images[2].src='images/photography.gif';WinStatus();"><img src="images/photography.gif" name="photography" width="217" height="39" alt=""></a>
</span>

<div id="contact"><a href="chris@hotfrogdesign.com"
onmouseover="document.images[3].src='images/contact2.gif';"
onmouseout="document.images[3].src='images/contact.gif';WinStatus();"><img src="images/contact.gif" name="contact" width="65" height="16" alt=""></a>
</div>

<br class="clear"/>
</div>

</body>
</html>





ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

posted posted 07-27-2003 07:39

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/

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted posted 07-27-2003 14:04

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

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

posted posted 07-28-2003 14:33

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.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted posted 07-28-2003 18:09

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:

code:
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...

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 07-28-2003 20:29

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



Rinswind 2th
Maniac (V) Inmate

From: Den Haag: The Royal Residence
Insane since: Jul 2000

posted posted 07-28-2003 23:22

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).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 07-29-2003 04:33

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.

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

posted posted 08-01-2003 01:36

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

Thanks!
CRO8

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

posted posted 08-02-2003 04:42

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



« Previous Page1 [2]



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu