DIV - wyrównanie do środka w tabeli

[ziem]

JAK WYCENTROWAĆ JAKIKOLWIEK BLOK WEWNĄTRZ JAKIEGOKOLWIEK BLOKU, NIE UŻYWAJĄC DO TEGO MARGIN:AUTO?!?!?

Problemy z margin:auto:
Zabawa z marginem rozwala layout przy resizowaniu okna pod Gecko.
http://akson.sgh.waw.pl/~zczajk/szablon.html
Należy zmniejszyć rozmiar okna Mozilli poniżej szerokości prawego dolnego bloku i spróbować się przewinąć scrollem do lewego dolnego bloku - wtedy widać, o co chodzi. Pod Operą 7.0 i IE 5.5 jest OK. Pod Gecko też już sobie z tym poradziłem - ale przykład zostawiam, bo to nie powinno tak działać.

Mozilla traktuje kliknięcie na marginesie zewnętrznym [słusznie] za kliknięcie na elemencie - ale w moim layoucie nie mogę sobie na to pozwolić. Patrz poniżej: Cel
Muszę tu poprawić swój błąd, którego nikt nie wychwycił do 27.10.2003:
To jest prawda tylko jeśli kod jest niezgodny ze standardem i w <a> występuje <div>, przykład na to, jak to działa jest tutaj:
http://akson.sgh.waw.pl/~zczajk/Noname6.html
Rozwiązaniem jest oczywiście przerobienie <a> na blok.
Czyli za dużą część zamieszania poniżej jestem odpowiedzialny. Napisałem bzdurę, a potem próbowałem ją korygować stylami .

Cel:
- chcemy rozmieścić na stronie 3 przyciski, przy czym 1 wyrównany do lewej, 2 wycentrowany, 3 wyrównany do prawej

Hipoteza:
-nie da się rozmieścić w ten sposób 3 divów w jednej linii, trzeba je umieścić w tabelce

Obserwacje:
Gecko ignoruje polecenie text-align:left/right/center dla BLOKÓW

Pytanie:
Jak rozmieścić te elementy pod Gecko?

Kod:

Kod, który tu był, był zbędny i błędny.
a robi się to np tak:

<style>
div.kolumny {
float:left; width: 33%; text-align: center;
}
.przycisk {
height:20px;line-height:20px;width:90px; margin: 5px auto;display:block;
}
a
{
display:block;background:#aaa;width:280px;
}
</style>
</head>
<body>
<div class="kolumny"><a class="przycisk" style="float:left" href="#">wstecz</a></div>
<div class="kolumny"><a class="przycisk" href="#">poczatek</a></div>
<div class="kolumny"><a class="przycisk" style="float:right" href="#">nastepny</a></div>
</body>
</html>

[/\/\ichau]

U mnie środkowy przycisk >początkek< jest wyrównany do lewej strony komórki tabeli . Klasa, którą dla niego zdefiniowałeś jest pusta - na pewno o to ci chodziło?

Kod: Zaznacz cały

.poczatek div.przycisk
{

}

Spróbuj wcale nie używać tabel, da się rozmieścić 3 znaczniki <div> poziomo w jednej linii. Zobacz przykłady na:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html, zwłaszcza
http://www.thenoodleincident.com/tutorials/box_lesson/basic3_touch.html
Mankamentem tych przykładów jest niestety pozycjonowanie bezwzględne, co jest niezbyt eleganckie.
Teoretycznie według CSS2 powinienno zadziałać zadanie każdemu znacznikowi <div> właściwości float:left i zadanie mu odpowiedniej szerokości oraz wsadzenie ich do jakiegoś wspólnego div-a:

Kod: Zaznacz cały

#left {width:33%; float:left;}
#right {width:33%; float:left;}
#middle {width:33%; float:left;}

Tylko że IE błędnie (tzn. niezgodnie ze specyfikacją CSS1) interpretuje box model. Jeśli zadasz jakieś paddingi i obramowania wokół przycisków (div-ów), to IE nie daje ich na zewnątrz diva, tylko do wewnątrz. Są i na to odpowiednie hacki, np. taki niezbyt elegancki (ze wględu na walidowanie się CSS):
http://www.tantek.com/CSS/Examples/boxmodelhack.html

[ziem]

U mnie środkowy przycisk >początkek< jest wyrównany do lewej strony komórki tabeli . Klasa, którą dla niego zdefiniowałeś jest pusta - na pewno o to ci chodziło?

tak, bo pod IE nie potrzeba więcej styli, a nie mam pojęcia, jak wycentrować blok wewnątrz komórki tabeli O ZMIENNEJ SZEROKOŚCI pod gecko

Spróbuj wcale nie używać tabel, da się rozmieścić 3 znaczniki <div> poziomo w jednej linii. (...)

no pewnie, tylko niekoniecznie da się je wyjustować w tej linii, a o to właśnie chodzi - wyjustowanie w inii bloków o określonej szerokości.

Mankamentem tych przykładów jest niestety pozycjonowanie bezwzględne, co jest niezbyt eleganckie.

Pozycjonowanie bezwzględne nie ma sensu dla rozmieszczania elementów w rozważany sposób w layoucie o zmiennej szerokości (nie mam zamiaru pisać javascriptu, który to będzie przeliczał, bo nie o to chodzi).

[/\/\ichau]

tak, bo pod IE nie potrzeba więcej styli, a nie mam pojęcia, jak wycentrować blok wewnątrz komórki tabeli O ZMIENNEJ SZEROKOŚCI pod gecko

Daj margin:auto, lub ewentualnie margin-left:auto i margin-right:auto. Na pewno zadziała pod Gecko! Bo jest zgodne z CSS. Ale i tak lepiej to samo zrobić samymi div-ami.

no pewnie, tylko niekoniecznie da się je wyjustować w tej linii, a o to właśnie chodzi.

Jeśli przez wyjustowanie rozumiesz poziome wyrównanie to da się.

[ziem]

Dzięki, w layoucie tabelkowym działa jak należy! Tylko ciężko wpaść na takie rozwiązanie po lekturze dokumentacji CSSa

A jak to powinno wyglądać dla div-ów bez tabelki? Pewnie też jakiś hack ?

[quiris]

Tylko że IE błędnie (tzn. niezgodnie ze specyfikacją CSS1) interpretuje box model.

To nie jest do końca prawda. MSIE 6.0 z ustawionym DOCTYPE obsługuje model pudełek zgodny z W3C.
Oprócz brzydkich hacków można sobie jeszcze inaczej poradzić z problemem. Otóż przyszła specyfikacja CSS 3 przewiduje możliwość wybierania modelu pudełek: standardowego albo misiowego przy pomocy box-sizing: border-box lub content-box. Opera teraz już wspiera box-sizing, Mozilla -moz-box-sizing i można im zadać misiowy model pudełek i problem praktycznie rozwiązany. W MSIE, Mozilli i Operze mamy ten sam box model. Podaję za: http://www.xs4all.nl/~ppk/css2tests/box.html

[ziem]

Żadna z udzielonych odpowiedzi nie pozwoliła mi rozwiązać problemu .
Niby problem jest śmieszny - ale po przejrzeniu dokumentacji CSS nie znalazłem odpowiedzi na moje pytanie. Element może sobie pływać po prawej, po lewej, ale opływany obustronnie to już być nie może. Jeśli text -align nie może się aplikować do bloków, a <center> jest deprecated, to ja proszę o jakieś narzędzie, które mi to zastąpi . Chyba w3c czegoś nie dopatrzyło, albo ja czegoś nie doczytałem. Skutek jest taki, że zamiast elastycznego layoutu muszę tworzyć sztywny - albo stosować java script do pozycjonowania i resizowania. Gdzie tu orientacja na programistę?!? W3C wake up! GRRRRRRRRRRR!

[pikiq]

Ja takie coś zrobiłem:

Kod: Zaznacz cały

<?xml version="1.0" encoding="iso-8859-2"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />


<style type="text/css">
<!--
.przycisk
{
border-color:#ccc #555 #555 #ccc;
border-width:2px;
border-style:solid;
background:#aaaaaa;
padding:4px;

height:4ex;
line-height:4ex;
width:9em;

vertical-align:middle;
text-align:center;
font-size:7pt;
font-weight:bold;
text-decoration:none;
cursor:default;
}

div.przyc
{
background-color: #f00;
position: relative;
text-align: center;
padding-top:4px;
padding-bottom: 4px
}
.przyciski1
{
background:#f00;
position: absolute;
left: 4px;
top:4px;
bottom: 4px
}

.przyciski2
{
background:#f00;
}

.przyciski3
{
background:#f00;
position: absolute;
right: 4px;
top:4px;
bottom: 4px
}
-->
</style>

</head>

<body>
<div class="przyc">
<div class="przyciski1">
<a href="#" class="przycisk"> &lt;poprzedni</a>
</div>
<div class="przyciski2">
<a href="#" class="przycisk"> &gt;poczatek&lt;</a>
</div>
<div class="przyciski3">
<a href="#" class="przycisk"> następny &gt;&gt;</a>
</div>

</div>
</body>

</html>


Długość tego "paska" da się regulować i wszytko jest na swoim miejscu dopóki panel nie będzie miał długości mniejszej od sumy długości wszystkich przycisków. Ale i w tym przypadku nie wygląda tak bardzo głupio (IMHO). Żeby w tym przypadku przyciski nie "nachodziły" na siebie, można użyć min-width dla div'a przyc.

Rozwiązanie działa w Mozilli, a w IE chyba nie. IE chyba inaczej "pojmuje" position:absolute.

[ziem]

Fakt, pod IE- masakra. Szkoda, że nie ma jednej przeglądarki do www . Ja załatwiłem sprawę przez 5-komórkową tabelę.
Dzięki za kod.

[pikiq]

Szkoda, że nie ma jednej przeglądarki do www .

Szkoda, że wszystkie przeglądarki nie wyświetlają tak samo.

[Domel]

Żadna z udzielonych odpowiedzi nie pozwoliła mi rozwiązać problemu .

Mam inne zdanie.

Niby problem jest śmieszny - ale po przejrzeniu dokumentacji CSS nie znalazłem odpowiedzi na moje pytanie.

Specyfikacja nie jest tutorialem. Myslalem ze to wie kazdy.
Polecam http://www.alistapart.com/articles/readspec/

Jeśli text -align nie może się aplikować do bloków

Niedojrze ze nie umiesz czytac specyfikacji to jeszcze nie znasz algielskiego na poziomie elementarnym. TEXT-align NIE BLOCK-align text == element wewnatrz wierszowy block == blok. Czy to tak trudno zrozumiec.

to ja proszę o jakieś narzędzie, które mi to zastąpi .

Z narzedzi to chyba tylko lopata a ze stylow margin z wartoscia auto.

Chyba w3c czegoś nie dopatrzyło

Chyba nie.

albo ja czegoś nie doczytałem.

Tak, jednak ta druga opcja.

Skutek jest taki, że zamiast elastycznego layoutu muszę tworzyć sztywny - albo stosować java script

Takim stwierdzeniem tylko udowadniasz, ze nie rozumiesz koncepcji css.

Gdzie tu orientacja na programistę?!?

I teraz pozwole sobie na zlosliwosc: A kogo nazywasz programiste, bo chyba nie siebie. Programista charakteryzyje sie tym ze umie czytac raporty (jezyki programowania) i specyfikacje (aplikacje XML).

W3C wake up! GRRRRRRRRRRR!

To Ty sie obodz i zacznij czytac co sie do Ciebie pisze.

PS
Jak sie czegos nie umie to najlatwiej zwalic wine na w3c. Doradzam wieksze wazenie slow. Bo w3c pomylila sie tylko raz w swojej dlugiej historii (i poprawila to w ciagu kilku dni).

[ziem]

O, złośliwcze .

Żadna z udzielonych odpowiedzi nie pozwoliła mi rozwiązać problemu .

Mam inne zdanie.

napisałem, że margin:auto nie spełnia 2 ważnych postulatów, powtórzę
1. Kliknięcie na marginie to kliknięcie na elemencie- odpala odpowiednie zdarzenie- pod IE nie [choć powinno]- a to powoduje, że nie mogę tego rozwiązania zastosować bez tworzenia dodatkowych bloków, służących tylko do pozycjonowania(i czasochłonnych zabaw z rozmieszczaniem tego potem pod IE i Gecko). Jeśli stosuję tabelkę - z ww względu centrowanie przez margin:auto odpada.
2. zmiana rozmiaru okna, w którym spozycjonujesz w ten sposób diva spowoduje, że część strony stanie się niedostępna pod Mozillą nawet przez scroll [czyli coś z viewportem?]. Przykład: http://akson.sgh.waw.pl/~zczajk/szablon.html

Niedojrze ze nie umiesz czytac specyfikacji to jeszcze nie znasz algielskiego na poziomie elementarnym. TEXT-align NIE BLOCK-align text == element wewnatrz wierszowy block == blok. Czy to tak trudno zrozumiec.

Co za bzdura! Przecież problem nie brzmiał: "dlaczego mi nie działa text align do bloków" [pod IE, niezgodnie z W3C -działa] tylko: "brak dla bloków odpowiednika atrybutu text-align, jak sobie z tym poradzić"- co by się przydało, kiedy chcesz rozmieścić równomiernie w linii [wyjustować] kilka bloków wewnątrz innego.

Specyfikacja nie jest tutorialem. Myslalem ze to wie kazdy.

Tak, a tutoriale pisze się w oparciu o prognozy pogody, a nie - w oparciu o dokumentacje, no nie? Z resztą - jak szukam czegoś, to najpierw patrzę, czy jest w dokumentacji standardu, a potem - czy jest obsługiwane i przez jakie przeglądarki, np tu: http://www.xs4all.nl/~ppk/css2tests/intro.html

Z narzedzi to chyba tylko lopata a ze stylow margin z wartoscia auto.

cios poniżej pasa - atak na osobę, nie dyskusja - to samo inne Twoje wycieczki personalne pod moim adresem [nie chce mi się tego komentować, bo szkoda miejsca] - poza tym - czytaj powyżej

Takim stwierdzeniem tylko udowadniasz, ze nie rozumiesz koncepcji css.

albo, że rozumiem koncepcję DHTML

To Ty sie obodz i zacznij czytac co sie do Ciebie pisze.

Po to właśnie piszę, żeby czytać odpowiedzi - choć niekoniecznie odpowiedzi aż tak ad personam

Jak sie czegos nie umie to najlatwiej zwalic wine na w3c.

To, że coś mogę zrobić na okrętkę, zgodnie z W3C nie znaczy, że nie mogłoby się tego robić trochę wygodniej - standard może niektóre rzeczy komplikować, ale chyba nie po to się go tworzy?

Na koniec - dziękuję za link, bo to jedyna część Twojego postu, która może się na coś przydać przy rozwiązywaniu problemu.

[Domel]

Żadna z udzielonych odpowiedzi nie pozwoliła mi rozwiązać problemu .

Mam inne zdanie.

1. Kliknięcie na marginie to kliknięcie na elemencie

Nie rozumiem, uzywaj poprawnych zwrotow. Element to gropa dwoch znacznikow a nie ma takiego znacznika jak margin.

- odpala odpowiednie zdarzenie- pod IE nie [choć powinno]

A teraz wytlumacz co Mozilla i/lub W3C ma wspolnego z IE?
Powiem Ci, ze nie tutaj piszesz gdzie trzeba bo zeby to od nas zalezalo zeby IE byl zgodny z W3C i obslugiwal CSS to napewno pojawila by sie jego nowa wersja spelniajaca te warunki. Ale poki co nie jestesmy zespolem IE tylko Mozilla...

Jeśli stosuję tabelkę - z ww względu centrowanie przez margin:auto odpada.]

Nie rozumem dalej...

2. zmiana rozmiaru okna, w którym spozycjonujesz w ten sposób diva spowoduje, że część strony stanie się niedostępna pod Mozillą nawet przez scroll [czyli coś z viewportem?]. Przykład: http://akson.sgh.waw.pl/~zczajk/szablon.html

Fajnie tylko czemu strona ta wyglada prawie tak samo pod moja Mozilla 1.4 i IE 6.0...

Co za bzdura! Przecież problem nie brzmiał: "dlaczego mi nie działa text align do bloków"

I znowy nie czytasz. Ja nie komentuje zadnego pytania tylko fragment "Jeśli text -align nie może się aplikować do bloków".

[pod IE, niezgodnie z W3C -działa]

No i to chcem Ci przekazac. IE nie jest zgodne z W3C wiec jak cos moze dzialac skoro czegos takiego nie ma?

["brak dla bloków odpowiednika atrybutu text-align, jak sobie z tym poradzić"- co by się przydało, kiedy chcesz rozmieścić równomiernie w linii [wyjustować] kilka bloków wewnątrz innego.

Jak juz pisalem nie komentowalem tego. Ale teraz skomentuje. Nie moze byc takiego odpowiednika zwazywszy na wlasciwosci blokow. Zato jest odpowiednik in-block (czyli taki miks bloku z wewnatrzwierszowym ale to NIE blok)

["Tak, a tutoriale pisze się w oparciu o prognozy pogody, a nie - w oparciu o dokumentacje, no nie?

Prawie trafiles. Tutoriale pisze sie w oparciu o testy i doswiadczenie, ktore moze wynikac z specifikacji (nie ma takiego slowa jak dokumentacja) ale nie musi. Oczywiscie nie przeczytales tego co bylo pod wyzszym linkiem to tam jest to wyraznie wytlumaczone czym rozni sie specysikacja od innch zrodel.

Z resztą - jak szukam czegoś, to najpierw patrzę, czy jest w dokumentacji standardu, a potem - czy jest obsługiwane i przez jakie przeglądarki, np tu: http://www.xs4all.nl/~ppk/css2tests/intro.html

A wlasnie! O to chodzi. Jakby tutorial powstawal na podstawie specyfikacji to bys nie musial tam zagladac. Ale jakos nie moge sobie wyobrazic specyfikacji z informacjami "to nie dziala w IE".

cios poniżej pasa - atak na osobę, nie dyskusja - to samo inne Twoje wycieczki personalne pod moim adresem

Alez oczywiscie ze to byl atak i to staralem sie bys jak najbardziej agresywny. A wiesz czemu bo Ty byles identyczny w stosunku do mnie i moich kolegow z W3C. Jak Kuba Bodu tak Bog Kubie.

albo, że rozumiem koncepcję DHTML

Uff, naszcze sie nie ma czegos takiego jak DHTML. Natomiast jest HTML, XHTML, XML, CSS i ECMAScript.

To, że coś mogę zrobić na okrętkę, zgodnie z W3C nie znaczy, że nie mogłoby się tego robić trochę wygodniej - standard może niektóre rzeczy komplikować, ale chyba nie po to się go tworzy?

Jeszcze raz powtarzam, ze jesli jakas nowoczesna technologia nie dziala (lub zle dziala) pod IE to nie znaczy ze to jest wina W3C. To jest wina Microsoftu. Dlatego nie rozumem Twoich postow pietnujacych W3C to z czym nie maja nic wspolnego.
A co do "okretki" to jakby IE bylo zgodne z W3C tak jak Mozilla, nie bylo by "okretek" bo kazda strona byla by cross-browser a nie tak jak teraz jest HTML/XHTML i MSHTML.

[ziem]

1. Kliknięcie na marginie to kliknięcie na elemencie

Nie rozumiem, uzywaj poprawnych zwrotow. Element to gropa dwoch znacznikow a nie ma takiego znacznika jak margin.

To był błąd w moim kodzie - umieściłem w <a> <div> i dziwiłem się , że wychodzą cuda . [czytaj pierwszy post albo patrz tu: http://akson.sgh.waw.pl/~zczajk/Noname6.html - to, jak to działa pod Mozilą też jest ciekawostką (por. IE i Opera)].

A teraz wytlumacz co Mozilla i/lub W3C ma wspolnego z IE?
Powiem Ci, ze nie tutaj piszesz gdzie trzeba bo zeby to od nas zalezalo zeby IE byl zgodny z W3C i obslugiwal CSS to napewno pojawila by sie jego nowa wersja spelniajaca te warunki. Ale poki co nie jestesmy zespolem IE tylko Mozilla...

To tylko wtrącenie - więc po co się czepiasz?

(http://akson.sgh.waw.pl/~zczajk/szablon.html)
Fajnie tylko czemu strona ta wyglada prawie tak samo pod moja Mozilla 1.4 i IE 6.0...

Zmniejsz rozmiar okna Mozilli poniżej szerokości prawego dolnego bloku i spróbuj się przewinąć scrollem do lewego dolnego bloku, a zobaczysz o czym piszę. [Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.4) Gecko/20030624]

I znowy nie czytasz. Ja nie komentuje zadnego pytania tylko fragment "Jeśli text -align nie może się aplikować do bloków".

A kontekst to już się nie liczy?

Oczywiscie nie przeczytales tego co bylo pod wyzszym linkiem to tam jest to wyraznie wytlumaczone czym rozni sie specysikacja od innch zrodel.

Oczywiście przeczytałem. Bez specyfikacji nie napiszesz tutorialu. Po przeczytaniu specyfikacji lepiej rozumiesz tutoriale.
[Towja potencjalna rpiosta (^C>^V):"Widać Tobie niewiele to pomogło"- możemy sobie oszczędzić takich uwag, bo nie wnoszą niczego?]

Ty byles identyczny w stosunku do mnie i moich kolegow z W3C. Jak Kuba Bodu tak Bog Kubie.

Pewnie - i odesłałem Was do łopaty .

Uff, naszcze sie nie ma czegos takiego jak DHTML. Natomiast jest HTML, XHTML, XML, CSS i ECMAScript.

Standardu nie ma - koncepcja i owszem.

Jeszcze raz powtarzam, ze jesli jakas nowoczesna technologia nie dziala (lub zle dziala) pod IE to nie znaczy ze to jest wina W3C. To jest wina Microsoftu. Dlatego nie rozumem Twoich postow pietnujacych W3C to z czym nie maja nic wspolnego.

Eee, bez przesady, co ma IE do rozmieszczania bloków zgodnie z W3C i tego, jak to działa pod mozillą? To o IE to tylko wtrącenia, tekst między /* */ .

A co do "okretki" to jakby IE bylo zgodne z W3C tak jak Mozilla, nie bylo by "okretek" bo kazda strona byla by cross-browser a nie tak jak teraz jest HTML/XHTML i MSHTML.

Tu się w pełni zgadzam.

Na koniec:
Za to co namodziłem z tym divem w a, przepraszam - powinienem był zvalidować kod przed pisaniem na to forum. Z tego wynikła potrzeba kombinowania z innym niż przez margin rozmieszczaniem divów. No a to http://akson.sgh.waw.pl/~zczajk/szablon.html mnie dobiło - i to jest chyba bug w Mozilli.

[Domel]

Za to co namodziłem z tym divem w a, przepraszam - powinienem był zvalidować kod przed pisaniem na to forum.

Milo mi, ze sam do tego doszedles.

Z tego wynikła potrzeba kombinowania z innym niż przez margin (...) to jest chyba bug w Mozilli.

No wlasnie. bug to moze byc w Mozilli, w IE lub w Operze ale nie w W3C.
A co do innego sposobu: proponuje pozycjonowanie.