HTML: Elemente von einer CSS-Formatierung ausschließen
Hallo Leute,
ich habe jetzt folgendes Problem: Ich habe eine Seite mit einer Übreschrift und dann einer Liste (Aufzählungen) und noch einen Div-Container mit Text. Da ich auf der ganzen Seite außer in der Überschrift (h1) eine bestimmte Schrift (Trebuchet MS) und eine bestimmte Schriftgröße und Zeilenabstand (95%/115%), habe ich die Formatierung auf den ganzen Body angewandt. Mein Problem ist aber jetzt dass die Überschrift (logischerweise) auch mit formatiert wird. Das mit der Schriftartrt ist ja ganz einfach - das geht, aber wegen der Schriftgröße habe ich es schon mit "font-size:100%" versucht, aber dadurch wird die Schrift nur richtig klein (wie Größe 12) (der Zeilenabstand geht komischerweise mit "normal" wieder zurückzusetzen).
Die Frage: Wie kann ich die Überschrift aus der body-Formatierung ausschließen (Ich möchte nicht ewig probieren bei wieviel Prozent die Schrift wieder richtig groß ist...)?
4 Antworten
Man kann nicht sagen "Formatiere body, aber nicht Untergeordnete h1". h1 musst du dann überschreiben, das gilt dann für alle h1.
Was in dem Zusammenhang sehr interessant ist, und dir ggf. gut helfen kann, sind Kombinationen verschiedener CSS-Elemente, sodass man sagen kann "Formatiere alle h1, die Unterelement von einem bestimmten div sind" oder "Formatiere alle h1, die ein bestimmtes Attribut auf einen bestimmten Wert gesetzt haben". Eine ganze Liste mit möglichen Patterns findest du hier: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
Wenn du auf die Links neben der Tabelle klickst, gibts auch Beispiele. Das ganze funktioniert bereits in CSS2, also wird von jedem Browser unterstützt
Ok. Cool! Das mit den Unterelementen wusste ich schon, aber das mit den Attributen ist mal nicht schlecht sich anzugucken...
Du könntest vielleicht auch einen div-Container erstellen, der die ganze Seite außer die Überschrift beinhaltet, und diesen formatieren...
Wenn du den ganzen Body formatiert hast, kannst du ein Element darin nicht einfach ausschließen. Nur überschreiben, wie du es ja auch schon getan hast.
Ok. Aber warum wird die Überschrift auf einmal so winzig wenn ich eingebe:
font:100%/100% Times New Roman;
Guck bitte auch mal in den geposteten Code rein ;)
Weil die Grundlage der 100% die Body-Font ist und nicht die Default-Font.
Poste doch mal den CSS-Code. Dann wirds leserlicher.
...
<style type="text/css">
body { margin:75px; margin-top:40px; margin-bottom:0px; font:95%/115% Trebuchet MS; }
h1 { width:80%; height:40px; background:#DCDDE4; border:thin solid; font-family:Times New Roman; line-height:normal; text-shadow:white 2px 2px; }
ul,ol { margin-left:-17px; }
#it { font-style:italic; font-weight:lighter; }
#pl { height:0px; }
ul#s li#zo { margin-left:0px; }
ul#s li { list-style-type:none; margin-left:-20px; }
ul#s li:before { content:"- "; }
ul#o { list-style-type:none; margin-left:-37px; }
div#info { width:40%; height:auto; vertical-align:top; margin-top:40px; border:thin solid; }
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center>
<h1>Checkliste – Quelleninterpretation (Textquelle)</h1>
</center>
<div id="content">
...Mehrere Aufzählungen...
</div>
<div id="info">
...Text/Absatz...
</div>
</body>
</html>
Das hab ich mir auch schon gedacht - aber ich wollte dann trotzdem mal wissen ob es da eine Möglichkeit gibt... ;)