ugrás a tartalomhoz

Div-ek egymásra "lógása"

unregistered · 2013. Aug. 9. (P), 08.47
Sziasztok!

Először csatolnék egy képet:



A problémám az hogy a content részre szeretném "ráfolyatni" a footer egy részét, vagy olyan megoldást találni hogy a DIV-hez viszonyítva el tudjak csúsztatni egy másik DIV-et.
A fő problémám az, hogy ennek a footer-rel kellene együtt mozognia ami a tartalom hosszától függ. Próbáltam "position: absolute" és "top: -50px" párossal de ennél ahogy feljebb viszem levágja a tetejét (a top értékével megegyezően, tehát olyan mintha a div "mögött" menne feljebb) ekkor megpróbáltam z-indexelni, de az sem segített.
Meg lehet ezt egyáltalán oldani valahogyan?

Előre is köszönöm a segítséget!
‹ (CSS) Fix szélesség,hosszúság vagy % os CSS3 transition alkalmazása sok képet is tartalmazó elemre ›
 ■
1

basszus

unregistered · 2013. Aug. 9. (P), 09.49
Okés megvan mi a gond, az overflow:hidden és a position: absolute és relative nem szeretik egymást...
Akkor annyiban változik a kérdés hogy mit lehet tenni ha mindenképpen kell az overflow:hidden?
2

HTML

Poetro · 2013. Aug. 9. (P), 10.33
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <title>JS Bin</title>  
  6. <style>  
  7. .content {  
  8.   height: 300px;  
  9.   background: lightgray;  
  10.   margin-bottom: 20px;  
  11. }  
  12. .footer {  
  13.   background-color: darkgray;  
  14.   height: 80px;  
  15.   margin-right: 20px;  
  16.   position: relative;  
  17. }  
  18.   
  19. .buttons {  
  20.   bottom: 0;  
  21.   right: 0;  
  22.   height: 160px;  
  23.   background: darkgray;  
  24.   width: 80px;  
  25.   position: absolute;  
  26. }  
  27. </style>  
  28. </head>  
  29. <body>  
  30.   <div class="main">  
  31.     <div class="content">  
  32.       Content  
  33.     </div>  
  34.     <div class="footer">  
  35.       Footer  
  36.       <div class="buttons">Buttons</div>  
  37.     </div>  
  38.   </div>  
  39. </body>  
  40. </html>  
Megtekinthető
Nem tudom, hol van az overflow hidden, és hogy miért van neked ott.
3

overflow

unregistered · 2013. Aug. 9. (P), 10.55
Mondjuk ha a footer-hez teszel egy overflow:hiddent akkor máris elromlik.
És például azért hogy az eltérő magasságú divek miatt a háttér rendesen megjelenjen.

Pl content-nél ezt jobban be lehet mutatni:

Kód működés közben
4

hidden

Poetro · 2013. Aug. 9. (P), 11.19
Hát ha levágod, akkor ne csodálkozz, hogy nem látszik. Mondjuk az overflow: hidden-t rakd olyan elemre, ami nem tartalmazza a kilógó részt, mondjuk csomagold a többi elemedet még egy div-be.
5

biztos?

unregistered · 2013. Aug. 9. (P), 12.04
Biztos hogy az úgy jó? Vagy én értem csúnyán félre mert most a left és right divet beleraktam egy másik divbe ami a contenen belül van, de nem működik :(
6

hol a probléma?

Poetro · 2013. Aug. 9. (P), 12.09
Mivel nem tudom, mi a problémád, nem tudok segíteni. A content-re szépen rányúlik a szürke doboz.
9

link

unregistered · 2013. Aug. 12. (H), 08.12
amit linkeltem fiddle-t annál látszik hogy például a jobb felső "buttons2" divnél nem igazán működik (persze azért nem mert overflow-olva van, de e nélkül meg szétesik)
11

Lábléc

Poetro · 2013. Aug. 12. (H), 12.30
A fenti jsbin-es példát frissítettem, hogy mostmár float-olt elemek is vannak benne és overflow is. Nézd meg, ilyesmire gondoltál-e. A fenti részhez nem nyúltam, mert nem tudom, hogyan kellene kinéznie.
12

tanulságos

unregistered · 2013. Aug. 12. (H), 16.58
Amit JS Binben mutattál az teljesen jó volt az alap problémámra amire a képet is linkeltem, így is alkalmaztam és kiváló, utána csak kíváncsiságból jutott eszembe hogy ez így csak abban az esetben működik ha pont a footer div aljához lehet igazítani a buttons divet, ekkor jutott eszembe hogy és mi van akkor ha csak kicsit kell odébb tolni, ezt próbáltam a fiddle-ön megmutatni, ahova valóban nem írtam oda, hogy: úgy kell kinéznie mintha nem lenne félbevágva a buttons2 (mert most csak a betűk alja látszik)
7

Javaslom a jsfiddle.net

bamegakapa · 2013. Aug. 9. (P), 13.17
Javaslom a jsfiddle.net használatát, ott könnyebben tudnád illusztrálni, mi a konkrét probléma.
8

dehát linkeltem

unregistered · 2013. Aug. 12. (H), 08.10
az "owerflow" tárgyú hozzászólásomban van linkelve
10

Kiszúrja a szemem pedig :).

bamegakapa · 2013. Aug. 12. (H), 10.25
Kiszúrja a szemem pedig :).