mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 01:07 Benutzername: Passwort: Auto-Login

Thema: Layoutraster mit Ebenen - gut? vom 12.12.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Layoutraster mit Ebenen - gut?
Autor Nachricht
Jacco
Threadersteller

Dabei seit: 02.11.2004
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 12.12.2006 14:35
Titel

Layoutraster mit Ebenen - gut?

Antworten mit Zitat Zum Seitenanfang

Hi,

ich habe mir heute mal ein Layoutraster gebaut, bei dem ich mehrere Ebenen verwende.
Ich erstelle mir ein DIV mit dem ich die Seite zentriere.

In diesem DIV sind meine Ebenen DIVs. Diese sind absolut positioniert und haben einen
unterschiedlichen z-index.

In den Ebenen DIVs wiederum arbeite ich mit floatierten DIVs so wie ich es sonst auch immer mache.

So habe ich mir quasi ein System gebaut, wie man es z. B. auch in InDesign kennt.
Mehrere Ebenen, auf denen man die Objekte anordnen kann.

Da ich nicht so der Semantik-Experte bin und hier auch nur Firefox 2.0 und IE 6.0 installiert habe würde ich gerne mal von euch wissen ob ihr bei verwendung dieses Systems irgendwelche Probleme seht, die auftreten können.

Sehen kann man das ganze hier:
http://www.jacobi-bremen.de/test/

Hier der HTML Code
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<!--

Layout mit mehreren Ebenen und Floats:

Der Container umschließt die ganze Seite und Zentriert sie.
Er ist nicht sichtbar da er keine Farbe hat.
Die ebene Menu hat den Z-Index 1000 die Ebene Inhalt 100 und
liegt somit unter der ebene Menu. Die beiden ebenen sind mit
position:absolute positioniert. Innerhalb dieser Ebenen kann
man wie gewohnt DIVs floatieren. Falls ein Hintergrundbild
verwendet werden soll, so sollte man dieses für die Ebene
Inhalt deklarieren, da diese immer genauso hoch ist wie das
höchste Spalten DIV.

-->

<body>
 <div id="container">
  <div id="menu">
   <div id="element"></div>
   <div id="element"></div>
  </div>
  <div id="inhalt">
   <div id="spalte1"></div>
   <div id="spalte2"></div>
   <div id="spalte3"></div>
  </div>
 </div>
</body>
</html>


und die dazugehörige CSS Datei
Code:

/* Reset all */
* {
   margin:0px;
   padding:0px;
}

/* Breite der Seite einstellen und Seite Zentrieren */
#container {
   width: 800px;
   margin: 0 auto;
}

/* Ebene Inhalt */
#inhalt {
   position:absolute;
   z-index: 100;
   background-color: Red;
}

/* Floats in Ebene Inhalt */
#spalte1, #spalte3 {
   width:200px;
   height: 200px;
   float:left;
   background-color: Aqua;
}

#spalte2 {
   width:400px;
   height:400px;
   background-color: Lime;
   float:left;
}

/* Ebene Menu */
#menu {
   width:800px;
   height: 80px;
   position: absolute;
   z-index: 1000;
   background-color: Fuchsia;
}

/* Floats in Ebene Menu */
#element {
   width:20px;
   height:20px;
   float:left;
   background-color: Yellow;
}



Vielen Dank schonmal!


Zuletzt bearbeitet von Jacco am Di 12.12.2006 14:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Yakuzza

Dabei seit: 17.01.2006
Ort: Rottweil
Alter: 35
Geschlecht: Männlich
Verfasst Do 21.12.2006 10:36
Titel

Antworten mit Zitat Zum Seitenanfang

IDs dürfen in HTML nur einmal definiert werden, du hast zwei DIV Tags mit der ID = element.
Möchtest du eine Formatierung auf mehrer Objekte anwenden, dann musst du CLASS verwenden.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
seal

Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 33
Geschlecht: Männlich
Verfasst Do 21.12.2006 18:52
Titel

Antworten mit Zitat Zum Seitenanfang

Zwei Kritikpunkte fallen mir spontan ein

- absolute Positionierung (bin kein Fan davon)
- Semantik (Navigation = Liste)
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Layoutraster GoLive
Layoutraster - Gestaltungsraster: Lernlektüre - Anleitung =?
Weisse Ränder in GoLive mit Layoutraster
Objekte aus Ebenen einfügen und wieder auf Ebenen verteilen
Ebenen
Bildwechsel mit Ebenen ??
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.