Hi Leute,
ich bin beim erstellen meiner Website auf ein Problem in der Kopfleiste auf ein Problem gestoßen. Ich möchte das Bild zunächst nach rechts außen an den Rand bekommen und dann sowohl die Überschrift, als auch das Bild in dem grünen Kasten horizontal Zentrieren:
Nun um das bild nach recht zu Verschieben, könnte ich anhand der Breite der Überschrift einen Margin wert für das Bild errechnen, aber gibts da nicht eine einfachere Methode?
Zu dem Problem mit dem Zentrieren hatte ich mir überlegt, die Größe das Grünen Kastens mithilfe von Padding zu bestimmen, indem ich es für oben und unten gleich wähle. Nun wird aber nur das bild Zentriert und die Überschrift nicht, da sie nicht so hoch wie das Bild ist. Wie lässt sich dieses Problem lösen?
Hier mein HTML - Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title></title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body>
<div id="kopfbereich">
<h1>Das ist nur ein Test!</h1>
<img src="bilder/herbst.jpg" alt="Das ist nur ein Test!"/>
</div>
</body>
</html>
Nun der CSS - Code:
Code:
* {
margin: 0;
padding: 0;
}
#kopfbereich {
border-color: #00FF00;
border-style: solid;
height: 200px;
}
#kopfbereich h1 {
border-color: red;
float: left;
}
#kopfbereich img {
width: 220px;
height: 165px;
}
Ich hoffe ihr könnt mir weiterhelfen
Gruß
Jonas