Antworten auf deine Fragen:
Neues Thema erstellen

Anfängliche Schwierigkeiten mit CSS

number

Noch nicht viel geschrieben

Hallo Leute,

ich arbeite mich in seit kurzem in CSS3 ein und habe damit kleinere Probleme. Hier z.B. möchte die font-size nicht auf den gesamten Text greifen. Lediglich ist das DIV Element mit der Class dessert entsprechend angepasst. Auch wird der erste Satz in der Classe dessert nicht in der richtigen größe angezeigt. Wodran liegt das?

Code:
<!DOCTYPE html>
<html>
<head>
    <title>This is my Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
        body {
            font-family: 'Times New Roman', Times, serif;
            font-size: 1.3em;
        }
        h1 {
            font-family: 'Cinzel', serif;
        }
</style>
</head>
<body>
<header>
    <h1>My Heading</h1>
</header>
<div id="wrapper">
    <div class="first">
        <p>
            <h2>Classic</h2>
            <small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vitae voluptatum fuga ullam voluptatem delectus tenetur ducimus illum ut maiores?</small>
         </p>
    </div>
    <div class="second">
        <p>
            <h2>Modern</h2>
            <small>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia sunt magni inventore! Quos quae consequatur consequuntur culpa perspiciatis doloremque provident.</small>
         </p>
    </div>
    <div class="third">
        <p>
            <h2>Dessert</h2>
            <small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quasi eaque facilis? Voluptas explicabo laborum molestias vitae cumque nulla eligendi!.</small>
        </p>
    </div>
</div>
<footer>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus libero, incidunt earum aliquam culpa commodi optio, iste blanditiis sunt, quia architecto harum repudiandae eius. Minus facere illo provident sed, culpa pariatur nesciunt similique hic beatae ut voluptatem quisquam libero, tenetur debitis, dolorem veritatis dicta necessitatibus iusto deleniti. Suscipit beatae odit nobis saepe delectus voluptatibus soluta inventore voluptas incidunt dicta consequuntur ex ducimus magni labore explicabo earum totam, iusto amet accusamus error in! Molestias ducimus natus ipsum numquam, ipsa obcaecati blanditiis dolorum repellat assumenda laboriosam temporibus nemo quisquam reiciendis consequatur molestiae repellendus quidem, tenetur dolores magni minima veniam velit odio? Quaerat?
</footer>

</body>
</html>
 

owieortho

Aktives Mitglied

In Deinem Beispiel werden in der style-Anweisung weder die wrapper-id (#wrapper) noch die first-, second- und third-classes (.first, .second, .third) deklariert. Woher soll also ein anderes Aussehen stammen?
Beispiel (nicht schön aber es zeigt, worum es geht):
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>This is my Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
         
        }
        body {
            font-family: 'Times New Roman', Times, serif;
            font-size: 1.3em;
        }
        h1 {
            font-family: 'Cinzel', serif;
        }
        #wrapper {
            background-color: #67989a;
        }
        .first {
            font-size: 1.5em;
            color: #ff0000;
        }
        .second {
            font-size: 1.0em;
            color: #00ff00;
        }
        .third {
            font-size: 0.5em;
            color: #56579b;
        }
</style>
</head>
<body>
<header>
    <h1>My Heading</h1>
</header>
<div id="wrapper">
    <div class="first">
        <p>
            <h2>Classic</h2>
            <small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem vitae voluptatum fuga ullam voluptatem delectus tenetur ducimus illum ut maiores?</small>
         </p>
    </div>
    <div class="second">
        <p>
            <h2>Modern</h2>
            <small>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia sunt magni inventore! Quos quae consequatur consequuntur culpa perspiciatis doloremque provident.</small>
         </p>
    </div>
    <div class="third">
        <p>
            <h2>Dessert</h2>
            <small>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quasi eaque facilis? Voluptas explicabo laborum molestias vitae cumque nulla eligendi!.</small>
        </p>
    </div>
</div>
<footer>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus libero, incidunt earum aliquam culpa commodi optio, iste blanditiis sunt, quia architecto harum repudiandae eius. Minus facere illo provident sed, culpa pariatur nesciunt similique hic beatae ut voluptatem quisquam libero, tenetur debitis, dolorem veritatis dicta necessitatibus iusto deleniti. Suscipit beatae odit nobis saepe delectus voluptatibus soluta inventore voluptas incidunt dicta consequuntur ex ducimus magni labore explicabo earum totam, iusto amet accusamus error in! Molestias ducimus natus ipsum numquam, ipsa obcaecati blanditiis dolorum repellat assumenda laboriosam temporibus nemo quisquam reiciendis consequatur molestiae repellendus quidem, tenetur dolores magni minima veniam velit odio? Quaerat?
</footer>
 
</body>
</html>
Solltest Du die fraglichen Angaben in einer externen .css-Datei haben, fehlt der Link dorthin.

VG
O.
 

dn3d_fanboy

Aktives Mitglied

Eine Klasse "dessert" sehe ich jetzt nirgends.
Bei mir wird nur der Text im Footer groß dargestellt, was aber auch logisch ist, wenn du sonst die Texte in <small>-Tags packst.
BTW: Überschriften gehören nicht in <p>-Tags.
 

krid2873

Noch nicht viel geschrieben

Guten Morgen,

...
Auch wird der erste Satz in der Classe dessert nicht in der richtigen größe angezeigt...

Du meinst den DIV-Container mi der Klasse third? Dort werden die Inhalte im Textabsatz <p>...</p> mit <small>...</small> formatiert. Die nächsten Sätze, also die gößer aussehen, sind unformatiert und stehen im Footer.
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

In einem Absatz können keine weiteren block-Texte wie Überschriften stehen. Das nur am Rande falls man sich wundert warum weitere Sachen nicht angezeigt werden wie gewünscht.
 

number

Noch nicht viel geschrieben

Hallo,

Ja, stimmt natürlich. Bin irtümlich davon ausgegangen, dass der das trotzdem übernimmt.

Dass das h1 nicht in ein p tag gehört ist auch ein guter Hinweis. Danke.

Das mit dem small Element ist ja eigentlich egal in diesem Fall, der Grund lag ja dadran, dass ich meine HTML Elemente nicht im CSS deklariert habe.

Da ich jetzt wieder ein wenig Zeit habe, werde ich mich damit nochmals beschäftigen. Die Hilfe die man hier bekommt ist sehr hilfreich, vielen Dank dafür.

Wie würdet ihr mit dem Layouten Anfangen? Erstmal mit Flex starten oder direkt gleich zu den Gridlayouts einsteigen?
 
Zuletzt bearbeitet:

Myhar

Hat es drauf

Wie würdet ihr mit dem Layouten Anfangen? Erstmal mit Flex starten oder direkt gleich zu den Gridlayouts einsteigen?

Flexbox dort verwenden wo es sinnvoll ist und gridlayout dort verwenden wo es sinnvoll ist.
Es ist kein entweder oder es ist dafür gedacht in kombination verwendet zu werden für unterschiedliche Anwendungsbereiche.

Ist wie wenn jemand fragt ob er in der Küche erst lernen soll mit dem Ofen oder mit dem Kochfeld umzugehen. Beides hat seinen Aufgabenbereich und manche Gerichte kann man auch da und dort machen :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben