Boxen anordnen

Status
Nicht offen für weitere Antworten.
M

marciboy

Mitglied
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
 
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
 
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
 
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?
 
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
 
Also steht der von dir gezeigte Quelltext exemplarisch für eine Box bzw. ein Paket?
 
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>
 
kannst du mir vielleicht noch sagen wie ich es einbinden kann.

Soll ich mal die ganze info.php datei online stellen

Gruss
Marc
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück