Flera divar på rad?

Timlestandeer · 2011-08-07, 10:04

Hallå där!

Är relativt ny med det här att koda, och nu sitter jag och försöker lära mig att slänga ihop olika funktioner med hjälp av PHP och MySQL. Men självklart har jag stött på ett problem som verkligen går mig på nerverna.

Grejen är den att jag försöker hämta data från databasen och presentera produkterna som om det vore en webbshop. Alltså att ungefär tre boxar innehållande information ska visas på varje rad. Men problemet är att jag lyckas inte få boxarna på rad utan varje box börjar på ny rad så att dom bygger ett torn.

Här har vi koderna jag har försökt mig på..

PHP-kod:


			
$query = "SELECT bildnamn,pris,titel,shortdesc FROM produktinfo ORDER BY id DESC";

$result = mysql_query($query);



while ($row = mysql_fetch_array($result))

{ 

    echo "<div class='produktwrapper'>";

    echo "<div class='produktbild'><img height='150px' width='150px' src='bilder/" . $row['bildnamn'] . "'</div>";

    echo "<div class='titel'>" . $row['titel'] . "</div>";

    echo "<div class='pris'>" . $row['pris'] . "</div>";

    echo "<div class='shortdesc'>" . $row['shortdesc'] . "</div>";

    echo "</div>";

}

HTML-kod:

.produktwrapper {
width: 150px;
float: left;
border: 1px solid #000;
display: inline-block;
}

Har klurat på detta i flera dagar nu, så är det någon som har någon idé som kan komma till nytta vore det riktigt tacksamt!

/ Tim Lestander

Monkboll · 2011-08-07, 10:42

Varför så många divs?

Gör om titel till en header tagg (h1-h6). Bilden behöver ingen egen div runt sig. Pris och description räcker med en p tagg.

Hur ser sidan ut som denna koden ligger i? Hur bred osv är den?

P3N · 2011-08-07, 12:16

Med bara den bifogade koden så hamnar de efter varandra... Så leta på annat ställe

Timlestandeer · 2011-08-07, 19:12

Citat:

Ursprungligen postat av Monkboll

Hur ser sidan ut som denna koden ligger i? Hur bred osv är den?

Det är bara en vit container med bredden 800px. Den har imgen design alls eller några krångligheter med tanke på att jag bara testar vad jag klarar att göra med MySQL.

HapiDjus · 2011-08-07, 20:36

Kan du inte lägga upp sidan någonstans? Lättare att felsöka då.

Timlestandeer · 2011-08-07, 21:08

Tyvärr kör jag bara lokalt. Men grejen är den att den koden jag skrev ovan är i stort sett allt som finns på sidan. Jag lyckas få ut all information som jag vill ha ifrån min databas så det enda problemet är nu att de olika produkterna staplas på en hög.

Här är all kod jag har på sidan om det skulle göra saker och ting lättare.

PHP-kod:


			
<?php include("dbconnect.php"); ?>



<html>

<head>

<link href="style.css" type="text/css" rel="stylesheet">

</head>

<body>



<div id="wrapper">



<?php



$query = "SELECT bildnamn,pris,titel,shortdesc FROM produktinfo ORDER BY id DESC";

$result = mysql_query($query);



while ($row = mysql_fetch_array($result))

{ 

    echo "<div class='produktwrapper'>";

    echo "<div class='produktbild'><img height='150px' width='150px' src='bilder/" . $row['bildnamn'] . "'</div>";

    echo "<div class='titel'>" . $row['titel'] . "</div>";

    echo "<div class='pris'>" . $row['pris'] . " SEK </div>";

    echo "<div class='shortdesc'>" . $row['shortdesc'] . "</div>";

    echo "</div>";

}



?>



</div>



</body>

</html>

Kod:

#wrapper {
width: 800px;
border: 7px dotted #000;
padding: 15px;
height: auto;
min-height: 1000px;
}

.produktwrapper {
width: 150px;
border: 1px solid #000;
float: left;
display: inline-block;
}

Lindahl · 2011-08-07, 21:57

Tycker det låter som att du vill visa en tabell med produkterna. I det läget hade jag använt <table> istället. Folk är för rädda att använda tabeller till tabulärdata idag. Men det är ju faktiskt det det är till för.

Enklaste är väl att du först kodar ihop en statisk sida, och skippar allt vad databaser heter om det är layouten du vill jobba med.

Linuus · 2011-08-07, 23:52

Du har något annat fel. Testade själv med följande, statiska, kod.

Kod:

<style>
#wrapper {
width: 800px;
border: 7px dotted #000;
padding: 15px;
height: auto;
min-height: 1000px;
}

.produktwrapper {
width: 150px;
border: 1px solid #000;
float: left;
display: inline-block;
}
</style>
<div id="wrapper"> 

    <div class='produktwrapper'
    <div class='produktbild'><img height='150px' width='150px' src='#'</div> 
    <div class='titel'>Test 1</div>
    <div class='pris'>1000 SEK </div>
    <div class='shortdesc'>Lorem Ipsum.....</div>
    </div>

<div class='produktwrapper'
    <div class='produktbild'><img height='150px' width='150px' src='#'</div> 
    <div class='titel'>Test 1</div>
    <div class='pris'>1000 SEK </div>
    <div class='shortdesc'>Lorem Ipsum.....</div>
    </div>

<div class='produktwrapper'
    <div class='produktbild'><img height='150px' width='150px' src='#'</div> 
    <div class='titel'>Test 1</div>
    <div class='pris'>1000 SEK </div>
    <div class='shortdesc'>Lorem Ipsum.....</div>
    </div>

<div class='produktwrapper'
    <div class='produktbild'><img height='150px' width='150px' src='#'</div> 
    <div class='titel'>Test 1</div>
    <div class='pris'>1000 SEK </div>
    <div class='shortdesc'>Lorem Ipsum.....</div>
    </div>

</div>

Ser ut såhär:
http://cl.ly/2n111s312N2z0P3B0G3x

Testa själv här:
http://htmledit.squarefree.com/

Vad använder du för webbläsare? Prova att ta bort inline-block.

Timlestandeer · 2011-08-08, 01:13

Sånt här gör mig verkligen galen. Jag kör med google chrome men har även testat med internet explorer och där är det precis liladant. Har det något att göra med att man hämtar information från databasen som gör att allt kör ihop sig må tro? För det är ju det enda som skiljer våran kod åt?

Timlestandeer · 2011-08-08, 01:21

EDIT: Slutligen så hittade jag det lilla larviga felet. Jag hade tydligen missat att stänga img-taggen och därför körde allt ihop sig. Kände på mig hela tiden att det var något litet som man missade.

Iallafall, tack alla som har försökt att hjälpa mig lösa problemet!

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Flera divar på rad?