✔ CSS anstelle einer Tabelle

Status
Nicht offen für weitere Antworten.
M

mkoeni1

Erfahrenes Mitglied
Hallo Leute,

ich habe ein Problem und benötige Eure Hilfe.

Auf einer Webseite möchte ich den Inhalt einer Datenbank ausgeben.
Für die Anzeige hab ich mir das os gedacht, dass nach 5 Objekten einfach eine Zeile weiter drunter weiter ausgegeben wird.

Code: 
------   -------     --------    --------    ---------
-------   -------     -------     -------     ---------
------ bedeutet Objekt(<td>-------</td>)

Mit Tabellen ist das soweit kein Problem, ich möchte dies aber gerne mit CSS machen, da der Spielraum der Möglichkeiten viel größer ist. (Hintergrundfarbe, Abstand ausen/innen zwischen den Objekten, Rahmen (3D) ,... ).

Wer kann mir hier einen Tip geben?

Die Frage ist, wie kann ich dem Browser sagen. er soll <span></span> nicht alle nebeneinander darstellen, sondern sagen wir mal nur 5 und dann umbrechen?
PHP: 
<?php
?>
<html><head><title>Objekte mit CSS listen</title>
<style type="text/css">
<!--

.test{
	background-color: yellow;
	height: 150px;
	width: 70px;
	margin:20px 30px 40px 50px;
}

//-->
</style>

<title>Testausgabe im Browser (Browserweiche?)</title>
</head><body>



<?php
for($i = 1; $i < 12; $i++){
	echo '<span class="test">';
	echo 'Objekt '.$i.'';
	echo '</span>';
}



?>


</body>
</html>

Vielen Dank und Gruß
Matze
 
Zuletzt bearbeitet:
Hi,

warum so umständlich?

Wenn die Daten aus der DB tabellarsich ausgegeben werden sollen, ist eine Tabelle hierfür doch semantisch prädestiniert und lässt sich ebenfalls wunderbar mit CSS formatieren.

[editpost]

Dass das p-Element vom Browser untereinander dargestellt wird, liegt einfach daran, dass es sich hierbei um ein Block-Element handelt, das einen automatischen Zeilenumbruch / Absatz im Textfluss vornimmt.

Wenn es horizontal ausgerichtet werden soll, wäre die float-Eigenschaft erforderlich.
 
kann ich CSS in sagen wir mal einer <td></td> einbetten. Mach ich das über eine div oder spreche ich direkt das Element td an?

So sieht es schon mal gut aus, ohne tabelle:
PHP: 
<?php
?>
<html><head><title>Objekte mit CSS listen</title>
<style type="text/css">
<!--




#test{
    background-color: yellow;
    height: 150px;
    width: 130px;
    margin:5px 5px 5px 5px;
    border:solid 1px lightgrey;
    text-align: center;
    float: left;
}

//-->
</style>

<title>Alles zu Formularen</title>
</head><body>

<?php
//  Gesamter Inhalt der Seite DIV wird mit Hilfe von CSS ausgerichtet 
echo '<div style="width:500px;height: 600px; margin:0px auto;  border:dashed 1px lightgrey;">';

for($i = 1; $i < 12; $i++){
    echo '<div id="test">';
    echo 'Objekt '.$i.'<br>';
    echo 'Beschreibung<br>';
    echo 'Attribute<br>';
    echo '</div>';
}


echo '</div>';
?>


</body>
</html>

Ja, die Daten aus der DB sollen tabellarsich ausgegeben werden. Das Problem wird sein, wenn ich Tabelle und CSS verknüpfe wird zB. der Abstand zwischen zwei Spalten sein. Aber wenn ichs mir richtig ueberlege, müsste es doch so gehen ...


Vielen Dank und Gruß
Matze
 
Zuletzt bearbeitet:
Von welchem td-Element sprichst du überhaupt? Und wieso willst du darin ein Stylesheet einbinden?

Falls das DIV test in dem Dokument mehrmals enthalten sein soll, muss die ID in eine Klasse umgewandelt werden, da eine ID im Dokument nur einmal vergeben werden darf.
 
Hi Maik,

ich hab das Problem gelöst. In der Tat habe ich mit dem <td></td> Element eine Spalte angesprochen.
Die ID habe ich in Klassen umgewandelt, damit diese auf der Seite mehrmals auftreten dürfen.


PHP: 
<?php
// ausgewahlten Wert zuweisen
    $anzahl = $_POST['select'];
    $sql = "SELECT * FROM user LIMIT ".$anzahl."";
//    echo $sql;
$result = mysql_query($sql);

// Zähler Starten
$zahl = "0"; 
// Tabelle Starten
echo "<table border=\"0\"><tr>" ;
// My SQL Abfrage
while($row=mysql_fetch_object($result)){
     $cutpass = substr($row->password, 0, 5);
    echo "<td><div class=\"test\">".$row->username."<br><div class=\"untertest\"".$row->email."<br><b>".$cutpass."</b>...</div></div></td>" ; 

// Wenn Zahl == 1 dann wird eine neue Zeile angefangen
    if($zahl == "2")
        {
            echo "</tr><tr>" ; 
            $zahl = "-1" ; 
        }
    $zahl++;
}
echo "</table>" ;

?>


und die dazugehördene Stylesheet-Datei:
HTML: 
<style type="text/css">
<!--




div.test{
    background-color: yellow;
    height: 150px;
    width: 130px;
    margin:5px 5px 5px 5px;
    border:solid 1px lightgrey;
    text-align: center;
}

div.untertest{
    text-align: left;
    border-top: 1px lightgrey;
}

//-->
</style>


Vielen Dank
Matze
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück