Before I begin to discuss my situation, I’d like to say thank you. my page seems to distort and stretch during zoom out. the page will on get wider by decreasing its height. However when paid careful attention to www.microsoft.com You see that when zoomed out you see 33% margins on each side and page stays intact in respect to how it looks when zoomed in. Since all codes are separated into external sheets. I’m still a newbie, but learn the fun encountering all sort of situations, how else to learn? This is my css code:
#container {
width: 99%;
margin: auto;
text-align: left;
position: absolute;
border: 1px none white;
z-index: 1;
}
.logo {
margin-left: 150px;
min-width:10%;
}
.menu {
top: 72px;
left: 0px;
margin: auto;
min-width: 500px;
width: 100%;
position: absolute;
height: 36px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: rgba(0,0,0,0.5);
border-radius: none;
z-index: 2;
}
.menu ul {
height: auto;
padding: 4px 0px;
margin: auto;
}
.menu li {
display: inline-block;
padding: 1px;
}
.menu a {
text-decoration: none;
color: #FFFFFF;
padding: 8px 8px 8px 8px;
}
.menu a:hover {
color: #F90;
background-color: #FFF;
}
.frontimage {
min-height: 50%;
min-width: 500px;
width: 100%;
height: 300px;
margin: auto;
position: absolute;
top: 73px;
left: 0;
clear: both;
}
.footer {
min-width: 1024px;
min-height: 10%;
width: 100%;
height: 190px;
margin: auto;
left: -20px;
right: -20px;
position: absolute;
top: 763px;
background-color: black;
float: none;
color: white;
}
#footer-end {
position: absolute;
top: 953px;
background-color: gray;
color: white;
height: 30px;
text-align: center;
min-width: 1024px;
width: 100%;
min-height: 2.5%;
left: 0px;
}
