nicht angemeldet
Div container
Hallo,
ich Trottel habe eine Seite mit Tabellenlayout erstellt.
Das Ergebnis kann man hier zu einsehen:
Leider zerschießt nun ein Text, der im Hauptteil steht (hier mal mit <br> simuliert) das Layout wie man ja sieht.
Unten auf der Seite steht jetzt das Lösungsvorhaben: div-Container
Leider weiß ich nicht viel über das Arbeiten mit div-containern.
Wie kann ich die div container so platzieren, dass sie immer auf der Mitte der Homepage erscheinen und sich nahtlos, wie in der Skizze schematisch dargestellt, zusammenfügen?
Vielen Dank für Eure Hilfe!!
-
ich Trottel habe eine Seite mit Tabellenlayout erstellt.
kommt vor...
Unten auf der Seite steht jetzt das Lösungsvorhaben: div-Container
Leider weiß ich nicht viel über das Arbeiten mit div-containern.
Wie kann ich die div container so platzieren, dass sie immer auf der Mitte der Homepage erscheinenDadurch dass du den HP Inhalt vom verhalten eines äusseren Elements abhängig machst.
Hier als Beispiel das <body> Element
CSS
body{
width:100%;
min-width400px;
max-width:1200px;
margin:0 auto;
}und sich nahtlos, wie in der Skizze schematisch dargestellt, zusammenfügen?
Der header ist ein Bereich, der ganz einfach 100% width hat.
der main Bereich besteht au einem Element, das ich als sidebar bezeichne und einem Element, das ich als content bezeichne.<div id="sidebar">Navigation</div>
<div id="content">Der Hauptinhalt</div>CSS
#sidebar{ float:left; width:25%; border:0}
#content{ margin-left:25%; border:0;}Da wir aber im HTML lieber den Inhalt vor dem Sidebar haben:
<div id="content">Der Hauptinhalt</div>
<div id="sidebar">Navigation</div>CSS
#content{ float:left; width:75%; border:0;}
#sidebar{ margin-left:75%; border:0;}Dies mal zum experimentieren...
mfg Beat
-
Danke für Deine Hilfe,
ich habe folgendes schon hinbekommen:
So weit so gutLeider bekomme ich die Elemente einfach nicht in die Mitte der Seite. Habe versucht bei den drei containern jeweils margin: auto einzufügen, aber das wird völlig ignoriert/es ändert sich nichts.
Hier mein Code (der übrigens viel übersichtlicher ist, Danke!!)
<html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <style type="text/css"> body { margin:0 auto; padding:0; min-width400px; max-width:1200px; background-color:#e2e2e2; } div { border:0px; } #s1 { width:900px; height:180px; position:relative; top:50px; } #s2 { width:180px; height:543px; position:relative; top:50px; } #s3 { width:720px; height:900px; position:absolute; top:230px; left:180px;} </style> </head> <body> <div id="s1"><img src="graphics/intern/obere_Leiste.jpg" width="900" height="180" alt="" border="0"></div> <div id="s2"><img src="graphics/intern/Aktuelles_a.jpg" width="180" height="90" alt="" border="0"><br> <img src="graphics/intern/Anmeldung_a.jpg" width="180" height="55" alt="" border="0"><br> <img src="graphics/intern/Gaestebuch_a.jpg" width="180" height="55" alt="" border="0"><br> <img src="graphics/intern/Statistik_a.jpg" width="180" height="72" alt="" border="0"><br> <img src="graphics/intern/About_a.jpg" width="180" height="55" alt="" border="0"><br> <img src="graphics/intern/Zielscheibe.jpg" width="180" height="216" alt="" border="0"></div> <div id="s3"><img src="Untitled-2.jpg" width="720" height="900" alt="" border="0"></div> </body> </html>-
So weit so gut
Leider bekomme ich die Elemente einfach nicht in die Mitte der Seite. Habe versucht bei den drei containern jeweils margin: auto einzufügen, aber das wird völlig ignoriert/es ändert sich nichts.<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" /><style type="text/css">
body { margin:0 auto; padding:0; min-width400px; max-width:1200px; background-color:#e2e2e2; }min-width400px; enthält einen Fehler.
Wenn du ja schon weisst, dass deine Inhalte absolute Breite haben, warum verwendest du nicht die richtige absolute Breite?div { border:0px; }
#s1 { width:900px; height:180px; position:relative; top:50px; }
#s2 { width:180px; height:543px; position:relative; top:50px; }
#s3 { width:720px; height:900px; position:absolute; top:230px; left:180px;}#s3 ist absolut auf den <body> bezogen, genauer auf die linke obere Ecke.
Wenn ich jetzt mit FF3 zoome, geschieht etwas ganz hässliches.Grund, um nochmals über die Bücher zu gehen.
mfg Beat;
-
Hmm, habe das jetzt durch relative ersetzt und die Breite des Bodys auf 900 gesetzt.
Das ganze rückt aber immer noch nicht in die Mitte. Dieser Befehl im body mit margin: 0 auto scheint nicht zu funktionieren. Der hat überhaupt keinen einfluss.<head> <title></title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <style type="text/css"> body { margin:0 auto; padding:0; width:900px; background-color:#e2e2e2; } div { border:0px; } #s1 { width:900px; height:180px; position:relative; top:50px; } #s2 { width:180px; height:543px; position:relative; top:50px; } #s3 { width:720px; height:900px; position:relative; top:-493px; left:180px;} </style> </head>-
Hi,
Das ganze rückt aber immer noch nicht in die Mitte. Dieser Befehl im body mit margin: 0 auto scheint nicht zu funktionieren. Der hat überhaupt keinen einfluss.
Wenn du ein Element zentrieren willst, dann willst du *diesem* auf beiden Seiten den gleichen Abstand geben - und *nicht* dem uebergeordneten Element.
Und mit "Befehlen" haben wir es hier uebrigens ueberhaupt nicht zu tun.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“ -
Hi,
Das ganze rückt aber immer noch nicht in die Mitte.
doch, tut es. Gibt es eigentlich einen Grund, weshalb Du die Seite in den Quirks-Mode schaltet?
Dieser Befehl im body mit margin: 0 auto scheint nicht zu funktionieren.
Genau wie in HTML gibt es auch in CSS keinen einzigen Befehl.
#s1 { width:900px; height:180px; position:relative; top:50px; }
#s2 { width:180px; height:543px; position:relative; top:50px; }
#s3 { width:720px; height:900px; position:relative; top:-493px; left:180px;}Du setzt definitiv zu viel position ein.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Da ist nichts in der Mitte. Wenn ich mir das im IE 7 anschaue ist das alles schön linksbündig.
Wo ist der Fehler?????
<head> <title></title> <style type="text/css"> body { margin:0 auto; padding:0; width:900px; background-color:#e2e2e2; } div { border:0px; } #s1 { width:900px; height:180px; position:relative; top:50px; margin:auto;} #s2 { width:180px; height:543px; } #s3 { width:720px; height:900px; position:relative; top:-543px; left:180px;} </style> </head>-
Da ist nichts in der Mitte. Wenn ich mir das im IE 7 anschaue ist das alles schön linksbündig.
Wo ist der Fehler?????
In deinem DOCTYPE
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp
Google mal den Einfluss welchen eine bestimmte DOCTYPE auf MSIE bezüglich Quirksmode oder Standard Mode ausübt.
mfg Beat
-
Hi,
Da ist nichts in der Mitte. Wenn ich mir das im IE 7 anschaue ist das alles schön linksbündig.
Wo ist der Fehler?????neben dem Quirksmode liegt Dein wohl schwerster Fehler offenbar darin, primär mit einem Browser zu testen, der hierfür absolut ungeeignet ist. Verwende zunächst Firefox oder einen ähnlich hochwertigen Browser.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
-
-
-
-
-
Hi,
Leider weiß ich nicht viel über das Arbeiten mit div-containern.
das Wesentlichste dazu ist die Erkenntnis, dass das Arbeiten mit <div>-Elementen, um eine bestimmte Darstellung zu erreichen, *exakt* das selbe wie Tabellenlayout ist. Recherchiere nach dem Begriff des semantischen Markups.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes