nicht angemeldet
DIV-Layout
0 0 
Matthias Apsel
0
DIV-Layout
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;
}
-
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.div-Elemente sind Blockelemente und nehmen daher die maximal zur Verfügung stehende Breite, sprich die des Elternelements abzüglich padding, ein solange du ihnen per CSS nichts anderes sagst.
Desweiteren solltest du die ids der Container nicht nach deren Position, sondern nach deren Inhalt benennen. id="unten" ist schlecht, id="title" ist gut. Du siehst den Unterschied?
Ausserdem produzierst du ganz fürchterliche div-Suppe. div-Elemente sind zur Gruppierung von Elementen und nicht dazu um mit ihnen andere tags zu ersetzen.
<div id="title"><div id="oben">Titel</div><div id="unten">Weiterer Text</div></div>möchte z.B. so aussehen
<div id="header"><h1 id="title">Titel</h1><p id="suptitle">Weiterer Text</p></div>Gewöhne dir bitte ein deinen Code semantisch auszuzeichnen.
so long
-
Hallo,
ich habe das Layout fertig gestellt,
habe nun aber das Problem,
das wenn ich zu viel Text in ein Feld laden, steht
der Text teilweise außerhalb des Layout. Wie kann ich
das vermeiden? Die Tipps werde ich noch berüksichtigen,
ich will mich jetzt vorerst nur mit dem Programmieren des
Php-Teil der Website auseinandersetzen und nur ein grobes Layout
zum entwickeln haben,<!DOCTYPE html> <html> <head> <title>Titel</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="main"> <div id="header"> <div id="logo"> <img id="log" src="logo.gif"> </div> <div id="middle"> <div id="up"> Oben</div> <div id="down"> Unten </div> </div> <div id="login"> Login-Script </div> </div> <div id="sidebar"> <div id="links"> Links</div> <div id="werkzeuge"> Werkzeuge</div> <div id="impressum"> Impressum<br>AGB</div> </div> </div> </body> </html>html{ background-color: white; height:100%; } body{ background-color: white; height:97%; } #main { background-color: green; height: 100%; } #header { /* border-style:inset; */ border-color:#FF9999; background-color: red; width: 100%; height: 15%; float: left; } #logo { height: 100%; width: 15%; float: left; } #log { height: 100%; width: 100%; } #middle { background-color: black; height: 100%; width: 65%; float: left; } #up { background-color: grey; height: 50%; width: 100%; float: left; } #down { background-color: brown; height: 50%; width: 100%; float: left; } #login { background-color: silver; height: 100%; width: 20%; float: left; } #sidebar { background-color: maroon; height: 85%; width: 15%; float: left; } #links { background-color: silver; height: 45%; width: 100%; float: left; } #werkzeuge { background-color: grey; height: 45%; width: 100%; float: left; } #impressum { background-color: yellow; height: 10.1%; width: 100%; float: left; }0x0ERROR
-
Hallo!
ich will mich jetzt vorerst nur mit dem Programmieren des
Php-Teil der Website auseinandersetzen und nur ein grobes Layout
zum entwickeln habenDa du HTML ausgeben willst, solltest du dich zunächst damit beschäftigen.
Und da du dein HTML mit CSS formatieren willst, solltest du dich auch damit beschäftigen!Räum erstmal deinen HTML-Code auf! Niemand hat Lust sich durch div-Suppe zu schlürfen die mit deinem Problem nicht das geringste zu tun hat. Anschließend solltest du dein CSS aufräumen. Einem Block-Element 100% Breite zu verpassen ist z.B. äusserst sinnfrei.
Und zum testen von PHP-Code brauch man kein "grobes Layout". Wenn du testen willst, verzichte auf HTML und CSS oder nimm ein "leeres" HTML-Dokument.
Desweiteren solltest du deinen Beispielcode auf das Problem reduzieren. Ich sehe in deinem Code zwar massig uninteressante div-Suppe aber nichts was dein konkretes Problem darstellt. Wo ist da "viel Text" und in welchem "Feld" soll er stehen?
Bitte arbeite diesen post von oben nach unten ab!
Matze
-
-
-
Om nah hoo pez nyeetz, 0x0ERROR!
|-------------------------------------------------------------|
| | Titel | Liste |
| Logo |---------------------------------| |
| | Weiterer Text | |
| | | |
|-------------------------------------------------------------|
| Navigation | |
| | |
|-------------| |
| Weiteres | Hauptseite |
| | |
|-------------| |
| Impressum | |
| (als Link) | |
|-------------------------------------------------------------|<body> <header> <img src="logo.gif"> Titel Weiterer Text <ul> <li></li> ... </ul> </header> <nav> <ul>.. </nav> <aside> weiteres Impressum <aside> <div id="content"> oder <main> Inhalt </div> </body> </html>Beispielsweise so. In HTML5. Falls es HTML<5 werden soll, dann etwa <div id="header">.
Matthias
--
1/z ist kein Blatt Papier.
-
Es soll noch abwärtskompatibel zu Html 4 sein. Wie bekomme ich es hin,
wenn ich trotzdem mit Div-Container arbeite?0x0ERROR
-
Om nah hoo pez nyeetz, 0x0ERROR!
Letzte Zeile meines Postings.
Matthias
--
1/z ist kein Blatt Papier.
-
Beispielsweise so. In HTML5. Falls es HTML<5 werden soll, dann etwa <div id="header">.
Kannst du es evtl. etwas genauer erklären? In CSS programmiere ich beinahe nie.
0x0ERROR
-
Beispielsweise so. In HTML5. Falls es HTML<5 werden soll, dann etwa <div id="header">.
Kannst du es evtl. etwas genauer erklären? In CSS programmiere ich beinahe nie.Mit verlaub, das steht bereits in meiner Antwort.
-
Ich werde es doch mit Tabellen versuchen, habe aber noch
eine Frage zu divs:
Folgender HTML-Code:<!DOCTYPE html> <html> <head> <title>Titel</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="main" align="center"> Mitte </div> </body> </html>Und folgender CSS-Code:
body{ background-color: white; height:100%; } #main { border-style: solid; min-height: 100%; }Bei mir Chrome wird der Rahmen nicht auf den ganzen
Bildschirm angezeigt, sondern nur die erste Reihe.
Wo ist der Fehler?0x0ERROR
-
-
-
-
-