PHP og HTML <table>

Jeg skal vise "bokser" med info på en webside, hvor informasjonen blir hentet fra en mysql-database.
Her er koden:

Kode

<?php
$con = mysql_connect("localhost","abruker","passord");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("haha", $con);

$result = mysql_query("SELECT * FROM mobler");

echo "<table cols='3'><tr>";

while($row = mysql_fetch_array($result))
  {



  echo "<td colspan='1'>
<div id='mob_box'>
<table height='100%' cellspacing='0' cellpadding='0' align='right' width='100%'>
	<tr style='height:120px;background:transparent;width:180px;'>
		<td align='center' style='width:70%;height:120px;'>
			<img src='" . $row['Bilde'] . "' style='margin-left:10px;max-height:115px;'\>
		</td>
		
		<td align='right' style='vertical-align:middle;height:120px;'>
			<div id='over1' style='vertical-align:middle;position:relative;top:-5px;right:0px;width:40px;height:43px;background:transparent;background:url('3-01.png');align:right;'>
				<img src='http://mobel.webuda.com/wp-content/uploads/kat.gif' style='vertical-align:middle;margin-top:5px;margin-right:5px;' onMouseover=\"ddrivetip('Katalogprisen er&nbsp;" . $row['Katalog'] . "&nbsp;mynter!' , 200);\" onMouseout=\"hideddrivetip();\" \>
			</div>
			
			<div id='over2' style='vertical-align:middle;position:relative;top:0px;right:0px;width:40px;height:43px;background:url('3-01.png');align:right;'>
				<img src='http://mobel.webuda.com/wp-content/uploads/dat.gif' style='vertical-align:middle;margin-top:5px;margin-right:10px;' onMouseover=\"ddrivetip('Sist oppdatert&nbsp;" . $row['Dato'] . "' , 200);\" onMouseout=\"hideddrivetip();\" \>
			</div>
		</td>
	</tr>
	<tr style='height:60px;background:url('2-01.png');width:180px;'>
		<td style='vertical-align:top;'>
			<p style='margin-left:10px;margin-top:5px;'>" . $row['Navn'] . "<br \>" .  $row['Ny'] . " mynt(er)
			</p>
		</td>
		<td style='vertical-align:top;'>
			<img src='http://mobel.webuda.com/wp-content/uploads/bok.gif' style='margin:10px 0px 0px 10px;' onMouseover=\"ddrivetip('Før prisen ble oppdatert lå den på&nbsp;" . $row['Gml'] . "&nbsp; mynter!' , 200);\" onMouseout=\"hideddrivetip();\" \>
		</td>
	</tr>
</table>


</div></td>";
  }
echo "</tr></table>";

mysql_close($con);
?>

Spørsmålet mitt er, når det blir mer enn tre bokser i bredden, skal den fjerde havne på en ny rekke under de tre første. Hvordan skal jeg gjøre det?

(har prøvd mye!)

Sist endret av JunkieXL; 4. august 2010 kl. 22:10.

10 0

Her var mye rar kode. Kan du beskrive litt bedre hvordan du vil vise innholdet, og hvordan databasen ser ut? Kjører du en loop fra databasen?

ma10as

990 198

Om du absolutt skal bruke en tabell kan du sette en variabel i løkken med en int verdi som teller mellom 0 til 2, og ved 2 så avslutter du <tr> og starter en ny.

Det jeg anbefaler deg å gjøre er å bruke en liste. Sett en fast bredde på hvert li-element så vil den automatisk starte en ny rad når det ikke er mer plass i bredden.

Kode

<ul>
<li>Bilde 1</li>
<li>Bilde 2</li>
<li>Bilde 3</li>
... osv
</ul>

10 0

Mitt beste tips er å bare bruke divs inni en avgrenset wrapper-div. Da vil boksene ligge så mange det går i bredden (det styrer du med style="width: ;", og ikke glem float:left; i styleparameteret.

Eksempel:

Kode

<div style="width:330px;" id="wrapper">

Kall opp databasen her

<div style="width:100px; padding:5px; float:left;" id="box1">Tekst</div>
<div style="width:100px; padding:5px; float:left;" id="box2">Tekst</div>
<div style="width:100px; padding:5px; float:left;" id="box3">Tekst</div>
<div style="width:100px; padding:5px; float:left;" id="box4">Tekst</div>

Lukk databasen

</div>

Her vil box4 havne på ny rad.
Og selvsagt lager du bare en class på boksene og putter CSS-en i eget dokument.

Sist endret av Loffen-; 4. august 2010 kl. 22:53.

JunkieXL

samfunnsukritisk

Trådstarter

280 16

5. august 2010

Takk Loffen! Det funka fint

fxxked

3.214 254

5. august 2010

Kode

$tmp[]='<div style="width:330px;" id="wrapper">';

$con = mysql_connect( 'localhost', 'abruker', 'passord' );
if( ! $con ) {
  die( 'Could not connect: ' . mysql_error() );
}

mysql_select_db( 'haha', $con );
$result = mysql_query( 'SELECT * FROM mobler' );

while( $row = mysql_fetch_array( $result ) ) {
	$tmp[]='<div style="width:100px; padding:5px; float:left;" id="box1">Tekst</div>';
	$tmp[]='<div style="width:100px; padding:5px; float:left;" id="box2">Tekst</div>';
	$tmp[]='<div style="width:100px; padding:5px; float:left;" id="box3">Tekst</div>';
	$tmp[]='<div style="width:100px; padding:5px; float:left;" id="box4">Tekst</div>';
}

mysql_close( $con );

$tmp[]='</div>';

echo implode( "\n", $tmp );

Sist endret av fxxked; 5. august 2010 kl. 10:27.

z0p

uʍop ǝpısdn

3.814 906

5. august 2010

Loffen-: HTML-tagger blir jo overflødige når man kan bruke divs til alt

Din løsning er vel akkurat, som ma10as nevner, hva en liste skal brukes til.

Når det kommer til trådstarters ønske stiller jeg meg spørsmål ved hvorfor ønske å gjøre det slik. Nå vet ikke jeg hva dette dreier seg om, men i de fleste tilfeller er det nok bedre å vise en tabell som en tabell.

Brukervennlighet > design

10 0

Hva mener du z0p?

fxxked

3.214 254

<div> og <table> er begge HTML tags

<div> anbefales som designelementer, gjerne sammen med lister som <ol>, <ul> og <dl>
<table> til tabeller, med sine under tags <th>, <tr>, <td>

Sist endret av fxxked; 6. august 2010 kl. 22:36.

10 0

Sitat av z0p

Loffen-: HTML-tagger blir jo overflødige når man kan bruke divs til alt

Vis hele sitatet...

Div er da html-tag?

liasis

Logotytme

4.062 3.209