Boxen anordnen

marciboy · 24. März 2006

Hallo

habe folgendes Problem:

Ich habe auf meiner seite 6 boxen untereinander. Nun versuche ich jeweils 2 nebeneinander zu bekommen.

Hat vielleicht jedand einen Tipp

Gruß
Marc

fanste · 24. März 2006

Hi,

Was meinst du mit Boxen? Meinst du DIVs?

Versuch es mal mit der style-Eigenschaft "float".

Zudem gehört das Thema in das HTML oder CSS Forum. Bitte also einen Mod es zu verschieben

marciboy · 24. März 2006

Hallo

erstmal Danke für deine Antwort.
Die Boxen werden im Adminbreich angelegt und erscheinen dann im front. Leider nur untereinander. Mein Problem ist jetzt wie ich jeweils 2 boxen nebeneinander bekomme. Und dann immer so weiter nach unten.

PHP:

<?php

if($pakete=="normal")
{

$abfrage = "SELECT * FROM webspace_pakete";
$ergebnis = mysql_query($abfrage);
while($row = mysql_fetch_array($ergebnis))
{
echo"
<table width=\"200\" cellpadding=\"0\" cellspacing=\"0 \"border=\"0\">
  <tr>
 <td width=\"6\"><img src=\"images/news_left.png\" width=\"6\" height=\"19\" border=\"0\"></td>
<td valign=\"baseline\" class=\"text\" background=\"images/news_var.png\" width=\"189\"><center>Angebot &nbsp;&nbsp;<b>" . $row['name'] . "</b></td>
    <td width=\"5\"><img src=\"images/news_right.png\" width=\"5\" height=\"19\" border=\"0\"></td>
  </tr>
</table>

<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>
<td width=\"10\"></td><td>

<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">

   <tr>
    <td class=\"text\">&nbsp;&nbsp;<b>Speicherplatz</b></td>
    <td class=\"text\">&nbsp;&nbsp;" . $row['mb'] . "</td>
  </tr>

  <tr>
    <td class=\"text\">&nbsp;&nbsp;Traffic</td>
    <td class=\"text\">&nbsp;&nbsp;" . $row['transfervolumen'] . "</td>
  </tr>

  <tr>
    <td class=\"text\">&nbsp;&nbsp;MYSQL</td>
    <td class=\"text\">&nbsp;&nbsp;" . $row['mysql'] . " x</td>
  </tr>

  <tr>
    <td class=\"text\">&nbsp;&nbsp;Domains</td>
    <td class=\"text\">&nbsp;&nbsp;" . $row['domains'] . " </td>
  </tr>

</table>

<br>

<table width=\"198\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">

  <tr>
    <td class=\"text\">&nbsp;&nbsp;Preis Pro Monat</td>
    <td class=\"text\">&nbsp;&nbsp;" . $row['monatspreis'] . " </td>
  </tr>

  <tr>
    <td class=\"text\">&nbsp;&nbsp;Einrichtungsgebühr</td>
    <td class=\"text\">&nbsp;&nbsp;" . $row['einrichtungspreis'] . "</td>
  </tr>
   </table>
<br>

<table width=\"198\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
  <tr>
    <td class=\"text\">&nbsp;&nbsp;<a href=\"info.php?infos=normal&id=" . $row['id'] . "\">Mehr Infos Klicke hier</a></td>
    <td class=\"text\">&nbsp;&nbsp;</td>
  </tr>

  <tr>
    <td class=\"text\">&nbsp;&nbsp;<a href=\"bestellen.php?paket=" . $row['name'] . "\">Bestellen</a></td>
    <td class=\"text\">&nbsp;&nbsp;</td>
  </tr>
  </table>

  </td></tr></table>

  <p></p>
 ";
}
}

Gruß
Marc

fanste · 24. März 2006

Wie gesagt, schau dir mal float an. Wirst du auch einige Beispiele mit der Suche finden.

Maik · 25. März 2006

In diesem Beispiel werden zwei Tabellen mit Hilfe der float-Eigenschaft zeilenweise nebeneinander angeordnet:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
div.wrapper {
width: 410px;
margin: 10px auto;
}

table.leftCol {
float: left;
width: 200px;
}

table.rightCol {
float: right;
width: 200px;
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <table class="leftCol" border="1">
       <tr>
           <td>linke Tabellenbox</td>
       </tr>
     </table>

     <table class="rightCol" border="1">
       <tr>
           <td>rechte Tabellenbox</td>
       </tr>
     </table>

     <div class="clear">&nbsp;</div>
</div>

<div class="wrapper">
     <table class="leftCol" border="1">
       <tr>
           <td>linke Tabellenbox</td>
       </tr>
     </table>

     <table class="rightCol" border="1">
       <tr>
           <td>rechte Tabellenbox</td>
       </tr>
     </table>

     <div class="clear">&nbsp;</div>
</div>

<div class="wrapper">
     <table class="leftCol" border="1">
       <tr>
           <td>linke Tabellenbox</td>
       </tr>
     </table>

     <table class="rightCol" border="1">
       <tr>
           <td>rechte Tabellenbox</td>
       </tr>
     </table>

     <div class="clear">&nbsp;</div>
</div>

</body>
</html>

[editpost]

Bei näherer Betrachtung deines Quelltextes in meinem bevorzugten Browser frage ich mich allerdings, von welchen 6 Boxen du überhaupt sprichst?

Bilden die einzelnen Tabellen zusammengenommen eine der 6 Boxen, oder welche der Tabellen(zellen) möchtest du nebeneinander anordnen?

marciboy · 25. März 2006

Hallo

es handelt sich um ein Webhosting Script. Der PHP Code den ich oben beigefügt habe stammt aus der info.php. Wenn ich im Admin Pakete erstelle schreibt er mir im Front die Paketboxen untereinander.Da ich 6 Pakete habe werden sie untereinander dargestellt.

Gruß
Marc

Maik · 25. März 2006

Also steht der von dir gezeigte Quelltext exemplarisch für eine Box bzw. ein Paket?

marciboy · 25. März 2006

Hallo

stimmt

Gruss
Marc

Maik · 25. März 2006

Okay, dann empfehle ich dir folgendes CSS-Modell:

CSS:

div.wrapper {
width: 410px;
margin: 10px auto;
}

div.leftCol {
float: left;
width: 200px;
}

div.rightCol {
float: right;
width: 200px;
}

div.clear {
clear: both;
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}

HTML:

<div class="wrapper">
     <div class="leftCol">
       <!-- Hier folgt das linke Paket -->
     </div>

     <div class="rightCol">
       <!-- Hier folgt das rechte Paket -->
     </div>

     <div class="clear">&nbsp;</div>
</div>

<div class="wrapper">
     <div class="leftCol">
       <!-- Hier folgt das linke Paket -->
     </div>

     <div class="rightCol">
       <!-- Hier folgt das rechte Paket -->
     </div>

     <div class="clear">&nbsp;</div>
</div>

<div class="wrapper">
     <div class="leftCol">
       <!-- Hier folgt das linke Paket -->
     </div>

     <div class="rightCol">
       <!-- Hier folgt das rechte Paket -->
     </div>

     <div class="clear">&nbsp;</div>
</div>

marciboy · 25. März 2006

kannst du mir vielleicht noch sagen wie ich es einbinden kann.

Soll ich mal die ganze info.php datei online stellen

Gruss
Marc

Boxen anordnen

marciboy

Mitglied

fanste

Erfahrenes Mitglied

marciboy

Mitglied

fanste

Erfahrenes Mitglied

Maik

marciboy

Mitglied

Maik

marciboy

Mitglied

Maik

marciboy

Mitglied

Neue Beiträge