Eredmény: 1 - 7 (7) összesen

Téma: Alsó DIV amely mindig kitölti a fennmaradt teret

  1. #1
    Tag
    Csatlakozott
    10-07-26
    Hozzászólás
    78
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás Alsó DIV amely mindig kitölti a fennmaradt teret

    Van egy kódom. Van benne egy kötelezően fix magasságú 'nagy háttérkép' DIV-em (itt az egyszerűség kedvéért piros) és egy olyan alsó háttérkép DIV-em (ez pedig sárga), amely kitölti a fentmaradt teret (tehát ha változtatgatom az ablak magasságát vagy a képernyő felbontását akkor is).
    Ha a tartalom (itt kék) DIV magassága nem ér túl az alsó háttéren, akkor az alsó háttér DIV "hozzáragad" a böngésző aljához (ahogy akartam): felbontástól és ablakmérettől függetlenül mindig a leér a böngésző aljáig.
    Sajnos, ha a tartalom DIV-be túl sok minden kerül (beszúrtok még vagy 50 sort) akkor túlnyúlik a sárga alján (megjelenik alatta egy fehér rész), akkor a sárga DIV már nem ér le a böngésző aljáig.
    Hogyan lehet ezt a problémát megoldani? Nem jó ha a BODY-nak is ilyen háttérszínt adok, mert itt ismétlődő háttér lesz.


    Kód:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ... strict.dtd">
    <html>
     <head>
      <title>Weblap struktúra</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
     </head>
     <body style="margin: 0; padding: 0; text-align: center">
      <div style="width: 100%; height: 600px; margin: 0 auto; background-color: red;">Nagy háttérkép (no-repeat)</div>
      <div style="position: absolute; left: 0px; right: 0px; bottom: 0px; top: 600px; width: 100%; margin: 0 auto; background-color: yellow;">Alsó háttérkép (repeat)</div>
      <div style="position: absolute; width: 700px; left: 0px; right: 0px; top: 50px; margin: 0px auto; background-color: blue">
       1. Weboldal tartalom (eredetileg background-color: transparent)<BR>
       2. Weboldal tartalom<BR>
       3. Weboldal tartalom<BR>
       4. Weboldal tartalom<BR>
       5. Weboldal tartalom<BR>
       6. Weboldal tartalom<BR>
       7. Weboldal tartalom<BR>
       8. Weboldal tartalom<BR>
       9. Weboldal tartalom<BR>
       10. Weboldal tartalom<BR>
       11. Weboldal tartalom<BR>
       12. Weboldal tartalom<BR>
       13. Weboldal tartalom<BR>
       14. Weboldal tartalom<BR>
       15. Weboldal tartalom<BR>
      </div>
     </body>
    </html>




  2. #2
    Bölcs benedictus logója
    Csatlakozott
    10-04-23
    Hozzászólás
    1.574
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Alsó DIV amely mindig kitölti a fennmaradt teret

    sárga: <div style="position: fixed ....
    de még lesz min javítanod



  3. #3
    ceterum cenSEO B. Joe logója
    Csatlakozott
    08-09-21
    Hely
    Debrecen
    Hozzászólás
    360
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Alsó DIV amely mindig kitölti a fennmaradt teret

    Szia!

    Strukturális átalakítással oldanám meg a dolgot, divek egymásba ágyazásával és nem a pozicionálással, úgy sokkal egyszerűbb.



  4. #4
    Tag
    Csatlakozott
    10-07-26
    Hozzászólás
    78
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Alsó DIV amely mindig kitölti a fennmaradt teret

    Idézet benedictus eredeti hozzászólása Hozzászólás megtekintése
    sárga: <div style="position: fixed ....
    de még lesz min javítanod
    Nagyon jó, most már a kék DIV bő tartalma mellett a sárga alja "hozzá ragad", csak ha "lecsuszkázok", akkor most a sárga felett marad ki a fehér rész.



  5. #5
    Bölcs benedictus logója
    Csatlakozott
    10-04-23
    Hozzászólás
    1.574
    Begyűjtött 2 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Alsó DIV amely mindig kitölti a fennmaradt teret

    Idézet toldigabor eredeti hozzászólása Hozzászólás megtekintése
    Nagyon jó, most már a kék DIV bő tartalma mellett a sárga alja "hozzá ragad", csak ha "lecsuszkázok", akkor most a sárga felett marad ki a fehér rész.
    jáccál a marginnokkal, nézz utána google-ben



  6. #6
    MinderBinder edem logója
    Csatlakozott
    09-09-02
    Hely
    Budapest
    Hozzászólás
    1.093
    Thanked 1 Time in 1 Post

    Alapbeállítás re: Alsó DIV amely mindig kitölti a fennmaradt teret

    Szerintem meg töröld az egészet és írjad újra, de úgy, hogy nem inline css-t használsz, hanem külön stíluslapot. Akkor nem lesz ennyire kusza és talán rájösz a hibára is.


    // Only illogics can find
    // hidden flaws in a straight logic line

  7. #7
    Tag
    Csatlakozott
    10-07-26
    Hozzászólás
    78
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Alsó DIV amely mindig kitölti a fennmaradt teret

    Megcsináltam úgy, hogy töröltem az alsó DIV-et, amely csak a tartalom túlcsordulás miatt kellet, ha több a tartalom mint a felső DIV nagyméretű háttere.
    Szóval betettem a lábháttérnek szánt ismétlődő képet a BODY hátterének, de úgy hogy függőlegesen annyival el legyen tolva, hogy a nagyméretű háttérkép aljához passzoljon (azaz annak a folytatásának tűnjön, mivel ez a lábháttér is annak egy alsó, sematikusabb részéből lett kivágva).
    Köszi mindenkinek



A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •