-
1. Data: 2009-09-18 07:19:51
Temat: [CSS] padding i width
Od: TornadoTN <t...@d...net.pl>
Witam
Napotkałem na taki problem:
CSS:
div {
width:100%;
padding-left: 200px;
}
HTML:
<div>Jakiś tekst</div>
W przeglądarkach taki kod powoduje wyjechanie div'a o 200px w lewo poza
widoczny ekran i pojawienie się dolnego scrolla.
Aby pozbyć się problemu wyciąłem wpis "width:100%;" i poskutkowało.
Natomiast pojawił się problem w Firefox 3.5 a w IE <7 problem pozostał.
Firefox bez "width:100%" nie rozciąga div'a na całą szerokośc tylko
dopasowuje go do szerokości tekstu. Jak się pozbyć tego efektu ?
Dodam, że "margin" zachowuje się dokładnie tak samo jak padding co jest
dziwne, gdyż padding to wewnętrzny odstęp i powinien się zachowywać
inaczej niż "margin".
Chcę osiągnąć efekt taki aby tekst był przesunięty od lewej krawędzi o
200px i skalował się razem z oknem przeglądarki.
Rozwiązanie na tabelach:
<table style="width:100%" cellpading="0" cellspacing="0">
<tr>
<td style="width:200px;"> </td>
<td style=""width: auto;>Jakiś tekst</td>
</tr>
</table>
Jak to zrobić na divach ?
Pozdrawiam
TornadoTN
-
2. Data: 2009-09-18 08:40:24
Temat: Re: [CSS] padding i width
Od: alianora <a...@g...pl>
TornadoTN pisze:
> Firefox bez "width:100%" nie rozciąga div'a na całą szerokośc tylko
> dopasowuje go do szerokości tekstu. Jak się pozbyć tego efektu ?
DIV to element blokowy i (chyba?) każda przeglądarka (FF na 100%)
domyślnie rozciąga taki element na całą dostępną szerokość (kontenera
czy okna). Jeżeli dzieje się inaczej to pewnie masz tam ustawiony jakiś
float.
Próbowałeś zastąpić padding marginem?
-
3. Data: 2009-09-19 06:04:35
Temat: Re: [CSS] padding i width
Od: TornadoTN <t...@d...net.pl>
alianora pisze:
> TornadoTN pisze:
>> Firefox bez "width:100%" nie rozciąga div'a na całą szerokośc tylko
>> dopasowuje go do szerokości tekstu. Jak się pozbyć tego efektu ?
>
> DIV to element blokowy i (chyba?) każda przeglądarka (FF na 100%)
> domyślnie rozciąga taki element na całą dostępną szerokość (kontenera
> czy okna). Jeżeli dzieje się inaczej to pewnie masz tam ustawiony jakiś
> float.
>
> Próbowałeś zastąpić padding marginem?
Próbowałem zastąpić i efekt jest taki sam. Masz racje ze kazda
przegladarka rozciaga na 100%. Tylko czemu recznie wpisanie 100% daje
inny efekt niz nie wpisanie go wcale? (oczywiscie przy uzyciu padding
lub margin)
FF daje ten efekt zmniejszenia diva tylko jest jest padding lub margin
ustawione dla DIV.
Pozdr
Tomek
-
4. Data: 2009-09-19 08:44:47
Temat: Re: [CSS] padding i width
Od: olo <o...@n...com>
TornadoTN pisze:
> Próbowałem zastąpić i efekt jest taki sam. Masz racje ze kazda
> przegladarka rozciaga na 100%. Tylko czemu recznie wpisanie 100% daje
> inny efekt niz nie wpisanie go wcale? (oczywiscie przy uzyciu padding
> lub margin)
>
bo 100% oznacza szerokość równą szerokości elementu nadrzędnego
(rodzica). A to co innego niż width: auto (domyślnie dla elementów
blokowych). Popatrz na box model i myślę, że zrozumiesz :)
http://kurs.browsehappy.pl/CSS/BoxModel
--
pozdrawiam!
http://webtrunki.pl - piwa, wina, wódki, domowe wyroby
ZAPRASZAMY!!
-
5. Data: 2009-09-20 08:14:49
Temat: Re: [CSS] padding i width - rozwiazanie
Od: TornadoTN <t...@d...net.pl>
Zrobiłem tak:
div {
position: absolute;
left: 300px;
right:60px;
width:auto;
}
HTML:
<div>Jakis tekst</div>
Wreszcie dziala tak jak oczekiwalem, ale dla IE6 trzeba bedzie
pokombinowac jeszcze :(
Pozdr
Tomek