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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
.content {
  height: 300px;
  background: lightgray;
  margin-bottom: 20px;
}
.footer {
  background-color: darkgray;
  height: 80px;
  margin-right: 20px;
  position: relative;
}

.buttons {
  bottom: 0;
  right: 0;
  height: 160px;
  background: darkgray;
  width: 80px;
  position: absolute;
}
</style>
</head>
<body>
  <div class="main">
    <div class="content">
      Content
    </div>
    <div class="footer">
      Footer
      <div class="buttons">Buttons</div>
    </div>
  </div>
</body>
</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 :).