margines w koło tekstu
Gdy do DIV-a wpiszamy jakiś tekst to ułoży on się przy jego krawędziach, jeśli ponadto DIV będzie miał np. obramowanie w kolorze tekstu, bardzo utrudni to czytelność.
1
Biblioteka
Kiedyś w dziecinstwie marzyło mi się, by mieć taka ogromną bibliotekę,
W niej tysiące książek i stare i nowe czasopisma.
Miała być tak ogromna, że nie mogła by się zmieścić w żadnym pokoju.
Żeby coś przeczytać będzie taki pulpit sterowania,
jak coś wybierze i pociagnie za dzwignię,
to wyskoczy szukana pozycja.
Wiesz... w zasadzie internet to jest realizacja tamtego marzenia.
Różni to się w szczegółach... ale wtedy nie wiedziałem o świecie cyfrowym.
Prawda, że nieczytelne? Litery przy bokach zlewają się z obramowaniem i stają się niewygodne do czytania. Trzeba by je odsunąć od krawędzi. Jest kilka sposobów, bo czasem równięż przydają się i dziwaczne rozwiązania.
2
Najbardziej oczywisym rozwiązaniem będzie PADDING nadany DIVowi, czyli odsunięcie elementów znajdujących się w DIVie od jego wewnętrznych krawędzi.
Biblioteka
Kiedyś w dziecinstwie marzyło mi się, by mieć taka ogromną bibliotekę,
W niej tysiące książek i stare i nowe czasopisma.
Miała być tak ogromna, że nie mogła by się zmieścić w żadnym pokoju.
Żeby coś przeczytać będzie taki pulpit sterowania,
jak coś wybierze i pociagnie za dzwignię,
to wyskoczy szukana pozycja.
Wiesz... w zasadzie internet to jest realizacja tamtego marzenia.
Różni to się w szczegółach... ale wtedy nie wiedziałem o świecie cyfrowym.
Dodałem w stylach CSS taki kod
.cw1-02 {padding:0 15px;}
I dosunął się tekst od krawędzi i było by dobrze gdyby...
Istnieje róznica w przeglądarkach Firefox powiększy szerokość DIVa o szerokość PADDING, zaś InternetExplorer nie.
3
Biblioteka
Kiedyś w dziecinstwie marzyło mi się, by mieć taka ogromną bibliotekę,
W niej tysiące książek i stare i nowe czasopisma.
Miała być tak ogromna, że nie mogła by się zmieścić w żadnym pokoju.
Żeby coś przeczytać będzie taki pulpit sterowania,
jak coś wybierze i pociagnie za dzwignię,
to wyskoczy szukana pozycja.
Wiesz... w zasadzie internet to jest realizacja tamtego marzenia.
Różni to się w szczegółach... ale wtedy nie wiedziałem o świecie cyfrowym.
Do odsuwania tekstu służy też TEXT-INDENT, ale coż odsuwa tylko pierwszą linijkę akapitu. Jeśli mamy tekst z tylko jedną linnią to jest to dobra metoda, jeżeli nie... szukajmy dalej wyjścia. Teraz k kodzie był taki zapos:
.cw1-03 {text-indent: 15px; }
4
Zaczeliśmy od PADDING dla DIVa zewnętrznego, odwrotnością będzie nadać paragrafom tekstowym (P) margines. Tak wygląda kod:
.cw1-04 p {margin: 0 15px; }
A tak wyszło w naturze i wygląda przynajmniej u mnie tak samo w FF i w IE. Zatem to dobre rozwiązanie, choć i tu jest jakieś ale...
Margines jest bo odsuwamy paragraf (P)
gdyby były tu inne elementy na. obrazek (IMAGE) i niebył zawartością paragrafu to by się nam nie odlepił od krawędzi. Zreszto zobaczcie napis "Biblioteka"
jest zawarty w jeszcze jednym DIVie i krawędzie tego DIVa nie odsuneły się od DIVa zewnętrznego.
Biblioteka
Kiedyś w dziecinstwie marzyło mi się, by mieć taka ogromną bibliotekę,
W niej tysiące książek i stare i nowe czasopisma.
Miała być tak ogromna, że nie mogła by się zmieścić w żadnym pokoju.
Żeby coś przeczytać będzie taki pulpit sterowania,
jak coś wybierze i pociagnie za dzwignię,
to wyskoczy szukana pozycja.
Wiesz... w zasadzie internet to jest realizacja tamtego marzenia.
Różni to się w szczegółach... ale wtedy nie wiedziałem o świecie cyfrowym.
5
Najczęściej jednak stosuję jeszcze inną metodę. Odsuwam tekst i inną zawartość, używając jeszcze jednegi DIVa. W miejsce gdzie chcę umieszczać tekst wkładam jeszcze jednego DIVa który służy tylko do tego by odepchnąc tekst i nadać mu właściwy odstęp od krawędzi sztrony, czy innych elementów.Biblioteka
Kiedyś w dziecinstwie marzyło mi się, by mieć taka ogromną bibliotekę,
W niej tysiące książek i stare i nowe czasopisma.
Miała być tak ogromna, że nie mogła by się zmieścić w żadnym pokoju.
Żeby coś przeczytać będzie taki pulpit sterowania,
jak coś wybierze i pociagnie za dzwignię,
to wyskoczy szukana pozycja.
Wiesz... w zasadzie internet to jest realizacja tamtego marzenia.
Różni to się w szczegółach... ale wtedy nie wiedziałem o świecie cyfrowym.
6
Wyszło dobrze, ale gdybyśmy chcieli z powrotem mieć pasek z napisem "Biblioteka" od krawędzi do krawędzi?
Wtedy stosuje taką sztuczkę, że temu paskowi nadaję MARGIN minusowe.
.cw1-06 .odstep {margin: 0 15px; }
.cw1-06 .biblio {margin: 0 -15px; }
Biblioteka
Kiedyś w dziecinstwie marzyło mi się, by mieć taka ogromną bibliotekę,
W niej tysiące książek i stare i nowe czasopisma.
Miała być tak ogromna, że nie mogła by się zmieścić w żadnym pokoju.
Żeby coś przeczytać będzie taki pulpit sterowania,
jak coś wybierze i pociagnie za dzwignię,
to wyskoczy szukana pozycja.
Wiesz... w zasadzie internet to jest realizacja tamtego marzenia.
Różni to się w szczegółach... ale wtedy nie wiedziałem o świecie cyfrowym.
I proszę, taki banalny problemik, ale można go jednak róznie rozwiązać. To może jeszcze na koniec uwaga...
-bo o ile powinno zrobić się ten odstęp?
Jeśli książki są w wersji luksusowej, to typograf daje wówczas całkiem duże marginesy po kilka cenymetrów, bo to elegancko by blok tekstu był otoczony powietrzem. Często jednak zwyczajnie brakuje miejsca i by umieścić wszystko na stronie i nie rozciągnąć ja też na kilka ekranów, często przychodzi obcinać marginesy. Uważam, że minimum to szerokość litery 1-3 px to satnowaczo za mało. Zaś największy margines to kwestia estetyki i kompozycji całej strony, z uwzględnieniem czynnika bardzo ważnego - wygody czytania.