nicht angemeldet
css Anfänger braucht hilfe!
Hallo,
ich habe zwei Probleme bezüglich der Vorlage.
- Wie bekomme ich den Abstand zwischen h2 (Schrift 1) und p (Das ist ein normaler Text) weg.
- Wieso bricht die Überschrift1 so seltsam um, wenn man den Browser kleiner macht.
Danke und Gru0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test</title>
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<style type="text/css">
<!--
body { font:15px Arial,sans-serif; line-height:1.4em; background:#ffffff; }
#container { width:98%; text-align:left; background:#ffffff; color:#303030; }
#header {height:100px; width:99%; background: #999999; color:#ffffff;}
#header h1{font-size:2.4em; padding: 10px 10px 10px 10px; background-color:inherit; color:#ffffff; letter-spacing:-2px; font-weight:normal; }
#header h2 {font-size:1.4em; padding: 10px 10px 10px 10px;background-color:inherit; color:#f0f2f4; letter-spacing:-1px; font-weight:normal;}
#header h3 {font-size:1.4em; background-color:inherit; color:#f0f2f4; letter-spacing:-1px; font-weight:normal;}
#content{ float:left; width:60%; font-size:0.9em;}
#content h2{ color: #222222; border-bottom: 1px dotted #CCCCCC; font: normal 190%/100% Arial,Tahoma,sans-serif; padding-bottom: 0px;background: #666666;}
#content p{ color: #222222; background: #999999; font: normal 170%/100% Arial,Tahoma,sans-serif;}
#right{ float:right; width:35%; padding: 10px 5px 10px 0; line-height:1.4em;}
#right h2{background: #ffffff; margin: 0 10px 0 0; font-family: Verdana,Arial,Tahoma,sans-serif; font-size: 11px; font-weight: bold; color: #444444; padding: 5px 8px 5px 10px;}
-->
</style>
</head>
<body>
<div id="container" >
<div id="header">
<h1>Überschrift1 dies ist eine sehr lange schrift</h1>
<h2>Überschrift2</h2>
</div>
<br/>
<div id="content">
<h2>Schrift 1</h2>
<p>Das ist ein normaler Text</p>
<br/></div>
<div id="right">
<div id="avmenu">
<h2>Schöne Fotos</h2>
<br/><br/>
<br/><br/>
</div>
<br/>
</div>
</body>
</html>
-
Zum ersten Problem: Probier mal
* { margin: 0; padding: 0; }
in Dein CSS.
-
- Wie bekomme ich den Abstand zwischen h2 (Schrift 1) und p (Das ist ein normaler Text) weg.
Es gibt bei CSS zwei Arten von Abständen, den Innenabstand padding und den Außenabstand margin (dazwischen liegt der Rahmen border, der intessiert hier aber natürlich nicht).
Die Außenabstände haben die besondere Eigenschaft, dass sie zum jeweils größten Wert zusammengefasst werden. Hat Element A einen Außenabstand von 2 und Element B einen von 1, beträgt der Abstand zwischen A und B 2.
Du hast in deiner Seite weder den Außenabstand von h2, noch von p entfernt. Setze margin-bottom für h2 auf 0, sowie margin-top entweder für p ebenfalls auf 0 oder für h2 + p. Letzteres betrifft nur jenes p, welches direkt auf h2 folgt.
- Wieso bricht die Überschrift1 so seltsam um, wenn man den Browser kleiner macht.
Was ist "seltsam"? Fallen Buchstaben zu Boden, bekommt sie grüne Füße? Oder meinst du den zu kleinen Zeilenabstand, den du dir mit …
body { font:15px Arial,sans-serif; line-height:1.4em; background:#ffffff; }
… selbst eingebrockt hast?
Von deinen Fragen unabhängig:
#header h1
#header h2
#header h3
#content h2Diese Aufteilung, genauer: die doppelte h2-Angabe erscheint mir etwas fragwürdig. Die Abstufung der Überschriften h1 bis h3 ergibt sich aus ihrer inhaltlichen Position, nicht danach, ob du sie in diesem oder jenem div platziert hast.