CSS ::first-letter - problem z działaniem

pytanie zadane 6 stycznia 2019 w HTML i CSS przez Jakub 0 Pasjonat (23,120 p.)
zamknięte 6 stycznia 2019 przez Jakub 0

Witam, od razu przejdę do rzeczy:

index.html

<!DOCTYPE html>

<html lang="pl">

    <head>
        <meta charset="utf-8">
        <title>Zimowe wiersze</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <header class="title">Zimowe wiersze</header>
        <section>
            <div id="window">
                <div class="windowSegmentRow">
                    <div class="windowSegment"></div>
                    <div class="windowSegment"></div>
                    <div class="rowEnd"></div>
                </div>
                <div class="windowSegmentRow">
                    <div class="windowSegment"></div>
                    <div class="windowSegment"></div>
                    <div class="rowEnd"></div>
                </div>
            </div>
        </section>
            <article class="poem">
                <header id="poem1Title">Przezroczyste kleksy w mojej głowie</header>
                <p id="poem1Content">
                    Tej zimy przestałam pisać wiersze
                    nagłe mroczne gęste
                    
                    lekkie śnieżynki na wieżach słowa
                    srebrnym ażurem oplatają przestrzenie
                    tworząc świetliste kopczyki
                    jak Twoje powieki nad ranem
                    
                    tej zimy przestałam pisać wiersze
                    napisałam Ciebie
                </p>
                <p id="s">to działa</p>
            </article>
        </section>

    </body>

</html>

style.css

body {
    background-image: url("background.gif");
    background-attachment: scroll;
    color: #ffffff; 
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.title {
    text-align: center;
    color: #4ca7a2;
    font-size: 60pt;
    margin: 30pt;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 5pt;
}

.rowEnd {
    clear: both;
}

#window {
    position: relative;
    width: 340pt;
    margin: 60pt auto;
    background-image: url("windowFrame.jpg");
    padding: 5pt;
}

.windowSegment {
    float: left;
    margin: 10pt;
    width: 150pt;
    height: 150pt;
    background-image: url("windowView.jpg");
    background-size: cover; 
    background-attachment: fixed;
}

.poem {
    width: 650pt;
    margin-left: auto;
    margin-right: auto; 
    min-height:100pt;
    padding: 10pt;
}

#poem1Title {
    color: #4dd664;
    text-align: left; 
    font-size: 25pt;
    padding: 10pt;
    border-bottom: 3pt #4dd664 dotted;
}

#s::first-letter { /*działa*/
    font-size: 25pt;
    color: #4dd664;   
}

#poem1Content::first-letter { /*nie działa*/
    font-size: 25pt;
    color: #4dd664;
}

#poem1Content {
    white-space: pre-wrap;
    font-size: 15pt;
}

nie mam kompletnie zielonego pojęcia dlaczego wystylizowanie pierwszej litery w jednym miejscu działa a w innym nie:

<p id="poem1Content">
        Tej zimy przestałam pisać wiersze
         nagłe mroczne gęste
                    
         lekkie śnieżynki na wieżach słowa
         srebrnym ażurem oplatają przestrzenie
         tworząc świetliste kopczyki
         jak Twoje powieki nad ranem
                    
        tej zimy przestałam pisać wiersze
        napisałam Ciebie
</p>
<p id="s">to działa</p>

Przepraszam jeśli chaotycznie to napisałem ale nerwy mi już wysiadają...

komentarz zamknięcia: problem rozwiązany.

5 odpowiedzi

odpowiedź 6 stycznia 2019 przez pablop76 VIP (123,180 p.)
wybrane 6 stycznia 2019 przez Jakub 0

odpowiedź 6 stycznia 2019 przez Byczek_ Bywalec (2,570 p.)

https://css-tricks.com/almanac/selectors/f/first-letter/

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

Napisałem:

 <p id="firstPoemContent">
           <firstletter>T</firstletter>ej zimy przestałam pisać wiersze
            nagłe mroczne gęste
                    
            lekkie śnieżynki na wieżach słowa
            srebrnym ażurem oplatają przestrzenie
            tworząc świetliste kopczyki
            jak Twoje powieki nad ranem
                    
            tej zimy przestałam pisać wiersze
            napisałam Ciebie
</p>

Ale dalej nic...

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

Potrafił bym to zrobić za pomocą tagu <span>. Ale zadanie polega na tym by wykorzystać pseudo klasy.

odpowiedź 6 stycznia 2019 przez Grzegorz :> Dyskutant (8,050 p.)

Na codepenie wydaje mi się, że wszystko działa jak powinno.

https://codepen.io/gCode1/pen/rovNYB?&editable=true

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

No właśnie nie działa:

komentarz 6 stycznia 2019 przez Grzegorz :> Dyskutant (8,050 p.)

hmm.. dziwne. Nie wiem czy to pomoże, ale spróbuj ":first-letter" zamiast "::first-letter".

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

Nadal nic, oczywiście dla wszelkich znaczników <p> działa tylko nie tego :/

Trudno... tymczasowo będzie tam span, potem nad tym jeszcze pomyślę.

komentarz 6 stycznia 2019 przez Grzegorz :> Dyskutant (8,050 p.)

U Ciebie nie działa, ale u mnie i arcesa tak.

komentarz 6 stycznia 2019 przez pablop76 VIP (123,180 p.)

Problem w tym, że Twoja pierwsza litera to spacja. Nie rób takich wcięć w kodzie html do tego jest css.

<p id="poem1Content">
        Tej zimy przestałam pisać wiersze
         nagłe mroczne gęste
                     
         lekkie śnieżynki na wieżach słowa
         srebrnym ażurem oplatają przestrzenie
         tworząc świetliste kopczyki
         jak Twoje powieki nad ranem
                     
        tej zimy przestałam pisać wiersze
        napisałam Ciebie
</p>

Zapisz to jak należy i będzie ok.

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

No ok, ale mam zrobić to tak żeby cały tekst w tagu p był przytwierdzony do lewej krawędzi ekranu? Ja robię wcięcia tylko dlatego żeby kod html jakoś wyglądał... to już chyba lepiej w tym przypadku span'a używać... Chyba że ja źle zrozumiałem.

komentarz 6 stycznia 2019 przez pablop76 VIP (123,180 p.)

Ja robię wcięcia tylko dlatego żeby kod html jakoś wyglądał

O tego są pluginy do edytorów, żeby układały kod według reguł.

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

bo ja ogólnie użyłem w CSS właściwości pre-wrap. Rozumiem że to generalnie nie jest dobre rozwiązanie?

1	komentarz 6 stycznia 2019 przez pablop76 VIP (123,180 p.) Uzależniasz html od css. Jeżeli ktoś, lub Ty zechcesz zminifikować html to co wtedy?

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

Dzięki za pomoc i rady, daj swój główny komentarz jako odpowiedź to dam NAJ ;)

odpowiedź 6 stycznia 2019 przez arces Pasjonat (17,700 p.)

Po pierwsze staraj się nie stylować po ID.

Po drugie niby w jaki sposób Ci nie działa, jeżeli kod, który wstawiłeś na codepen dobrze pokazuje pierwsze litery w danym paragrafie?

komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)

I wiersz i testowy akapit ( to działa ) mają mieć wystylizowaną pierwszą literę:

#s::first-letter { /*działa*/
    font-size: 25pt;
    color: #4dd664;   
}
 
#poem1Content::first-letter { /*nie działa*/
    font-size: 25pt;
    color: #4dd664;
}

Ale jak widać na zrzucie ekranu... tylko w jednym miejscu stylizacja się powiodła.