nicht angemeldet
Hallo,
ich brauche ein Layout, da ich aber keine Tabbellen mag versuche ich es mit DIV-Containern:
Ich habe aber folgendes Problem, die Container liegen untereinander und nicht nebeneinander . Im Internet habe ich float:"left" gefunden, aber wenn ich float:"left" verwende funktioniert es nicht. Das Layout soll so aussehen:
|-------------------------------------------------------------|
| | Titel | Liste |
| Logo |---------------------------------| |
| | Weiterer Text | |
| | | |
|-------------------------------------------------------------|
| Navigation | |
| | |
|-------------| |
| Weiteres | Hauptseite |
| | |
|-------------| |
| Impressum | |
| (als Link) | |
|-------------------------------------------------------------|
Dabei soll die obere Seite(Logo-Liste) proportional zur Bildschirmseite sein,
der untere Teil(Navigation-Hauptseite) dem Inhalt angepasst sein. Ich habe folgenden Code
für den oberen Teil genommen, der allerdings nicht funktioniert. Dies ist der HTML/PHP-Code
<!DOCTYPE html>
<?php
echo <<<TRANSLATE
<html>
<head>
<title>Seiten-Titel</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body><div id="main">
<div id="logo">
<img src="logo.gif" float="left"><div id="title"><div id="oben">Titel</div><div id="unten">Weiterer Text</div></div>
<div id="liste"><li><ul>Hier die Liste</ul></li></div></div>
</div>
</body>
</html>
TRANSLATE;
?>
Logo.gif hat die größe 150*150 Pixel.
Und hier der zugehörige CSS-Code(die Hintergrundfarben sind zur besseren Sicht der Container):
body{
background-color: white;
}
#main {
float: left;
}
#logo {
float: left;
height: 5cm;
}
#title {
float: left;
}
#oben {
background-color: green;
height: 50%;
}
#unten {
height: 50%;
background-color: red;
}
#liste {
background-color: yellow;
}
Matthias Apsel