Autor Zpráva
pavel_pisa
Profil
Ahoj,
prosím Vás potřebuju poradit. Mám problém, ale už jsem prohledal snad všechno a nemůžu na to příjít.
Mám web složený z obrázků a potřebuju ho vycentrovat a aby se přizpůsoboval oknu v prohlížečích. Prosím Vás o radu jak na to.
V pátek jsem se teprve začal učit HTML a v životě jsem web nedělal, tak mě nekamenujte.

Tak nějak je to napsaný:
<body>
<body background="pozadiwebpage.jpg" bgcolor="grey">
<img src="banner.jpg" width="870" height="220" alt="banner" style="position: absolute; left: 550px; top: 50px">

<img src="logoBuffyFitness.gif" width="450" height="146" alt="logoBuffyFitness" style="position: absolute; left: 560px; top: 70px" border="0" usemap="#map2">
<map name="map2">
<area shape="rect" coords="0,0,450,146" href="http://www.buffyfitness.cz">
</map>

<img src="ricochetlogo.gif" width="100" height="29" alt="logoRicoChet" style="position: absolute; left: 900px; top: 165px" border="0" usemap="#map1">
<map name="map1">
<area shape="rect" coords="0,0,100,29" href="http://www.e-ricochet.cz/">
</map>


<img src="uvodnistrana.gif" width="160" height="32" alt="uvodnistrana" style="position: absolute; left: 560px; top: 230px" border="0" usemap="#map3">
<map name="map3">
<area shape="rect" coords="0,0,160,32" href="http://www.buffyfitness.cz">
</map>

<img src="posilovna.gif" width="120" height="25" alt="posilovna" style="position: absolute; left: 725px; top: 235px" border="0" usemap="#map3">
<map name="map3">
<area shape="rect" coords="0,0,120,25" href="http://www.buffyfitness.cz">
</map>

<img src="osobnitrener.gif" width="150" height="27" alt="osobnitrener" style="position: absolute; left: 850px; top: 235px" border="0" usemap="#map3">
<map name="map3">
<area shape="rect" coords="0,0,150,27" href="http://www.buffyfitness.cz">
</map>

<img src="ricochet.gif" width="120" height="27" alt="ricochet" style="position: absolute; left: 1003px; top: 235px" border="0" usemap="#map3">
<map name="map3">
<area shape="rect" coords="0,0,120,27" href="http://www.buffyfitness.cz">
</map>

<img src="masaze.gif" width="100" height="26" alt="masaze" style="position: absolute; left: 1131px; top: 236px" border="0" usemap="#map3">
<map name="map3">
<area shape="rect" coords="0,0,100,26" href="http://www.buffyfitness.cz">
</map>

<img src="cenik.gif" width="62" height="24" alt="cenik" style="position: absolute; left: 1290px; top: 237px" border="0" usemap="#map4">
<map name="map4">
<area shape="rect" coords="0,0,62,24" href="http://www.buffyfitness.cz/cenik.html">
</map>

<img src="posilovna04blacksmall.jpg" width="200" height="160" alt="obr1" style="position: absolute; left: 1220px; top: 50px">
<img src="posilovna07blacksmall.jpg" width="200" height="160" alt="obr2" style="position: absolute; left: 1020px; top: 50px">

<img src="ram.jpg" width="20" height="860" alt="ram" style="position: absolute; left: 530px; top: 30px">
<img src="ram.jpg" width="20" height="860" alt="ram" style="position: absolute; left: 1420px; top: 30px">
<img src="ram.jpg" width="900" height="20" alt="ram" style="position: absolute; left: 530px; top: 30px">
<img src="ram.jpg" width="900" height="20" alt="ram" style="position: absolute; left: 530px; top: 870px">

<img src="vypln.jpg" width="870" height="600" alt="vypln" style="position: absolute; left: 550px; top: 270px">

<object id="facebook" data="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.buffyfitness.cz%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" type="text/html" style="position: absolute; left: 444px; top: 868px"></object>
</body>

Předem dík všem. Pavel
David1256
Profil
Koukni se sem
pavel_pisa
Profil
David1256
Tady z toho serveru se učim. A podle tohodle jsem to nebyl schopen dát do kupy.
David1256
Profil
Ok, tak tedy podrobně - obal si obsah stránky tímto
<div id="centrovac"></div>

do stylu mu přiřaď toto
#centrovac{   
position: relative;
margin:auto;
width:778px;//šířka tvého webu
text-align:left;
}

a do body stylu dej toto
body {
margin: 0;
padding:0;
text-align: center; 
}
pavel_pisa
Profil
Takto? Protože mi to ještě nejde.
<html>
<head>
 <title>XXX</title>
<style>
#centrovac{   
position: relative;
margin:auto;
width:800px;//900
text-align:left;
}
</style>
</head>

<body style="margin: 0; padding:0; text-align: center;">
 <div id="centrovac">
 <body background="pozadiwebpage.jpg" bgcolor="grey"> <center><table width="760"><tr><td>

 <img src="banner.jpg" width="870" height="220" alt="banner" style="position: absolute; left: 550px; top: 50px">

 <img src="logoBuffyFitness.gif" width="450" height="146" alt="logoBuffyFitness" style="position: absolute; left: 560px; top: 70px" border="0" usemap="#map2">
 <map name="map2">
 <area shape="rect" coords="0,0,450,146" href="http://www.buffyfitness.cz">
 </map>

 <img src="ricochetlogo.gif" width="100" height="29" alt="logoRicoChet" style="position: absolute; left: 900px; top: 165px" border="0" usemap="#map1">
 <map name="map1">
 <area shape="rect" coords="0,0,100,29" href="http://www.e-ricochet.cz/">
 </map>


 <img src="uvodnistrana.gif" width="160" height="32" alt="uvodnistrana" style="position: absolute; left: 560px; top: 230px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,160,32" href="http://www.buffyfitness.cz">
 </map>

 <img src="posilovna.gif" width="120" height="25" alt="posilovna" style="position: absolute; left: 725px; top: 235px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,120,25" href="http://www.buffyfitness.cz">
 </map>

 <img src="osobnitrener.gif" width="150" height="27" alt="osobnitrener" style="position: absolute; left: 850px; top: 235px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,150,27" href="http://www.buffyfitness.cz">
 </map>
 
 <img src="ricochet.gif" width="120" height="27" alt="ricochet" style="position: absolute; left: 1003px; top: 235px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,120,27" href="http://www.buffyfitness.cz">
 </map>
 
 <img src="masaze.gif" width="100" height="26" alt="masaze" style="position: absolute; left: 1131px; top: 236px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,100,26" href="http://www.buffyfitness.cz">
 </map>
 
 <img src="cenik.gif" width="62" height="24" alt="cenik" style="position: absolute; left: 1290px; top: 237px" border="0" usemap="#map4">
 <map name="map4">
 <area shape="rect" coords="0,0,62,24" href="http://www.buffyfitness.cz/cenik.html">
 </map>
 
 <img src="posilovna04blacksmall.jpg" width="200" height="160" alt="obr1" style="position: absolute; left: 1220px; top: 50px">
 <img src="posilovna07blacksmall.jpg" width="200" height="160" alt="obr2" style="position: absolute; left: 1020px; top: 50px">

 <img src="ram.jpg" width="20" height="860" alt="ram" style="position: absolute; left: 530px; top: 30px">
 <img src="ram.jpg" width="20" height="860" alt="ram" style="position: absolute; left: 1420px; top: 30px">
 <img src="ram.jpg" width="900" height="20" alt="ram" style="position: absolute; left: 530px; top: 30px">
 <img src="ram.jpg" width="900" height="20" alt="ram" style="position: absolute; left: 530px; top: 870px">

 <img src="vypln.jpg" width="870" height="600" alt="vypln" style="position: absolute; left: 550px; top: 270px">
 
 <object id="facebook" data="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.buffyfitness.cz%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" type="text/html" style="position: absolute; left: 444px; top: 868px"></object>
 </div>
</body>
</html>
David1256
Profil
Může za to nejspíš to, že máte prvky stránky absolutně pozicované, to na to pak tohle neplatí. Navíc máte na stánce 2x<body>. Všechny ty styly dejte do jednoho body. Také nemáte uzavřený tag <table> tímto </table>.
David1256
Profil
Když vymažete všechny ty "lefty", tak Vám to bude fungovat, jak má. Tzn. všechny hodnoty left vymažte.
pavel_pisa
Profil
Smazal jsem left-y a kompletně se mi to rozházelo.
David1256
Profil
Tohle jsem předělal já a funguje to.
<html>
<head>
 <title>XXX</title>
<style>
#centrovac{   
position: relative;
margin:auto;
width:800px;//900
text-align:left;
}
</style>
</head>

<body style="margin: 0; padding:0; text-align: center;">

 <div id="centrovac">

 <img src="banner.jpg" width="870" height="220" alt="banner" style="position: absolute; left: 0px; top: 50px">

 <img src="logoBuffyFitness.gif" width="450" height="146" alt="logoBuffyFitness" style="position: absolute; left: 0px; top: 70px" border="0" usemap="#map2">
 <map name="map2">
 <area shape="rect" coords="0,0,450,146" href="http://www.buffyfitness.cz">
 </map>

 <img src="ricochetlogo.gif" width="100" height="29" alt="logoRicoChet" style="position: absolute; left: 0px; top: 165px" border="0" usemap="#map1">
 <map name="map1">
 <area shape="rect" coords="0,0,100,29" href="http://www.e-ricochet.cz/">
 </map>


 <img src="uvodnistrana.gif" width="160" height="32" alt="uvodnistrana" style="position: absolute; left: 0px; top: 230px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,160,32" href="http://www.buffyfitness.cz">
 </map>

 <img src="posilovna.gif" width="120" height="25" alt="posilovna" style="position: absolute; left: 0px; top: 235px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,120,25" href="http://www.buffyfitness.cz">
 </map>

 <img src="osobnitrener.gif" width="150" height="27" alt="osobnitrener" style="position: absolute; left: 0px; top: 235px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,150,27" href="http://www.buffyfitness.cz">
 </map>
 
 <img src="ricochet.gif" width="120" height="27" alt="ricochet" style="position: absolute; left: 0px; top: 235px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,120,27" href="http://www.buffyfitness.cz">
 </map>
 
 <img src="masaze.gif" width="100" height="26" alt="masaze" style="position: absolute; left: 0px; top: 236px" border="0" usemap="#map3">
 <map name="map3">
 <area shape="rect" coords="0,0,100,26" href="http://www.buffyfitness.cz">
 </map>
 
 <img src="cenik.gif" width="62" height="24" alt="cenik" style="position: absolute; left: 0px; top: 237px" border="0" usemap="#map4">
 <map name="map4">
 <area shape="rect" coords="0,0,62,24" href="http://www.buffyfitness.cz/cenik.html">
 </map>
 
 <img src="posilovna04blacksmall.jpg" width="200" height="160" alt="obr1" style="position: absolute; left: 0px; top: 50px">
 <img src="posilovna07blacksmall.jpg" width="200" height="160" alt="obr2" style="position: absolute; left: 0px; top: 50px">

 <img src="ram.jpg" width="20" height="860" alt="ram" style="position: absolute; left: 0px; top: 30px">
 <img src="ram.jpg" width="20" height="860" alt="ram" style="position: absolute; left: 0px; top: 30px">
 <img src="ram.jpg" width="900" height="20" alt="ram" style="position: absolute; left: 0px; top: 30px">
 <img src="ram.jpg" width="900" height="20" alt="ram" style="position: absolute; left: 0px; top: 870px">

 <img src="vypln.jpg" width="870" height="600" alt="vypln" style="position: relative; left: 0px; top: 270px">
 
 <object id="facebook" data="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.buffyfitness.cz%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" type="text/html" style="position: absolute; left: 444px; top: 868px"></object>
    </div>

</body>
</html>
pavel_pisa
Profil
Po Vaší úpravě to funguje, ale je to kompletně rozházené. Protože se smazala půkla souřadnic. Jak na to?
David1256
Profil
Takhle sešpatně hledá, kde je chyba. Nemohl byste sem dát odkaz na živou ukázku?
pavel_pisa
Profil
Já to ještě nemám na serveru. Zatím zo mám na disku.
David1256
Profil
Nejspíš ale asi vím, čím to, že to je rozházené. Ty lefty nemají být všechny nulové, ale mají být všechny sníženy o nejspíš 530px, to usuzuji z nejmenší hodnoty, kterou jste u left předtím měl.
pavel_pisa
Profil
Děkuji moc, problém vyřešen, bylo to přesně tak. Všechny left-y jsem odečetl od nejmenšího tj.444px.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0