Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Divy w Divie
Forum PHP.pl > Forum > Przedszkole
orange_91
hey.,
Trochę siędzę i się męczę z czymś dość prostym.
Mam div tresc, a w tym dive mam div x1 oraz div x2, w tych divach jest wyświetlany teskt - i tu uwaga wysokość jest zależna od ilości tekstu.
A teraz problem z div tresc - czemu div x1 i div x2 uciekają z div tresc questionmark.gif Div tresc się kończy i to dość szybko tongue.gif .
wygląda to tak :




tak to mniej wiecej wyglądać powinno - na obrazku jest bez tereści. - zaznaczone są elemnty wyglądu za jakie są odpowiedzialne napisane divy,


i efekt na drugim obrazku został uzyskany za pomocą height dla div tresc, ale twarde ustawienie w px (wartość auto też nie pomaga) , nie rozwiązuje sprawy bo on musi być zależy od div x1 lub / oraz x2.

o to kawałki kodu:
Kod
#tresc {
    width:900px;
    background: url(pasex.png) repeat-y;
}

#x1 {
    margin: 0px 5px 0px 25px;
    padding:5px;
    width: 190px;
    float: left;
    border-style:solid;
    border-color:#fff #111 #111 #fff;
    border-width:1px;
    background-color:#fff;

}

#x2 {
    margin: 0px 25px 0px 5px;
    padding: 5px;
    width: 626px;
    float:right;
    border-style:solid;
    border-color:#fff #f70 #f70 #eee;
    border-width:1px;
    background-color:#fff;
    color:#110;

}


a tu jak to wygląda w html który jest php tongue.gif

Kod
<div id="tresc">
            <div id="x1">
            <?php include 'pak1.php'; ?>
            </div>
            
            <div id="x2">
            <h4>Ble ble</h4>
            <?php include 'pak1.php'; ?>
            </div>
        
        
        </div>
        
        <div id="stopka">
        
        </div>

AdIoS_Neo
dlatego że dla x1 i x2 masz zmieniony float... wtedy one "wyskakują" z ram nadrzędnego elementu. Powinno być tak:
  1. #tresc {
  2. width:900px;
  3. background: url(pasex.png) repeat-y;
  4. float: left;
  5. }
orange_91
Niestety to nie rozwiązuje sprawy.
Ale dzięki za dobry trop, bo te floady coś mącą. Gdy ich nie ma dla x1 oraz x2 to jest ok. ale wtedy znajdują się one pod sobą a nie obok siebie.
Tu na obazku jest x1 bez fload a x2 z float:right;. W jaki sposób ustawić te dwa divy obok omijając fload który powoduje wyskoczenie ich z ram ich głównego divu questionmark.gif

Fifi209
float: left - w obu dajesz tak, ja bym dodał jeszcze display: block, jeżeli to nie podziała spróbuj zmniejszyć marginesy.
cniak
  1.  
  2. #tresc {
  3. width: 990px;
  4. overflow: auto;
  5. }
  6. #x1 {
  7. width: 600px;
  8. float: left;
  9. display: inline;
  10. position: relative;
  11.  
  12. }
  13. /** MENU **/
  14. #x2 {
  15. display: inline;
  16. width: 195px;
  17. float: right;
  18. }
  19. .clear {
  20. content: ".";
  21. display: block;
  22. }

tresc html
  1. <div id="tresc">
  2. <div id="x1">
  3. lewa strona
  4.  
  5. <div class="clear"> </div>
  6.  
  7.  
  8. </div>
  9. <div id="x2">
  10. prawa strona
  11. <div class="clear"> </div>
  12. </div>
  13. </div>
orange_91
Próbowałem tego co napisaliście, i różnych kombinacji niestety nic nie przynosi dobrego efektu. Co do marginesów i wielkości to są ok.
float powoduje psucie, się ciałego wygląu position - ustawienia tego nic nie dają.
bez float nie daje się tego ustawić.sad.gif mógłbym wykozystać drogę do okoła przez ustawienie margin ( to trochę oporne i nie zbyt profesjonalne ) od lewej strony dla x2 . w tedy wynik tego jest taki:


i ten x2 powinienien być na równo z x1 a nie pod nim.
cniak
mi działa, zapraszam tutaj, lub z wytłumaczeniem tutaj.
Masz może poprostu takie coś:
div tekst = 900 px
div lewy = 300 px
div prawy = 600 px
Niby wszystko pasuje, ale jeszcze musisz pamietac, ze marginesy, paddingi, obramowania to tez dodatkowe piksele ktore trzeba skalkulowac 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.