Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] float:left a wyśrodkowanie
Forum PHP.pl > Forum > Przedszkole
!*!
Div główny który jest na całą szerokość strony, w nim są inne divy które mają ustaloną szerokość w zależności od tekstu, układają sie obok siebie przez float, jak można te divy wyśrodkować?

<div id="glowny" style="width: auto;">

<div class="cos">zxc</div>
<div class="cos">zxc</div>
<div class="cos">zxc</div>

</div>

class cos = float:left; widht: auto;

potrzebny efekt:

Kod
__________________
   zxc zxc zxc  
__________________
Strarus
Może text-align:center questionmark.gif

edit: jeszcze z jakiś moich starych szablonów wyciągnąłem coś takiego, że jak masz stronę i jakieś divy, to tworzysz div#page i dajesz mu text-align: center; potem tylko tuż po <body> dajesz <div id="page"> i przed </body> : </div> Czyli wszystko dajesz do tego jednego diva... Ale nie wiem, czy to u Ciebie znajdzie zastosowanie.
decha-design
Jak masz w tych divach float: left, to jest mały problem ...

1. Znasz rozmiary tych divów?
a. jeśli nie, to jest problem ... i spróbuj to jakoś zrobić, aby była ta określona szerokość ^^
b. jeśli tak, to idź do punktu 2

2. Wsadź te divy .cos do jednego diva, nadaj mu szerokość wszystkich tych divów (aby się mieściły tak jak chcesz) i nadaj w nim text-align: center i margin: 0 auto; Przejdź do punktu 3

3. Na samym dole w tym divie zrob <div style="clear: both"></div>
Strarus
No tak, u mnie mam określoną szerokość DIVów, więc działa, a po co clear:both ?
artur_dziocha
a poczytać, poszukać nie łaska??Chcesz mieć odpowiedź na każde pytanie. Według mnie chyba lepiej samemu poszukać i znaleźć odpwowiedź
!*!
Właśnie nie znam tzn. nie mogę z góry ustalić na sztywno szerokości tych divów... W tym problem :/ Właśnie to chyba jedyna rzecz której nie da się zrobić w css. Wspomniany text-align: center; jak można się domyśleć działa tylko na tekst pisany, a nie na div.
decha-design
Jak dobrze ustawisz to na divy też działa ... ale niestety ... określona szerokość =)) chociażby w procentach ... i powinno dzialać ...

Musisz przerobić szablon jak chcesz to wyśrodkować ...

A clear:both ... w tym wypadku służy do 'objęcia' (?!) zawartości diviem ... bo zdarza się (raczej zawsze), że przy divach z float: left div nadrzędny zachowuje się dziwnie ... sprawdź sobie =)
!*!
Nie moge przerobić szablonu, bo straci na funkcjonalności. Trudno poczekam do CSS3.1 może to poprawią biggrin.gif
erix
Cytat
Trudno poczekam do CSS3.1 może to poprawią

Chyba śnisz. tongue.gif CSS3 chyba jest już od dawna opracowany, Fx3/Opera 9.6x już nawet cząstkowo obsługują, ale nie łudź się, że będą wszystkie (mam na myśli IE tongue.gif).

Musisz trochę przerobić szablony, aby dodać kilka selektorów; mam na myśli coś takiego:
  1. dodaj ID dla lewego, ustaw mu text-align: right
  2. dla środkowego text-align: center
  3. dla prawego text-align: left

Tak bym to widział.
Strarus
czyli, że lewy 'przylega' do prawego, czyli środkowego, a prawy 'przylega' do lewego, czyli do środkowego? ciekawe rozwiązanie smile.gif
!*!
To CSS4 winksmiley.jpg do tego czasu IE8/9 będzie standardem ze standardami.

Pisałem już ze text-align: left itp. nadaje sie tylko do tekstu, nie ustawisz dzięki nim diva, buttona czy choćby radia.
erix
Hmm, a jaki problem zrobić coś takiego:
  1. <div id="firstColumn">asdahsdasd <tag /></div>

css:
Kod
#firstColumn *
{ float: right; }


Cytat
buttona czy choćby radia.

Kpisz sobie chyba.
!*!
erix nie za bardzo wiem co chcesz uzyskać tym float:right; przy wyśrodkowaniu elementów, które mają float:left; objęte width:auto;
erix
Zwróć uwagę na gwiazdkę za selektorem. winksmiley.jpg
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.