Hey Guys....
I've been trying to find a solution for a problem i'm facing, but i can't seem to find a clear solution....
I am currently working on a website, and i am trying to create a layout similar to bing[dot]com where i will have a div tag that is centered in the browser vertically and horizontally.. centering horizontally is very easy using the auto left and right margin.. the problems begin to appear when i am trying to center the div tag vertically.
Here is the code that I was able to compile and reached a midway solution:
<style type="text/css">
body {
margin: 0px;
padding: 0px;
min-width:900px;
}
#pagebackground {
position: absolute;
height: 100%;
width: 100%;
background-image: url(assets/gradient.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
}
#container {
margin-right: auto;
margin-left: auto;
position: absolute;
top: 50%;
width: 100%;
margin-top:-300px;
min-width: 900px;
}
#picture {
position: relative;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
</style></head>
<body>
<div id="pagebackground"></div>
<div id="container"><div id="picture"><img src="assets/logo.jpg" width="900" height="600" alt="Company Logo" /></div>
</div>
</div>
</div>
</body>
}
There are 3 problems i'm facing now....
1) When i am scaling the browser, the image gets cropped from the top especially when i reduce the browser height to the minimum, and i guess it has something to do with the -ve margin. but the problem is that with out it, I don't get the vertical center effect.
2) the image doesn't stop at the end of the pagebackground div tag... the code above has a 100% height, but when i make it a fixed height, the picture div tag flows over it [especially when i'm trying to test the concept]..
3) i'm trying to create a gradient background covering the whole page behind the centered div tag, but since the height is unknown, then its really hard to make it appear.. there is a gradient image that is supposed to repeat along the x-axis. [in the current situation, the gradient seems to be working, but i have a feeling that this is structurally incorrect.]
I'm kind of confused... so can you please guide me on how to do the layout similar to bing[dot]com as mentioned above with the top fixed navigation bar, and the centered div tag... it seems that i am not sure how to structure my layout, and i can't clearly grasp the concept of vertical alignment.
Your help and support will be really appreciated.
Sincerely,
Sherif
