mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 16:07 Benutzername: Passwort: Auto-Login

Thema: Wie Boxmodell/Layout am besten lösen? vom 30.03.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Wie Boxmodell/Layout am besten lösen?
Autor Nachricht
holger_buns
Threadersteller

Dabei seit: 06.11.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 30.03.2011 15:04
Titel

Wie Boxmodell/Layout am besten lösen?

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Do 31.03.2011 06:20
Titel

Antworten mit Zitat Zum Seitenanfang

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
Anzeige
Benutzer 29349
Account gelöscht


Ort: -

Verfasst Mo 04.04.2011 08:35
Titel

Antworten mit Zitat Zum Seitenanfang

War das nun eine Hilfe? Aha!

Feedback wäre toll Glaskugel
 
holger_buns
Threadersteller

Dabei seit: 06.11.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 04.04.2011 11:02
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, danke. Hat mir geholfen.
  View user's profile Private Nachricht senden
 
Ä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?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.