h1 und css

Beitrag von **Klaus** » 26.01.2004, 09:15

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&#91;title&#93; &#123; color&#58;red; &#125;
 h1&#91;kapitel="uebersicht"&#93; &#123; color&#58;blue; &#125;
 div&#91;spalte=links&#93;&#91;zeile=oben&#93; &#123;border&#58;1px solid #dddddd;&#125;
 *&#91;lang=en&#93;&#123;quotes&#58;"'" "'";&#125;
</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

von **Anzeige von ABAKUS** »

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

Beitrag von **Jörg** » 26.01.2004, 09:30

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 &#123; color&#58;red; &#125; 
h1.kapitel &#123; color&#58;blue; &#125; 
div&#91;spalte=links&#93;&#91;zeile=oben&#93; &#123;border&#58;1px solid #dddddd;&#125; 
*&#91;lang=en&#93;&#123;quotes&#58;"'" "'";&#125; 
</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>

Beitrag von **Jörg** » 26.01.2004, 09:38

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

von **Anzeige von ABAKUS** »

Beitrag von **Klaus** » 26.01.2004, 12:06

hallo Jörg.
Besten Dank.
Ich will das wegen der sumas machen.
Ist das so richtig?

Code: Alles auswählen

<td colspan="3" class="h1">keyword bla sülz</td>

.h1 habe ich eben nach meinem Geschmack definiert.
Beispiel: .h1

Code: Alles auswählen

.h1 &#123;	
font-family&#58; bold small-caps normal 9px Verdana, Arial, Helvetica, sans-serif;
color&#58; #FFFFFF;
background&#58; #333399;letter-spacing&#58; normal;text-align&#58; center;text-indent&#58; 2pt;vertical-align&#58; middle;
	word-spacing&#58; normal;border&#58; 1px solid black;&#125;

Danke.
gruß
klaus

Beitrag von **Webby** » 26.01.2004, 12:09

Tipp: Manchmal ist die absatz bei h1 nicht gewunscht. Dafür kann mann die Margin: attribut nutzen. z.B.

Code: Alles auswählen

 H1 &#123;
	font-size&#58; 14pt;
	margin-top&#58; 0pt;
	margin-bottom&#58; 0pt;
&#125;

Beitrag von **Jörg** » 26.01.2004, 12:28

hallo klaus,

Ich will das wegen der sumas machen.
Ist das so richtig?
Code: Alles auswählen
<td colspan="3" class="h1">keyword bla sülz</td>

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:

Code: Alles auswählen

<td colspan="3"><h1>keyword bla sülz</h1></td>

(und entsprechend h1 ohne punkt im style sheet)

Beitrag von **Klaus** » 26.01.2004, 20:20

Hallo jörg.
Danke. Brauch noch mal Unterstützung.
Doch, Du hast recht: ich möchte das keyword-enthaltene Element als h1 deklarieren.

Code: Alles auswählen

<td colspan="3"><h1>keyword bla sülz</h1></td>

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  &#123;	
font-family&#58; bold small-caps normal 9px Verdana, Arial, Helvetica, sans-serif;
color&#58; #000000;
background&#58; #99CCFF;letter-spacing&#58; normal;text-align&#58; center;text-indent&#58; 2pt;vertical-align&#58; middle;
	word-spacing&#58; normal;border&#58; 1px solid black;&#125;

Vielen dank und Gruß
Klaus

Beitrag von **Jörg** » 27.01.2004, 12:58

schriftgröße kannst du über font-size: definieren

Beitrag von **Klaus** » 27.01.2004, 13:36

Hallo Jörg.
Danke. so funzt es jetzt auch.

Code: Alles auswählen

h1 &#123;
color &#58; #FFFFFF; 
font-size &#58; 12px; 
font-family &#58; Verdana, "Sans Serif"; 
margin-bottom &#58; 1px; 
margin-left &#58; 2px; 
background&#58; #666699;letter-spacing&#58; normal;text-align&#58; center;text-indent&#58; 2pt;vertical-align&#58; middle;
word-spacing&#58; normal;border&#58; 1px solid black;
height&#58; 20px;
&#125;

Ich dachte, dass hätte für die Größe sorge getragen (ging nämlich auch vorher) Na ja. Danke.

Gruß
Klaus