Seite 1 von 1
h1 und css
Verfasst: 26.01.2004, 09:15
von Klaus
Guten Morgen.
Ich möchte den wichtigen content meiner Seite mit <h1> deklarieren.
Da h1 ja selber nicht besonders schön aussieht, kann man es doch mit css gestalten. Ist das richtig?
Dieser style soll aber nur z.Zt. leider nur für die Geckos Mozilla und Netscape ab Version 6 funzen.
Code: Alles auswählen
<html>
<head>
<style type="text/css">
h1[title] { color:red; }
h1[kapitel="uebersicht"] { color:blue; }
div[spalte=links][zeile=oben] {border:1px solid #dddddd;}
*[lang=en]{quotes:"'" "'";}
</style>
<title>Attributabhängige Formatierungen</title>
</head>
<body>
<h1 title="Überschrift">Eine rote Überschrift</h1>
<h1 kapitel="uebersicht">Eine blaue Überschrift</h1>
<div spalte=links zeile=oben>
Ein div mit Rahmen
</div>
</body>
</html>
Welches style muss ich denn nehmen, dass er auch für den IE funzt?
Danke und Gruß
Klaus
Verfasst:
von
Hochwertiger Linkaufbau bei ABAKUS:
- Google-konformer Linkaufbau
- nachhaltiges Ranking
- Linkbuilding Angebote zu fairen Preisen
- internationale Backlinks
Wir bieten
Beratung und
Umsetzung.
Jetzt anfragen:
0511 / 300325-0
Verfasst: 26.01.2004, 09:30
von Jörg
wenn das mit dem selector [] beim ie nicht funztz, kannst du verschiedene klassen für h1 definieren:
Code: Alles auswählen
<html>
<head>
<style type="text/css">
h1.title { color:red; }
h1.kapitel { color:blue; }
div[spalte=links][zeile=oben] {border:1px solid #dddddd;}
*[lang=en]{quotes:"'" "'";}
</style>
<title>Attributabhängige Formatierungen</title>
</head>
<body>
<h1 title="Überschrift" class="title">Eine rote Überschrift</h1>
<h1 kapitel="uebersicht" class="kapitel">Eine blaue Überschrift</h1>
<div spalte=links zeile=oben>
Ein div mit Rahmen
</div>
</body>
</html>
Verfasst: 26.01.2004, 09:38
von Jörg
nachtrag:
noch besser wäre es imho mit h1 und h2 zu arbeiten, eine h1 pro seite reicht, und für eine hierarchie der überschriften gibt es ja extra die abstufung h1 bis h7
Verfasst: 26.01.2004, 12:06
von Klaus
hallo Jörg.
Besten Dank.
Ich will das wegen der sumas machen.
Ist das so richtig?
.h1 habe ich eben nach meinem Geschmack definiert.
Beispiel: .h1
Code: Alles auswählen
.h1 {
font-family: bold small-caps normal 9px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background: #333399;letter-spacing: normal;text-align: center;text-indent: 2pt;vertical-align: middle;
word-spacing: normal;border: 1px solid black;}
Danke.
gruß
klaus
Verfasst: 26.01.2004, 12:09
von Webby
Tipp: Manchmal ist die absatz bei h1 nicht gewunscht. Dafür kann mann die Margin: attribut nutzen. z.B.
Code: Alles auswählen
H1 {
font-size: 14pt;
margin-top: 0pt;
margin-bottom: 0pt;
}
Verfasst: 26.01.2004, 12:28
von Jörg
hallo klaus,
Ich will das wegen der sumas machen.
Ist das so richtig?
dann hast du aber kein element h1, welches die sumas berücksichtigen (sondern nur eine css-klasse "h1") - oder willst du, dass das keyword enthaltende element nicht als h1 gewertet wird?
ansonsten:
(und entsprechend h1 ohne punkt im style sheet)
Verfasst: 26.01.2004, 20:20
von Klaus
Hallo jörg.
Danke. Brauch noch mal Unterstützung.
Doch, Du hast recht: ich möchte das keyword-enthaltene Element als h1 deklarieren.
So soll es in der Tat sein.
Nur... bei ddem folgenden Eintrag in die css-Datei kommt zwar der Hintergrund, es kommt der Rahmen, aber... die Schrift ist nach wie vor eben so groß wie h1.
geht das nicht anders?
Code: Alles auswählen
h1 {
font-family: bold small-caps normal 9px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background: #99CCFF;letter-spacing: normal;text-align: center;text-indent: 2pt;vertical-align: middle;
word-spacing: normal;border: 1px solid black;}
Vielen dank und Gruß
Klaus
Verfasst: 27.01.2004, 12:58
von Jörg
schriftgröße kannst du über
font-size: definieren
Verfasst: 27.01.2004, 13:36
von Klaus
Hallo Jörg.
Danke. so funzt es jetzt auch.
Code: Alles auswählen
h1 {
color : #FFFFFF;
font-size : 12px;
font-family : Verdana, "Sans Serif";
margin-bottom : 1px;
margin-left : 2px;
background: #666699;letter-spacing: normal;text-align: center;text-indent: 2pt;vertical-align: middle;
word-spacing: normal;border: 1px solid black;
height: 20px;
}
Ich dachte, dass hätte für die Größe sorge getragen (ging nämlich auch vorher) Na ja. Danke.
Gruß
Klaus