• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
349 wizyt
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

0 głosów
odpowiedź 6 stycznia 2019 przez pablop76 VIP (123,540 p.)
wybrane 6 stycznia 2019 przez Jakub 0
 
Najlepsza
  komentarz 32 minuty temu przez pablop76 Szeryf (79,010 p.)
0 głosów
odpowiedź 6 stycznia 2019 przez Byczek_ Bywalec (2,570 p.)
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.
0 głosów
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.

1
komentarz 6 stycznia 2019 przez pablop76 VIP (123,540 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,540 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,540 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 ;)
0 głosów
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.

komentarz 6 stycznia 2019 przez arces Pasjonat (17,700 p.)
Sprawdź sobie kod na codepen.io. Tam obie pierwsze litery paragrafów są zielone.
0 głosów
odpowiedź 6 stycznia 2019 przez Mateusz Pijanowski Bywalec (2,130 p.)
Może problem leży po stronie cachu przeglądarki? Spróbuj odpalić stronę w trybie incognito lub w innej przeglądarce.
komentarz 6 stycznia 2019 przez Jakub 0 Pasjonat (23,120 p.)
Na innej wyszukiwarce zadziałało. A na tej raz działa a raz nie :/ Masakra...

Podobne pytania

0 głosów
0 odpowiedzi 325 wizyt
pytanie zadane 3 listopada 2022 w HTML i CSS przez MarcelM Początkujący (410 p.)
0 głosów
4 odpowiedzi 770 wizyt
pytanie zadane 13 czerwca 2022 w HTML i CSS przez zbiku25 Gaduła (3,000 p.)
0 głosów
1 odpowiedź 228 wizyt
pytanie zadane 2 sierpnia 2020 w HTML i CSS przez niezalogowany

93,157 zapytań

142,171 odpowiedzi

321,879 komentarzy

62,486 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 224p. - Marcin Putra
  2. 224p. - nidomika
  3. 223p. - dia-Chann
  4. 221p. - ssynowiec
  5. 217p. - Mikbac
  6. 216p. - CC PL
  7. 215p. - Łukasz Piwowar
  8. 212p. - zmmz89
  9. 210p. - Adrian Wieprzkowicz
  10. 208p. - rafalszastok
  11. 206p. - Michal Drewniak
  12. 204p. - Łukasz Eckert
  13. 202p. - rucin93
  14. 200p. - robwarsz
  15. 198p. - TheLukaszNs
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...