nicht angemeldet
Verzweifle bald an einem CSS-Layout
Hallo,
Ich plage mich seit längerem mit vergeblichen Versuchen herum, folgendes CSS-Layout zu erstellen:
+-----------------+
| 1 |
+---+---------+---+
| | | |
| | | |
| | | |
| 2 | 3 | 4 |
| | | |
| | | |
| | | |
+---+---------+---+
| 5 | 6 | 7 |
+---+---------+---+
Die Definition für Höhe, Breite und Grafik der einzelnen Div-Bereiche ist kein Problem, nur die Anordnung der Elemente zueinander funktioniert rein gar nicht. Alle Div-Bereiche sollen nahtlos aneinander schliessen und keine festen Positionen haben. Der gesamte Block soll in Bildschirmmitte zentriert sein (horizontal und vertikal).
Wie kann ich das Layout umsetzen ?
Gruss, Michael
-
Hallo!
+-----------------+
| 1 |
+---+---------+---+
| | | |
| 2 | 3 | 4 |
| | | |
+---+---------+---+
| 5 | 6 | 7 |
+---+---------+---+... die Anordnung der Elemente zueinander funktioniert rein gar nicht.
Also wirklich helfen kann ich Dir nicht, aber vielleicht diese Seite http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html?
Beste Grüße
Viennamade-
Also mein Layout soll ungefähr wie Deines aussehen. Habs tabellenfrei geschrieben. Funzt auf allen Browsern ausser auf diesem verdammten Internetexplorer. Habe Spacer mit 2 Pixeln Höhe definiert, die werden aber mit ca. 20 Px angezeigt. Die breite liegt bei 760Px bei mir. Drei Boxen, die in der Summe 760 ergeben werden falsch dargestellt (entspräche Deiner Box 4, die bei mir rechts unter Box 7 geklebt wird,da sich IE wohl verrechnet. Ich bin am Ende meiner Geduld und werde jetzt wohl ne Browserweiche einbauen müssen. MICROSOFT ABSCHALTEN! (würde mich freuen, wenn mir jemand meinen Fehler zeigt, dann nehme ich auch meine MS Angriff zurück!)
Hier mein Layout:
+-----------------+ | 1 | +-----------------+ +---+---------+---+ | | | | | 2 | 3 | 4 | | | | | +---+---------+---+ | 5 | 6 | 7 | +---+---------+---+
mein Template: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <!-- ###DOCUMENT_BODY### --> <!-- Gesamter Inhalt--> <div id="main"> <!-- Titelzeile --> <div id="kopf"></div> <!-- Spacer 2px --> <div id="black"></div> <!-- Navigation --> <div id="platz_links"></div> <div id="navi_links">###MENU###</div> <div id="navi_rechts">###DATE###</div> <div id="platz_rechts"></div> <!-- Spacer 2px --> <div id="black"></div> <!--Inhalt--> <div id="content_links">###CONTENT_LEFT###</div> <div id="content">###CONTENT###</div> <div id="content_rechts"></div> <!-- Spacer 2px --> <div id="black"></div> <!-- Fussleiste --> <div id="platz_links"></div> <div id="fuss_links">###IMPRESSUM###</div> <div id="fuss_rechts">© ###COPYRIGHT###</div> <div id="platz_rechts"></div> <!-- Spacer 2px --> <div id="black"></div>
</div> <!-- ###DOCUMENT_BODY### --> </body> </html>
Hier die css.css
body { margin-top:0; margin-bottom:0; margin-right:20; background-color:#bbbbbb; text-align:center; }
h1 {text-align: center;font-size:13px;font-weight:bold;color:#e40c0c;margin:0px;} h2 {font-size:14px;color:#000000;} h3 {font-size:14px;color:#000000;} p {margin-top:0px;}
#main{ /float:left; vertical-align: top;/ margin: 0px auto; width: 760px; }
a:link, a:visited, a:active { float:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; text-decoration: none; text-align: left; display:block; . color:#1448f3; margin-right: 5px; }
a:hover { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; background-repeat:no-repeat; background-position:top; text-align: left; margin-right:5px; } #kopf{ float:left; vertical-align: top; padding: 0 0 0 0; margin: 0 0 0 0; width: 760px; height: 100px; background-image: url(banner/banner_2.jpg); }
/2px space schwarz/ #black{ float:left; vertical-align: top; padding: 0 0 0 0; margin: 0 0 0 0; height: 2px; width: 760px; background-color: #000000; }
#platz_links{ float:left; vertical-align: top; width:20px; height:20px; padding: 0 0 0 0; margin: 0 0 0 0; background-color:#CC0000; }
#platz_rechts{ float:left; vertical-align: top; padding: 0 0 0 0; margin: 0 0 0 0; width:20px; height:20px; background-color:#CC0000; }
/linke navigationsleiste/ #navi_links{ float:left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 560px; height: 20px; background-color: #CC0000; text-align:left; }
/rechte navigationsleiste/ #navi_rechts{ float:left; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 160px; height: 20px; background-color: #CC0000; text-align:right; }
#content{ float:left; vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 440px; height: 430px; background-color: #ff9933; text-align:justify; }
#content_links{ float:left; vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 160px; height: 430px; background-color: #ff9933; }
#content_rechts{ float:right; vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 160px; height: 430px; background-color: #ff9933; }
#platz_vertikal{ float:left; vertical-align: top; padding: 0 0 0 0; margin: 0 0 0 0; margin: 0 0 0 0; width: 760px; height: 10px; background-color: #ff9933; }
/Fu?zeile/ #fuss_links{ float:left; vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 360px; height: 20px; text-align:left; background-color:#CC0000; }
#fuss_rechts{ float:left; vertical-align: top; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 360px; height: 20px; text-align:right; background-color:#CC0000; }
-
Hallo dirkounet
Also mein Layout soll ungefähr wie Deines aussehen. Habs tabellenfrei geschrieben. Funzt auf allen Browsern ausser auf diesem verdammten Internetexplorer. Habe Spacer mit 2 Pixeln Höhe definiert, die werden aber mit ca. 20 Px angezeigt. Die breite liegt bei 760Px bei mir. Drei Boxen, die in der Summe 760 ergeben werden falsch dargestellt (entspräche Deiner Box 4, die bei mir rechts unter Box 7 geklebt wird,da sich IE wohl verrechnet.
Wenn ich mir diesen Wunschzettel anschaue, kann ich meine Empfehlungen nur wiederholen: Benutz Tabellen!
Deine Vorstellungen lassen sich nicht umsetzten. Benutze CSS so wie es vorliegt aber versuch nicht etwas draus zu machen was es nciht bietet.
Hier mein Layout:
+-----------------+
| 1 |
+-----------------+
+---+---------+---+
| | | |
| 2 | 3 | 4 |
| | | |
+---+---------+---+
| 5 | 6 | 7 |
+---+---------+---+Schau, du hast eine fixe Seite (geht schonmal nicht, da du kein Seitemaß definieren kannst) auf das legst du ein Raster (geht ebenfalls nicht) in dem sich dann deine Bereich befinden (das geht).
Das was du dir umsetzten möchterst läßt sich schon mit einem Textverarbeitungprogramm nur mit halbwegs Kenntniss (ich persönlich könnte es nicht) umsetzten und dort hast du wesentlich mehr Möglichkeiten für ein ein solches Layout.
verabschiede dich von dem Design oder benutz tabellen. Für deine und die Nerven deiner Besucher.
Struppi.
Falls du wirklich mal was mit CSS machen willst:
Eine sehr gute Einführung:
http://www.jendryschik.de/wsdev/einfuehrung/Interessante Techniken:
http://css.maxdesign.com.au/listamatic/
http://www.glish.com/css/home.aspArtikel, die dir Design für's Internet näher bringen können:
http://www.woodshed.de/index.html
http://www.kommdesign.de/-
ich will weg von den Tabellen, da auch hier der IE nur Mist macht. Zur Zeit ist ne Tabellenversion online. www.hochschulfest.de . Mit dem IE sieht das zum Kotzen aus, vor allem das Menü. Aber ich bleibe jetzt auch erstmal bei den Tabellen und poste dann hier, wenn ich ne Lösung habe
-
hi,
Mit dem IE sieht das zum Kotzen aus, vor allem das Menü.
na ja, bei über 60 fehlern im HTML-code ist auch im IE irgendwann schluss mit lustig,
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.hochschulfest.de%2Fgruss,
wahsaga -
Hi dirkounet,
Mit dem IE sieht das zum Kotzen aus, vor allem das Menü.
Der IE hat keine besonderen Probleme mit Tabellen, es liegt also an Deinem Code...
Viele Grüße
Mathias Bigge
-
-
-
-
-
Hallo Michael,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<style type="text/css">
html {height:100%;margin:0px;padding:0px}
</style>
</head>
<body style="height:100%;background:black;text-align:center;color:#fff;margin:0px;padding:0px">
<div style="height:50%;margin-bottom:-150px"> </div>
<div style="margin:auto;border:5px solid #888;height:300px;width:580px">
<div style="border:1px solid #777;height:19px">1</div>
<div style="border:1px solid #777;float:left;width:100px;height:256px">2</div>
<div style="border:1px solid #777;float:left;width:374px;height:256px">3</div>
<div style="border:1px solid #777;float:left;width:100px;height:256px;overflow:auto">4</div>
<div style="border:1px solid #777;float:left;width:100px;height:19px">5</div>
<div style="border:1px solid #777;float:left;width:374px;height:19px">6</div>
<div style="border:1px solid #777;float:left;width:100px;height:19px">7</div></div>
</body>
</html>Das Layout ist zwar in px zementiert, schließt aber bündig ab, da scheint also nicht das Problem zu liegen... ja aber wo ist es denn dann?
Gruß aus Berlin!
eddi -
Ich plage mich seit längerem mit vergeblichen Versuchen herum, folgendes CSS-Layout zu erstellen:
+-----------------+
| 1 |
+---+---------+---+
| | | |
| | | |
| | | |
| 2 | 3 | 4 |
| | | |
| | | |
| | | |
+---+---------+---+
| 5 | 6 | 7 |
+---+---------+---+Wenn du wirklich unbedingt so ein Layout brauchst, dann nimm Tabellen!
CSS bietet noch keine Möglichkeit Raster zu Layouten. Sondern ist dafür ausgelegt, fließende Elemente möglichst flexibel darzustellen. Das was du vorhast sollte man gar nicht erst versuchen, da es (zumindest momentan) nicht dem entspricht wofür HTML/CSS gedacht ist bzw. ausgelegt ist.
Sinnvoller als sich was Tolles zu überlegen und das irgendwie hinzuwurschteln, ist es, sich Gedanken über die vorhandenen Möglichkeiten zu machen und daraus das Beste umzusetzten.
Struppi.