Logo

Ein Logo neben der Titelzeile, 760 Pixel breit

Ein Logo neben der Titelzeile, 760 Pixel breit

Ein Logo gehört auf fast jede Seite und es lässt sich ganz einfach neben dem Titel plazieren.


<img src="logo.gif" style="float:right;width:156px;height:39px;" alt="Logo">
<h1 id="title">Ein Logo neben der Titelzeile, 760 Pixel breit</h1>

Die Eigenschaft float plaziert Elemente auf der Seite und lässt andere vorbeifließen. In diesem Fall wird dem Logo float:right zugewiesen. Das bedeutet, dass das Logo rechtsbündig plaziert wird und der folgende Inhalt, in diesem Fall das <h1>-Tag, links vorbeifließt, bzw. links steht.
Mit clear beendest du diesen Effekt, d.h. für das erste Element, dass nicht mehr floaten soll, musst du clear notieren. Deshalb ist in den Stylesheet-Angaben für den <div>-Container des Menüs u.a. folgendes eingefügt:

#menu {
 clear:left;
 border-top:1px solid #669999;
}

Der Rahmen unter der Titelzeile ist in Wirklichkeit ein Rahmen oben im Menü. Da die Titelzeile aus zwei Elementen besteht, ist dies die elegantere Lösung. Und damit der Inhalt des <h1>-Tags schön nach unten gegen den Rahmen ausgerichtet ist, benötigst du nur eine Höhenangabe und einen Innenabstand von oben:

/* Die Titelzeile */
#title {
padding-top:15px;
height:24px;
}