nicht angemeldet
Layout mit <div>
StruppiHallo an Alle,
wie in der Suche bei vielen Themen gefunden, soll man das Layout nicht mit Tabellen sondern mit <div> aufbauen, aber so richtig verstanden habe ich es noch nicht. Der untere Bereich bleibt einfach an seinem Platz stehen, obwohl <bottom angegeben ist. Auch der Inhalt überlagert ihn einfach. Da fehlt doch was ...
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TestLayout</title>
<style type="text/css">
<!--
html {
height: 99%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
height: 99%;
width: 100%;
padding: 0px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
#header {
background-color: #999999;
position: absolute;
width: 100%;
height: 10em;
top: 0px;
left: 0px;
}
#navigation {
background-color: #8487C1;
position: absolute;
width: 20em;
height: auto;
top: 10em;
left: 0px;
}
#inhalt {
background-color: #AAACD5;
position: absolute;
width: auto;
height: auto;
top: 110px;
left: 219px;
bottom: -3em;
}
#footer {
background-color: #999CCC;
position: absolute;
width: 100%;
height: 3em;
bottom: 0px;
}
-->
</style>
</head>
<body>
<div id="header">Raum für den Inhalt von id "header"</div>
<div id="navigation">Raum für den Inhalt von id "navigation"</div>
<div id="inhalt">Raum für den Inhalt von id "inhalt"<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
test<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
noch ein Test
</div>
<div id="footer">Raum für den Inhalt von id "footer"</div>
</body>
</html>
Wer kann mir auf die Sprünge helfen?
HeikoH
-
Hi,
wie in der Suche bei vielen Themen gefunden, soll man das Layout nicht mit Tabellen
richtig. Tabellen dienen der Strukturierung tabellarischer Daten, nicht Layoutzwecken.
sondern mit <div> aufbauen,
Falsch. <div> dienen der Gruppierung zusammengehörender Bereiche, nicht Layoutzwecken.
aber so richtig verstanden habe ich es noch nicht.
Schreibe semantisches Markup: Der Inhalt des Dokuments zwingt die Struktur auf. Ein Layout entsteht, indem man CSS auf ein gutes Markup aufsetzt. Ist das Markup schlecht, kriegst Du auch beim CSS-Code kein Bein auf die Erde.
html {
height: 99%;Warum?
body {
height: 99%;Warum?
font-size: 11px;
Warum?
position: absolute;
position: absolute;
position: absolute;
position: absolute;Warum?
<div id="header">Raum für den Inhalt von id "header"</div>
Wie sieht dieser Inhalt aus?
<div id="navigation">Raum für den Inhalt von id "navigation"</div>
Und dieser?
<div id="inhalt">Raum für den Inhalt von id "inhalt"<br>
<br>
<br>
<br>[...]
Der Einsatz von <br> ist ein starkes Indiz dafür, dass die umliegende Struktur nicht stimmt. Der Einsatz _mehrerer_ aufeinander folgender <br> ist ein Beweis für eine fehlerhafte Struktur.
Wer kann mir auf die Sprünge helfen?
Schritt 1: Sorge für ein ordentliches Markup.
Schritt 2: Verwende absolute Positionierung nur dann, wenn Du sie verstanden hast.
Schritt 3: Gehe Schritt für Schritt vor.Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo
Falsch. <div> dienen der Gruppierung zusammengehörender Bereiche, nicht Layoutzwecken.
Was kann ich denn dann nutzen?
Schreibe semantisches Markup: Der Inhalt des Dokuments zwingt die Struktur auf. Ein Layout entsteht, indem man CSS auf ein gutes Markup aufsetzt. Ist das Markup schlecht, kriegst Du auch beim CSS-Code kein Bein auf die Erde.
Was ist ein Markup?
html {
height: 99%;Warum?
body {
height: 99%;Warum?
So wie ich mich hier belesen habe, sollte html und body aufgrund von der Struktur mitangesprochen werden.
position: absolute;
position: absolute;
position: absolute;
position: absolute;Warum?
Weil sonst die Navigation weg ist wenn ich die Position nicht angebe.
<div id="header">Raum für den Inhalt von id "header"</div>
Wie sieht dieser Inhalt aus?
wird dynamisch eingelesen
<div id="navigation">Raum für den Inhalt von id "navigation"</div>
Und dieser?wird dynamisch eingelesen
<div id="inhalt">Raum für den Inhalt von id "inhalt"<br>
<br>
<br>
<br>
[...]Der Einsatz von <br> ist ein starkes Indiz dafür, dass die umliegende Struktur nicht stimmt. Der Einsatz _mehrerer_ aufeinander folgender <br> ist ein Beweis für eine fehlerhafte Struktur.
Der Einsatz von <br> sollte nur hier verdeutlichen, dass der Footerbereich sich über den Inhalt legt und an seine Position bleibt, wenn der Inhalt, wird auch dynamisch eingefügt, mal etwas mehr ist.
HeikoH
-
Habe mich gerade auch eine Zeit lang damit beschäftigt.
Geh doch mal auf diese Seite hier:http://css.fractatulum.net/sample/layout_zum_mitnehmen.htm http://css.fractatulum.net/sample/layout_zum_mitnehmen.htm[/link]
Dort findest du Layouts zum mitnehmen, die können dir sicher bei deinem Problem helfen.gruss
michi-
Ich kann HeikoH nur zustimmen: Zuersteinmal aber sollte dein Inhalt stehen, bevor du dir Gedanken über notwendige html-Elemente bzw. CSS-Eigenschaften für diese machst. Und am besten beraten bist du mit solchen Layout-Vorlagen wie sie Heiko verlinkt hat, denen von selfhtml, oder positioniseverything.net
Einen Footer "immer am unteren Rand" des Viewports zu positionieren geht zwar, auch wenn eigentlich nur der IE nach position: absolute; für diesen Zweck verlangt ( moderne Browser erwarten dafür position: fixed; ) ... insgesamt würde ich aber jedem davon abraten derlei Frame-Imitate zu basteln, denn beim verkleinern des Browser-Fensters kriegst du spätestens im IE Probleme mit den Scrollleisten, von den unschönen Überlappungen im Inhaltsbereich mal ganz abgesehen.
Beispiel-Layouts, bei denen du dieses Verhalten überprüfen kannst findest du bspw. bei Stu Nicholls cssplay oder Roger Johannsons 456bereastreet.com (Stichwort: CSS-Frames)
Mein gutgemeinter Rat an dich lautet daher: Erst der Inhalt, dann das Design, bei dem du dich am besten an solide Vorlagen hältst, da lernt man am meisten...
mfg-
Hallo an Alle,
Mein gutgemeinter Rat an dich lautet daher: Erst der Inhalt, dann das Design, bei dem du dich am besten an solide Vorlagen hältst, da lernt man am meisten...
dazu besteht keine Möglichkeit, da, wie schon gesagt, alle Inhalte in den Boxen dynamisch eingefügt werden.
Es geht nicht um eine einfache HTML Seite, sondern um eine PHP Geschichte und dort werden mal Inhalte angezeigt oder wenn es keine Ergebnisse gibt halt die entsprechende Meldung.Mit einer Tabelle geht es doch auch, ausser die Höhe mit 100% (Positionierung der Fusszeile) und ausserdem soll man ja Tabellen nicht mehr einsetzen.
HeikoH
-
Mit einer Tabelle geht es doch auch, ausser die Höhe mit 100% (Positionierung der Fusszeile) und ausserdem soll man ja Tabellen nicht mehr einsetzen.
Was mit einer Tabelle geht muss nicht unbedingt 1:1 mit CSS gehen und sollte gar nicht erst versucht werden, da du dadurch nur Gewurschtel im CSS und HTML Code hast. Du solltest dir deutlich machen, was die Unterschiede zwischen einem CSS Layout und einem Layout mit einer Tabelle sind. Wenn dir das nicht liegt oder du nicht die Geduld dazu hast, bist du besser beraten weiterhin mit Tabellen als Layoutmittel zu arbeiten, da ansonsten deine Seite mit dem CSS unbrauchbarer als vorher wird.
Struppi.
-
Welcher Sauhund hat hier das Wort Tabelle ins Spiel gebracht? Ich nicht! Zumindest sehe ich keinen Bezug zu meinem Posting, oder der ursprünglichen Fragestellung. Was die Dynamik einer Seite mit dem ursprünglichen CSS-Anliegen zu tun hat muss ich ja nicht verstehen. Ich empfehle dir aber, dir mal Gedanken darüber zu machen, was php eigentlich ist. Im Endeffekt dient es ja nur dazu, den Inhalt einer _html_-Seite dynamisch "zusammenzubauen". Ob da nun viel Seitencontent ist oder wenig, wie du diesen präsentierst hat mit einer eventuell im Hintergrund werkelnden Skriptsprache nichts zu tun. Du kannst von mir aus alles hardcoden und trotzdem ist die Lösung eines Darstellungsproblems immer -sofern du sauberes Markup schreibst- Sache des Stylesheets.
gruß & viel erfolg-
Welcher Sauhund hat hier das Wort Tabelle ins Spiel gebracht? Ich nicht! Zumindest sehe ich keinen Bezug zu meinem Posting, oder der ursprünglichen Fragestellung....
???
Du meinst mich oder Heiko?
Die Fragestellung war, wie man ein Tabellenlayout mit DIVs umsetzt und dieser ansatz istz schon falsch.
Struppi.
-
Nö, diesmal hätte ich ausnahmsweise Heiko gemeint. Im ersten Post hab ich dafür versehentlich Heiko angesprochen... war noch was zeitig am Morgen. Ist ja auch egal, Tabellen, Div-Wüsten, die Ladezeiten von aufgeblähten Seiten kratzen ja Dank DSL auch keinen Schw*#% :D und der traffic... naja, daran wird man dann schon früh genug sehen was man da fabriziert hat.
-
-
-
-
-
-
-
-