Podczas skalowania w podglądzie wyszukiwarki (CTRL+ CTRL-), obiekty sekcji:
"menu1" "menu2" "menu3" "menu4" "menu5" "menu6" "menu7"
jak też:
"orzel_grafika/platnosci.png" "orzel_grafika/wysylka.png" "orzel_grafika/kontakt.png"
przemieszczają się na boki, zamiast pozostać na swoich ustabilizowanych pozycjach względem tła:
"orzel_grafika/orzel_szablon_(numer1-8).png"
Podczas pomniejszania okna przeglądarki obiekty przemieszczają się na lewo, a podczas powiększania na prawo, tym samym wychodząc poza "biały margines" okna wyszukiwarki. Tylko w jednej pozycji skalowania obiekty są styczne z tłem, jednocześnie pozostając na swoim miejscu. Co zrobić aby zawsze, ze wględu na skalowanie były na swojej pozycji.
Oto kod html:
Kod
<!DOCTYPE html>
<html lang="pl-PL" style="min-height:100%;">
<head>
<title>Logo Orzeł</title>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<style>
#tlo {background; width:1200px; margin:0 auto 0 auto; padding:0px; border:0;}
#menu a:focus {-moz-outline:none; outline:none; /* CSS 3 */ ie-dummy:expression(this.hideFocus=true); /* IE >= 5.5 */;}
#menu1 {position:absolute; left:260px; top:350px; border:0;}
#menu1 a {width:116px; height:116px; display:block; background:url(orzel_grafika/regulamin_1.png) no-repeat;}
#menu1 a:hover {background:url(orzel_grafika/regulamin_2.png) no-repeat;}
#menu1 a:active {background:url(orzel_grafika/regulamin_3.png) no-repeat;}
#menu2 {position:absolute; left:492px; top:350px; border:0;}
#menu2 a {width:116px; height:116px; display:block; background:url(orzel_grafika/aukcje_1.png) no-repeat;}
#menu2 a:hover {background:url(orzel_grafika/aukcje_2.png) no-repeat;}
#menu2 a:active {background:url(orzel_grafika/aukcje_3.png) no-repeat;}
#menu3 {position:absolute; left:376px; top:466px; border:0;}
#menu3 a {width:116px; height:116px; display:block; background:url(orzel_grafika/ulubione_1.png) no-repeat;}
#menu3 a:hover {background:url(orzel_grafika/ulubione_2.png) no-repeat;}
#menu3 a:active {background:url(orzel_grafika/ulubione_3.png) no-repeat;}
#menu4 {position:absolute; left:608px; top:466px; border:0;}
#menu4 a {width:116px; height:116px; display:block; background:url(orzel_grafika/komentarze_1.png) no-repeat;}
#menu4 a:hover {background:url(orzel_grafika/komentarze_2.png) no-repeat;}
#menu4 a:active {background:url(orzel_grafika/komentarze_3.png) no-repeat;}
#menu5 {position:absolute; left:724px; top:350px; border:0;}
#menu5 a {width:116px; height:116px; display:block; background:url(orzel_grafika/pytanie_1.png) no-repeat;}
#menu5 a:hover {background:url(orzel_grafika/pytanie_2.png) no-repeat;}
#menu5 a:active {background:url(orzel_grafika/pytanie_3.png) no-repeat;}
#menu6 {position:absolute; left:840px; top:466px; border:0;}
#menu6 a {width:116px; height:116px; display:block; background:url(orzel_grafika/mail_1.png) no-repeat;}
#menu6 a:hover {background:url(orzel_grafika/mail_2.png) no-repeat;}
#menu6 a:active {background:url(orzel_grafika/mail_3.png) no-repeat;}
#menu7 {position:absolute; left:956px; top:350px; border:0;}
#menu7 a {width:116px; height:116px; display:block; background:url(orzel_grafika/fb_1.png) no-repeat;}
#menu7 a:hover {background:url(orzel_grafika/fb_2.png) no-repeat;}
#menu7 a:active {background:url(orzel_grafika/fb_3.png) no-repeat;}
</style>
</head>
<body style="min-height:100%;">
<div id="head">
<section id="tlo">
<img src="orzel_grafika/orzel_szablon_1.png" style="display:block; margin-top:-8px;"/>
<img src="orzel_grafika/orzel_szablon_2.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_3.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_4.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_5.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_6.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_7.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_8.png" style="display:block; margin-top:0px; position:absolute;"/>
</section>
<div id="menu">
<section id="menu1">
<a href="adres" title="info-regulamin" alt="info_regulamin"></a>
</section>
<section id="menu2">
<a href="adres" title="inne aukcje" alt="inne_aukcje"></a>
</section>
<section id="menu3">
<a href="adres" title="dodaj do ulubionych" alt="dodaj_do_ulubionych"></a>
</section>
<section id="menu4">
<a href="adres" title="komentarze" alt="komentarze"></a>
</section>
<section id="menu5">
<a href="adres" title="zadaj pytanie" alt="zadaj_pytanie"></a>
</section>
<section id="menu6">
<a href="adres" title="e-mail" alt="e_mail"></a>
</section>
<section id="menu7">
<a href="adres" title="fanpage" alt="fanpage"></a>
</section>
<div style="display:block; margin-top:0px; bottom:0px; position:absolute; left:144px; top:583px;">
<img src="orzel_grafika/platnosci.png" alt="platnosci" width="349" height="292"/>
<span style="display:block; position:absolute; bottom:0px; text-align:center; padding-left:25px; padding-right:25px; padding-bottom:90px; padding-top:25px;">tekst</span></div>
<img src="orzel_grafika/wysylka.png" alt="wysylka" style="display:block; margin-top:0px; position:absolute; left:492px; top:583px;"/>
<img src="orzel_grafika/kontakt.png" alt="kontakt" style="display:block; margin-top:0px; position:absolute; left:840px; top:583px;"/>
</section>
</div>
</div>
</body>
</html>
<html lang="pl-PL" style="min-height:100%;">
<head>
<title>Logo Orzeł</title>
<meta charset="utf-8" http-equiv="Content-Type" content="text/html"/>
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<style>
#tlo {background; width:1200px; margin:0 auto 0 auto; padding:0px; border:0;}
#menu a:focus {-moz-outline:none; outline:none; /* CSS 3 */ ie-dummy:expression(this.hideFocus=true); /* IE >= 5.5 */;}
#menu1 {position:absolute; left:260px; top:350px; border:0;}
#menu1 a {width:116px; height:116px; display:block; background:url(orzel_grafika/regulamin_1.png) no-repeat;}
#menu1 a:hover {background:url(orzel_grafika/regulamin_2.png) no-repeat;}
#menu1 a:active {background:url(orzel_grafika/regulamin_3.png) no-repeat;}
#menu2 {position:absolute; left:492px; top:350px; border:0;}
#menu2 a {width:116px; height:116px; display:block; background:url(orzel_grafika/aukcje_1.png) no-repeat;}
#menu2 a:hover {background:url(orzel_grafika/aukcje_2.png) no-repeat;}
#menu2 a:active {background:url(orzel_grafika/aukcje_3.png) no-repeat;}
#menu3 {position:absolute; left:376px; top:466px; border:0;}
#menu3 a {width:116px; height:116px; display:block; background:url(orzel_grafika/ulubione_1.png) no-repeat;}
#menu3 a:hover {background:url(orzel_grafika/ulubione_2.png) no-repeat;}
#menu3 a:active {background:url(orzel_grafika/ulubione_3.png) no-repeat;}
#menu4 {position:absolute; left:608px; top:466px; border:0;}
#menu4 a {width:116px; height:116px; display:block; background:url(orzel_grafika/komentarze_1.png) no-repeat;}
#menu4 a:hover {background:url(orzel_grafika/komentarze_2.png) no-repeat;}
#menu4 a:active {background:url(orzel_grafika/komentarze_3.png) no-repeat;}
#menu5 {position:absolute; left:724px; top:350px; border:0;}
#menu5 a {width:116px; height:116px; display:block; background:url(orzel_grafika/pytanie_1.png) no-repeat;}
#menu5 a:hover {background:url(orzel_grafika/pytanie_2.png) no-repeat;}
#menu5 a:active {background:url(orzel_grafika/pytanie_3.png) no-repeat;}
#menu6 {position:absolute; left:840px; top:466px; border:0;}
#menu6 a {width:116px; height:116px; display:block; background:url(orzel_grafika/mail_1.png) no-repeat;}
#menu6 a:hover {background:url(orzel_grafika/mail_2.png) no-repeat;}
#menu6 a:active {background:url(orzel_grafika/mail_3.png) no-repeat;}
#menu7 {position:absolute; left:956px; top:350px; border:0;}
#menu7 a {width:116px; height:116px; display:block; background:url(orzel_grafika/fb_1.png) no-repeat;}
#menu7 a:hover {background:url(orzel_grafika/fb_2.png) no-repeat;}
#menu7 a:active {background:url(orzel_grafika/fb_3.png) no-repeat;}
</style>
</head>
<body style="min-height:100%;">
<div id="head">
<section id="tlo">
<img src="orzel_grafika/orzel_szablon_1.png" style="display:block; margin-top:-8px;"/>
<img src="orzel_grafika/orzel_szablon_2.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_3.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_4.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_5.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_6.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_7.png" style="display:block; margin-top:0px;"/>
<img src="orzel_grafika/orzel_szablon_8.png" style="display:block; margin-top:0px; position:absolute;"/>
</section>
<div id="menu">
<section id="menu1">
<a href="adres" title="info-regulamin" alt="info_regulamin"></a>
</section>
<section id="menu2">
<a href="adres" title="inne aukcje" alt="inne_aukcje"></a>
</section>
<section id="menu3">
<a href="adres" title="dodaj do ulubionych" alt="dodaj_do_ulubionych"></a>
</section>
<section id="menu4">
<a href="adres" title="komentarze" alt="komentarze"></a>
</section>
<section id="menu5">
<a href="adres" title="zadaj pytanie" alt="zadaj_pytanie"></a>
</section>
<section id="menu6">
<a href="adres" title="e-mail" alt="e_mail"></a>
</section>
<section id="menu7">
<a href="adres" title="fanpage" alt="fanpage"></a>
</section>
<div style="display:block; margin-top:0px; bottom:0px; position:absolute; left:144px; top:583px;">
<img src="orzel_grafika/platnosci.png" alt="platnosci" width="349" height="292"/>
<span style="display:block; position:absolute; bottom:0px; text-align:center; padding-left:25px; padding-right:25px; padding-bottom:90px; padding-top:25px;">tekst</span></div>
<img src="orzel_grafika/wysylka.png" alt="wysylka" style="display:block; margin-top:0px; position:absolute; left:492px; top:583px;"/>
<img src="orzel_grafika/kontakt.png" alt="kontakt" style="display:block; margin-top:0px; position:absolute; left:840px; top:583px;"/>
</section>
</div>
</div>
</body>
</html>