PDA

Click to See Complete Forum and Search --> : Align to Top fun

RTP
07-06-2007, 07:48 PM
Hi.

Can anyone skim thru this code on my test page and tell my why it isn't aligning to the very top of the browser (in firefox & IE)? It used too, but to my best recolection I think it stopped when i introduced the image above; the one that follows the container <div> (which inturn is set to always centre to different resolutions until it is smaller than 770px wide)?

Basically, there is a slight gap of white space at the top always, and I need it too fit to the top...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Richard Tuft.com Mock Up Design Test</title>
</head>
<style type="text/css">
body {
text-align: center;
min-width: 770px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-repeat: repeat-x;
}
#page {
position: relative;
margin:0 auto;
width:770px;
text-align: left;
margin-top: 0px;

}
#kitch {
position: absolute;
width: 187px;
height: 256px;
left: 14px;
top: 1495px;
}

</style>

<body>
<div id="page">
<div id="kitch"><img src="images/kitchener-Smile-001move.gif" width="187" height="313" /></div>
<img src="Design 001 G iv.jpg"/>
</div>
</body>
</html>

Thanks guys,
Rich.
FriendInNeed
07-06-2007, 09:30 PM
I think you need to put the code:
vertical-align: center;
align: center;
in the #kitch part of the styling. I'm not sure though, because I rarely ever use css. It's worth a shot.
ray326
07-06-2007, 11:42 PM
When the page is composite you need to put it online and give us a link.
bolty2uk
07-07-2007, 03:21 AM
Yes, be good to see the page and the problem online.

i did notice though that the height of the image is 313 and the div it is placed in has a height of 256.
You could maybe try putting a margin-top:0 in Kitch as well.

Upload it and give us a link.
RTP
07-07-2007, 11:59 AM
Thanks for your posts guys.

I tried the two things suggested there but to no avail.
I'm not sure if changing the 'kitch' div/image would effect the problem much becuase it's only within the <div> that is 'pushed' down several px's (only about 15px's - but it's noticable).

I think it's the 'page' part that may hold the solutuion; but for some reason it's not aligning to the top. However, i'm quite new to this stuff, so i'm not sure.

Thanks,
Rich.

PS: I can't upload anything yet becuase i don't have a host. I've just be previewing in browser in Dreamweaver. There maybe free hosts out there too test upload - i'm not sure. But the page is literally one big image acting as a visual mockup of my home page with one image/div above it that is trying out a little GIF animation (the kitch part). So i dunno if it would be of any extra help towards the solution neways as there's nothing going on really yet.
bolty2uk
07-07-2007, 01:56 PM
i will have a look at it online, what sizes for Design001.jpg?
WebJoel
07-07-2007, 02:16 PM
....<style type="text/css">
body {
text-align: center;
min-width: 770px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-repeat: repeat-x;
}
#page {
position: relative;
margin:0 auto;
width:770px;
text-align: left;
margin-top: 0px;

}
#kitch {
position: absolute;
width: 187px;
height: 256px;
left: 14px;
top: 1495px;
}

</style>

<body>
<div id="page">
<div id="kitch"><img src="images/kitchener-Smile-001move.gif" style="border:1px solid black;" width="187" height="313" /></div>
<img src="Design 001 G iv.jpg" style="border:1px solid black;" />
</div>
</body>
</html> What is the purpose of placing this DIV 1495px from the top-edge of the browser? Eventually, content will 'catch up' to this and be place 'underneith' this DIV-that-contains-an-image... :confused:

This is where it is handier to have your content made first, and then, style the presentation of it.
RTP
07-07-2007, 03:46 PM
I'm sure your making a good point there, but i'm lost! And it wouldn't be the first time! :cool:

I'll try and explain what i'm doing there and then perhaps you cud do me a favour and pick it apart; tell me whats wrong and what to do...

To start, i wanted my image (Design 001) to centre always in the visitors browser window, auto adjusting to differing resolutions etc. 'Design 001' is a jpeg mockup of the visual look of the site. I designed the site in Pshop, with each interactive aspect (eventually anyways) on differing layers, so that i could pick it apart when it actually comes time for me to deploy the site with all the right code etc (& for testing). But for this 'centering' test, i merged the whole Pshop visual mockup and used this one image to test the centering/resolution thing.
Worked good. Next up, was to start 'layering' in all the interactive parts of the site, above the image mockup; placing them in their respective places and then testing what i want done with them. This explains the 'kitch' image - which is a GIF created in ImageReady that 'flicks' between to layers to look like a simple animation. It goes in that exact place on the page. My problem there was how to make this a) float above the mockup in it's right place & b) still move with the below <div> when it is adjusted for differing resolution/browser sizes. I didn't know how to do this so came to this forum and asked. I recieved a great answer, involving relative & absolute alignments and it made it work great.

Hope that explains what's going on there a little better. It is by no means my site per say; just a 'test station' if you will, trying out different aspects over the top of a visual mockup (that allows me to know where to correctly place the aspects).

Still, it doesn't sit snug to the top of the broswer window like it should - and i dunno why! Maybe you've already answered that WebJoel - and if so, sorry to keep this going, but i really struggled understanding what you meant by content catching up etc?

Thanks,
Rich.

PS: Webjoel - On a re-read, i think i've got what you mean. Your saying eventually i'll write something that'll be blocked by the 'kitch' part? If so, that's no worry, as the design won't allow that due to the way it is. Hard to explain without seeing it, but it'll defo be safe. However, you have brought up an interesting point which i'd also like to ask. But for curtosy sake, i'll bother you guys with that Q another time!
Meantime, still can't find out how to do this 'no space above' thing. I've tried deleting things, adding things, but nothing is working! Any help!
RTP
07-07-2007, 04:16 PM
Just tried something:

For some reason that perhaps God only knows, this kinda works.

I added: top: -14px; to the #page css. This is how many px's the thing is down from the top in Dreamweaver. So i thought taking 14 out may work. It did. Well, it does - in IE. The page goes up and fits snuggly to the top of the browser window. However, in firefox, it goes up too high, cutting off a little bit of the top!

This is a really crappy solution to this problem i'm sure - but i'm wondering why in the hell it is sitting 14px's down from the top of the page?? There must be something in the code that's doing it, but i cannot find it.

Here's the code again:

<style type="text/css">
body {
text-align: center;
min-width: 770px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
background-repeat: repeat-x;
}
#page {
position: relative;
margin:0 auto;
width:770px;
text-align: left;
margin-top: 0px;
<--! Added 'top: -14px' in here that kinda works... -->

}
#kitch {
position: absolute;
width: 187px;
height: 256px;
left: 14px;
top: 1495px;
}

</style>

<body>
<div id="page">
<div id="kitch"><img src="images/kitchener-Smile-001move.gif" width="187" height="313" /></div>
<img src="Design 001 G iv.jpg"/>
</div>
</body>
</html>