---
title: "Hur räknas portfolio? div/table"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/130284-hur-räknas-portfolio-div-table"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "SannyW"
published: "2005-06-19T21:09:18.000Z"
updated: "2005-06-20T16:04:46.000Z"
replies: 14
views: 385
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/html-css/130284-hur-räknas-portfolio-div-table"
---

# Hur räknas portfolio? div/table

## #1 — SannyW, 2005-06-19T21:09Z

Kanske en mindre viktigt fråga, men lika bra att göra "rätt" från början.

När man tänker css, så skall \<table\> endast innehålla tabell data.

Hur ser man då på portfolio som presenteras i rutnät med rubriker och ev. bild info.

Vad anses mest rätt, allt lösa detta med div:ar eller lägga i tabell?

Tar Herr Guffa´s portfolio som exempel, visuellt så är detta ett rutnät med rubrik och info.

<http://www.guffa.com/Photo_portfolio.asp?cat=1>

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

## #2 — Insider, 2005-06-19T21:35Z

En lista av nåt slag. Varför inte en \<dl\>.

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

## #3 — SannyW, 2005-06-19T22:11Z

Gjorde en liten snabb koll, om jag har text i dt och kör float left på första dt så kommer samtliga dt att följa efter.

När där sedan om in en bild i dt så vid float left så hamnar även saker utanför dl bredvid bilden.

```
		<dl style='border: 1px solid;'>
		<dt><img alt="bild1" src="img/preview1.jpg" /></dt><dt>Bild1</dt>
		<dt></dt>
		</dl>
```

Ändrade till 100% på dl och fick ett bättre reslutat,men nu kvar står ett problem med detta exempel att kunna skapa lista till höger om bilden, känns om \<br /\> inte är den bästa lösningen :)

```
		<dl style='border: 1px solid;float:left; width:100%;'>
		<dt style='float:left;'><img alt="bild1" src="img/preview1.jpg" /></dt><dt style='float:left;'>Bild1</dt>
		<dt><br />Hej</dt>
		</dl>
```

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

## #4 — icaaq, 2005-06-20T05:17Z

Kolla in [Eric Meyer´s](http://more.ericmeyeroncss.com/projects/02/) lösning på ett [fotoalbum](http://more.ericmeyeroncss.com/projects/02/proj02.zip) .

mv icaaq

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

## #5 — SannyW, 2005-06-20T10:36Z

Tack för länken icaaq, har kollat lite på hans lösningar. Det ger lite idéer, dock ser det ut som han missat några classer i sin style. Vet inte om det är därför som de olika alternativen ibland inte funkar som de skall.

Men summeringen är dock att det ger idéer, det är viktigast. Sedan kan man i och för sig lösa bakgrunden utan att lägga bild där.

typ:

<http://pro.html.it/esempio/nifty/nifty1.html>

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

## #6 — SannyW, 2005-06-20T12:35Z

Fortsätter i denna tråd, är på samma linje som den tidigare.

När jag skriver ut min dl så blir den olika i IE och FF. IE gör ingen padding 3px medan FF gör det, trots att det funkar i FF så blir resultet inte bra om bilden ersätts med alt. Då hamnar padding ovan för den tidigare dt.

```
dl
{
	margin: 0;
	padding: 0;
	text-align:center; 
     	font-family: verdana, arial, helvetica, sans serif;
	font-weight: normal;
	letter-spacing: 2px;
	color: gray;
	font-size: 10px;
}

dl dt
{
	padding: 3px;
}
  
dt img 
{
	border:1px solid gray; 
	background-color: white;
	padding: 3px;
}
```

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

## #7 — SannyW, 2005-06-20T13:25Z

Fick lösa det med:

Dock funkar fortfarande inte padding 3px i IE så det blir ingen vit ram innan för den grå. Men funkar i FF.

```
dt img 
{
	margin: auto;
	border:1px solid gray; 
	background-color: white;
	padding: 3px;
	display:block;
}
```

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

## #8 — SannyW, 2005-06-20T13:36Z

Sedan för att bygga på med ytterligare en fråga, någon som vet varför ALT knycker hela bredden och inte lyssnar på margin: auto ? Opera funkar och IE funkar, medan FF ger en konstig "fullbredd".

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

## #9 — Insider, 2005-06-20T14:55Z

Jag satt och lekte lite. Det är ganska trixigt att få marginalerna rätt i båda läsarna.
Om du inte vill att texten ska hamna bredvid bilden tar du bara bort float:left på dd img {} och dd.besk {}.
Bredden på textstycket kan du ändra fritt, så totala bredden blir bildens bredd+bredden på texten+alla marginaler.
Om du lägger texten under bilden blir hela boxen minst lika stor som bilden+marginalerna om nu inte texten är bredare än bilden.
Såhär hade jag gjort iaf.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
* {margin:0;padding:0;}

dl {
	font: 78%/150% verdana;
	border:1px solid #999;
	margin:1em;
	display:block;
	float:left;
}

* html dl {
	margin:1em 1.5em 1em .5em;
}

dt {
	font-weight:bold;
	font-size:120%;
	text-align:right;
	background:#eee;
}

dd {
	margin:1em;	
	
}

dd img {
	padding:1em;
	margin-bottom:1em;
	border:1px solid #999;
	display:block;
	float:left;	
}

dd.besk {
	width:14em;
	float:left;
	margin:0em 1em 1em 1em;
}

* html dd.besk {
	margin:1em .5em 1em 1em;
}
  </style>
  </head>
  <body>

    <dl>
      <dt>Callisto</dt>
      <dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
      <dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
    </dl>
    <dl>
      <dt>Callisto</dt>
      <dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
      <dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
    </dl>
    <dl>
      <dt>Callisto</dt>
      <dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
      <dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
    </dl>
    <dl>
      <dt>Callisto</dt>
      <dd><img src="http://www.nasa.gov/images/content/103963main_jupiter3.jpg" alt=""></dd>
      <dd class="besk">Callisto, a moon of Jupiter, is covered with craters produced when asteroids and comets struck its icy surface. Beneath the surface may be an ocean of salty liquid water. Image credit: NASA</dd>
    </dl>

</body>
</html>
```

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

## #10 — SannyW, 2005-06-20T15:20Z

Har bara hunnit titta lite snabbt, men padding problemet kvarstår i IE hos mig, alltså att det inte blir ram kring bilden. Eller ram blir det men den är inte paddad

Brukar kolla mot Opera också, nja där blev resultatet lite som det själv ville ;)

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

## #11 — SannyW, 2005-06-20T15:27Z

Skickar en liten länk så att det går att se vad jag vill få ut, snyggt eller inte kan diskuteras men detta har jag fastnat för hittills :)

<http://www.bartalameus.se/default.asp?menu=2&sub=1&page=1>

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

## #12 — Insider, 2005-06-20T15:52Z

Vaddå? Får du ingen ram runt bilden?
Jag har inte testat i Opera.

<http://member.webforum.nu/151/img_gallery.html>

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

## #13 — SannyW, 2005-06-20T15:54Z

Jo, men jämnför IE och FF. SÅ ser du att där inte är någon padding mellan ramen och bilden.

/r

Sedan är Opera mindre viktigt, men ändå :) Tyckte mest det var underligt då FF och Opera brukar gå hand i hand.

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

## #14 — Insider, 2005-06-20T16:01Z

Ok, hos mig ser det lika ut med padding och allt. Men du sitter säkert med IE5.5?

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

## #15 — SannyW, 2005-06-20T16:04Z

Det hoppas jag inte, men om Internet Explorer visar:

Version 6.0.2800

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/130284-hur-räknas-portfolio-div-table