| Autor |
Nachricht |
Jacco
Threadersteller
Dabei seit: 02.11.2004
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 12.12.2006 15:35
Titel Layoutraster mit Ebenen - gut? |
  |
|
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 15:35, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
Yakuzza
Dabei seit: 17.01.2006
Ort: Rottweil
Alter: 43
Geschlecht: 
|
Verfasst Do 21.12.2006 11:36
Titel
|
|
|
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.
|
|
| |
 |
|
|
Anzeige
|
|
|
seal
Dabei seit: 31.07.2005
Ort: Pfalz
Alter: 41
Geschlecht:
|
Verfasst Do 21.12.2006 19:52
Titel
|
|
|
Zwei Kritikpunkte fallen mir spontan ein
- absolute Positionierung (bin kein Fan davon)
- Semantik (Navigation = Liste)
|
|
| |
|
|
| |
|
|
| Ä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
CSS Ebenen
|
|
Willkommen auf dem Portal für Mediengestalter
