Anordnung einzelner Div-Elemente ohne Überlappung

[muderseb]

Hallo zusammen,

nach Durchwühlen diverser Foren ohne Auffinden einer Problemlösung versuche ich es jetzt mal mit einem neuen Thread. Und zwar geht es um folgende

Situation: Gerade bemühe ich mich, ein PHP-Skript für meinen kleinen Blog zu schreiben. So weit so gut. Auf der Startseite sollen links die letzten drei Artikel erscheinen, in einer rechten Spalte die letzten drei Kommentare zu jedem Artikel nebst Formular, um einen weiteren einzustellen. Die Formatierung erfolgt über CSS (und ich möchte es wenn möglich nicht mittels einer Tabellenstruktur realisieren), wobei ich die Artikelspalte aus wohlerwogenen Gründen relativ, die Kommentarspalte absolut positioniere.

Wenn ich jetzt über das unten beigefügte PHP-Skript mittels einer Schleife Artikel und Kommentare aus der MySQL-Datenbank auslese, wird zwar grds. alles korrekt dargestellt; Probleme gibt es aber, wenn die rechte Spalte (Kommentarbereich) länger als der dazugehörige Artikel wird, denn dann folgt links zwar unterhalb des alten Artikels der neue; der dabei rechts dann eingeblendete Kommentarbereich aber wird von seinem Gegenstück des vorgehenden Artikels überschrieben, was mehr als unschön aussieht. Was kann ich tun?

Vielen Dank im Voraus für eure Hilfe,
Sebastian

Der PHP-Code:

<?php

// Daten aus Tabelle für Artikel werden ausgewählt
$sq1 = "SELECT
     Titel,
     Inhalt,
     Autor,
     ID,
     Datum
    FROM
     Artikel
    ORDER BY
     Datum DESC";

$result1 = mysql_query($sq1) OR die(mysql_error());

// Ab hier wird dann die Website zusammengebaut.

echo "<div id="Grundstruktur">\n";
if (mysql_num_rows($result1)) {
  for($i=0; $i<3 AND $row1 = mysql_fetch_assoc($result1); $i++) {
   echo "<div class="Artikel">\n";
   echo "<h1>\n";
   echo "<a class="Titellink" title="Klicken Sie hier, um den Artikel mit allen Kommmentaren zu lesen." href="artikel_solo.php?id=";
   echo $row1["ID"];
   echo "">\n";
   echo $row1["Titel"];
   echo "</a>\n";
   echo "</h1>\n";
   echo "<p>\n";
      $search = array ('[b]', '[/b]', '[i]', '[/i]', '&', ':-)';
      $replace = array ('<span class="bold">', '</span>', '<span class="italics">', '</span>', '&amp;', '<img src="Grafiken/smiley_smile.gif" alt=":-)" height="15" width="15" />';
   echo nl2br (str_replace ($search, $replace, $row1["Inhalt"]));
   echo "</p>\n";
   echo "<p>\n";
   echo $row1["Autor"];
   echo "</p>\n";
   // Ab hier wird der jweilige Kommentarabschnitt eingebaut...
   // Daten aus Tabelle für Kommentare werden ausgewählt.
   $sq2 =  "SELECT
        Inhalt,
        Autor,
        Datum
       FROM
        kommentare
       WHERE
        NEWS_ID = '".$row1['ID']."'
       ORDER BY
        Datum DESC";
   $result2 = mysql_query($sq2) OR die(mysql_error());
   // Daten aus dieser Tabelle werden ausgelesen.
   echo "<div class="comments">\n";
   echo "<h1>\n";
   echo "Letzte Kommentare\n";
   echo "</h1>\n";
   if (mysql_num_rows($result2)) {
  for($j=0; $j<3 AND $row2 = mysql_fetch_assoc($result2); $j++) {
   echo "<p>\n";
   echo nl2br($row2["Inhalt"]);
   echo "\n";
   echo "<br />\n";
   echo $row2["Autor"];
   echo ", am ";
   echo $row2["Datum"];
   echo "\n";
   echo "</p>\n";
  }
  mysql_data_seek ($result2, 0);
} else {
   echo "<p>Leider momentan kein Kommentar vorhanden.</p>\n";
  }
  // ...und hier das entsprechende Formular.
  echo    "<form action="formular.php" method="post">\n";
  echo      "<textarea class="Kommentarfeld" name="Inhalt" title="Hier können Sie Ihren eigenen Kommentar eingeben." cols="31" rows="3" ></textarea>\n";
  echo   "<input class="Name" name="Autor" title="Tragen Sie hier bitte Ihren Namen ein." type="text" size="18" maxlength="25" />\n";
  echo      "<input class="Absende-Button" type="submit" value="Absenden" title="Klicken Sie hier, um Ihren Kommentar abzusenden." />\n";
  echo      "<input class="News-ID" type="hidden" name="NEWS_ID" value="";
  echo   $row1['ID'];
  echo   "" />\n";
  echo    "</form>\n";
  echo "</div>\n";
  echo "</div>\n";
  // Ende des Kommentarabschnitts.
  }
} else {
   echo "<p>Leider momentan kein Artikel vorhanden.<p>\n";
  }
   echo "</div>\n";
?>

[suit]

Was kann ich tun?

uns nicht mit eine php code wüste zu nerven ;)

es handelt sich scheinbar um ein html/css problem - darum solltest du auch nur den fertig generierten html-code und das verwendete css posten (vereinfacht am besten) oder einen link dazu

dann wird man dir sicher besser helfen können

[muderseb]

Hallo nochmal,

es handelt sich scheinbar um ein html/css problem - darum solltest du auch nur den fertig generierten html-code und das verwendete css posten

(vereinfacht am besten) oder einen link dazu

dann wird man dir sicher besser helfen können

OK, ich dachte eben, vielleicht könnte man über PHP irgendwie die Länge des jeweiligen Artikel- und Kommentarabschnitts kontrollieren und dann die Differenz dazwischen (falls negativ, d.h. der Artikel ist kürzer als der Kommentarabschnitt) dazu verwenden, um den nächsten Artikelabschnitt entsprechend weiter unten anfangen zu lassen.

Der HTML-Abschnitt im Übergang zwischen Kommentarbereich und nächsten Artikel sieht so aus:

<div class="Artikel">
<!-- Hier beginnt jetzt der angesprochene Artikel -->
<h1>Irgendein Titel</h1>
<p>Irgendein Artikel</p>
<p>Irgendein Autor</p>
<div class="comments">
<!-- Und hier der jeweilige Kommentarbereich -->
<h1>Letzte Kommentare</h1>
<p>Irgendein Kommentar<br />Autor und Datum</p>
<p>Noch ein Kommentar<br />Autor und Datum</p>
<!-- usw., am Ende der Kommentare folgt das Formular zum Eingeben weiterer Kommentare -->
<form action="formular.php" method="post">
<!-- Verschiedene Formularfelder und der Absende-Button -->
</form>
</div>
</div>

Die entsprechenden CSS-Befehle lauten momentan:

div.comments            { position:absolute; top:-13px; left:445px; width:200px; }
div.Artikel             { position:relative; top:20px; left:0px;  width:400px;}

Vielen Dank für eure bisherige Hilfe,
Sebastian

[suit]

OK, ich dachte eben, vielleicht könnte man über PHP irgendwie die Länge des jeweiligen Artikel- und Kommentarabschnitts kontrollieren und dann die Differenz dazwischen (falls negativ, d.h. der Artikel ist kürzer als der Kommentarabschnitt) dazu verwenden, um den nächsten Artikelabschnitt entsprechend weiter unten anfangen zu lassen.

wie oben schon gesagt: absolut ist ein fehler - floatende elemente und ein clear darunter sind praktischer

ggf solltest du dich in mehrspaltige layouts mit css bzw in puncto textfluss etwas einlesen

  
<div id="wrapper">  
  <div id="header">header</div>  
  <div id="artikel">artikel</div>  
  <div id="kommentare">kommentare</div>  
  <div id="footer">footer</div>  
</div>  

  
#wrapper {  
  width: 800px;  
}  
  
#artikel {  
  width: 100%;  
}  
  
#artikel {  
  float: left;  
  width: 50%;  
}  
  
#kommentare {  
  float: left; /* ja, left */  
  width: 50%;  
}  
  
#footer {  
  width: 100%;  
  clear: both;  
}  

[suit]

#artikel {
  width: 100%;
}

#artikel {
  float: left;
  width: 50%;
}

soll natürlich #header und #artikel sein ;)

[muderseb]

Hallo Suit und Harlequin,

danke für die nochmalige Unterstützung! Ich probier das mal heute abend aus, bestimmt klappt's jetzt...!

Viele Grüße,
Sebastian

[Steel]

Hi!

Dein Probelm war folgendes:

ein mit absolute formatiertes Element wird aus dem Dokumentfluss genommen. Es vergroessert dann auch nicht das umschliessende Elternelement und ragt darueber hinaus. Auch alles andere fliesst darunter durch (drueber weg - je nach z-index). Deshalb ragen deine laengeren Kommentare in den Bereich darunter und ueberlappen sich.

Die Loesung von Suit ist ein Layout fuer eine standard 2 Spaltenloesung mit Kopf und Fuss.

Das hier sollte etwas naeher an deinem momentanen Code liegen:

.artikel {  
  clear:both;  
  width: 800px;  
  margin-right:50%;  
  
  background-color: blue;  
}  
  
.kommentare {  
  float: right;  
  width: 50%;  
  background-color: yellow;  
} 

<div class="artikel">  
  <div class="kommentare">Kommentare</div>  
  <h1>Titel</h1>  
  <p>Artikel</p>  
  <p>Author</p>  
</div>

Eine Loesung mit Wrapper und eigenen Containern fuer Artikel und Kommentaren, wie man sie bei Suits Vorschlag sieht, ist natuerlich auch eine Moeglichkeit. Gerade wenn man es nicht mag, dass die Kommentare, die ja rechts vom Artikel sind, davor notiert werden.

Viel Erfolg!

[muderseb]

Hallo Steel,

herzlichen Dank für die nochmalige Verbesserung von Suits Lösungsvorschlag. Dein Code liegt tatsächlich noch näher an meiner momentanen Version der CSS-Stile, jetzt sollte es endgültig klappen.

Herzliche Grüße,
Sebastian

[Harlequin]

Yerf!

wobei ich die Artikelspalte aus wohlerwogenen Gründen relativ, die Kommentarspalte absolut positioniere.

Wie wohlerwogen waren diese wirklich? Denn genau diese absolute Positionierung sorgt nun für dein Problem.

Evtl. wäre es besser die Nebeneinanderdarstellung durch float mit abschließendem clear zu realisieren.

Gruß,

Harlequin