Autor Zpráva
Holi
Profil
#1 · Zasláno: 5. 10. 2009, 11:16:59
Odpovědět Citovat
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
#2 · Zasláno: 5. 10. 2009, 11:38:23
Odpovědět Citovat
tagu body daj text-align:center ; a obalovemu divu s pevnou sirkou margin:0 auto;
Bubák
Profil
#3 · Zasláno: 5. 10. 2009, 12:02:20
Odpovědět Citovat
„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
#4 · Zasláno: 5. 10. 2009, 16:28:33
Odpovědět Citovat
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
#5 · Zasláno: 5. 10. 2009, 17:09:23 · Upravil/a: Trejpa
Odpovědět Citovat
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
#6 · Zasláno: 5. 10. 2009, 17:38:32
Odpovědět Citovat
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
#7 · Zasláno: 5. 10. 2009, 17:44:29
Odpovědět Citovat
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
#8 · Zasláno: 5. 10. 2009, 17:45:52
Odpovědět Citovat
Trejpa ???

Holi prehoď margin: 0 auto; z <body> do toho prvého <div>-u
Holi
Profil
#9 · Zasláno: 5. 10. 2009, 18:12:40
Odpovědět Citovat
Děkuji mockrát za pomoc už to funguje
Časová prodleva: 16 let

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