Podstrony
- telcocafe
- [PHP+MySQL] Problem z połączeniem mysqli('localhost', 'xxx', 'xxx', 'xxx'
- [php] Dodanie textu do pliku. Problem... :) POMOCY!!!!!!!!!!!!!
- Problem ze zgrywaniem z kamery Problem ze zgrywaniem z kamery
- [JS] Problem ze skryptem pobierającym źródło strony skrypt pobierający źródło strony
- Głupi problem HELP !!!
- [JS, jQuery] Problem z przejściem z JS na jQuery
- [HTML] 2 problemy z html-em
- [domena] Problem z domeną
- Problem z O/C - Barton 2800+ AMD Athlon XP 2800+ Barton
- [mysql/php]'problem z identyfikatorami [mysql/php]
- zanotowane.pl
- doc.pisz.pl
- pdf.pisz.pl
- thelemisticum.opx.pl
telcocafe
Od niedawna staram się uczyć tworzenia stron bez tworzenia tabelek. Mam jednak pewną watpliwość odnośnie atrybutu 'width', a oto problem :) :W kursie Włodzimierza Gajdy, współpracujacego m.in. z Magazynem Internet możemy przeczytać m.in.
Poszczególne obszary zostały na rysunku oznaczone: M - margines, B - obramowanie, P - wyrównanie oraz Z - zawartość. Margines, obramowanie i wyrównanie otaczają zawartość z czterech stron nazywanych top (góra), bottom (dół), left (lewa) oraz right (prawa). Atrybuty te możemy stosować do wszystkich czterech krawędzi na raz pisząc:
padding : 15px;
margin : 30px;
oraz do każdej krawędzi z osobna stosując przyrostki -top, -bottom, -left oraz -right, na przykład:
border-left : 1px solid blue;
margin-top : 100px;
Szerokość całego elementu wynika z szerokości poszczególnych obszarów i jest równa ich sumie:
lewy margines + lewe obramowanie + lewe wyrównanie +
zawartość +
prawe wyrównanie + prawe obramowanie + prawy margines
lub, w przypadku elementów symetrycznych w pionie:
2 * margines + 2 * obramowanie + zawartość
Warto zapamiętać, że szerokość elementu ustalana atrybutem width określa wyłącznie szerokość przeznaczoną na treść. W celu wyliczenia szerokości zajmowanej przez cały element należy do podanej wartości dodać marginesy, obramowanie i wyrównanie.
Jeśli chcemy otrzymać pudełko o szerokości 100 pikseli i posiadające jednopikselowe obramowanie wówczas podajemy marginesy równe 0, obramowanie równe 1, wyrównanie równe 0 oraz zawartość równą 98, według wzoru:
0 + 1 + 0 + 98 + 0 + 1 + 0
Style mają postać:
div {
margin : 0px;
border : 1px solid black;
padding : 0px;
width : 98px;
}
Jeśli zechcemy, by cały element miał 150 pikseli szerokości, był otoczony 5-cio pikselowym marginesem, posiadał trzypikselowe obramowanie, zaś jego zawartość była odsunięta od krawędzi o 10 pikseli to należy użyć stylów:
div#mala {
margin : 5px;
border : 3px solid red;
padding : 10px;
width : 114px;
}
pokazuje to że aby uzyskać całkwoita liczę pikseli szerokości strony trzeba od wartości 'width' odjąc wszelkie elementy składowe tak jakby element width oznaczał tylko szerokości zawartości bez padding czy border:
jednakże w wielu miejscach , chociazby w książce :
"CSS. Antologia. 101 wskazówek i trików" Rachel Andrew, wyraźnie jest pokazane że np przy padding: 15px, border: 1px width wynosi np 760px co jest wartością szerokości strony dla ekranu 800px, co wyraźnie pokazuje że wartośc width w tym przypadku jest autonomiczną wartością wobec padding czy border ... czyli zupełnie inaczej niz w 1 przypadku
-----------------
i teraz pytania:
1. czy możecie mi wyjaśnić jak to jest w końcu z atrybutem 'width', czyli która metoda jest 'legalna' :)
2. czy wy stosujecie metodę pierwszą czy drugą
3. ew. jakies uwagi,
Użytkownik rotsap edytował ten post 30 czerwiec 2006, 19:12
Nie wiem, o co Ci dokładnie chodzi, ale:
jeśli width wynosi 300px i np. border 15px to cały element będzie 300+15[lewe obramowanie]+15[prawe obramowanie]=330px
Jeśli więc chcesz osiągnąć 800px szerokości z 10px obramowania, 15 wypełnienia oraz 5 marginesu robisz tak: 800-(10*2 + 15*2 + 5*2)=800-60=740px, więc width:740px;
Pozwolę sobie tylko zwrócić uwagę, iż Microsoftowski IE interpretuje padding jako część width, tak samo z border. Czyli jeśli mamy div width:760px;height:100px;padding:5px;border:4px; to w IE zostanie wyświetlony div o szerokości 760px i wysokości 100px (w tym border i padding), a już w Operze czy Firefoxie będzie to div o szerokości 760+(2*5)+(2*4)=778px i wysokości 100+(2*5)+(2*4)=118px
własnie miałem napisac o tym cudzie jaki dzieje sie w IE oraz FF i Operze. a rozwiązaniem tego oczywiscie użycie 1 diva o głównej szerokości bez padingów itd. a pozostałe powinny uzywac marinu wzgledem głownego diva i wtedy ładnie wyglada na wszystkich przegladarkach.
Pozwolę sobie tylko zwrócić uwagę, iż Microsoftowski IE interpretuje padding jako część width, tak samo z border. Czyli jeśli mamy div width:760px;height:100px;padding:5px;border:4px; to w IE zostanie wyświetlony div o szerokości 760px i wysokości 100px (w tym border i padding), a już w Operze czy Firefoxie będzie to div o szerokości 760+(2*5)+(2*4)=778px i wysokości 100+(2*5)+(2*4)=118px
