AW: Probleme mit CSS Layout
naja, so oder so ähnlich könnte es aussehen.
Nochmal zum Thema Reset:
Natürlich muß alles resettet werden, denn schließlich ist dieser code Teil einer allgemeinen Formatierung, die später für alle Seiten Deines Projektes gültig ist, und ich behaupte einfach mal, daß es sich um sowas wie einen shop handelt und irgendwo auch ein Eingabeformular reinkommt.
Mein Vorschlag bezieht sich zunächst darauf, eine CSS-Datei zu schaffen, in der ausschließlich das reine Layout festgelegt wird (nicht etwa das Erscheinungsbild des Inhaltes!!!)
Ich habe mal unten die komplette Datei eingefügt. Sie ist aber nur der Anfang und bewirkt im Wesentlichen das, was Du sonst mit einem Tabellengrab machst
.
Dabei handelt es sich um den relevanten Teil eines Multi-Columnen-Layoutes, von denen es ja im Netz eine ganze Reihe gibt, aber leider nicht eines, welches für meine Projekte geeignet scheint. Also Eigenentwicklung.
Die etwas schrägen Farben gehören zu meiner Entwicklungsumgebung. Natürlich ist die XHTML-Seite entsprechend anzupassen.
Also: XHTML strict und utf-8 für die Seite, bei css auch utf-8:
--------------------------------------------------------------
@charset "UTF-8";
/* zp3shop layout stylesheet */
/* copyright by
http://www.vnsp.de/ */
@media all
{
/* ________________________________________________________________________ */
/* Browser-Reset */
*
{ margin: 0; padding: 0; }
option
{ padding-left: 0.4em; }
/* <fieldset> löschen */
fieldset { border: 0 solid; }
/* <img> löschen */
img { border: 0 solid; }
/* Seitengröße mindestens auf Fenstergröße einstellen */
html, body { height: 100%; margin-bottom: 1px; }
/* ________________________________________________________________________ */
/* Festlegung 3-spaltiges Layout mit header und footer */
#header { position: relative; }
#header, #nav, #main, #footer { clear: both; }
/* Spalte 1: Festlegung auf 200 Pixel */
#column1 { float: left; width: 200px; }
/* Spalte 2: Festlegung auf 200 Pixel */
#column2 { float: right; width: 200px; }
/* Spalte 3: flexibel */
#column3 { width: auto; margin: 0 200px; }
/* ________________________________________________________________________ */
/* Festlegung des Z-index für Spalten und Spaleninhalt */
#column1 { z-index: 3; }
#column2 { z-index: 5; }
#column3 { z-index: 1; }
#column_01_content { z-index: 4; }
#column_02_content { z-index: 6; }
#column_03_content { z-index: 2; }
#column_01_content, #column_02_content, #column_03_content { position: relative; }
/* ________________________________________________________________________ */
/* Löschen der Float-Umgebung */
.clearfix: after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: block; }
.floatbox { overflow: hidden; }
#ie_clearing { display: none; }
/* ________________________________________________________________________ */
/* versteckte / unsichtbare Elemente */
.skip, .hideme, .print { position: absolute; top: -4000em; left: -4000em; height: 1px; width: 1px; }
.skip:focus, .skip:active { position: static; top: 0; left: 0; height: auto; width: auto; }
/* ________________________________________________________________________ */
/* Seitenhintergrund - blaue Ränder */
body { background: #8caff0; padding: 0 0; }
/* ________________________________________________________________________ */
/* Layout-Ausrichtung */
#page_margins { margin: 0px auto; }
/* ________________________________________________________________________ */
/* Layout-Eigenschaften */
/* Festlegung der Breite des gesamten Inhalts - dunkel-gelbe Abstände oben und unten */
#page_margins { width: 960px; min-width: 960px; max-width: 960px; background: #e2df06; }
#page { padding: 0px; }
/* Festlegung der Höhe der Kopfzeile - hell-gelbes Feld */
#header { height: 139px; padding: 0 0 0 0; background: #fefa99; }
#nav { overflow: hidden; }
/* Festlegung der Abstände der Inhalte im Hauptfeld - hell-grüner Hintergrund */
#main { margin: 25px 0 0 0; background: #beecb9; }
/* Festlegung der Höhe des Footers - dunkel-gelbes Feld */
#footer { height: 85px; background: #dcb002; }
/* ________________________________________________________________________ */
/* horizontale Ausrichtung */
#nav ul { margin-left: 20px; }
}
@media screen
{
/* ________________________________________________________________________ */
/* Die folgenden Festlegungen sind starr. Strg+ wirkt sich nicht auf die Breite aus!!! */
/* Formatierung der Inhalts-Container Spalte 1 */
#column1 { float: left; width: 190px; margin: 0px 0px 0px 5px; }
/* ________________________________________________________________________ */
/* Formatierung der Inhalts-Container Spalte 2 */
#column2 { float: right; width: 175px; margin: 0px 5px 0px 0px; }
/* ________________________________________________________________________ */
/* Formatierung der Inhalts-Container Spalte 3 */
#column3 { width: auto; margin: 0 175px 0 190px; }
/* ________________________________________________________________________ */
/* Abstände der Inhalte Spalten 1-3 - Die später eingefügten Inhalte haben eigene Abstände zueinander!!! */
#column_01_content { padding: 0 0 0 0; }
#column_02_content { padding: 0 0 0 0; }
#column_03_content { padding: 0 10px; }
}
------------------------------------------------------------------
Diese Datei wird über eine weitere css, die call.css, eingebunden, nach der Browserweiche. Diverse Korrekturen, die abhängig vom Browser sind, sind hier nicht drin, sie müssen erst zum Schluß folgen.
Anbei mal eine Blanko-XHTML-Seite.
Nicht erschrecken, wir arbeiten mit Zope...
------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/call.css" rel="stylesheet" type="text/css" />
<title>Insert title here</title>
</head>
<body>
<div id="page_margins">
<div id="page">
<!-- Container für Top -->
<div metal:define-macro="top">
<!-- _________________________________________________________________________________ -->
<!-- Container für Kopf -->
<div id="header">
<!-- _________________________________________________________________________________ -->
<!-- Container für Action -->
<div id="nav">
<div id="nav_top">
<!-- _________________________________________________________________________________ -->
<!-- Start Breadcrumb -->
<div id="breadcrumb">
</div>
<!-- Ende Breadcrumb -->
<!-- _________________________________________________________________________________ -->
<!-- Start Useraction -->
<div id="useraction">
</div>
<!-- Ende Useraction -->
<!-- _________________________________________________________________________________ -->
</div>
</div>
<!-- Schließen der Container für Action -->
<!-- _________________________________________________________________________________ -->
</div>
<!-- Schließen der Container für Top -->
</div>
</div>
</div>
<!-- _________________________________________________________________________________ -->
<!-- Container fuer Content -->
<div metal:fill-slot="content"id="column1">
<div id="column_01_content" class="clearfix">
</div>
</div>
<!-- _________________________________________________________________________________ -->
<div metal:fill-slot="content"id="column2">
<div id="column_02_content" class="clearfix">
</div>
</div>
<!-- _________________________________________________________________________________ -->
<div metal:fill-slot="content"id="column3">
<div id="column_03_content" class="clearfix">
</div>
</div>
<!-- Ende Slot Content -->
<!-- Schliessen der Container -->
<!-- _________________________________________________________________________________ -->
</div>
<div id="nav">
<div id="nav_bottom"> Datum </div>
</div>
<div id="footer"></div>
</body>
</html>
--------------------------------------------------------------------
Hoffe, das hilft weiter...
lg
qb.
