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;
}