Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Nachodzenie na siebie divów
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
Texas
Witam, mam problem z divami




kiedy piszę jakikolwiek tekst w części oznaczonej numerem 1 nachodzi cały div na tego poniżej, jak zrobić aby wraz z zwiększaniem ilości tekstu w 1 divie, 2 i 3 przesuwały się w dół.

zamieszczam kod:

Kod
body        { text-align: center; margin: 0px; background:url(images/tloo.jpg) repeat-x #1E1E1E;}
body *      { text-align: left;}

a img {border: 0px;}

#menu       { width: 815px; margin:auto; }
#menu div   { width: 2px; font-size: 2px; height: 50px; float: left;}
#menu a     { display: block; width:137px; height: 241px; float:left; left: 287px; text-decoration: none;}

#menu a.omnie          {
    background: url(images/index_r_02.gif) no-repeat;
    position:absolute;
    left:287px;
    top:0px;
    width:135px;
    height:241px;
}
#menu a.omnie:hover     { background: url(images/index_02.gif) no-repeat;}

#menu a.galeria         {
    background: url(images/index_r_03.gif) no-repeat;
    position:absolute;
    left:422px;
    top:0px;
    width:135px;
    height:241px;
}
#menu a.galeria:hover   { background: url(images/index_03.gif) no-repeat;}

#menu a.kontakt        {
    background: url(images/index_r_04.gif) no-repeat;
    position:absolute;
    left:557px;
    top:0px;
    width:135px;
    height:241px;
}
#menu a.kontakt:hover   { background: url(images/index_04.gif) no-repeat;}

#menu a.allegro        {
    background: url(images/index_r_05.gif) no-repeat;
    position:absolute;
    left:692px;
    top:0px;
    width:137px;
    height:241px;}
#menu a.allegro:hover   { background: url(images/index_05.gif) no-repeat;}

#stopka {
    background-image:url(images/index_16.jpg);
    height: 57px;
    width: 100%;
    clear: both;
    position:absolute;
    margin: auto;
    top:680px;
}

#zawartosc { clear: both; width: 815px; margin: auto;  padding-top: 55px; overflow:hidden; }

table {margin-top: 20px; }

.glowna        { float: left; width: 98%; }
.glowna .tresc {font: 11px Tahoma; color: white; padding: 0px 10px;
position:absolute;
    left:165px;
    top:302px;
    width:438px;
    height:317px;
    visibility: visible;
}

#index-01 {
    position:absolute;
    left:0px;
    top:0px;
    width:287px;
    height:241px;
}
#index-06 {
    position:absolute;
    left:829px;
    top:0px;
    width:296px;
    height:241px;
}

#index-07 {
    position:absolute;
    left:0px;
    top:241px;
    width:1125px;
    height:61px;
    background:url('images/index_07.gif') no-repeat;
}

#index-08 {
    position:absolute;
    left:0px;
    top:302px;
    width:141px;
    height:317px;
}

#index-09 {
    position:absolute;
    left:141px;
    top:302px;
    width:24px;
    height:317px;
    background-image: url(images/index_09.gif);
}

#index-11 {
    position:absolute;
    left:603px;
    top:302px;
    width:23px;
    height:317px;
    background-image: url(images/index_11.gif);
}

#index-12 {
    position:absolute;
    left:626px;
    top:302px;
    width:284px;
    height:317px;
}

#index-13 {
    position:absolute;
    left:910px;
    top:302px;
    width:24px;
    height:317px;
    background-image: url(images/index_13.gif);
}

#index-14 {
    position:absolute;
    left:934px;
    top:302px;
    width:191px;
    height:317px;
}

#index-15 {
    position:absolute;
    left:0px;
    top:619px;
    width:1125px;
    height:61px;
    overflow:hidden;
}


odpowiednio na obrazku 2 jest to #index-15

3 jest to #stopka

Proszę o pomoc, z góry dziękuję!
drake88
Kod
height: auto;
Texas
no nie bardzo z tym parametrem dalej jest coś nie tak ;/
Zajec
Przy używaniu pozycjonowania absolutnego tak to będzie działać. Chyba, że użyjesz overflow: auto;, ale pewnie nie tego chcesz (przewijanego bloku).

Zrób z tego porządny layout, z użyciem float
Kod
<div id="rodzic_trzech" style="overflow: auto;">
  <div id="left" style="float: left; width: 200px;">lewo</div>
  <div id="center" style="float: left; width: 500px;">środek</div>
  <div id="right" style="float: left; width: 200px;">prawo</div>
</div>
Texas
dzięki wielkie Zajec smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.