I am currently trying to make a simple splash page, that involves 4 images (background/logo/english/french)
Im currently trying to put the english/french on each side of the logo, and the logo centered in the middle. The problem is, when I resize the browser window, the images end up overlapping eatchother. Same as if I change my resolution.
Here is the HTML/CSS:
I would just like to make everything stay in place, rather than overlapping when the window is resized.
and how would I optimize this for smaller resolutions? (I am viewing this at 1600x900)
Thanks
Im currently trying to put the english/french on each side of the logo, and the logo centered in the middle. The problem is, when I resize the browser window, the images end up overlapping eatchother. Same as if I change my resolution.
Here is the HTML/CSS:
HTML Code:
<body> <div id="container"> <div id="sahel"> <img src="spllogo.png" alt="Spa Sahel Logo" /> </div> <div id="english"> <a href="eng.html" onMouseover="imageOn('english')" onMouseout="imageOff('english')"> <img src="english.png" name="english" border="0" /></a> </div> <div id="francais"> <a href="fr.html" onMouseover="imageOn('francais')" onMouseout="imageOff('francais')"> <img src="francais.png" name="francais" border="0" /></a> </div> </div> </body> </html>
Code:
@charset "utf-8";
/* CSS Document */
html, body {
background-image: url(splbg.png);
border-style: none;
overflow: hidden
}
#sahel{
position: relative;
top: 120px;
text-align: center;
}
#english {
position: absolute;
top: 274px;
left: 200px;
}
#francais {
position: absolute;
top: 274px;
right: 200px;
}
#container {
min-width: 100%;
width: 100%;
position: relative;
}
and how would I optimize this for smaller resolutions? (I am viewing this at 1600x900)
Thanks
Great job Skribe. You just made our jobs much easier!
Comment