Layout mit 100% Höhe
Ob das allerdings auch bei Handys funktioniert habe ich noch nicht getestet.
Beiträge von sejuma
-
-
Zitat
man soll ja anstelle von tabellen nur noch div container verwenden.
Diese Aussage ist so falsch. Man soll nach wie vor Tabellen verwenden, allerdings nur für tabellarisch strukturierte Inhalte und nicht für's Seitenlayout.Dein Code macht in keinster Weise Sinn, so dass er auch nicht umgebaut werden kann. Er ist weder valide, noch ist erkennbar, was damit dargestellt werden soll.
Beschäftige dich zunächst mit HTML und CSS und eigne dir einige Grundkenntnisse an.
Einige Layoutbeispiele - ohne Tabellen - findest du z.B. hier und kannst sie anhand des Quelltextes nachbauen:
dreispaltiges Layout
zweispaltiges Layout -
Es ist m.E. sinnlos, dass du dich in diesem Tabellencode verstrickst.
Tabellen sind nun mal nicht für Layoutzwecke gedacht.
Beschäftige dich mit CSS und mach's richtig
.
Vom Prinzip her funktioniert der Aufbau so:
html, body und header bekommen 100% width.
Die Navi floatest du links und gibst ihr z.B. 30% Breite.
Den Content setzt du mit margin-right: 30% daneben.Einen ähnlichen Aufbau findest du hier. Nur mit dem Unterschied, dass es sich um fixe Breiten handelt.
-
Danke dir für den berechtigten Hinweis.
Funktioniert so aber nicht im IE 7. -
-
Frames haben vor allem Nachteile für Suchmaschinen und bei der Verlinkung, siehe z.B. hier.
-
In deiner Datei format.css musst du hier den Wert für font-size ehöhen:
Code
Alles anzeigen#menu a {display: block; color:#3f3f3f;text-decoration:none;font-family:verdana, sans-serif; font-size:9pt; padding-left:3px;padding-bottom: 0px; padding-top: 0px;margin: 0px auto; } #menu a:visited{color:#3F3F3F;text-decoration:none;font-family:verdana, sans-serif; font-size:9pt; padding-left:3px;padding-bottom: 0px; padding-top: 0px;margin: 0px auto; } #menu a:active{color:#3F3F3F;text-decoration:none;font-family:verdana, sans-serif; font-size:9pt; padding-left:3px;padding-bottom: 0px; padding-top: 0px;margin: 0px auto; } #menu a:hover { color:#ffffff;text-decoration:none;font-family:verdana, sans-serif; font-size:9pt; padding-left:3px;padding-bottom: 0px; padding-top: 0px;margin: 0px auto; }
Es reicht übrigens aus, wenn du alle identische Angaben unter #menu a zusammenfasst. Dann kannst du sie an allen anderen Stellen streichen.
-
Code
<span style="float: left;">Heute:</span> <span style="float: right;">100</span> <div style="clear: both;"></div> <span style="float: left;">Monat:</span> <span style="float: right;">1.000</span> <div style="clear: both;"></div>
Für die float-Angaben solltest du dann natürlich entsprechende Klassen verwenden.
Evtl. kommt in diesem Fall auch eine kleine Tabelle in Frage. -
Viele Wege führen nach Rom und zum Ziel
Beides funktioniert.Da li von Haus aus ein Blockelement ist, sollte man es vielleicht nicht ohne Not zum Inlineelement umstricken.
Allerdings dürfen (originäre) Inline-Elemente keine Blockelemente enthalten. Dem würde dann deine Konstruktion etwas widersprechen.
Von der Wirkung her ist jedoch beides möglich und auch korrekt. -
Na ja, div's verwendet man eigentlich zur Gliederung größerer Bereiche ("Divisions").
Wenn es sich bei den Textblöcken jeweils um nur einen Absatz handelt, kannst du auch gefloatete Absätze "p" nehmen, Verfahren siehe oben.
Auch ne Variante: eine ul-Liste, bei der die einzelnen li's je einen Textblock enthalten. Dieser kann dann auch aus mehreren Absätzen bestehen.
Hier dann die li's floaten. -
-
-
Deine Problembeschreibung klingt etwas wirr. Ein Link zur Problemveranschaulichung wäre deshalb besser.
Spontan fällt mir folgendes ein:
Spalten vergrößern oder Text verkleinern -
Bereinige mal diese Fehler
-
Relative und absolute Positionierungen machen bei diesem Code keinen Sinn, da zugehörige Abstandswerte fehlen. Kannst du also löschen.
Falls der IE 7 immer noch nicht zentriert, fehlt ein qualifizierter Doctype.
-
Im Gegensatz zu "Home" (dort scheint es mir so dargestellt wie du es gerne hättest) fehlt bei "Profile" der Footer-Div.
-
Lass bei deiner jetzigen Version mal bei #wrapper die 100% height weg
und nimm bei #footer einen bottom-Wert von -20px. -
Dann lies dir das Tutorial nochmal durch. Du brauchst einen allumfassenden wrapper, der alles andere einschließt.
-
Lass das rote hier weg:
Zitat
.bottomnav {
float: right;
width: 150px;
height: 20px;
background-color: #F00;
font-size: 10px;
position: absolute;
bottom: 0;
} -