Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Divy w Divie
orange_91
post 1.11.2010, 23:28:54
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 14.02.2010
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


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>

Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 6)
AdIoS_Neo
post 1.11.2010, 23:40:12
Post #2





Grupa: Zarejestrowani
Postów: 159
Pomógł: 43
Dołączył: 8.03.2009

Ostrzeżenie: (0%)
-----


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. }
Go to the top of the page
+Quote Post
orange_91
post 2.11.2010, 00:09:37
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 14.02.2010
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


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

Go to the top of the page
+Quote Post
Fifi209
post 2.11.2010, 00:25:29
Post #4





Grupa: Zarejestrowani
Postów: 4 655
Pomógł: 556
Dołączył: 17.03.2009
Skąd: Katowice

Ostrzeżenie: (0%)
-----


float: left - w obu dajesz tak, ja bym dodał jeszcze display: block, jeżeli to nie podziała spróbuj zmniejszyć marginesy.


--------------------
Zainteresowania: C#, PHP, JS, SQL, AJAX, XML, C dla AVR
Chętnie pomogę, lecz zanim napiszesz: Wujek Google , Manual PHP
Go to the top of the page
+Quote Post
cniak
post 2.11.2010, 10:10:44
Post #5





Grupa: Zarejestrowani
Postów: 169
Pomógł: 12
Dołączył: 16.09.2009

Ostrzeżenie: (0%)
-----


  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>


Ten post edytował cniak 2.11.2010, 10:11:30
Go to the top of the page
+Quote Post
orange_91
post 2.11.2010, 14:32:33
Post #6





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 14.02.2010
Skąd: Gdańsk

Ostrzeżenie: (0%)
-----


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.

Ten post edytował orange_91 2.11.2010, 14:33:31
Go to the top of the page
+Quote Post
cniak
post 2.11.2010, 14:41:50
Post #7





Grupa: Zarejestrowani
Postów: 169
Pomógł: 12
Dołączył: 16.09.2009

Ostrzeżenie: (0%)
-----


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

Ten post edytował cniak 2.11.2010, 14:49:23
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 30.07.2025 - 18:14