---
title: "Kanske nån som vill hjälpa lite med design"
type: "forum-thread"
url: "https://www.webforum.nu/amne/php/191847-kanske-nån-som-vill-hjälpa-lite-med-design"
topic: "PHP"
topic_url: "https://www.webforum.nu/amne/php"
author: "Kamush"
published: "2013-11-08T18:32:29.000Z"
updated: "2013-11-10T21:11:19.000Z"
replies: 11
views: 2463
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/php/191847-kanske-nån-som-vill-hjälpa-lite-med-design"
---

# Kanske nån som vill hjälpa lite med design

## #1 — Kamush, 2013-11-08T18:32Z

Jag har hjälpt en kund att bygga upp en databas och nu ska vi ändra utseendet efter ca 2 år. 

Vill bara få det fixat så att jag kan släppa det. 
Kanske nån av er som kan hjälpa mig så kan jag bjuda på nån öl en fin dag  :birp :birp

Koden just nu är (Det är bara på "resultatet" jag vill ändra designen till.):
echo('\<tr style="background-color: lightgray;"\>');
		echo('\<td nowrap="nowrap"\>\<b\>'.substr($row\['DefaultShortText'\], 0, 200).'\</td\>');
		echo('\<td\>\<b\>'.(int)$row\['NetPriceVAT'\].' kr\</b\>\</td\>');
		echo('\<td\>\</td\>');
		echo('\</tr\>');
		echo('\<tr\>\<td valign="top" width="20%"\>\<b\>Dimension:\</b\>'.(int)$row\['SectionWidth'\].'/'.(int)$row\['AspectRatio'\].'/'.(int)$row\['Diameter'\].'\<br\>\<b\>Hastighetsindex:\</b\>'.$row\['SpeedRating'\].'\<br\>\<b\>Typ: \</b\>'.$type.'\<br\>\<b\>I lager:\</b\>\<font color='.$color.'\>'.$lagersaldo.'\</div\>\</td\>');
		echo('\<td valign="top" width="20%"\>\<b\>Övrigt\</b\>\<br\>Givetvis ingår montering samt moms i priset.\</td\>');

Jag bifogar 2 bilder som visar hur det ser ut idag och hur jag vill ha det.

Säg till om jag behöver ge mera information eller behöver klistra in mera av koden. 

All data kommer automatiskt från databasen det är bara det att det ska se finare ut. Färgerna spelar egentligen inte nån roll. 

Finns det nån själ där ute som har lite tid över??

Bilagor:

- [Nu.png](https://www.webforum.nu/a/23608.png)
- [onskas.png](https://www.webforum.nu/a/23609.png)
- [onskas i förstoring.png](https://www.webforum.nu/a/23610.png)

Permalänk: https://www.webforum.nu/p/191847

## #2 — rhdf, 2013-11-09T23:33Z

Slängde ihop en  snabb version som säkert behöver filas lite på

html

```
<!DOCTYPE html>

<html>
<head>
	<style type="text/css">
	 body{font-size:10px; font-family: arial}
	 #wrapper{width:820px;}
		.product{
			width:190px;
			border:solid 2px #000;
			border-radius:10px;
			background: linear-gradient(to bottom, rgba(255,255,255,0) 89%,rgba(233,244,232,0) 90%,rgba(13,135,0,1) 100%);
		     
			 padding:5px 0 5px 0 ;
			 text-align:center;
			 
			 float:left;
			 margin:5px;
		}
	
		.product h3{
			text-align:left;
			background:#666; 
			color: #fff;
			padding:5px;
			margin:0;
			font-weight:normal;
			text-transform:uppercase;
		 
		}
		.product img{margin:auto; width:125px;}
		
		dl{margin-left:5px; text-align:left; font-size:11px}
		dt{
		float: left; 
		clear: left; 
		width: 100px; 
		/*text-align: right; */
		font-weight: bold;
		text-transform:uppercase;
		}
		dd{
			margin: 0 0 0 105px; 
			padding: 0 0 0.1em 0;
			text-transform:uppercase;}
			
		.priceTag{
			font-size:18px;
			text-transform:uppercase;
			font-weight: bold;
			margin:0 0 5px 0;
		}
		.priceTag span{font-size:20px;}
                
               .stock{color:green;}
               .notinstock {color:red;} 
	</style>

</head>

<body>
 <div id="wrapper">

	<div class="product">
		<img src="dack.png" />
		<h3>185/65/15 Pirelli Carving Edge dubb beg 90% kvar</h3>
		<dl>
			<dt>Dimension:</dt>
				<dd>185/65/15</dd>
			<dt>Hastighetsindex:</dt>
				<dd> - </dd>	
			<dt>Typ:</dt>
				<dd>Vinterdäck</dd>
			<dt>I Lager</dt>
				<dd class="stock">20+</dd>
		</dl>
		
		<p class="priceTag">Pris: <span>850 Kr</span></p>
	</div>
</div>
</body>
</html>
```

bilden klippte jag från din exempelbild och är 125x 125px. så css är anpassad efter det = något som måste modifieras.

Färgen på lagersaldot är smartare att ändra beroende på lagervärdet direkt i koden
Är det över tex 1 så skriver du ut \<dd class="stock"\>20+\</dd\>
under 1 \<dd class="notinstock"\>0\</dd\>

Permalänk: https://www.webforum.nu/p/2314691

## #3 — Kamush, 2013-11-10T16:18Z

hmm??

Hej, 

Jag får nog skicka in hela koden om du fortfarande kan hjälpa mig med det. 
Färgen på lagersaldot ändrar sig redan automatiskt. 
Jag får tyvärr ta bort datan som sedan gör att man ser hur det ser ut. Hoppas du förstår ändå!

Målet är att layouten är fin samt att allt kommer in automatiskt in i den från databasen. 

Förresten hur lägger man in en kod???

\<?php 
	global $dsn; 
	$dsn = 'xxx';
	global $user;
	$user = "xxx";
	global $pass;
	$pass = "xxx";
?\>
\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"\>
\<html\>

\<head\>
	\<meta http-equiv="content-type" content="text/html; charset=UTF-8"\>
	\<title\>Däck\</title\>

\<style type="text/css"\>

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /\*CSS for enlarged image\*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -400px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /\*CSS for enlarged image\*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /\*CSS for enlarged image on hover\*/
visibility: visible;
top: -150;
left: -400px; /\*position where enlarged image should offset horizontally \*/

}

.greenfont {
    color: #FF0000;
}

.orangefont {
    color: #00FF00;
}

\</style\>

\</head\>

\<body\>

\<div style="width: 100%; -webkit-box-shadow: 0px 0px #6B6B6B; box-shadow: 0px 0px #6B6B6B; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; color: #131313; font-size: 15px; font-stretch: normal;"\>

\<form action="xxx.php" method="get"\>
\<table width="100%"\>
\<tr\>

\<?php
function GetOption($column, $doCastToInt, $getName)
{
	global $dsn, $user, $pass;
	try
	{
	  $dbh = new PDO($dsn, $user, $pass);
	 // echo "Connect\<p\>";
	}
	catch (Exception $e)
	{
	  echo "Unable to connect: " . $e-\>getMessage() ."\<p\>";
	}
	$query = "SELECT Distinct ".$column." FROM Article where Maingroup in (10,20,40) and BranchBalance \> 0 order by ".$column;
	$stmt = $dbh-\>prepare($query);
	$stmt-\>execute();
	$result = $stmt-\>fetchAll(PDO::FETCH_ASSOC);
	//echo(var_dump($result));

	foreach( $result as $row)
	{
		echo('\<option value="'.$row\[$column\].'"');
			
		if(isset($\_GET\[$getName\]) && $\_GET\[$getName\] == $row\[$column\]) 
		{
			echo(' selected ');
		}
		echo('\>');
		if($doCastToInt)
			echo((int)$row\[$column\]);
		else
			echo($row\[$column\]);
		echo('\</option\>');
	}
	return;
}
?\>

\<?php
function GetSubgroupOption()
{
	/\*$dsn = 'xxx';
	$user = "xxx";
	$pass = "xxx";
\*/
	try
	{
		global $dsn, $user, $pass;
	  $dbh = new PDO($dsn, $user, $pass);
	 // echo "Connect\<p\>";
	}
	catch (Exception $e)
	{
	  echo "Unable to connect: " . $e-\>getMessage() ."\<p\>";
	}
	$query = "SELECT id, Name FROM SubGroup where id in (select subgroup from Article where Maingroup in (10,20,40 )  and BranchBalance \> 0) order by Name";
	$stmt = $dbh-\>prepare($query);
	$stmt-\>execute();
	$result = $stmt-\>fetchAll(PDO::FETCH_ASSOC);
	//echo(var_dump($result));

	foreach( $result as $row)
	{
		echo('\<option value="'.$row\['id'\].'"');
		if(isset($\_GET\['subgroup'\]) && $\_GET\['subgroup'\] == $row\['id'\]) 
			echo(' selected ');
		echo('\>'.$row\['Name'\].'\</option\>');
	}

	return;
}
?\>

\<td width="25%"\>
  \<strong\>Typ\</strong\>\<br\>
  \<select name="maingroup" style="width: 100%;"\>\<option value=""\>alla\</option\>
                   \<option value="10"
                             \<?php if(isset($\_GET\['maingroup'\]) && $\_GET\['maingroup'\] == 10) echo(' selected')?\> \>Sommardäck
                   \</option\>
 
                   \<option value="20"
                             \<?php if(isset($\_GET\['maingroup'\]) && $\_GET\['maingroup'\] == 20) echo(' selected')?\>\>Vinterdäck
                   \</option\>
\<option value="40"
                             \<?php if(isset($\_GET\['maingroup'\]) && $\_GET\['maingroup'\] == 40) echo(' selected')?\>\>C-Däck
                   \</option\>
 
          \</select\>
\</td\>
\<td width="25%"\>
  \<strong\>Bredd\</strong\>\<br\>
  \<select name="sectionWidth" style="width: 100%;"\>\<option value=""\>alla\</option\>
	\<?php GetOption('SectionWidth',1,'sectionWidth');?\>
 \</select\>
\</td\>
\<td width="18%"\>
  \<strong\>Höjd\</strong\>\<br\>
  \<select name="aspectRatio" style="width: 100%;"\>\<option value=""\>alla\</option\>
	\<?php GetOption('AspectRatio',1,'aspectRatio'); ?\>
   \</select\>
\</td\>
\<tr\>
\<td width="18%"\>
  \<strong\>Tum\</strong\>\<br\>
  \<select name="diameter" style="width: 100%;"\>\<option value=""\>alla\</option\>
	\<?php GetOption('Diameter',1,'diameter'); ?\>
	\</select\>
\</td\>
\<td width="25%"\>
  \<strong\>Märke\</strong\>\<br\>
  \<select name="subgroup" style="width: 100%;"\>\<option value=""\>alla\</option\>
   \<?php GetSubgroupOption(); ?\>
  \</select\>
\<!--\<option value="B.F. GOODRICH "\>B.F. GOODRICH \</option\>\<option value="BRIDGESTONE "\>BRIDGESTONE \</option\>\<option value="CONTINENTAL "\>CONTINENTAL \</option\>\<option value="COOPER "\>COOPER \</option\>\<option value="DUNLOP "\>DUNLOP \</option\>\<option value="FALKEN "\>FALKEN \</option\>\<option value="FIRESTONE "\>FIRESTONE \</option\>\<option value="FULDA "\>FULDA \</option\>\<option value="GAJAH TUNGGAL "\>GAJAH TUNGGAL \</option\>\<option value="GENERAL "\>GENERAL \</option\>\<option value="GOODYEAR "\>GOODYEAR \</option\>\<option value="HANKOOK "\>HANKOOK \</option\>\<option value="JINYU TIRES "\>JINYU TIRES \</option\>\<option value="KINGSTAR"\>KINGSTAR\</option\>\<option value="KLEBER "\>KLEBER \</option\>\<option value="KUMHO "\>KUMHO \</option\>\<option value="MAXXIS "\>MAXXIS \</option\>\<option value="MICHELIN "\>MICHELIN \</option\>\<option value="NANKANG "\>NANKANG \</option\>\<option value="NEXEN "\>NEXEN \</option\>\<option value="NOKIAN "\>NOKIAN \</option\>\<option value="PIRELLI "\>PIRELLI \</option\>\<option value="ROTALLA"\>ROTALLA\</option\>\<option value="TOYO "\>TOYO \</option\>\<option value="TYFOON "\>TYFOON \</option\>\<option value="UNIROYAL "\>UNIROYAL \</option\>\<option value="VREDESTEIN "\>VREDESTEIN \</option\>\<option value="YOKOHAMA "\>YOKOHAMA \</option\>  \</select\>--\>
\</td\>
\<td width="22%"\>
  \<strong\>Hastighet\</strong\>\<br\>
  \<select name="speedRating" style="width: 100%;"\>\<option value=""\>alla\</option\>
	\<?php GetOption('SpeedRating',0,'speedRating'); ?\>
  \</select\>
\</td\>
\<tr\>
\<td align="left" valign="bottom"\>
  \<br\>
  \<input type="submit" value="Visa däck"\>
\</td\>
  \<td align="left" valign="bottom"\>&nbsp;\</td\>
\</table\>
\</form\>
\<table border="0" cellspacing="0" cellpadding="6" with="100%"\>

 \<?
//phpinfo();
 function XSSPrevention($str)
 {
	$str = mb_convert_encoding($str, 'UTF-8', 'UTF-8');
	$str = htmlentities($str, ENT_QUOTES, 'UTF-8');
	return $str;
 }
//var_dump($\_GET);
 //magic_quotes_gpc = Off;
 error_reporting(E_ALL);
ini_set('display_errors', '1');
if (!empty($\_GET)) 
{

	if(isset($\_GET\['maingroup'\]))  $maingroup = XSSPrevention($\_GET\["maingroup"\]);
	if(isset($\_GET\['sectionWidth'\]))  $sectionWidth = XSSPrevention($\_GET\["sectionWidth"\]);
	if(isset($\_GET\['aspectRatio'\]))  $aspectRatio = XSSPrevention($\_GET\["aspectRatio"\]);
	if(isset($\_GET\['diameter'\]))  $diameter = XSSPrevention($\_GET\["diameter"\]);
	if(isset($\_GET\['subgroup'\]))  $subgroup = XSSPrevention($\_GET\["subgroup"\]);
	if(isset($\_GET\['speedRating'\]))  $speedRating = XSSPrevention($\_GET\["speedRating"\]);
	

	//echo($subgroup);

	//$dbh-\>beginTransaction();

	$query = "SELECT DefaultShortText, SectionWidth, AspectRatio, Diameter, Circumference, SpeedRating, NetPriceVAT, BranchBalance, Maingroup FROM Article where Maingroup in (10,20,40) and BranchBalance\>0 ";

	$params = array();
	if (!empty($maingroup) && $maingroup !='alla') 
	{
		$params\['Maingroup'\] = $maingroup;
	}

	if (! empty($sectionWidth) && $sectionWidth !='alla') 
	{
		$params\['SectionWidth'\] = $sectionWidth;
	}
	
	if (! empty($aspectRatio) && $aspectRatio !='alla') 
	{
		$params\['AspectRatio'\] = $aspectRatio;
	}
	if (! empty($diameter) && $diameter !='alla') 
	{
		$params\['Diameter'\] = $diameter;
		//echo($params\['inch'\]);
	}
	
	if (! empty($subgroup) && $subgroup !='alla') 
	{
		$params\['subgroup'\] = $subgroup;
	}	
	
	if (! empty($speedRating) && $speedRating !='alla') 
	{
		$params\['SpeedRating'\] = $speedRating;
	}
	
	foreach ($params as $key =\> $value) 
	{
		$query .= sprintf(' AND %s = :%s', $key, $key);
	}
	$query .= ' Order by NetPriceVAT';
    //echo($query);
	
	/\*$dsn = 'xxx';
	$user = "xxx";
	$pass = "xxx";
\*/
	try
	{
	global $dsn, $user, $pass;
	  $dbh = new PDO($dsn, $user, $pass);
	 // echo "Connect\<p\>";
	}
	catch (Exception $e)
	{
	  echo "Unable to connect: " . $e-\>getMessage() ."\<p\>";
	}
	
	$stmt = $dbh-\>prepare($query);

	/\* Then bind the values to the prepared statement 
	 \*/

	foreach ($params as $key =\> $value) 
	{
		//echo($value.'HEpp');
		// Using bindValue because bindParam binds a reference, which is
		// only evaluated at the point of execute
		$stmt-\>bindValue(':'.$key, $value,PDO::PARAM_STR);
	} 
	//echo(var_dump($stmt));
	$stmt-\>execute($params);
	/\* Now we're ready to execute \*/
	$result = $stmt-\>fetchAll(PDO::FETCH_ASSOC);
	//echo(var_dump($stmt-\>errorInfo()));

	foreach( $result as $row)
	{
		$type;
		if($row\['Maingroup'\] == 10)
		{
          $type='Sommardäck';
		}
		else if ($row\['Maingroup'\] == 20)
		{
          $type='Vinterdäck';
		}
		else if ($row\['Maingroup'\] == 40)
		{
          $type='C-däck';
		}
		else
		{
          $type=$row\['Maingroup'\];
		}
		
		$lagersaldo;
		$color;
		if ($row\['BranchBalance'\] \> 20)
		{
			$lagersaldo='20+';
			$color='#007F0E';
		}
		else
		{
			$lagersaldo='Få kvar';
			$color='#FF6A00';
		}
		
		
		echo('\<tr style="background-color: lightgray;"\>');
		echo('\<td nowrap="nowrap"\>\<b\>'.substr($row\['DefaultShortText'\], 0, 22).'\</td\>');
		echo('\<td\>\<b\>'.(int)$row\['NetPriceVAT'\].' kr\</b\>\</td\>');
		echo('\<td\>\</td\>');
		echo('\</tr\>');
		echo('\<tr\>\<td valign="top" width="20%"\>\<b\>Dimension:\</b\>'.(int)$row\['SectionWidth'\].'/'.(int)$row\['AspectRatio'\].'/'.(int)$row\['Diameter'\].'\<br\>\<b\>Hastighetsindex:\</b\>'.$row\['SpeedRating'\].'\<br\>\<b\>Typ: \</b\>'.$type.'\<br\>\<b\>I lager:\</b\>\<font color='.$color.'\>'.$lagersaldo.'\</div\>\</td\>');
		echo('\<td valign="top" width="20%"\>\<b\>Övrigt\</b\>\<br\>Givetvis ingår montering samt moms i priset.\</td\>');
		//echo('\<td valign="top" align="right"\>\<a class="thumbnail" href="#thumb"\>\<img src="/img/'.'QQQ'.'.jpg" width="88px" height="120px" border="0" /\>\<span\>\<img src="/img/'.'QQQ'.'.jpg" /\>\</span\>\</a\>\</td\>');
		echo('\</tr\>');
	}
}
?\>
  \</table\>
	\</div\>
	\</body\>
	\</html\>

Permalänk: https://www.webforum.nu/p/2314694

## #4 — Kamush, 2013-11-10T17:46Z

Tack tack tack tack
Kollade genom och använde ditt med mitt. 
Blev riktigt bra!!!

Permalänk: https://www.webforum.nu/p/2314695

## #5 — Kamush, 2013-11-10T18:10Z

2 små ändringar till om det du/ni kan hjälpa mig

Ibland hoppar sorteringen mera. Se bilden så förstår ni. 

Färgen i lagersaldot ändrar sig men drar med HELA texten. 
Felet ser man också direkt på bilden. 
\--------------------------------------------------

Koden är nu följande:

```php
body{font-size:10px; font-family: arial}
	 #wrapper{width:820px;}
		.product{
	width: 190px;
	border: solid 2px #000;
	border-radius: 10px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 89%,rgba(233,244,232,0) 90%,rgba(13,135,0,1) 100%);
	padding: 5px 0 5px 0;
	text-align: center;
	float: left;
	margin: 5px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
		}
```

```php
echo('<div class="product">');
		echo('<img src="bildsaknasu.png" />');
		echo('<h3> '.substr($row['DefaultShortText'], 0, 100).'<br></br></h3>');
		echo('		<dl>
			<dt>Dimension:</dt>
				<dd>'.(int)$row['SectionWidth'].'/'.(int)$row['AspectRatio'].'/'.(int)$row['Diameter'].'</dd>
			<dt>Hastighetsindex:</dt>
				<dd>. '.$row['SpeedRating'].'</dd>	
			<dt>Typ:</dt>
				<dd>'.$type.'</dd>
			<dt>I Lager</dt>
				<dd><font color='.$color.'>'.$lagersaldo.'</dd>
		</dl>
		
		<p class="priceTag">Pris: <span>'.(int)$row['NetPriceVAT'].' kr</span></p>');
```

Bilagor:

- [Skärmavbild 2013-11-10 kl. 19.04.38.png](https://www.webforum.nu/a/23611.png)
- [Skärmavbild 2013-11-10 kl. 19.09.08.png](https://www.webforum.nu/a/23612.png)

Permalänk: https://www.webforum.nu/p/2314696

## #6 — Kamush, 2013-11-10T18:40Z

Höjden löste jag. Bara nu färgen kvar.

Permalänk: https://www.webforum.nu/p/2314697

## #7 — rhdf, 2013-11-10T18:45Z

Att färgen följer med beror på att du faktiskt säger åt den att göra det.
Du stänger nämligen aldrig din font-tagg.

Jag skulle rekommendera att du ändrar metod där. exempelvis att du istället för att sätta variabeln "color" sätter en css-klass (som du INTE döper till en färg)

```php
if ($row['BranchBalance'] > 20)
{
$lagersaldo='20+';
$color='#007F0E';
}
```

ändras till

```php
if ($row['BranchBalance'] > 20)
{
$lagersaldo='20+';
$saldoCss='instock'; // alternativt "notinstock"
}
```

och sen 

```php
<dt>I Lager</dt>
                <dd class="'.$saldoCss.'">'.$lagersaldo.'</dd>
```

ja sen måste du såklart fixa dessa css-klasser, men det är ju gjort i en handvändning
.instock{color:#007F0E}
.notinstock{color:#FF6A00}

Att "rubriken" ändrar höjd beror på att den inte har någon höjd satt, ett litet förbiseende av mig. ta dock bort de där  \<br\> du har där.. de kommer stöka till saker

lägg till height:32px; i css:en för h3 så skall det funka

Permalänk: https://www.webforum.nu/p/2314698

## #8 — Kamush, 2013-11-10T19:19Z

Det hjälpte ej. 
Färgen bytas ej.

Permalänk: https://www.webforum.nu/p/2314699

## #9 — Kamush, 2013-11-10T19:19Z

Ändrade exakt som du skrev.

Permalänk: https://www.webforum.nu/p/2314700

## #10 — Kamush, 2013-11-10T19:24Z

Det gick visst. Du hade rätt. 

Kan du hjälpa mig med en SISTA sak??
Om det finns inte värde i ex. hastighetsindex så hoppar hela raden fram. Hur skriver om det om det inte finns nåt ska det stå tomt.

Permalänk: https://www.webforum.nu/p/2314701

## #11 — rhdf, 2013-11-10T19:48Z

Gör en koll på det innan du skriver ut det 
$speedrating=$row\['SpeedRating'\];
if ($row\['SpeedRating'\] == null) // Eller ' ' eller under en viss längd
{
$speedrating=' - ';
}

och sen skriva ut $speedrating istället för $row\['SpeedRating'\]

Permalänk: https://www.webforum.nu/p/2314702

## #12 — Kamush, 2013-11-10T21:11Z

PERFEKT.

Permalänk: https://www.webforum.nu/p/2314703

---

Tråden på webben: https://www.webforum.nu/amne/php/191847-kanske-nån-som-vill-hjälpa-lite-med-design
