Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Ułożenie div'ów
Forum PHP.pl > Forum > Przedszkole
b_chmura
15.10.2008, 10:25:20
Witam
hmm wygląda na to, że czas dał siwe znaki... Nie potrafię sobie poradzić z umiejscowieniem div'ów.
Efekt jak chce osiągnąć w przybliżeniu wygląda następująco:

Kod
+---+---+
| a | b |
+---+---+
| c |
+---+

+---+---+
| a | b |
+---+---+
| c |
+---+

+---+---+
| a | b |
+---+---+
| c |
+---+

(...)

+---+---+
| a | b |
+---+---+
| c |
+---+

Blok B ma przylegać do prawego bloku A zaś blok C ma znajdować się pod nimi. Taki system bloków ma mieć możliwość powtarzania się nieskończenie.

Poniższy kod działa jedynie pod internet explorerem:
Kod
<style>
div { width: 100px; height: 100px; border: #c0c0c0 1px solid;}
div.a { float: left; }
div.c { clear: both; }
</style>

<div id="1" class="a">a</div>
<div id="2" class="b" >b</div>
<div id="3" class="c">c</div>
<br />
<div id="1" class="a">a</div>
<div id="2" class="b" >b</div>
<div id="3" class="c">c</div>
<br />
<div id="1" class="a">a</div>
<div id="2" class="b" >b</div>
<div id="3" class="c">c</div>


Jeśli ktoś na szybko potrafi rozwiązać problem, prosiłbym o odpowiedz. Z góry dziękuje ślicznie.
baranek77
15.10.2008, 10:33:56
moze sprobuj dac jakis div obeljmujacy z szerokoscia podana na sztywno a divom dac float:left
MajareQ
15.10.2008, 10:34:14
ja bym zrobił to mniej więcej tak:

(ofc na classach jesli ma się powtarzać)

[HTML] pobierz, plaintext 
  1. <div class="box">
  2.    <div class="a"></div>
  3.    <div class="b"></div>
  4. </div>
  5. <div class="c"></div>
[HTML] pobierz, plaintext


css:

Kod
.box {
height: auto;
width: auto;
min-height: 100px;
min-width: 100px;
}
.a {
height: auto;
width: 100px;
float: left;
}
.b {
height: auto;
width: 100px;
float: left;
padding-left: 100px;
}
.a {
height: auto;
width: auto;
}
korek_a
15.10.2008, 10:34:35
elementy float ustawiają sie obok siebie i muszą być zdeklarowane w css



Kod
<style>
div { width: 100px; height: 100px; border: #c0c0c0 1px solid;}
div.a { float: left; }
div.b { float: left; }
div.c { clear: both; }

</style>
b_chmura
15.10.2008, 10:50:50
~korek_a - strzał w dziesiątkę ;-) dzięki.
MajareQ
15.10.2008, 10:52:02
Ja mam jeszcze wątpliwość czy będzie to działało należycie dobrze pod różnymi przeglądarkami.
b_chmura
15.10.2008, 10:55:07
W takim razie jakby ktoś mógł sprawdzić to pod IE 6 i Operami. Pod Mozilla Firefox & Internet Explorer 7 nie ma problem.

EDIT:
Podaje link do pliku coby wszystko przebiegło szybciej: link
MajareQ
15.10.2008, 10:57:14
Od godziny 15-tej będę na uczelni, gdzie mam i FF 2 i IE 6. Sprawdzę IE jak nie będzie już za późno.
piaseq
15.10.2008, 11:06:01
Cytat(b_chmura @ 15.10.2008, 11:55:07 ) *
W takim razie jakby ktoś mógł sprawdzić to pod IE 6 i Operami.


Pod IE6, Operą 9.5 i Safari 3.1.2 wygląda ok
Gość
15.10.2008, 11:23:03
w FF3 OK
korek_a
15.10.2008, 11:24:48
to jest podstawa ze elementy float ustawiają się obok siebie smile.gif dział a dobrze bo mi jeszcze nigdy sie nie zepsuło party.gif
MajareQ
15.10.2008, 11:31:39
To akurat jest podstawą. Ale już kilka razy zetknąłem się z problemami gdy float i both działają razem.

ale jak działczy to nvm.
hiszpanespaniol
15.10.2008, 11:48:44
div.a musi mieć jeszcze clear: left



inaczej to się rozjedzie przy szerszych layoutach

edit: przeporaszam. nie wziąłem pod uwagę div.c który ma clear: both
webdice
15.10.2008, 12:08:31
Same tagi nie są tytułem, proszę poprawić. Takie rzeczy już powinieneś wiedzieć.
b_chmura
15.10.2008, 13:31:16
Cytat(webdice @ 15.10.2008, 13:08:31 ) *
Same tagi nie są tytułem, proszę poprawić. Takie rzeczy już powinieneś wiedzieć.


Zapomniało mi się ;-)
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.