+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Problem z "float" (/thread-problem-z-float--8467)
Problem z "float" - nobello - 05-01-2012
Witam
Jestem tu nowy więc na początek witam wszystkich użytkowników
Mam problem z dwoma obrazkami które są umieszczone w div-ach jako tło.
Chciałem je poukładać koło siebie, męczę się i męczę ale nic mi nie wychodzi. Był już podobny temat ale nawet po przeczytaniu nic nie wychodzi.
Cytat:<div style="background: url('tresc1.jpg') repeat-y; padding-top: 10px; width: 100%;">
<div style="background: url('tresc2.gif') repeat-y;background-position: 310px; float:left ; vertical-align: baseline; wight: 600px;">
<p style="margin-left:310px;padding-left:0px;margin-right:0px;padding-top:0px;margin-top:0px; margin-bottom: 0px;font-size:23px;vertical-align:top;">Przykładowy tekst </p></div>
<div style="background: url('cos4.gif') no-repeat; wight: 100%; height: 180px">
<p style="margin-left:45px;padding-left:5px;margin-right:720px;padding-top:68px;margin-top:0px; margin-bottom: 0px;font-size:23px;vertical-align:top;">Przykładowy tekst</p></div>
<div style="background: url('cos3.gif') no-repeat; wight: 100%; height: 180px">
<p style="margin-left:45px;padding-left:5px;margin-right:720px;margin-top:0px; margin-bottom: 0px; font-size:23px;padding-top:74px;vertical-align:top;">Przykładowy tekst</p></div>
<div style="background: url('cos1.gif') no-repeat; wight: 100%; height: 180px">
<p style="margin-left:45px;padding-left:5px;margin-right:720px;margin-top:0px; margin-bottom: 0px; font-size:23px;padding-top:74px;vertical-align:top;">Przykładowy tekst</p></div>
<div style="background: url('cos.gif') no-repeat; wight: 100%; height: 180px">
<p style="margin-left:45px;padding-left:5px;margin-right:720px;margin-top:0px; margin-bottom: 0px; font-size:23px;padding-top:74px;vertical-align:top;">Przykładowy tekst </p></div>
Plik tresc1.jpg to jest podkład , do niego są wrzucone cos4.gif, cos3.gif, cos1.gif i cos.gif. Te wszystkie "cos-ie" są rozmieszczone w pionie a przy tym "słupku chce dać kolejnego div-a z obrazkiem jako tło tresc2.gif i tu zaczynają się problemy tak jak opisałem to wyżej. Chce to zrobić tak by treść było z boku tych "cos-iów". Pomożecie mi to zrobić?
Pozdrawiam
RE: Problem z "float" - Kartofelek - 05-01-2012
http://img220.imageshack.us/img220/1356/40995067.jpg
RE: Problem z "float" - nobello - 05-01-2012
Dziękuje zaraz sprawdzę
Już sprawdziłem, mam jeszcze jedno pytanie, chce by to wyglądało jak na załączonym obrazku, trochę się to różni od twojego.
RE: Problem z "float" - kancik - 06-01-2012
JA tam różnicy żadnej nie widze. Ten div po lewje co obejmuje te boksy nie musi miec tła , a jak nie to każdemu z tych boksów możesz dać float:left; no i główny div który trzyma cała strone na środku .
RE: Problem z "float" - Kartofelek - 06-01-2012
zasada działania ta sama. Lewa strona - belka - to tak zwany sidebar, czyli jak na moim obrazku div z float:left i widhem. Oczywiście jest mnóstwo inych technik które go ustawią w tej pozycji. Content czyli prawa strona to to div z float:right;
Inną np techniką jest taka, że content dostaje margin-left:szerokość_sidebaru
a sidebar:position:absolute; left:0; top:0;
oczywiście całość musi być zamknięta w tym największym divie który ma position:relative i width