Guten tag ich möchte mir gerne selbereine kleine homepage basteln und habe da schon so einekleine vorstellung wie sie aufgeteilt sein soll
jetzt ist die frage wie stelle ich das am besten an kan mir da jemand helfen ??
hier sie gewünschte aufteilung
Wie mache ich so eine HP aufteilung ??
- D.Fence
- Geschlossen
- Erledigt
-
Die einzelnen Bereiche einfach mal logisch einteilen in Div-Container und diese dann per CSS positionieren. Solltest aber sonst im Internet auch Vorlagen für eine derartige Aufteilung finden.
-
<div id="bla"> </div> ist klar?
Welche eindeutigen Bereiche hast du denn?
- Navigation
- Header
- Content
- FooterDa kannste die vier ja einfach mal erstellen, wobei ich die Navigation mit in den Header packen würde und Footer ganz rausließe. Aber ist auch erstmal egal.
Mach es erstmal unverschachtelt, sollte einfacher sein.Jetzt hast du ja erstmal die 4 Elemente deiner Seite, nun geht es weiter ins Detail. Für die Navigation würde ich dann beispielsweise Listenpunkte nutzen.
Auf der CSS-Seite musst du den Inhalt dann halt gestalten (Google: css4you - sollte dir da behilflich sein)
EDIT: Bist du schon voran gekommen?
-
Suche ma bei youtube HTMLWorld
und da CSS design da erklärt der eigen alles^^ -
Wenn du die Grundlagen von CSS beherrscht sollte das sehr leicht umzusetzen sein
-
Warum wollt ihr immer aus 0 Ahnung so etwas großes bauen? - Fangt entweder klein an, oder beauftragt jemanden...
von 0 auf 100 an einem Tag oder in einem 10 Minuten Video gibts ned!Da hast css templates, such dir eins aus und befüll deinen Inhalt.
http://www.freecsstemplates.org/ -
Hoffe habe dir geholfen.
Source:
HTML<!DOCTYPE html><html> <head> <title>Meine Seite</title> <style> body { margin: 0px; padding: 0px; background: white; color: black; font-family: Arial; font-size: 14px; } #navi, #footer { color: #DDDDDD; background: #404040; padding: 5px 5px 5px 5px; font-size: 17px; } #footer { text-align: center; font-size: 13px; width: 100%; position: fixed; bottom: 0px;} a { padding: 0px 5px 0px 5px; text-decoration: none; color: #CCCCCC; } a:hover { text-decoration: underline; color: #DDDDDD; } #page { padding-top: 20px; margin: 0px auto; width: 700px; } #logo { padding: 2px 2px 2px 2px; float: left; width: 215px; border: 1px solid #000000; } #partner { float: right; width: 468px; height: 60px; border: 1px solid #000000; margin-bottom: 10px; } #content { padding: 10px 10px 10px 10px; clear: both; border: 1px solid #000000; } .radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } </style> </head> <body> <div id="navi"> <a href="">Seite 1</a> <a href="">Seite 2</a> </div> <div id="page"> <div id="logo" class="radius">Logo</div> <div id="partner" class="radius">Partnerbanner..</div> <div id="content" class="radius"> Blabla :D </div> </div> <div id="footer">Copyright © 2013 by Max Musterman.</div> </body></html> -
breadfish.de
Hat das Thema geschlossen.
