• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

<p> </p> Tag zum Beispiel, verschiedene Formate

B

Basti 13

Neues Mitglied
Hey Leute, wenn ich in meinem Dokument zum Beispiel

<p> Dieser Text soll blau sein <p>

und

<p> Dieser Text ist fett, Größe 30 und dunkelrot </p>

haben möchte, wie mache ich das?

Also mit CSS wenn möglich.


Weil wenn ich einmal für p{ .. } definiere, dann bekommen ja ALLE p Elemente diese Formatierung, und nicht nur bestimmte.

wie kann ich das machen, dass ich die p Elemente in verschiedenen Formaten darstelle im gleichen Dokument?


Danke
 
Tronjer schrieb:
In dem du dein <p> in DIVs steckst und diese mit IDs und Klassen versiehst.
Zum Vergrößern anklicken....
Entweder versteh ich deine Antwort falsch oder du schreibst tatsächlich groben unsinn.
Er muss doch nicht, um Ps zu formatieren, diese in formatierte DIVs stecken, damit die Ps deren formatierung erben!

Schreibe deine P-Open so
HTML: 
<p class="beispiel_klasse"> Bla Text Blubb </p>
oder so
HTML: 
<p id="beispiel_ID"> Bla Text Blubb </p>
Das CSS sieht dann so aus
Class:
Code: 
.beispiel_klasse { ... }
ID
Code: 
#beispiel_ID { ... }

Ich empfehle jedoch die Nutzung von Klassen statt IDs, da eine ID pro angezeigter Seite nur einmal genutzt werden darf.
 
Space Vampire hat recht. Du suchst nach CSS-Klassen. Daher habe ich dein Topic auch in den CSS-Bereich verschoben, mit dem Du dich näher auseinandersetzen solltest.
 
Space Vampire schrieb:
Entweder versteh ich deine Antwort falsch oder du schreibst tatsächlich groben unsinn.
Er muss doch nicht, um Ps zu formatieren, diese in formatierte DIVs stecken, damit die Ps deren formatierung erben!
Zum Vergrößern anklicken....

Natürlich nicht, aber auf diese Weise kann er seine <p> als Nachfahrenelemente ansprechen und muss nicht jedes Mal Klassen vergeben. Es können ja durchaus wenige DIVs und viele Absätze auf einer Seite vorkommen.
HTML: 
<!DOCTYPE html>
<html>
 <head>
<title>P</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
    p {
        font-size: 14px;
    }

    #div_1 p {
        font-size: 15px;
    }

    #div_2 p {
        font-size: 16px;
    }
</style>
</head>
<body>
    <div id="div_1"><p>foo</p></div>
    <div id="div_2"><p>bar</p></div>
</body>
</html>
 
@tronjer

Tut mir Leid dir das sagen zu müssen, aber rein aus semantischen Gesichtspunkten ist das

HTML: 
<body>     
    <div id="div_1"><p>foo</p>
    </div>     
    <div id="div_2"><p>bar</p>
    </div> 
</body>
nicht zu empfehlen.

das P-Element beschreibt einen Absatz. Wenn ich 2 Absätze habe dann schreibe ich das auch so.

HTML: 
<body>     
    <p>foo</p>
    <p>bar</p>
</body>

Absätze sollten immer gleich formatiert sein, schon aus stilistischen Gründen. Wenn man aber aus welchem Grund auch immer einen Absatz anders formatieren will, dann vergebe ich eine klasse oder ich spreche das Element mit Pseudeselektoren direkt an.
Das referenzieren eines Elementes durch Pseudoselektoren sollte immer den Klassen vorgezogen werden. So empfiehlt es auch das W3C.

In diesem Fall um bei dem Beispiel zu bleiben sähe das so aus:

HTML: 
p:first-child { font: 30px normal blue;}
p:last-child { color:blue; }

Quelle:Selectors Level 3
 
Ja, ich weiß, das ist eine Glaubensfrage, und nein, ich koche auch keine verschachtelten DIV-Suppen, aber "frei schwebende" Elemente stören meinen Ordnungssinn. :razz:

Das <p> Tag wid verwendet, um einen Textabsatz zu kennzeichnen, wenn sich dazu noch Überschriften, Bilder oder Tabellen gesellen, dann kapsel ich die zusammengehörenden Elemente in einem DIV, um dieses als Ganzes positionieren zu können.

Ich baue meine Seiten grundsätzlich Top-down.

Dass <p> Tags immer gleich formatiert sein sollten, werde ich mir für die Zukunft aber trotzdem merken. Bisher habe ich diese Regel nur bei Überschriften berücksichtigt.
 
Zuletzt bearbeitet:
Das Ganze ist hier als Beispiel zu betrachten. Mir ist schon bewusst, das man ohne Blockelemente nicht auskommt. Aber selbst dann wäre eine Div hier ausreichend.

HTML: 
    <body>          
        <div id="div_1">
            <p>foo</p>         
            <p>bar</p>     
        </div>  
    </body>

Sehr interessant zu lesen sind die Artikel von Jens O. Meiert dazu.
 
Ok danke, ich werde wahrscheinlich die variante mit dem "class" nehmen.

Hab noch ne Frage:


Wenn ich eine Website habe, wo ich 2 Bilder drin habe ( eines links und bisschen unten, das ajdere reczts und weiter oben)

Wie kann ich diese bilder positionieren, also damit ich den abstand von ihnen nebeneinander bestimmen kann usw..

Danke
 
Basti 13 schrieb:
Wenn ich eine Website habe, wo ich 2 Bilder drin habe ( eines links und bisschen unten, das ajdere reczts und weiter oben)

Wie kann ich diese bilder positionieren, also damit ich den abstand von ihnen nebeneinander bestimmen kann usw..
Zum Vergrößern anklicken....

Alle Elemente findest du hier: HTML5 Doctor, helping you implement HTML5 today
CSS Version 2.1 findest du hier erklärt: CSS 4 You - The Finest in Stylesheets

Lese dir erst mal Anleitungen durch:HTML - berblick

Um auf deine Frage zu antworten:
Man kann nicht einfach sagen, dieser oder jene ist der richtige Weg. Es kommt auf den Kontext an. Sind deine Bilder Hintergrundbilder gelten andere Regeln als wenn es sich um Icons handelt innerhalb eines Textes. Wenn deine Bilder Teil einer Galerie sind ist es was anderes als wenn sie bildhafter Bestandteil einer Erklärung eines Zusammenhanges sind.

Das sind alles Fälle wo andere Möglichkeiten der Positionierung benutzt werden können. Frage dich also vorher, was ist dieses Bilder innerhalb meiner Struktur.

Darum solltest du dir vorab Gedanken machen, wie deine Seite strukturiert ist, wie ist sie aufgeteilt ist und wie sie sich bei unterschiedlichen Ausdehnungen verhalten soll. Stichwort ist hier der Viewport.

Wenn du alle Fragen geklärt hast, fertigst du dir eine Sizze an und suchst nach einer Layoutvorlage, die deinen Wünschen am nächsten kommt und passt diese an.
Zum Schluss kümmerst du dich um die Stylesheet-Datei.
 
Ok ich habe jetzt folgenden Code:

_________________________________________________________________________
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Sebastian">
<meta name="editor" content="html-editor phase 5">

<style type="text/css">

.header{
 font-family: Calibri;
 font-size: 35pt;
 text-align: center;
 color: black;
 }

.right{
 font-family: Tunga;
 font-size: 20pt;
 text-align: right;
 color: black;
 }

.left{
 font-family: Tunga;
 font-size: 20pt;
 text-align: left;
 color: black;
 }

.center{
 font-family: Tunga;
 font-size: 20pt;
 text-align: center;
 color: black;
 }

a.mittel:link{
 color:blue;
 text-decoration:none
 font-size: 20pt;
 }

a.mittel:visited{
 color:blue;
 text-decoration:none
 font-size: 20pt;
 }

a.mittel:active{
 color:blue;
 text-decoration:none
 font-size: 20pt;
 }

a.mittel:hover{
 color:blue;
 text-decoration:underline
 font-size: 20pt;
 }

</style>

</head>
<body text="#000000" bgcolor="#FFFFFF" link="FF0000" alink="#FF0000" vlink="FF0000" hlink="FF0000">


<p class="header">Tony Hawk</p> <br>


<a href="Tony_Hawk_Karriere.html" class="mittel">Karriere von Tony</a>  <br><br>



<p class="right">Steckbrief:</p>

<p class="right"><img src="Tony-Hawk.jpg" width="130" length="130"></p>



</body>
</html>
_________________________________________________________________________________________________________


Aber irgendwie verändert sich die Schirft bzw. das Unterstrichene (was eigentlich beim drüberfahren sein sollte) nicht...was ist da los?
 
Zuletzt bearbeitet:
Bitte zeige uns immer den ganzen HTML-Code inklusive des Doctype.

Benutze für den Code den Html-Button, der erscheint wenn du unter dem Eingabefenster auf erweitert klickst.

Es ist besser für dich erst mal eine Anleitung zu lesen. Warum ignorierst du das.

Deine Styleangaben ergeben überhaupt keinen Sinn, sind mehrfach aufgeführt und haben natürlich einen Fehler, sonst würde es ja gehen.
 
Ok, habe den ganzen Text eingefügt.

Aber was ist falsch und wieso ergeben Sie keinen Sinn?

Sie sollten die Farbe und die Text-Decoration beim Link verändern (Unbesuchter Link, Besuchter Link, wenn man mit dem Mauszeiger drüberfährt, und während dem Klicken) (Die Textsize ist nur als kleiner Test, aber das geht eben nicht)
 
Dein Code müsste so aussehen wie unten. Erkennst du den Unterschied:

HTML: 
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title> Seitentitel fehlt
        </title>
<style type="text/css">
body {
    font-family: Tunga;
    font-size: 20pt;
    color: black;
}
h1 {
    font-family: Calibri;
    font-size: 35pt;
    text-align: center;
    color: black;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.center {
    text-align: center;
}
a.mittel {
    color: blue;
    text-decoration: none;
}
a.mittel:visited {
}
a.mittel:active {
}
a.mittel:hover {
    text-decoration: underline;
}
</style>
    </head>
    <body><h1>Tony Hawk</h1>
        <a href="Tony_Hawk_Karriere.html" class="mittel">Karriere von Tony</a>  
        <p class="right">Steckbrief:
        </p>
        <p class="right">
            <img src="Tony-Hawk.jpg" width="130" alt="Bild von Tony Hawk">
        </p>
    </body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben