B4ttl3m4st3r: Problem bei Ausrichtung von DIV-Elementen

SELF-Forum

Problem bei Ausrichtung von DIV-Elementen

B4ttl3m4st3r
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem bei Ausrichtung von DIV-Elementen

    P07t b3i S07k
    – Informationen zu den Bewertungsregeln

    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.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Problem bei Ausrichtung von DIV-Elementen

    B4ttl3m4st3r
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem bei Ausrichtung von DIV-Elementen

      ChrisB
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Problem bei Ausrichtung von DIV-Elementen

      P07t b3i S07k
      – Informationen zu den Bewertungsregeln

      (Ohne das jetzt ausprobiert zu haben) Folgende Reihenfolge wäre mein erster Ansatz:

      1. wrapper als alles umschließendes Element, position:relative gesetzt, damit float-Elemente nicht rausfallen. Keine Pixelbreite, jedenfalls nicht mit 1000 Pixel.

      2. header wie gehabt.

      3. navileft mit float:left und width.

      4. bar1

      5. naviright mit float:right und width.

      6. bar2

      7. 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.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln