Autor Zpráva
Holi
Profil
Dobrý

Předem se chci omluvit pokud se to zde už nachází a v tom případě bych poprosil o link.

Procházím toto fórum a odkazy na návody zde uvedené. Koukal jsem se i na jakpsatweb.cz ale nikde jsem nenašel to co jsem chtěl.

Problém:
Složil jsem si web z obrázků pomoci CSS pozicování http://g-play.cz/test_room/web (NEJDNÁ SE O REKLAMU) a chtěl bych ji vycentrovat na střed. Jak jsem hledal na tomto fóru odpověď tak jsem zkoušel asi nejlepší způsob co jsem našel.

body {
  margin: 0;
  padding: 0;
  color: #000;
  background : #ffc none;
}
#page {
  margin: 20px 15%;
  padding: 1em;
  border: 2px solid #cc9;
  color: #000;
  background : #fff none;
}


<div id="page">
  ...
  zde je obsah stránky
  ...
</div>


Z této stránky http://www.sovavsiti.cz/c02031.html

Dělá to přesně to co chci jenže do centrování se vztahuje pouze text ane obrazky pozicované pomoci tagu <span>


Zde je výpis indexu.

body {
  margin: 0;
  padding: 0;
  color: #000;
  background : #ffc none;
}
#page {
  margin: 20px 15%;
  padding: 1em;
  border: 2px solid #cc9;
  color: #000;
  background : #fff none;
}

</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Fri Jul 18 10:54:13 GMT+0200 2008-->
</head>

<body>
<span style="position: absolute; top: 0px; left: 220px"><img name="headerleft" src="grafika/header_left.jpg" border="0" width="649" height="241" alt="" /></span>
<span style="position: absolute; top: 0px; left: 869px"><img name="headerpanacek" src="grafika/header_right_panacek.jpg" border="0" width="57" height="241" alt="" ></span>
<span style="position: absolute; top: 0px; left: 926px"><img name="czech" src="grafika/czech.jpg" border="0" width="55" height="59" alt="" ></span>
<span style="position: absolute; top: 0px; left: 981px"><img name="english" src="grafika/english.jpg" border="0" width="57" height="59" alt="" ></span>
<span style="position: absolute; top: 59px; left: 926px"><img name="header_right_pod_vlajeckama" src="grafika/header_right_pod_vlajeckama.jpg" border="0" width="110" height="182" alt="" ></span>
<span style="position: absolute; top: 0px; left: 1036px"><img name="login" src="grafika/header_right_login.jpg" border="0" width="208" height="241" alt="" ></span>

<span style="position: absolute; top: 241px; left: 220px"><img name="okraj1" src="grafika/strana_vedle_novinek.jpg" border="0" width="31" height="64" alt="" ></span>
<span style="position: absolute; top: 241px; left: 251px"><a href="/test_room/web/index.php?site=news" ><img name="novinky" src="grafika/novinky.jpg" border="0" width="191" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 442px"><a href="/test_room/web/index.php?site=members" ><img name="clenove" src="grafika/clenove.jpg" border="0" width="174" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 616px"><a href="/forum" ><img name="forum" src="grafika/forum.jpg" border="0" width="138" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 754px"><a href="/test_room/web/index.php?site=clanwars" ><img name="zapasy" src="grafika/zapasy.jpg" border="0" width="141" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 895px"><a href="/test_room/web/index.php?site=servers" ><img name="servery" src="grafika/servery.jpg" border="0" width="159" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 1054px"><a href="/test_room/web/index.php?site=articles" ><img name="clanky" src="grafika/clanky.jpg" border="0" width="161" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 1215px"><img name="okraj2" src="grafika/strana_vedle_clanku.jpg" border="0" width="29" height="64" alt="" ></span>
<span style="position: absolute; top: 305px; left: 220px"><img name="mezera1" src="grafika/mezera_pod_hornim_menu.jpg" border="0" width="1024" height="41" alt="" ></span>
<form method="post" name="login" action="checklogin.php"> 
<span style="position: absolute; top: 49px; left: 1069px"><input name="ws_user" type="text" size="20" value="Username" onfocus="this.value=''" style="margin:5px;" /></span> 
<span style="position: absolute; top: 74px; left: 1069px"><input name="pwd" type="password" size="20" value="Password" onfocus="this.value=''" style="margin:5px;" /></span>
<span style="position: absolute; top: 105px; left: 1080px"><td background="grafika/prihlasit.jpg"><input type="submit" name="Submit" value="&nbsp;" style="background-image: url(grafika/prihlasit.jpg); width:99px; height:24px; border:0" /></td></span>
</form><span style="position: absolute; top: 133px; left: 1067px"><a href="/test_room/web/index.php?site=register" ><img name="registrovat" src="grafika/registrovat.jpg" border="0" width="123" height="22" alt="" ></a></span>
<span style="position: absolute; top: 400px; left: 550px"><h2>Novinky</h2>
 <input type="button" onclick="MM_goToURL('parent','index.php?site=news&amp;action=archive');return document.MM_returnValue;" value="Archív" /><hr /></span>

</div>



Prosím jsem fakt zoufalý a už nevím co stím.

Předem děkuji za odpověď

Tomáš Holan
don jebot
Profil
tagu body daj text-align:center ; a obalovemu divu s pevnou sirkou margin:0 auto;
Bubák
Profil
centrování se vztahuje pouze text ane obrazky pozicované pomoci tagu <span>
Protože máš SPANy absolutně pozicované. Podívej se na www.jpw.cz a tam najdeš jeden nebo dva příklady na centrované absolutně pozicované layouty.
Holi
Profil
Můžeš mě na ten jpw.cz trošku navest včera jsem to tam hledat do 3 do rána takž fakt už nevím kde
Trejpa
Profil
Holi
Je třeba nastavit, aby se absolutní pozicování nepočítalo od začátku stránky, ale od začátku vystředěného obalového prvku tím, že se mu nastaví position: relative; a všechny absolutně pozicované prvky se vloží do něj:
<body style="text-align:center;">
<div style="margin:0 auto; width:960px; text-align:left; position:relative; ">
<span style="position:absolute; ... ">
</div>


EDIT: Opravena chyba ([#7],[#8]).
Holi
Profil
Nefunguje to šak se na vysledek podívejte sami(v prvním postu mám odkaz)

Zde je výpis z index.php

<body style="margin:0 auto; text-align:center;">
<div style="width:960px; text-align:left; position:relative; ">
<span style="position: absolute; top: 0px; left: 0px"><img name="headerleft" src="grafika/header_left.jpg" border="0" width="649" height="241" alt="" /></span>
<span style="position: absolute; top: 0px; left: 649px"><img name="headerpanacek" src="grafika/header_right_panacek.jpg" border="0" width="57" height="241" alt="" ></span>
<span style="position: absolute; top: 0px; left: 706px"><img name="czech" src="grafika/czech.jpg" border="0" width="55" height="59" alt="" ></span>
<span style="position: absolute; top: 0px; left: 761px"><img name="english" src="grafika/english.jpg" border="0" width="57" height="59" alt="" ></span>
<span style="position: absolute; top: 59px; left: 706px"><img name="header_right_pod_vlajeckama" src="grafika/header_right_pod_vlajeckama.jpg" border="0" width="110" height="182" alt="" ></span>
<span style="position: absolute; top: 0px; left: 816px"><img name="login" src="grafika/header_right_login.jpg" border="0" width="208" height="241" alt="" ></span>
<span style="position: absolute; top: 241px; left: 0px"><img name="okraj1" src="grafika/strana_vedle_novinek.jpg" border="0" width="31" height="64" alt="" ></span>
<span style="position: absolute; top: 241px; left: 31px"><a href="/test_room/web/index.php?site=news" ><img name="novinky" src="grafika/novinky.jpg" border="0" width="191" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 222px"><a href="/test_room/web/index.php?site=members" ><img name="clenove" src="grafika/clenove.jpg" border="0" width="174" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 396px"><a href="/forum" ><img name="forum" src="grafika/forum.jpg" border="0" width="138" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 534px"><a href="/test_room/web/index.php?site=clanwars" ><img name="zapasy" src="grafika/zapasy.jpg" border="0" width="141" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 675px"><a href="/test_room/web/index.php?site=servers" ><img name="servery" src="grafika/servery.jpg" border="0" width="159" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 834px"><a href="/test_room/web/index.php?site=articles" ><img name="clanky" src="grafika/clanky.jpg" border="0" width="161" height="64" alt="" ></a></span>
<span style="position: absolute; top: 241px; left: 995px"><img name="okraj2" src="grafika/strana_vedle_clanku.jpg" border="0" width="29" height="64" alt="" ></span>
<span style="position: absolute; top: 305px; left: 0px"><img name="mezera1" src="grafika/mezera_pod_hornim_menu.jpg" border="0" width="1024" height="41" alt="" ></span>
<?php include("login.php"); ?>
<span style="position: absolute; top: 133px; left: 8407px"><a href="/test_room/web/index.php?site=register" ><img name="registrovat" src="grafika/registrovat.jpg" border="0" width="123" height="22" alt="" ></a></span>
<span style="position: absolute; top: 400px; left: 330px"><?
      if(!isset($site)) $site="news";
      //Sichheitsl&uuml;cke beheben
      $invalide = array('/','/\/',':','.');
      $site = str_replace($invalide,' ',$site);
      if(!file_exists($site.".php")) $site = "news";
      include($site.".php");
      ?></span>
</div>
</body>
</html>
panther
Profil
Holi
margin: 0 auto
nemá být u body, ale u toho obalového divu se zadanou šířkou.

Kdyby sis našel jakoukoli stránku, která je centrovaná (a že jich není málo), v kódu bys to viděl.
tiso
Profil
Trejpa ???

Holi prehoď margin: 0 auto; z <body> do toho prvého <div>-u
Holi
Profil
Děkuji mockrát za pomoc už to funguje

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: