Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
holger_buns
Threadersteller
Dabei seit: 06.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 30.03.2011 15:04
Titel Wie Boxmodell/Layout am besten lösen? |
|
|
Hallo,
wie würdet Ihr anhand der 2 Beispiele das Layout / Boxmodell aufbauen?
http://www.solardecathlon.ugent.be/nl
http://www.myiwdesigns.com/
Ich habe ja eine Header, Content und Footer. Bei allen ist jeweils ein extra Hintergrund definiert. Dieses kann ich ja nicht über eine allgemeine Hintergrundgrafik im Body lösen, weil mein Inhaltsbereich ja mal mehr mal weniger Inhalt hat. Es müssten also der Header, Conten und Footer 100% breit sein mit Hintergrundgrafik oder?
Wie kann ich denn dann mein Boxmodell mit Div´s aufbauen, so dass der reine Inhalt mittig der Seite ist? Versteht Ihr was ich meine?
Gibt es dafür ein fertiges Template mit Div´s die ich irgenwo runterladen kann? Diese Seiten sieht man halt immer öfter. Ich habs schon gesehen, bei Wordpress als Template. Ich möchte es aber selber programmieren. Bei StuNicholls hab ich nix gefunden.
Gruss
Holli
|
|
|
|
|
Benutzer 29349
Account gelöscht
Ort: -
|
Verfasst Do 31.03.2011 06:20
Titel
|
|
|
Wo ist denn da der Lernfaktor?
Als erstes deklariert man in CSS die Aussen und Innenabstände auf 0.
Danach kommt der Body, in dem Du die Font als CSS Hack ohne font-weight, die standard Hintergrundfarbe und evt. den Hintergrund und dessen Position nennst. Hier das Beispiel von deinem 2. Link www.myblablabla (hab nicht in den Quelltext geschaut)
Code: |
* { margin:0; padding:0; }
body { font:12px/130% Arial, sans-serif; margin:0; padding:0; color:#555; line-height:18px; background:#EC8AB7 url(img/bg.gif) 0px top repeat-x; } |
Selbstverständlich liegt das Hintergrundbild bei dir woanders. "font:12px/130%" sagt aus, dass die Schriftgröße 12px und der ZAB (Zeilenabstand) 130% betragen soll. Diese Angabe ist 100% CSS konform. Verwende ich oft.
Als nächster Schritt definiere den äußeren Rahmen deines Konstruktes das wir verständnishalber "#mastercase" nennen. Dieser hat eine Breite und eine Positionierung, Hintergrundfarbe wenn erwünscht, evt. eine Minimalhöhe. Hier das Beispiel:
Code: | #mastercase { margin:0 auto; width:980px; background:#ffffff; } |
Mit "margin:0 auto;" sagst du dem Objekt, dass es mittig Positioniert sein soll. Width und Background muss ich nicht erklären. Das Raute-Symbol leitet eine ID ein. Eine ID wird stets nur übergeordneten Objekten zugeordnet. Einzelobjekte wie Absätze, Trennstriche, Links, Listen, Formfelder werden ausnahmslos als Klassen deklariert, es sei denn das Objekt soll eine spezielle Funktion übernehmen. Nicht kapiert? Selfhtml lesen.
Innerhalb der Mastercase in deiner HTML Datei folgen alle relevanten Inhalte, die ebenfalls in eigene Divs zu packen sind.
Beispiel:
Code: | <div id="mastercase">
<div id="header">
<div id="navicase">
<div id="topnav">...meistens eine Liste...</div>
</div>
</div>
<div id="content">...wieerum versch. divs oder einfach allen Elementen in CSS fleoat:left zuweisen (Abstände müssen aber stimmen)...
</div>
<div id="footer">...Hier einen Absatz, Link, foobar...</div>
</div> |
Die ID "header" hat eine Breite und eine Höhe evtl. mit Ebenen-Index und Verhalten bei Überlappung.
Beispiel:
Code: | #header { z-index:98; position: fixed; width:980px; height: 200px; center: 0; top: 0; background:#ffffff; padding-top:13px; padding-bottom:13px; }
#header #logo { overflow:hidden; width:248px; height:100px; background:#ffffff url(img/logo.jpg) 0px 0px no-repeat; text-indent:-99999px; display:block; float:left; } |
Mein Beispiel-Header hat nun noch eine weitere ID bekommen namens "logo". Da die ID logo die Funktion eines speziellen Seitenobjektes bekommt, da es sonst nirgends mehr im Layout auftauchen wird erklärt dies der Zustand wie oben beschrieben.
In der HTML sieht es dann so aus:
Code: | <div id="mastercase">
<div id="header">
<a href="http://www.xyz.de/"id="logo">xyz.de</a>
<div id="navicase">
<div id="topnav">...meistens eine Liste...</div>
</div>
</div>
<div id="content">...wiederum versch. divs oder einfach allen Elementen in CSS float:left zuweisen (Abstände müssen aber stimmen)...
</div>
<div id="footer">...Hier einen Absatz, Link, foobar...</div>
</div> |
Ich hoffe dir hat der kleine Crashkurs geholfen!
Beste Grüße
thecamillo
|
|
|
|
|
Anzeige
|
|
|
Benutzer 29349
Account gelöscht
Ort: -
|
Verfasst Mo 04.04.2011 08:35
Titel
|
|
|
War das nun eine Hilfe?
Feedback wäre toll
|
|
|
|
|
holger_buns
Threadersteller
Dabei seit: 06.11.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 04.04.2011 11:02
Titel
|
|
|
Ja, danke. Hat mir geholfen.
|
|
|
|
|
|
|
|
Ähnliche Themen |
wie kann man dies am besten lösen
Problem mit dem IE-Boxmodell-Bug
div-margin-Boxmodell Problem
HP-Hintergrund-wie lösen?
Illustrator CS2 Gruppe lösen
Website Navigation - wie lösen?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|