Layout mit DIVs erstellen footer unten, Seitenhöhe nutzen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
browser
code
demo
eigenschaft
element
header
http
inhalt
kopf
layout
nachteil
navigation
page
position
sagen
tabelle
url
vorteil
zeile
zelle
-
Hallo,
da table als Grundgerüst ja recht stark kritisiert wird, versuche ich es mit divs, allerdings habe ich noch nicht herausgefunden, wie ich auf der Seite
http://paage.lima-city.de/
unten den "Footer" unten lasse, beim scrollen bleibt er nicht unten. Ich hatte es mir so wie hier (How to keep footers at the bottom of the page (CSS demo)) vorgestellt. D.h. auch wenn mehr Text bei "Content" bzw. "In this demo ..." steht, bleibt der Footer am Seitenende und ist somit das letzte wenn man ganz runter scrollt.
Und ich wollte eigentlich die "Navigation" mit einem "margin" von 10px versehen, doch dann rutscht der Content weg, Das liegt wohl daran, weil dann die Breiten von "Navigation" und "content" zusammen zu groß sind....
Ist es denn wirklich sinnvoller divs statt table zu benützen?
Mit table würde ich - so vermute ich - alles, was ich hier will, hinbekommen..
~ Grüße
Beitrag zuletzt geändert: 21.7.2014 0:37:27 von paage -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Setze im div, mit der id wrapper, noch die Eigenschaft position:relative; und im div, mit der id footer, die Eigenschaft width von 80% auf 100%. Bei dem div, mit der id content, ändere den margin von 10px 0px 0px auf 10px 0px 60px. Damit hast du das Problem mit dem Footer eigentlich gelöst. Mit der Navigation hast du schon recht, aber da kannst du dann einfach den content eine kleiner breite geben, in dem Fall würde ich sagen eine Breite von 77% sind gut, und es passt wieder alles. table ist wirklich nicht mehr das optimalste als Grundgerüst, aber auch divs benutze ich kaum schon gar nicht als Grundgerüst. Dafür gibt es heut zu Tag moderne Sachen. Heutzutage kannst du ganz einfach reinschreiben header, nag, section, article, aside und footer.
<html>
<head>
</head>
<body>
<header>
<p>
Im header befinden sich das Logo und oft auch die Navigation. Es sind grundsätzlich einführende Inhalte im header
</p>
<nav>
<p>
Hier ist der Bereich für die Navigation
</p>
</nav>
</header>
<section>
<p>
Hiermit kann man die Inhalte einer Webseite in einzelnen geschlossenen Sinnabschnitten Teilen. In dem section kann man auch noch mal ein <header>, ein <section> und ein <footer> packen.
</p>
<article>
<p>
Hiermit werden in sich geschlossene inhaltliche Inhalte ausgezeichnet. Das Element eignet sich vor allem für Newsletter oder Blogeinträge.
</p>
</article>
</section>
<footer>
<p>
Der footer ist der Fußbereich der Webseite.
</p>
</footer>
</body>
</html>
Alle Elemente können dann per css bearbeitet werden. Einfach mit: header {}
Hoffe ich konnte damit weiter helfen.
Beitrag zuletzt geändert: 21.7.2014 11:31:37 von juenger-radio -
Warum nutzt du nicht einfach die Erklärung zu der von dir angegebenen Beispielseite, also
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ? Der Beitrag ist zwar schon ein paar Jährchen alt (sieht man ja schon an der Aufzählung der unterstützten Browser), aber alles funktioniert.
Tabellen ja oder nein?
Natürlich kann dich niemand daran hindern, Tabellen zu verwenden. Ein Webdesign mit DIV-Elementen (oder den HTML5 Tags nav, header usw.) ist aber letztendlich sehr viel flexibler und auch übersichtlicher. Beiß dich besser jetzt durch. Eine spätere Umstellung von table auf div macht meist viel Arbeit.
Hier noch ein komplettes Grundgerüst auf Basis HTML5 mit Kopf, Navigation links und Footer immer unten:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <title>HTML-Grundgerüst mit Header, Navigation links und Fussbereich immer ganz unten</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } body { font-family: sans-serif; width: 100%; } #wrapper { width: 950px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; } /* Header /Kopf */ header { height: 150px; background: #FFE680; } /* Middle */ #middle { width: 100%; padding: 0 0 100px; position: relative; } .middle:after { display: table; clear: both; content: ''; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 0 0 0 270px; } /* Left Sidebar / Navigation */ .left-sidebar { float: left; width: 250px; margin-left: -100%; position: relative; background: #B5E3FF; } /* Footer */ footer { width: 950px; margin: -100px auto 0; height: 100px; background: #BFF08E; position: relative; } </style> </head> <body> <div id="wrapper"> <header> Header/Kopf </header> <div id="middle"> <div id="container"> <main id="content"> Content/Inhalt </main> </div> <aside class="left-sidebar"> Left Sidebar/Navigation </aside> </div> </div> <!-- Ende wrapper --> <footer> Footer/Fuss </footer> </body> </html>
Beitrag zuletzt geändert: 21.7.2014 13:03:55 von mein-wunschname -
hi,
zum thema table-layout kann ich dir sagen das es vor und nachteile hat.
vorteil: man kann gerade hinsichtlich der fusszeile die immer unten sein soll die eigenschaften der tabelle benutzen, nämlich das die angabe für height als min-height bewertet wird (somit kann man die 100% height des body übernehmen aber trotzdem vergrössern) und das man das vertical-align festlegen kann.
nachteil: die struktur soll ja nur ein layout sein und kein tabellarischer inhalt, also stimmt des element semantisch eigentlich nicht.
ich mache es in letzter zeit meistens so das ich ich ein div-konstrukt mit css als tabelle nachformatiere um die semantik zu wahren aber trotzdem die funktionalität der tabelle habe.
um die fusszeile im statik-positioning mit variablen höhen immer unten zu haben würde es also so aussehen das ich eine tabelle mit zwei zeilen habe in denen jeweils eine zelle ist. die tabelle hat 100% height und die zelle der ersten zeile vertical-align top und die in der zeiten zeile vertical-align bottom. die html-tags sind wie gesagt keine table tr und td sondern jeweils div die mit css display entsprechend formatiert sind.
natürlich gibt es auch möglichkeiten mit position absolute oder js aber ein satisches layout hat schon seine vorteile (zb wie einfach/schnell ein browser die seite aufbauen kann)
lg hechma -
Auf pageblox.com gibt es einen Templates und Layout Generator mit dem du dir ganz einfach deine Seite in
Header
------------------------
SideBar - Content
------------------------
Footer
einteilen kannst ...
Uppps - habe gerade gesehen, dass der Betreiber für den Code unverschämte 49 € verlangt ...
Na gut, etwas umständlicher, dafür aber um so umfangreicher - und - wichtig: kostenlos
geht es mit dem Builder von yaml.de.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
