Pozicování pozadí css
Ahoj,
učím se v css, ale celý dnešek řeším jeden problém, který určitě musí být úplně primitivní. Teda aspoň doufám.
Snažím se pozicovat pozadí, skrz css. Viz screen: ![[objekty.jpg]](http://imageshack.us/a/img195/5820/objekty.jpg)
Jak dostanu objekt B na stejnou úroveň vpravo od objektu A? Když nastavím pozici left, tak jak ji mám, tak mi to bere podle zobrazovacího okna, takže i kdybych to upravil dle mého rozlišení, tak by se to na každém jiném rozlišení zobrazovalo jinak. Dá se to nějak nastavit podle divu "telo", který má těch 800 px? Když nenastavím pozici top, na zapoznámkovanou výšku 195px, tak mi to zakryje obraz A. Přes pozici relative mi to přijde nevhodný, musí to jít přece i nějak přes absolute ne? Jsem z toho už zoufalý.
PS1: pro pozicování pozadí mám v html použít pouze prázdné divy, jak to mám v příkladu? Zdá se mi to nepraktické.
PS2: Když z divu "telo" odstraním margin: auto;, celé se mi to zarovná doleva, jde to nějak jinak vystředit nebo se to opravdu dělá přes ten margin? Zdá se mi to nevhodné.
Příklad:
<head><!-- ščřžýŠČŘŽÝ -->
<meta name="generator" content="PSPad editor, [url]www.pspad.com[/url]" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Kodovani designu</title>
<style type="text/css">
#telo{
width: 800px;
margin: auto;
}
#obr{
background: url(obr.png) no-repeat;
background-position: center;
position: absolute;
top: 0px;
width: 800px;
height: 195px;
}
#acko{
background: url(a.png) no-repeat;
position: absolute;
top: 195px;
width: 196px;
height: 233px;
}
#becko{
background: url(b.png) no-repeat;
position: absolute;
top: 428px;
/*top: 195px;*/
left: 196px;
width: 604px;
height: 233px;
}
</style>
</head>
<body>
<div id="telo">
<div id="obr">
</div>
<div id="acko">
</div>
<div id="becko">
</div>
</div>
</body>
</html>
Nevím, jestli jsem to správně pochopil. Rozumím tomu tak, že celé to chceš mít na středu a "B" vedle "A". Pokud ano, není třeba pozicovat. Stačí dát "A" obtékání a "B" raději bez šířky.
To by bylo nějak takto
A vznikne tohle
přesně tak jsem to myslel :) Super, díky
Douprav si, vyndej si ty rámečky etc.
Jasně, stačilo přidat float do Áčka a margin left do Bčka a všechno mohlo zůstat při starým. Dokonce i muselo, jinak mi to zase házelo, kam chtělo. Takže to vypadá takto:
Ještě jednou díky moc:) Můžu jít s klidným srdcem spát.
Jaký má smysl, když má něco obtékání a následující prvek má absolutní pozici?
Koukals na to ve vícero prohlížečích? Já na to mé v IE a ve FF.
No to nevím
. Asi jsem myslel kvůli tomu, že když v budoucnu budu chtít přidat další kousek pozadí (kdybych měnil nebo přidával design), že budu to muset v kódu html napsat přesně na danou pozici, ale to je asi blbost, protože bych měl v tom stejně potom bordel.
Oddělal jsem tedy všechny absolute hodnoty a jede to pořád stejně, tak díky moc :)
Když je něco obtékáno, další prvek to obtéká. Pokud má další prvek absolutní pozici, je jakoby vyjmut z toku dokumentu (lze si představit jako třeba další vrstvu) a je to přesně na definované pozici. Obtékání na něj pak nemá žádný vliv.
Další vrstva ale není ten pravý ořechový příměr, jelikož to se dělá z-index.
Edit:// Ty hlavně říkáš "pozadí" blokovému prvku či čemu. Pozadí má stránka, nebo ty prvky.
Áha. No ještě si s tím musím pohrát, abych pochopil přesnou podstatu pozicování.
K editu: Myslím to tak, že já mám pozadí jako celek (v photoshopu), který si já rozstříhám podle potřeb, a pomocí tady toho pozicování chci zase k tomu celku dojít. Takže já dávám asi pozadí jednotlivým divům, do kterých budu vkládat text, tlačítka, obrázky a pod.
Ano, dáváě pozadí jednotlivým divům. Pozicování je tady.
css-pozicovani.html
Podle mě je lepší a méně pracné udělat si ten návrh tak, aby se nemuselo nic stříhat a slepovat. Pak se to totiž stejně často rozhodí. Viz např. má validní stránka
validni
(koukám, že jí Opera zobrazuje jako FF)