Witam,

Jak zadeklarować blok o szerokości dopasowującej się do zawartości? Chodzi
o zachowanie podobne do tabeli o nie ustawionej szerokości. Przykładowo
chciałbym aby znacznik P był szerokości zawartego w nim tekstu.

do góry

P.S.

W tej chwili stosuję inline-block lecz nie mam pewności, czy jest to
poprawne i czy zadziała w popularnych (nowych) przeglądarkach.

do góry

Zapomniałem jeszcze dodać, że to rozwiązanie jest problematyczne gdyż nie
działa centrowanie bloku w postaci:

margin-left: auto;
margin-right: auto;

Tak więc niezależnie od wcześniejszego chciałbym inaczej zbudować taki blok
o dynamicznej szerokości i możliwości centrowania jak w przypadku tabel.

do góry

W dniu 2011-12-08 13:32, Marek pisze:
> Zapomniałem jeszcze dodać, że to rozwiązanie jest problematyczne gdyż nie
> działa centrowanie bloku w postaci:
>
> margin-left: auto;
> margin-right: auto;
>
> Tak więc niezależnie od wcześniejszego chciałbym inaczej zbudować taki blok
> o dynamicznej szerokości i możliwości centrowania jak w przypadku tabel.

Nie potrzebujesz tych marginesów. Element inline-block zwyczajnie
podlega centrowaniu z text-align. Czyli:

<div style="width:500px; text-align: center; background: blue;">
<p style="display:inline-block; background: white; zoom:1;
*display:inline;">Mężny bądź, chroń pułk twój i sześć flag
</div>

Jeśli nie chcesz wsparcia dla IE6 (i chyba 7), to wywal zoom i *display.

Pzdr.

do góry

Dnia Thu, 08 Dec 2011 21:48:49 +0100, ramblinman napisał(a):

> Nie potrzebujesz tych marginesów. Element inline-block zwyczajnie
> podlega centrowaniu z text-align. Czyli:

Faktycznie, masz rację, że w ten sposób temat można rozwiązać. :-)

Powstał jednak pewien rebus. Mamy kod:

<dl class="test">
<dd>a</dd>
<dd>b</dd>
<dd>c</dd>
</dl>

.test {
padding: 0px;
margin: 0px;
text-align: center;
}
.test dd {
text-align: center;
margin: 0px;
position: relative;
display: inline-block;
line-height: 100%;
background-color: #0F0;
padding: 0px;
width: 50px;
}

Pomiędzy elementami dd powstaje 5 px lewy margines.O co może chodzić?

do góry

Dnia Thu, 8 Dec 2011 22:56:29 +0100, Marek napisał(a):

> Dnia Thu, 08 Dec 2011 21:48:49 +0100, ramblinman napisał(a):
>
>> Nie potrzebujesz tych marginesów. Element inline-block zwyczajnie
>> podlega centrowaniu z text-align. Czyli:
>
> Faktycznie, masz rację, że w ten sposób temat można rozwiązać. :-)
>
> Powstał jednak pewien rebus. Mamy kod:
>
> <dl class="test">
> <dd>a</dd>
> <dd>b</dd>
> <dd>c</dd>
> </dl>
>
> .test {
> padding: 0px;
> margin: 0px;
> text-align: center;
> }
> .test dd {
> text-align: center;
> margin: 0px;
> position: relative;
> display: inline-block;
> line-height: 100%;
> background-color: #0F0;
> padding: 0px;
> width: 50px;
> }
>
> Pomiędzy elementami dd powstaje 5 px lewy margines.O co może chodzić?

Ah już wiem. Znany błąd (?). Do test należy dodać font-size:0; a w dd
ustawić żądaną wielkość fontu :)

do góry

W dniu 2011-12-08 23:13, Marek pisze:
> Ah już wiem. Znany błąd (?). Do test należy dodać font-size:0; a w dd
> ustawić żądaną wielkość fontu :)

Albo zlikwidować białe znaki między elementami:

<dd>a</dd><dd>b</dd><dd>c</dd>

do góry

Dnia Thu, 08 Dec 2011 23:33:54 +0100, ramblinman napisał(a):

> W dniu 2011-12-08 23:13, Marek pisze:
>> Ah już wiem. Znany błąd (?). Do test należy dodać font-size:0; a w dd
>> ustawić żądaną wielkość fontu :)
>
> Albo zlikwidować białe znaki między elementami:
>
> <dd>a</dd><dd>b</dd><dd>c</dd>

Tak. Jednakże jeśli ktoś dokona formatowania kodu HTML w jakimś edytorze,
to mu się layout strony rozleci. Obecnie mało kto w notatniku pracuje :-)
Bardziej zaawansowane edytory pilnują aby nie łamać kodu przy inline'owych
tagach. Jednakże nie są w stanie uwzglednić fantazji twórcy, który w CSS
pozmienia zachowanie tagów i przekształci bloki w inline'owe.

do góry

W dniu 2011-12-09 13:14, Marek pisze:
> Tak. Jednakże jeśli ktoś dokona formatowania kodu HTML w jakimś edytorze,
> to mu się layout strony rozleci.

To niech nie dokonuje :P Jeśli ktoś te tagi wstawił razem, to jakiś w
tym miał cel.

> Obecnie mało kto w notatniku pracuje :-)

Notatnik czy NetBeans, zasada działania taka sama. No chyba, że miałeś
na myśli WYSIWYG, który coś zmieni i edytujący nawet nie będzie o tym
wiedział. Ale wtedy to wina edytora albo użytkownika.

Pzdr.,
Rafał

do góry

Dnia Fri, 09 Dec 2011 18:33:23 +0100, ramblinman napisał(a):

> Notatnik czy NetBeans, zasada działania taka sama. No chyba, że miałeś
> na myśli WYSIWYG, który coś zmieni i edytujący nawet nie będzie o tym
> wiedział. Ale wtedy to wina edytora albo użytkownika.

Np. Adobe Dreamweaver i polecenie formatowania kodu źródłowego to zmieni.
Pajączek podobnie. Tą czynność zwykle przeprowadza sie wielkokrotnie - jest
bardzo użyteczna. Trudno jednak zapamiętać, ze jakieś pliku nie można
poddawać formatowaniu bo coś się rozpadnie.Dlatego beziieczniej jest
stosować ten pokręcony zabieg z zerowym fontem.

do góry