poziciovanie vnoreneho divu css

zipper · Napísal **zipper**: 28.07.2010 0:14

zdravim...
mam problem s poziciovanim v css

standardne ked mate 2 vnorene divy ( "div2" je vo vnutri "div1")
pri poziciovani vnoreneho divu 2 sa berie ako suradnica 0,0 lavy horny okraj rodicovskeho divu1

ja ale potrebujem zadat suradnice pre poziciovanie divu2 tak, akoby nebol vnoreny, cize ho budem poziciovat od laveho horenho rohu celej stranky...

dufam ze ten moj krkolomny opis je dostacujuci... dik za odpoved...

coldak · Napísal **coldak**: 28.07.2010 8:05

a co ak pozicia bude mimo rodicovsky DIV ?

DARSON · Napísal **DARSON**: 28.07.2010 23:58

Kód:

#div1 {
   position: static;
}
#div2 {
   position: absolute;
   left: 20px;
   top: 20px;
}

Takto to myslis?

shaggy · Napísal **shaggy**: 29.07.2010 18:45

Máš dve možnosti, buď budeš div2 generovať priamo do body (čiže rodič bude body, nie div1), alebo použiješ niečo takéto:
http://jsfiddle.net/kTTzk/

Skús #div1 nastaviť position: relative - vtedy bude div2 brať súradnice 0,0 ako horný roh toho divu. Ak mu nenastavíš position: relative, tak ti ho zarovná pekne od okraju stránky.

zipper · Napísal autor témy **zipper**: 29.07.2010 19:15

DARSON píše:

Kód:

#div1 {
   position: static;
}
#div2 {
   position: absolute;
   left: 20px;
   top: 20px;
}

Takto to myslis?

nie tak... ja mam proste niekde na stranke div1 ten vyzera takto :

#div1{position: absolute;
top: 50px;
left: 100px;}

a div2 {position: absolute;
top: 10px;
left: 5px;}

a v html to vyzera asi takto...

<div id="div1">
<div id="div2">
</div>
</div>

a ja chcem aby bol ten div na suradnici 10,5 , ale kedze u neho sa berie ako pozicia 0,0 lavy horny okraj divu2, tak je v podstate napozicii 60,105

shaggy · Napísal **shaggy**: 29.07.2010 21:09

zipper - my sme ti napísali, ako to treba urobiť.
Buď sem dáš celú stránku a my nebudeme hádať tvoj kód (lebo to čo si sem dal trochu mení situáciu), alebo upravíš to, čo sme ti poradili. Tu nie je čo viac riešiť.

camo · Napísal **camo**: 30.07.2010 0:32

zipper:
Tak potom načo ten div2 strkáš do div1 keď ho aj tak chceš mať mino toho div1.
Možno by ti to mohli vyriešiť záporné hodnoty position/margin.

Gresthorn · Napísal **Gresthorn**: 04.08.2010 22:51

Takže, neviem, či som to správne pochopil, ale pokiaľ áno, tak prečo vkládaš ten div do ďalšieho divu ???
Nebolo by jednoduchšie mať ich samostatne?
Ak už by si aj chcel mať jeden v druhom tak keď zoberiem súradnice, ktoré si uviedol riešenie by mohlo byť takéto:

Kód:

#div1 {
     
    position:relative;
    left:100px;
    top:50px;
}

#div2 {
   position:relative;
   left:-95px;
   top:-40px;
}

Ale aj tak je podľa mňa lepšie nekombinovať ich.

zipper · Napísal autor témy **zipper**: 05.08.2010 14:03

no na stranke realne pracujem so zoznamom... nie s divmi... zle som to tu vysvetlil...tu je link na stranku aby ste videli ako to funguje... : http://dnesnadoba.tym.sk/galeria.html

Kód:

<div id="imglista" class="show">   
<ul id="imglist" style = "list-style: none">

<li><a href="#nogo"><img src="nechty/tb/1.jpg" border="0" height="80" width="80"><span><img src="nechty/1.jpg"></span></a>
    <a href="#nogo"><img src="nechty/tb/2.jpg" border="0" height="80" width="80"><span><img src="nechty/2.jpg"></span></a>
</li>
<li><a href="#nogo"><img src="nechty/tb/3.jpg" border="0" height="80" width="80"><span><img src="nechty/3.jpg"></span></a>
    <a href="#nogo"><img src="nechty/tb/4.jpg" border="0" height="80" width="80"><span><img src="nechty/4.jpg"></span></a>
</li>
<li><a href="#nogo"><img src="nechty/tb/5.jpg" border="0" height="80" width="80"><span><img src="nechty/5.jpg"></span></a>
    <a href="#nogo"><img src="nechty/tb/6.jpg" border="0" height="80" width="80"><span><img src="nechty/6.jpg"></span></a>

</li>
<li><a href="#nogo"><img src="nechty/tb/7.jpg" border="0" height="80" width="80"><span><img src="nechty/7.jpg"></span></a>
    <a href="#nogo"><img src="nechty/tb/8.jpg" border="0" height="80" width="80"><span><img src="nechty/8.jpg"></span></a>
</li>
 .... atak dalej... 

toto tu je html zdrojak par riadkov zoznamu... (tie obrazky su v zozname...)

a v css nastavujem spravanie obrazka pri prejdeni mysou aby sa ukazal obrazok vedla vo vyhradenom priestore...

Kód:

div.show ul a {padding: 20px;}
div.show ul li {padding-top: 22px;}
div.show ul a span {display:none;}
div.show ul a:hover span  {display:block; position:absolute; left:475px; top: 170px; }
div.show ul a:hover span img {border:1px solid #000; max-width: 340px; max-height: 320px;}

v podstate to funguje v pohode ale v opere to blbne, pretoze ten vnutorny span ktory obsahuje vacsi obrazok je vo vnutri zoznamu... a tak pri poziciovani berie ako svoje zaciatocne suradnice lavy horny okraj zoznamu, a preto ked posuniem scrollbarom zoznam, posuva sa s nim vyssie aj obrazok...

poziciovanie vnoreneho divu css

Podobné témy