Autor Zpráva
swosh
Profil
Zkoušel všechno možný, ale na střed to nejde. Koukal jsem i na priklady co tu jsou......tady hazu zdrojak, kdyz objevite chybu budu moc vdecnej

/* Adricovy stranky*/

body {
	Background-color: #777777;
	margin: 0;
	padding: 0;
	text-align: center; /*vycentrováno pro IE */
}

.page {
	background-color: #777777;
	margin: auto; /* vycentrováno pro ostatní prohlížeèe */
}

.logo {
	background-color: #777777;
	background-image: url(obrazkynastrance/logo.png);
	position: absolute;
	top: 20px;
	width: 900px;
	height: 221px;
	margin: 0;
	padding: 0;
}

.menu {
	background-color: #F99BCC;
	background-image: url(obrazkynastrance/menu.png);
	position: absolute;
	top: 241px;
	width: 900px;
  	height: 64px;
	margin: 0;
	padding: 0;
}

.plocha {
	background-color: #777777;
	position: absolute;
	top: 305px;
	width: 900px;
  	height: 1200px;
	margin: 0;
	padding: 0;
}

.roztekajiciokraj {
	background-color: #777777;
	background-image: url(obrazkynastrance/roztekajiciokraj.png);
	position: absolute;
	top: 0px;
	width: 88px;
	height: 1108px;
	margin: 0;
	padding: 0;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="cs" />
<meta name="description" content="Stránky nejlepšího grafika na světě" />
<meta name="keywords" content="grafika, adra, adrian, jansa, adr@, logo, loga, propagacni" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="author" content="Petr Hnilica, PHsoft">
<meta http-equiv="Content-Language" content="cs"/>
<link rel="stylesheet" type="text/css" href="styly.css" media="all">

<title>Silicon Poem</title>

</head>
<body>

<div class="page">
	<div class="logo">p
	</div>	
	
	<div class="menu">p
	</div>
		
	<div class="plocha">p
		<div class="roztekajiciokraj">p
		</div>
	</div>	
</div>

</body>
</html>
swosh
Profil
.page {
background-color: #777777;
margin: auto; /* vycentrováno pro ostatní prohlížeèe */
} 


jsem opravil na

.page {
background-color: #777777;
margin: auto; /* vycentrováno pro ostatní prohlížeèe */
padding: auto;
}
tiso
Profil
...niečo ti tam chýba, viď http://tiso.wz.cz/articles/vycentrovanie-obsahu-stranky.php
swosh
Profil
Problem vyresen :)

Zapomel jsem obalovacimu divu

.page {
background-color: #777777;
margin: auto; /* vycentrováno pro ostatní prohlížeèe */
padding: auto;
}


dat rozmery

.page {
	background-color: #777777;
	width: 900px;
	height: 1500px;
	margin:0 auto; /* vycentrováno pro ostatní prohlížeèe */
	padding:0 auto;
	text-align: left;
}


Nezapomente na to....ja si myslel ze ten obalovaci div automaticky obaly obsah....misto toho to proste nefunguje.
Dik
tiso
Profil
swosh - nabudúce miesto aby si myslel, skús si dačo prečítať o tom ako to funguje, z nejakej knihy alebo článkov na nete. Ono je to celkom jednoduché.
swosh
Profil
knihy jsou pro sraby :) a uznavam, ze to byla blba chyba
Manq
Profil
knihy jsou pro sraby :)
A ptát se na každou blbost není srabácké?
Petroff
Profil
.page {
background-color: #777777;
margin: auto; /* vycentrováno pro ostatní prohlížeèe */
padding: auto;
}

Pánové, jak funguje automatický padding ?
tiso
Profil
Petroff - treba sa spýtať toho kto ho používa, ten to určite bude vedieť...
Bubák
Profil
tiso
Díval sjem se na W3C i na MSDN, a nic nenašel ;-(
Bude to hodně tajné, google našel jen asi 1000 odkazů.
Manq
Profil
Petroff
Tím ti chtěli kluci naznačit, že je to k ničemu. Neexistuje to ;-).
swosh
Profil
Výsledky 1 - 10 z asi 2 090 000 na dotaz auto padding

já jich našel víc
swosh
Profil
padding
vlastnosti
auto: automatické nastavení okrajů tak, aby protilehlé byly stejné (nefunguje v IE)

http://www.jakpsatweb.cz/css/margin.html
swosh
Profil
Rad odpovim kdyz to zvladnu :)
Manq
Profil
swosh
Vysvětluješ padding, ale odkazuješ na margin.
Padding: auto není. Margin: auto ano.
Bubák
Profil
swosh
Být tebou, tak se počtem vyhledaných stránek nechlubím, protože třeba téhle ukázce margin: auto není:
Kromě pravidla overflow: auto je na konci pozice předefinována tak, aby kompenzovala padding o velikosti 2%.

Příště se "gůgly" zeptej jinak..
Petroff
Profil
Mě ten dotaz napadl v souvislosti se známou univerzální rovnicí pro stanovení hodnot rozměrů a pozic při absolutním pozicování . V mnoha případech se urč.hodnoty mající auto dopočítávají a paddingy v ní figurují také:
Cont.Bl.width = left+Lm+Lb+Lp+width+Rp+Rb+Rm+right.
Hned po odeslání mi došlo, že je to nesmysl - ani padding ani border nemohou být auto - vždy pouze konstanty, dyť je na tom založený původní MS box model: width[MS]=Lb+Lp+width[W3C]+Rp+Rb
Ovšem zvláštní případ jsou relativní konstanty tj. v % (smutné je, že BORDER zadat nelze).

Např. pomocí % paddingu vyrobíte 3 stejné čtverce vyplňující celou šířku okna takto:

#ctverec2 {margin: auto; padding:16.666%; width:0; height:0; background: red}
<div id="ctverec2"></div>


(zbylé dva tvoří pozadí stránky)
Hodnas
Profil *
Ja mam problem : Kdyz pisu css a html a hodim to do obalu - dva divy (jeden je header a druhy menu) tak se vycentruje jen header napisu vam sem css a html:

CSS:

@charset "utf-8";
/* CSS Document */

* {
	margin:0px;
	padding:0px;
	text-align: center;
	
}

#menu ul li{
	list-style-type:none;
	display:inline;
	background: url(menu.png) no-repeat scroll; 
	font-family:Georgia;
	font-size:10pt;
	float: left;
	text-align: center;
}

#menu ul li a{
	text-decoration:none; 
	color: #c7c7c7;
	float:left;
	width: 100px;
	height: 23px; 
	padding: 7px 0 0 0; 
	text-align:center;
}

#menu ul li a:hover{
	color: #b2d8de;
	text-align: center;
}


#menu ul li:hover{
	background-position: 0 -30px;
	color: #b2d8de;
	text-align: left;
	margin: 0 auto
}


   
   
#all {
 width: 760px;
 text-align: left;
 margin: 0 auto;
}



HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />

<title>Hodnas</title>
</head>
<body>


<div id="all">
<div id="header">
<img src="Header.png">
</div>


<div id="menu" text-align="center"> 

<ul>

	<li><a href="">Home</a></li>
	<li><a href="">Videos</a></li>
	<li><a href="">Games</a></li>
	<li><a href="">About</a></li>
	<li><a href="">Downloads</a></li>

</ul>

</div>
</div>
</body>
</html>
Str4wberry
Profil
Odpovídám Hodnasovi:
Proč si nepřečteš návod kolegy tisa? Který je výše odkázán.
Hodnas
Profil *
Ty to tam nevidis?
georgino
Profil *
Dobrý den, mam podobný problem aky bol rieseny hore vyššie. skusal som to spravit atk ako to bolo uvedene hore,ale ja som si nakreslil stranku vo photoshope potom som ju rozrezal a v ccs som to pospajal,ale podla mojho kodu sa to aj vycentruje,aletie obrazky v jednotlyvych triedach ostanu na mieste. pridavam html a css kód:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>handlovanie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css"/>
<style type="text/css"></style>

</head>
<body>
<div class="page">
<div class="hlavicka"></div>
<div class="lavy-stlpec"></div>
<div class="pravy-stlpec"></div>
<div class="center"></div>
<div class="paticka"></div>
</div>

</body>
</html>


/* CSS Document (c) created by georgino */
body {

margin: 0;
padding: 0;
text-align: center; /*vycentrováno pro IE */
}
.page{
width: 826px;
height: 802px;
margin:0 auto; /* vycentrováno pro ostatní prohlížeèe */
padding:0 auto;
text-align: left;

}


.hlavicka{
position: absolute;
width:826px;
height:198px;
top: 0px;
left:0px;
background-image: url(img/hlavickahotova.jpg);






}

.lavy-stlpec{
position: absolute;
width:256px;
height:543px;
background-image: url(img/lavyhotovy.jpg);
left: 1px;
top: 197px;




}

.pravy-stlpec{
position: absolute;
width:62px;
height:554px;


left:764px;
top: 198px;
background-image: url(img/pravystlpechotovy.jpg);




}




.center{
position: absolute;
height:542px;
width:508px;
left: 257px;
top: 198px;
overflow: auto;
background-image: url(img/centerhotovy.jpg);
}

.paticka{
position: absolute;
width:826px;
height:62px;
left: 0px;
top: 740px;
background-image: url(img/patickahotova.jpg);
}

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