Problem z Divami - pozycjonowanie dwóch div'ów w "poziomie"

[tomazino2]

Witam.

Mam problem, poniewaz zrobilem sobie we flashu animowana strone i chcialbym dodac w okreslone miejsca <div>y w ktorych bede mogl zaimportowac tekst z php za pomoca zmiennej predyfiniowanej GET. Niestety moj problem polega na tym ze nie moge ustawic diva w tej stonie. te divy ktore robie umieszczeja sie albo pod albo nad strona. czy jest jakas mozliwosc zeby mi sie to udalo. Aha jeszcze zlikwidowalem <object> i zrobilem javescripta zeby mi IE nie wywalalo strony.... Bardzo proze o pomoc...

I pozdrawiam

tomazino2

PS. gdyby mozna bylo jeszcze prosic o wyjasnienie jak zrobic zeby 2 <div>y byly na jednym poziomie...

Zmieniam tytuł postu, aby bardziej odzwierciedlał problem - Morfidon

[Morfidon]

Witam,

Dziękuje za zapytanie.

Proszę wyobrazić sobie kartkę papieru.

<div> </div> - to jest moja kartka papieru, taki bloczek, ale póki coś nie włożę do niego jest on malutki, im więcej do niego włożę tym się bardziej powiększa.

Włożę do niego jeszcze dwa bloczki, natomiast ten pierwszy bloczek nazwę glowny_bloczek, a dwa nowe, od ich przyszłej pozycji w głównym bloczku.

Code: Zaznacz cały

<div id="glowny_bloczek"> 
  <div id="lewy_bloczek">

  </div>

  <div id="prawy_bloczek">

  </div> 
<div>

Dla nas by to wystarczyło, ale komputer się nie domyśli, po tym co zrobiliśmy, że bloczki lewy_bloczek oraz prawy_bloczek mają być obok siebie.

Standardowo bloczki, są układane jeden po drugim, a nie obok siebie. Aby to zmienić, trzeba ustawić przy pomocy CSS, właściwość float.

Float z ang. oznacza w informatyce opływać.

Możemy teraz oznaczyć dla lewego bloczka przy pomocy CSS float: left;, a dla prawego bloczka float:right;. Co mówi naszej przeglądarce, że lewy_boczek ma "pływać" w glowny_bloczek po lewej stronie, natomiast prawy_bloczek po prawej stronie.

Teraz oba divy, będą na tym samym "poziomie".

Problemem tym zajmujemy się Video Kursie (X)HTML & CSS przy Lekcji 18 - pozycjonowanie, oraz w ostatniej, kiedy tworzymy od zera stronę WWW opartą na div'ach.

Pozdrawiam serdecznie,

Arkadiusz

[tomazino2]

no dobrze a naprzyklad 3?? faktycznie w tym kursie gdzie podawal pan sa 2 divy, nie bardzo narazie mi to chce chodzic ale ok, jeszcze sie pomecze, a jak zrobic zeby bylu 3 obok siebie?? float left, float left, float right??

[Morfidon]

Też będzie dobrze, ogólnie to może jeszcze powinienem dodać, że glowny_bloczek, czyli to co przechowuje inne bloczki, powinno mieć jakąś ustaloną z góry przez nas wielkość np. 400px;, wtedy można to zrobić np. tak:

Code: Zaznacz cały

<div id="glowny_bloczek" style="width: 400px; height: 200px; border: solid black 1px;">
  <div id="lewy_bloczek" style="float: left; padding-right: 30px; border: solid black 1px;">
                 lala
  </div>

  <div id="srodkowy" style="float: left; padding-right: 30px; height: 60px; border: solid black 1px;">
            lala
  </div>
  <div id="prawy_bloczek" style="float: left; padding-right: 30px; width: 100px; border: solid black 1px;">
            lala
  </div>
</div>

Dodałem dodatkowo wysokość i rameczkę, aby zobaczył Pan jak to wygląda. Warto sobie dodawać te rameczki, łatwiej sobie to wtedy wyobrazić, a później je usuwać

Po tym przykładzie może Pan zauważyć, że tak naprawdę <div> </div> jest puste, dopiero my nadajemy mu kształty, przez dodawanie np. tekstu, lub też przy pomocy styli CSS.

Proszę sobie to zapisać i zobaczyć jak to wygląda, wydaje mi się, że po tym kodzie będzie już Pan rozumiał z czym to się "je"

[wikm111]

Ja za to mam problem z dodaniem do tworzonej strony lewego menu. Do tej pory mam strone, baner i belkę z górnym menu o szerokości 960px. :

Code: Zaznacz cały

<div align="center">
<div id="kontener"> oraz 
<div id="lbok"> czyli ogólny div lewego menu 

w CSS m in.
#kontener
{
	width 960px;
	margin: 0 auto;
}
#baner {
	margin-top: 10px;
    width: 960px;
	height: 122px;
	
}
#lbok
{
 width: 139 px;
 float: left;
}

Problem jest taki, że baner i belka mam prawidłowo na środku, a div lbok rozjeżdża i ucieka całkiem w lewo.

[tajger]

Ja za to mam problem z dodaniem do tworzonej strony lewego menu. Do tej pory mam strone, baner i belkę z górnym menu o szerokości 960px. :

Code: Zaznacz cały

<div align="center">
<div id="kontener"> oraz 
<div id="lbok"> czyli ogólny div lewego menu 

w CSS m in.
#kontener
{
	width 960px;
	margin: 0 auto;
}
#baner {
	margin-top: 10px;
    width: 960px;
	height: 122px;
	
}
#lbok
{
 width: 139 px;
 float: left;
}

Problem jest taki, że baner i belka mam prawidłowo na środku, a div lbok rozjeżdża i ucieka całkiem w lewo.

Rozjeżdża się bo float ustawiłeś na left, a pewnie dobrze w boxie go nie ustawiłeś, albo może wystawać za główne i poboczne kontenery. Wrzuć więcej kodu, z pozamykanymi tagami bo wrzuciłeś tylko 3 bloczki, a nie widzę co w czym i gdzie się znajduje.

[wikm111]

Zamknięcia raczej nie brakuje. Może napiszę co gdzie. Jest mniej więcej jak na kursie czyli
Nadrzędne <div align="center">
w środku <div id="kontener"> a wewnątrz divy banera i belki oraz <div id="lbok">(narazie wpisany próbny tekst, który wychodzi poza obszar roboczy z lewej strony) oraz dodana później stopka, która dobrze się ustawia.

[tajger]

Nie chodziło mi o to, że nie ma zamknięcia, tylko na ten fakt, żebyś wrzucił cały kod. Zrób to bo inaczej ci nie pomogę, ponieważ nie mam zamiaru się domyślać co tam jest nie tak, co pominąłeś, gdzie może czegoś brakuje itd.. Nie zrozum mnie źle. Najlepiej jest wrzucic cały kodzik, a ja ci postaram się pomóc.

[glodny]

tak jest słuchaj tajgera wrzuc kod, on potrafi pomóc sam się o tym przekonałem

[wikm111]

Problem się rozwiązał. Gdzie indziej ktoś zauważył w tych rzeczach co i tu wkleiłem, że brakowało ":" przy

Code: Zaznacz cały

#kontener
{
   width 960px;
   margin: 0 auto;
}

w kontenerze oraz przy innym elemencie.