nicht angemeldet
Problem bei Ausrichtung von DIV-Elementen
Seitdem ich angefangen bin, mich mit PHP zu befassen, bin ich dabei auch auf die Verwendung von div-Elementen umgestiegen.
Da ich mich aber mit diesen Tags und deren Ausrichtung noch nicht lange genug befasst habe, stehe ich nun vor folgendem Problem:
Ich versuche jetzt schon seit längerem folgendes Layout zu gestalten:
<img src="" alt="layout" />
Der nun folgende HTML/PHP-Code ist einer von vielen Versuchen, den ich diesbezüglich verwendet habe.
Leider jedoch kommen ich nicht auf das richtige Ergebnis.
//Inhalt der index.php
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Pagename</title>
<style type="text/css">
#wrapper { width:1000px;
margin-right:auto;
margin-left:auto;}
#header { width: 100%;}
#navileft { width: 14%;
float: left;}
#naviright { width: 14%;
float: left;
position: relative;
bottom: 24px;}
#bar1 { width: 871px;
position: relative;
right: 10px;}
#bar2 { width: 860px;
float: left;
position: relative;
right: 72px;}
#content { width: 720px;
float: left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><?php include "header.php"; ?></div>
<div id="navileft"><?php include "navileft.php"; ?></div>
<div id="bar1"><?php include "bar1.php"; ?></div>
<div id="bar2"><?php include "bar2.php"; ?></div>
<div id="content"><?php include "content.php"; ?></div>
<div id="naviright"><?php include "naviright.php"; ?></div>
<br style="clear:both;" />
</div>
</body>
</html>
//END
Ich hoffe, dass jemand von euch so nett ist und mir hilft ^^
gez. B4ttl3m4st3r
-
Da ich mich aber mit diesen Tags und deren Ausrichtung noch nicht lange genug befasst habe, stehe ich nun vor folgendem Problem:
<div>-Elemente sind nichts Besonderes, sie funktionieren genauso wie alle anderen gleichartigen (<p>, <hx>, etc).
Ich versuche jetzt schon seit längerem folgendes Layout zu gestalten:
<img src="" alt="layout" />Ui.
Leider jedoch kommen ich nicht auf das richtige Ergebnis.
<html><head><title></title></head><body></body></html> sollte reichen :>
#wrapper { width:1000px;
margin-right:auto;
margin-left:auto;}Pixelangaben sind grundsätzlich ungünstig und Angaben in diesen Dimensionen rundweg schlecht. Wenn mal jemand das Browserfenster etwas verkleinert oder eine Zusatzleiste offen hat, kriegt er solche Klopper wie den da oben nicht mehr komplett in den Anzeigebereich.
<div id="wrapper">
<div id="header"><?php include "header.php"; ?></div>
<div id="navileft"><?php include "navileft.php"; ?></div>
<div id="bar1"><?php include "bar1.php"; ?></div>
<div id="bar2"><?php include "bar2.php"; ?></div>
<div id="content"><?php include "content.php"; ?></div>
<div id="naviright"><?php include "naviright.php"; ?></div>
<br style="clear:both;" />
</div>Ohne das jetzt schon im Vorfeld niedermachen zu wollen, aber in Verbindung mit Deiner eingangs gemachten Bemerkung: Fang' nicht an, <div>-Wüsten zu bauen.
So, und jetzt musst Du wohl nochmal erklären, wo eigentliche Dein Problem liegt.
-
Vielend Dank für deine schnelle Antwort, P07t b3i S07k.
Mir ist aufgefallen, dass ich die Adresse des Bildes vergessen habe.
Hier noch einmal das Bild mit dem Layout:http://img91.imageshack.us/my.php?image=layoutmn8.jpg
gez. B4ttl3m4st3r
-
Hi,
bitte antworte doch direkt auf das Posting, auf das du dich beziehst.
Mir ist aufgefallen, dass ich die Adresse des Bildes vergessen habe.
Nicht nur dir, ja :-)
Hier noch einmal das Bild mit dem Layout:
http://img91.imageshack.us/my.php?image=layoutmn8.jpg
Du beschaeftigst dich am besten erst mal mit dem SELFHTML-Artikel [m]ehrspaltige CSS-basierte Layouts; und auch http://www.glish.com/css/ kann fuer's Grundverstaendnis sicher weiterhelfen.
MfG ChrisB
-
(Ohne das jetzt ausprobiert zu haben) Folgende Reihenfolge wäre mein erster Ansatz:
-
wrapper als alles umschließendes Element, position:relative gesetzt, damit float-Elemente nicht rausfallen. Keine Pixelbreite, jedenfalls nicht mit 1000 Pixel.
-
header wie gehabt.
-
navileft mit float:left und width.
-
bar1
-
naviright mit float:right und width.
-
bar2
-
content
Alles andere erstmal raus. content, eventuell auch bar1 und bar2, musst Du vermutlich mittels margin-left und -right Außenränder links und rechts in der Weite der Navi-Bereiche geben, weil deren Inhalt sonst am Ende von navileft und -right ganz an den Rand von wrapper rückt.
-
-