GoldenLine
Zaloguj się
Halina Krawczykiewicz

Halina Krawczykiewicz autorka "Ludzi nocy"
- komedii o
wampirach i
wilkołakach

Temat: Interlinia w html5

Znowu muszę prosić o pomoc. To jest mój cod:

#id-menu {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: white;
font-style: italic;
text-align:right;
line-height:120%;}

Dlaczego nie działa interlinia? W wyświetlarce chrom zero reakcji a w dreamwearze niby działa. O co tu chodzi! Bierze mnie nerwa! Tym bardziej że uczę się kompletnie sama z książki. Właściwie już ją przerobiłam i teraz poprawiam całą stronę. Kartka po kartce. Ale ciężkie jest życie kiedy to co w książce jest napisane nie chce się za nic sprawdzić w realu!

help?
Link do wypowiedziLink

konto usunięte

Temat: Interlinia w html5

Halina Bajorska K.:
Znowu muszę prosić o pomoc. To jest mój cod:

#id-menu {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: white;
font-style: italic;
text-align:right;
line-height:120%;}

Dlaczego nie działa interlinia? W wyświetlarce chrom zero reakcji a w dreamwearze niby działa. O co tu chodzi! Bierze mnie nerwa! Tym bardziej że uczę się kompletnie sama z książki. Właściwie już ją przerobiłam i teraz poprawiam całą stronę. Kartka po kartce. Ale ciężkie jest życie kiedy to co w książce jest napisane nie chce się za nic sprawdzić w realu!

help?

120% jakiej wartości? Jaką interlinię ma ustawiony nadrzędny element?
Link do wypowiedziLink
Halina Krawczykiewicz

Halina Krawczykiewicz autorka "Ludzi nocy"
- komedii o
wampirach i
wilkołakach

Temat: Interlinia w html5

O rany... chyba nie wiem o co chodzi z tym nadrzędnym elementem... ups
Link do wypowiedziLink

konto usunięte

Temat: Interlinia w html5

Halina Bajorska K.:
O rany... chyba nie wiem o co chodzi z tym nadrzędnym elementem... ups

Tag/element nadrzędny ("rodzic") dla #id-menu...
Link do wypowiedziLink
Halina Krawczykiewicz

Halina Krawczykiewicz autorka "Ludzi nocy"
- komedii o
wampirach i
wilkołakach

Temat: Interlinia w html5

Taaa... czyli muszę kupić następną książkę. Nic nie znalazłam o "rodzicach". To i dzieci na pewno są...

znowu czeka mnie googlowanie albo nowy wydatek na kolejną książkę...
A może szybki i krótki wykładzik ?

please...?

.
Link do wypowiedziLink
Krzysztof Kurzawa

Krzysztof Kurzawa Web / Mobile
Developer

Temat: Interlinia w html5

<rodzic>
<dziecko></dziecko>
</rodzic>

A co do interlinii to zupełnie nie wiem czemu chcesz wkładać tam procenty. Procent zadziała w zależności od wielkości czcionki jaka przypada danemu elementowi któremu ustawiamy % w line-height.

Piotr, wydaje mi się że Ci się pomyliło z tym że % w line-height liczy procent line-height który powinien być dziedziczony. Wyguglałem + przetestowałem i rzeczywiście. Chyba jeszcze nie używałem % na line-height, CSS zawsze Cię zaskoczy i nauczy czegoś co możesz łatwo zapomnieć :-)
Link do wypowiedziLink

konto usunięte

Temat: Interlinia w html5

120% to mała liczba, ja rzadko poniżej 150% stosuję, więc w realnym świecie możesz 120% po prostu nie zauważać, a dreamwaver to powiększa? Możesz też ustawić na sztywno wartość w pixelach, np. line-height: 20px;
Link do wypowiedziLink
Halina Krawczykiewicz

Halina Krawczykiewicz autorka "Ludzi nocy"
- komedii o
wampirach i
wilkołakach

Temat: Interlinia w html5

Dzięki. Sprawdziłam na większych wartościach i w jednostkach px i rzeczywiście działa! Nawet w Chromie wyświetla zmianę interlinii. A dlaczego nie wyświetlają mi się obrazki w operze tylko same teksty?
Link do wypowiedziLink
Piotr Potera

Piotr Potera Frontend Developer,
UI/UX designer

Temat: Interlinia w html5

#id-menu {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: white;
font-style: italic;
text-align:right;
line-height:120%;}

W przypadku tak zdefiniowanych reguł linia tekstu będzie miała około 1.6 piksela z góry i z dołu, zgodnie ze wzorem:

(lineHeight-fontSize)/2

Policzmy: ((16*1.2)-16)/2 = 1.6

To bardzo mało, prawie niezauważalnie mało. Ogólnie dla własnego bezpieczeństwa i wygody lepiej stosować line-height bez podawania jednostki. Na przykład line-height: 1 dla font-size: 16px daje 16 pikselową interlinię, czyli, wg. powyższego wzoru, zero pikseli z góry i z dołu.

Zaletą zapisu bez jednostki jest (tu uwaga, @Piotr), że dzieci danego elementu nie dziedziczą wtedy interlinii z rodzica a obliczają własną, na podstawie swojego font-size.

TL;DR; w przypadku line-height z jednostką to dzieci dziedziczą rozmiar interlinii a nie element ze swojego nadrzędnego rodzica, jak sugerujesz.

Innymi słowy - line-height jest obliczany na podstawie font-size danego elementu, CHYBA ŻE, nadrzędny element ma zdefiniowany line-height z jednostką (px,em,% itd.).Ten post został edytowany przez Autora dnia 01.08.13 o godzinie 11:30
Link do wypowiedziLink

konto usunięte

Temat: Interlinia w html5

Piotr P.:
#id-menu {
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: white;
font-style: italic;
text-align:right;
line-height:120%;}

W przypadku tak zdefiniowanych reguł linia tekstu będzie miała około 1.6 piksela z góry i z dołu, zgodnie ze wzorem:

(lineHeight-fontSize)/2

Policzmy: ((16*1.2)-16)/2 = 1.6

To bardzo mało, prawie niezauważalnie mało. Ogólnie dla własnego bezpieczeństwa i wygody lepiej stosować line-height bez podawania jednostki. Na przykład line-height: 1 dla font-size: 16px daje 16 pikselową interlinię, czyli, wg. powyższego wzoru, zero pikseli z góry i z dołu.

Zaletą zapisu bez jednostki jest (tu uwaga, @Piotr), że dzieci danego elementu nie dziedziczą wtedy interlinii z rodzica a obliczają własną, na podstawie swojego font-size.

TL;DR; w przypadku line-height z jednostką to dzieci dziedziczą rozmiar interlinii a nie element ze swojego nadrzędnego rodzica, jak sugerujesz.

Innymi słowy - line-height jest obliczany na podstawie font-size danego elementu, CHYBA ŻE, nadrzędny element ma zdefiniowany line-height z jednostką (px,em,% itd.).

No tak, chyba zrobiłem zbyt duży skrót myślowy. Wiadomo, że dziedziczą tylko, gdy parent ma zdefiniowaną :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj