Autor Zpráva
Jirka000
Profil *
#1 · Zasláno: 2. 7. 2011, 18:17:06
Odpovědět Citovat
Dobrý den, nelíbí se mi, že je obsah webu nalepený na levý okraj stránky, chtěl bych, aby se vždycky zobrazoval ve středu okna. Prošel jsem řadu diskuzí a s konstrukcí <div style="margin: 0px auto; position: relative; width: 1000px;"> jsem zkoušel všechno možné, ale web jsem s tím bohužel nevycentroval. V následujícím odkazu je zdrojový kód html stránky včetně zdrojové kód css stylu, která se mi nedaří vycentrovat.
http://www.jakdelatweby.cz/sablony/pozicovani-3-sloupce.php
Prosím o radu, jak v tomto případě tento web vycentrovat. Předem moc díky Jirka
Str4wberry
Profil
#2 · Zasláno: 2. 7. 2011, 18:43:36
Odpovědět Citovat
„s konstrukcí <div style="margin: 0px auto; position: relative; width: 1000px;"> jsem zkoušel všechno možné“

A zkoušel jsi s ní obalit celý web?
Jirka000
Profil *
#3 · Zasláno: 2. 7. 2011, 19:20:56
Odpovědět Citovat
Str4wberry:
pravě že zkoušel, ale nefungovalo to
panther
Profil
#4 · Zasláno: 2. 7. 2011, 19:29:54
Odpovědět Citovat
Jirka000:
tipuji, že někde absolutně pozicuješ. Dodej odkaz na inkriminovaný web a dostaneš přesnou odpověď. Bez něj lze jen tipovat.
Davex
Profil
#5 · Zasláno: 2. 7. 2011, 19:34:15
Odpovědět Citovat
Jirka000:
Vycentruj celou stránku. 
body {
  margin: 0 auto;
  position: relative;
  width: 910px;
}
Jirka000
Profil *
#6 · Zasláno: 2. 7. 2011, 20:08:01
Odpovědět Citovat
Celý den se snažím vycentrovat stránku a stále se mi to nedaří, na hostigu to zatim nemám, nemůžu vám na to poslat odkaz. Proto přikládám zdroj stránky a css stylu a moc vás prosim napište, kde, co a jak mám prosim dopsat, abych web vycentroval. Předem díky Jirka



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="description" content="Stručný popis www stránky.">
<meta name="keywords" content="klíčová slova">
<link rel="stylesheet" type="text/css" href="styl.css">
<title>Titulek WWW stránky</title>
</head>
<body>

<div class="menu">
<h3>Obsah</h3>
<ul>
<li><a href="#">Úvodní strana</a></li>
<li><a href="#">Odkazy a zdroje</a></li>
<li><a href="#">O autorovy</a></li>
<li><a href="#">Další blobosti</a></li>
<li><a href="#">Novinky</a></li>
<li><a href="#">Kontakty</a></li>
</ul>
<h3>Novinky</h3>
<p><strong>7. dubna 2007</strong> - Text.</p>
<p><strong>Starší změny</strong> - Text</p>
</div><!--konec menu-->

<div class="obsah">
<h1>Nadpis první úrovně</h1>
<p class="box">Text</p>
<p><strong>Text</strong> Text.</p>
<h2>Nadpis druhé úrovně</h2>
<ol>
<li>Text.</li>
<li>Text.</li>
<li>Text. <a href="http://www.jakdelatweby.cz/">http://www.jakdelatweby.cz/</a>.</li>
</ol>
<p><em>Text.</em> Text.</p>
<p class="patka">(c) 2004 Vaše jméno | Design & kód: <a href="http://www.jakdelatweby.cz/">Tvorba webu</a> - Text. <a href="http://www.inzerce-pujcek.cz/">Text.</p>
</div><!--konec obsahu-->

<div class="sloupec">
<h3>Zajímavosti</h3>
<p><strong>7. dubna 2007</strong> - Text. </p>
<h3>Odkazy</h3>
<p>
<a href="http://soft.jakdelatweby.cz/">Rneosoft Software</a><br>
<a href="http://el.jakdelatweby.cz/">Elektrotechnika</a><br>
<a href="http://katalog.kratce.info/">Katalog www stránek</a><br>
<a href="http://www.jakdelatweby.cz/sablony/">Šablony www stránek</a><br>
</p>
</div><!--konec sloupec-->

</body>
</html>



body {
background-color : white;
color : #50681e;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div.menu {
position : absolute;
top : 20px;
left : 10px;
width : 180px;
font-size : 90%;
}
div.sloupec {
position : absolute;
top : 20px;
left : 780px;
width : 180px;
}
div.obsah {
position : absolute;
top : 20px;
left : 210px;
width : 550px;
}
p.patka {
font-size : 80%;
text-align : center;
border-top : 1px dashed #abd656;
padding : 5px;
}
p.patka a {
color : #50681e !important;
}
em, strong {
color : #abd656;
}
ol, ul {
margin : 15px 25px 15px 50px;
padding : 0;
}
li {
margin : 15px 10px 15px 10px;
padding : 0;
line-height : 130%;
}
p {
padding : 0;
margin : 10px;
line-height : 140%;
}
p.box {
padding : 10px;
border : 1px solid #eff0dd;
background-color : #f8f9f1;
}
a:link {
color : #92c034;
}
a:visited {
color : #92c034;
}
a:hover {
color : #cb630e;
}
h1 {
font-size : 160%;
color : #abd656;
font-weight : normal;
margin : 10px;
}
h2 {
font-size : 130%;
color : #abd656;
font-weight : normal;
margin : 10px;
padding : 0 0 3px 10px;
border-bottom : 1px dashed #abd656;
}
h3 {
font-size : 120%;
color : #abd656;
font-weight : normal;
margin : 10px;
padding : 0 0 3px 10px;
border-bottom : 1px dashed #abd656;
}
.menu p {
padding : 10px;
border : 1px dashed #abd656;
}
.sloupec p {
padding : 10px;
border : 1px dashed #abd656;
}
.menu ul {
margin : 15px;
padding : 0;
}
.menu ul li {
margin : 5px 0 5px 0;
padding : 0;
list-style-type : none;
}
.menu ul li a {
font-weight : bold;
}
Petr ZZZ
Profil
#7 · Zasláno: 2. 7. 2011, 20:20:31
Odpovědět Citovat
Jirka000:
Zkus si doplnit v CSS to, co ti radí Davex: 
body {
  margin: 0 auto;
  position: relative;
  width: 910px;
  background-color : white; 
  color : #50681e; 
  font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

Více podrobností k tématu: Vycentrování obsahu stránky

(Vkládej prosím kódy mezi značky [pre] a [/pre]; stačí kliknout na .)
Jirka000
Profil *
#8 · Zasláno: 2. 7. 2011, 21:04:54
Odpovědět Citovat
Petr ZZZ:
toto jsem zkoušel, ale bohužel to nefungovalo
pavuk
Profil
#9 · Zasláno: 2. 7. 2011, 21:23:58
Odpovědět Citovat
Protože máš všechno absolutně napozicovaný, proto at děláš co děláš od okraje se to neodlepí o víc ani míň než máš ve stylech nastavený
Davex
Profil
#10 · Zasláno: 2. 7. 2011, 21:30:51 · Upravil/a: Davex
Odpovědět Citovat
Jirka000:
Bude to fungovat ve všech prohlížečích kromě Exploreru, protože je přepnutý do kompatibilního vykreslovacího režimu. Aby to fungovalo i v něm, tak se musí přepnout do standardního.

V tom tvém layoutu se používá absolutní pozicování. Možná by bylo pro tebe lepší použít místo něj plavání. Třeba na http://blog.html.it/layoutgala/ si můžeš vybrat něco vhodného.

pavuk:
„proto at děláš co děláš od okraje se to neodlepí“
Odlepí se, když se obalový element (body) napozicuje relativně.
pavuk
Profil
#11 · Zasláno: 2. 7. 2011, 22:05:18
Odpovědět Citovat
Davex:
„Odlepí se, když se obalový element (body) napozicuje relativně.“
Ano, ale to jsi psal už v [#5] a PetrZZZ v [#7] a já tím jen chtěl upozornit že to zřejmě Jirka000 neudělal. Ale je fakt že až tak patrný to z mý odpovědi není, moje chyba
Jirka000
Profil *
#12 · Zasláno: 3. 7. 2011, 00:24:33
Odpovědět Citovat
Davex:

Všem bych vám chtěl moc poděkovat, s vaším návodem se mi to nakonec podařilo. J.
Časová prodleva: 13 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0