Dotaz na CSS pozicovani

Dejme tomu ze table layout sux.. a css pozicioneee rulz :)

vytvorim si par ID-cek ..s nejakymi hodnotami a tim si nejak rozdelim stranku

<div id="neco"> bla bla bla </div>

muzu v BLA BLA BLA... dal pozicovat?

Na strance bude treba obdelnik 100 x 100 px (id="neco) a v tom bych chtel dat pozicovat..umistit do nej presne nekam MENU, OBRAZKY atd.. jde to pres pozicovani? JAK? pres CLASSky? Jak bude vypadat zapis? DIKY za help :) snad to neni prilis stupidni dotaz a stoji za odpoved

Když máš jeden pozicovaný box (absolutně nebo relativně) a dovnitř dáš druhý pozicovaný prvek (absolutně), tak ten druhý bude počítat souřadnice od horního levého rohu toho prvního.

Počkej moment, napíšu příklad...

btw: id a class jsou jenom selektory :-)

//html:

<div id="modry1">
modrý 1 - absolute
<div id="modry2">
modrý 2 - absolute
</div>
</div>

<div id="cerveny1">
červený 1 - relative
<div id="cerveny2">
červený 2 - absolute
</div>
</div>

//css:

#modry1 {position:absolute; top:50px; left:100px; width:200px; height:200px; color:white; background:#006; }
#modry2 {position:absolute; top:40px; left:80px; width:100px; height:100px; background:#CCCCE0; }

#cerveny1 {position:relative; top:150px; left:400px; width:200px; height:200px; color:white; background:#b00; }
#cerveny2 {position:absolute; top:150px; left:150px; width:100px; height:100px; background:#f99; }

...může s tím být docela sranda :-)

:)

no vypada to zajimave...myslim ze to chapu ;))) ...DIKES FREYO. ..


Cipaku se netlem a bud online kdyz te clovek potrebuje ;p

btw freyo ..sem zkousel pozicovani v pozicovani..treba obrazek do obdelniku dle tveho prikladu a nefunguje to tak jak by melo... jsi si jista ze to ukoncovani tagu je tak jak pises ? nemelo by to byt


<div id="modry1">
modrý 1 - absolute
</div>

<div id="modry2">
modrý 2 - absolute
</div>


? takhle se to pak zobrazuje jak ma ... (IE)

> nefunguje to tak jak by melo...
Funguje to tak, jak má - správné chování pozic u zanořených prvků je takové, že se počítá nikoli podle horního levého rohu okna prohlížeče, ale od horního levého rohu rodičovského prvku (jak už jsem psala).

screenshot toho, co vyrobí kód z ukázky (a je to přesně tak, jak jsem zamýšlela):

http://freya.webz.cz/blabla/pozicovani.png

oky koukam :) tak ja se na to jeste mrknu ..mozna sem to nejak prehlidl (zkousim si CSS 1, 2 a mam vecne sefa za ramenem) :) ..


Jinak co mi nefunguje je obtekani ...

vlastnost FLOAT, CLEAR

vlastne tak napul...

treba

// HTML // <img src...... >
// CSS // img { float: left; }

a text krasne obteka obrazek. Problem je pak ten, ze kdyz obrazek napozicuju napr. img { float: left; position: absolute; top: neco; left: neco;}

tak uz text obrazek NEOBTEKA, ale je na zacatku stranky ...

Je na to naka finta, nebo to je holejt fakt nebo s 99% to delam spatne? :) THX

jeste k tomu pozicovani..cili prvni vec kdyz udelas CSS zapis (pouzivam topstyle 3)

#modry1 {position:absolute; top:50px; left:100px; width:200px; height:200px; color:white; background:#006; }
#modry2 {position:absolute; top:40px; left:80px; width:100px; height:100px; background:#CCCCE0; }

#cerveny1 {position:relative; top:150px; left:400px; width:200px; height:200px; color:white; background:#b00; }
#cerveny2 {position:absolute; top:150px; left:150px; width:100px; height:100px; background:#f99; }

cili tvuj priklad... a chces aby to vypadalo v HTMLku stejne ..tak to musis zapsat takhle ..cili tak jak jsem rikal ja...

1 )

<div id="modry1">
modrý 1 - absolute
</div>

<div id="modry2">
modrý 2 - absolute
</div>

.
.
.


2)
<div id="modry1">
modrý 1 - absolute
<div id="modry2">
modrý 2 - absolute
</div>
</div>


a to je tvuj zapis ...

ale PAK to VYPADA UPLNE JINAK ! uplne se ta struktura pozicovani zmeni ...

tak jak tedy?

ad obtékání: když budeš ten floatující prvek pozicovat relativně, bude se okolní text tvářit, jakoby nic a bude dál obtékat. Když absolutně, tak obtékat nebude.

> a chces aby to vypadalo v HTMLku stejne ..tak to musis zapsat takhle
stejně jako co?

> ale PAK to VYPADA UPLNE JINAK ! uplne se ta struktura pozicovani zmeni ...
samozřejmě, že to bude vypadat jinak, to je přece jasné :-)

Mám dojem, že jsem asi musela nějak špatně pochopit tvou původní otázku:
"<div id="neco"> bla bla bla </div> muzu v BLA BLA BLA... dal pozicovat?"
- měla jsem za to, že se ptáš na pozicování zanořených prvků, tak jsem předvedla zanořené prvky.

ted kdyz se na to zpetne divam sem vlastne debil.... :( pokladal sem otazku... na pozicovani vnorenych prvku a vzapeti ji vyvracel otazkou na normalni pozicovani ..a divil sem se ze to nevypada stejne ..sry uz to xapu :))) (za to muze ta namahava prace :)) )


Jinak laicky ...rozdil mezi absolutnim a relativnim pozicovanim? Kdy je lepsi pouzit co na co?

jinak jeste last thing ... xci nekam do stranky hodit treba obrazek

for ex.: //html// <img id="nekam" src=....>
//css // {position: absolute/relative; top:xxx; left:xxx;}


tak jak ted presne nastavim aby ho obtekal text ktery teprve ted v html kodu dopisu ...


__
html

<img id="nekam" src=....> ted by mel text obtekat vlevo ?

> rozdil mezi absolutnim a relativnim pozicovanim? Kdy je lepsi pouzit co na co?
- Absolutní pozice nebere ohled na okolní prvky a souřadnice počítá od horního levého okraje stránky (nebo nadřazeného prvku, když i ten je pozicovaný). Okolní prvky se tváří, jako by tenhle pozicovaný objekt vůbec neexistoval.
- Relativní pozice počítá svoje souřadnice od místa, kde by se ta věc normálně zobrazila, kdyby nebyla pozicovaná. Je to tudíž jenom pošoupnutí objektu určitým směrem. Okolní prvky se chovají, jako by onen pozicovaný objekt byl stále na původním místě.
(viz. http://www.jakpsatweb.cz/css/css-pozicovani.html)

Co se týče tvého příkladu... nevím, jak by se v html/css dalo nějakým lidským způsobem dosáhnout dokonalého "wordovitého" obtečení obrázku (myslím rozdělené řádky: skákal pes [obrázek] přes oves), pokud by byl pozicován někam na střed stránky.
Jestli chceš ten obrázek dát někam ke straně, hodil by se tam float a bylo by vymalováno.

S layoutem složeným čistě pozicováním se to má tak, že většinou nezůstane jen u jednoho pozicovaného prvku - nakonec musíš pozicovat skoro všechno, aby se to nevhodně nepřekrývalo a netlouklo...

diky kočko ;)

není zač :-)

ale je ;)) bo bych rad ICQ abych tu a tam ti mohl napsat o radu ... takovych lidi jako ty si cennim, neslo by to? Spamu se obavat nemusis :) pres den sem v praci a o vikendu s mladou nebo na fotbale ;) takze tu a tam .... hod mi to na mail if u want ;)

152863909

nevite nekdo o nejake prehledne referencmi tabulce o ccs2 ?

www.w3c.org