---
title: "Olika design css"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/154937-olika-design-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Inferis"
published: "2006-12-16T20:15:40.000Z"
updated: "2006-12-19T16:45:29.000Z"
replies: 15
views: 1103
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/154937-olika-design-css"
---

# Olika design css

## #1 — Inferis, 2006-12-16T20:15Z

På bilden ser ni hur det ser ut i Internet Explorer 6 o 7.
Där ser det bra ut, förutom att texten är för långt ifrån grafen på båda hållen.
Men hur gör man för att Firefox och Opera ska visa det ordentligt?
Som det är på bilden längst ner vill jag ha det.

```
<style>

   dl { 
       margin: 0; 
       padding: 0;     				
   }
   dt { 
       position: relative; /* IE is dumb */
       clear: both;
       display: block; 
       float: left; 
       width: 104px; 
       height: 20px; 
       line-height: 20px;
       margin-right: 17px;              
       font-size: .75em; 
       text-align: right; 
   }
   .dt2 { 
       position: relative; /* IE is dumb */
       clear: both;
       display: block; 
       float: right; 
       width: 104px; 
       height: 20px; 
       line-height: 20px;
       margin-right: 17px;              
       font-size: .75em; 
       text-align: left; 
   }
   dd { 
       position: relative; /* IE is dumb */
       display: block;     			
       float: left;     
       width: 197px; 
       height: 20px; 
       margin: 0 0 15px; 
       background: url("grafik/g_colorbar.jpg"); 
    }
    * html dd { float: none; } 
   /* IE is dumb; Quick IE hack, apply favorite filter methods for 
   wider browser compatibility */

    dd div { 
       position: relative; 
       background: url("grafik/g_colorbar2.jpg"); 
       height: 20px; 
       width: 75%; 
       text-align:right; 
    }
    dd div strong { 
       position: absolute; 
       right: -5px; 
       top: -2px; 
       display: block; 
       background: url("grafik/g_marker.gif"); 
       height: 24px; 
       width: 9px; 
       text-align: left;
       text-indent: -9999px; 
       overflow: hidden;
    }

</style>
<dl>
   <dt>Max</dt><dt class=dt2>McDonalds</dt>
   <dd>
       <div style="width:25%;"><strong>25%</strong></div>
   </dd>
</dl>

<dl>
   <dt>Malmö</dt><dt class=dt2>Köpenhamn</dt>
   <dd>
       <div style="width:50%;"><strong>50%</strong></div>
   </dd>
</dl>

<dl>
   <dt>Hund</dt><dt class=dt2>Katt</dt>
   <dd>
       <div style="width:75%;"><strong>75%</strong></div>
   </dd>
</dl>
```

Bilagor:

- [IEFF.jpg](https://www.webforum.nu/a/13120.jpg)

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

## #2 — Fuel, 2006-12-18T12:25Z

...

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

## #3 — Inferis, 2006-12-18T13:38Z

Nu försöker jag lära mig css. Får inte installera FF på jobbdatorn.

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

## #4 — Fuel, 2006-12-18T14:24Z

...

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

## #5 — colione, 2006-12-18T14:28Z

Som vanligt ger Fuel inte mycket konstruktivt i sina inlägg, killen bad om hjälp om hur han får det att se bra ut i FF och Opera. Inte en guide till hur du installerar FF på jobbdatorn. Nu kan jag tyvärr hjälpa dig lika lite som Fuel har gjort, då det var längesen jag pillade med CSS. Men det hade varit trevligt att se folk som faktiskt kan detta ge svar.

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

## #6 — zcorpan, 2006-12-18T15:10Z

Varför inte använda en tabell?

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

## #7 — Inferis, 2006-12-18T18:45Z

> **zcorpan skrev:**
>
> Varför inte använda en tabell?

För att jag vill lära mig att göra en sida utan tabeller.

Det kanske går bättra att använda \<div\> istället för \<dl\>?

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

## #8 — zcorpan, 2006-12-18T19:03Z

Men det handlar inte om att banna tabeller. Det handlar om att använda rätt element för rätt tillfälle. Nu är det inte säkert jag har förstått exakt vad det är för information du försöker framhäva men \<dl\> verkar inte rätt i det här fallet.

Menar du "Jag gillar Max mer än McDonalds, är likgiltig mellan Malmö och Köpenhamn, och gillar katt mer än hund."?

Om det är en graf kanske du borde använda en bild istället (PNG eller SVG) och använda förståelig alternativtext som fallback.

Det jag vill komma till är att man använder inte CSS för att använda CSS eller för att undvika tabeller utan man använder det för att separera presentation från innehållet så att man får möjlighet att använda HTML på rätt sätt.

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

## #9 — Compusa, 2006-12-18T20:01Z

> **zcorpan skrev:**
>
> Det jag vill komma till är att man använder inte CSS för att använda CSS eller för att undvika tabeller utan man använder det för att separera presentation från innehållet så att man får möjlighet att använda HTML på rätt sätt.

Exakt. För tabulärdata är det helt okej att använda tabeller.

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

## #10 — Fuel, 2006-12-18T21:28Z

...

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

## #11 — Inferis, 2006-12-18T22:59Z

Tack ändå. Jag ville bara lära mig hur man gör det där utan tabeller, för tabeller kan jag redan.
Datan hade jag tänkt skulle vara dynamisk, därför kan man inte använda bilder. Grafen visar vad man gillar bäst av tex Malmö - Köpenhamn.

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

## #12 — zcorpan, 2006-12-18T23:40Z

> **Inferis skrev:**
>
> Datan hade jag tänkt skulle vara dynamisk, därför kan man inte använda bilder.

Varför inte? SVG har samma "dynamik" som HTML.

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

## #13 — Inferis, 2006-12-19T11:26Z

Vad är SVG?

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

## #14 — zcorpan, 2006-12-19T13:50Z

Ett vektorgrafikformat i XML. <http://www.w3.org/Graphics/SVG/>

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

## #15 — Inferis, 2006-12-19T14:12Z

Hade tänkt att börja med css.

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

## #16 — zcorpan, 2006-12-19T16:45Z

Låter klokt. :)

Även om jag förmodligen skulle använt en tabell i det här fallet kan jag ändå visa hur det kan gå till "med divar".

För varje rad har du en div, vari du har den vänstra texten i en egen div, grafen i en bild, och den högra texten i en div. Sen anger du rätt bredd för de inre divarna (förslagsvis med "em", eller åt minstone för textdivarna), samt float:left.

Grafen i sig själv har du redan klarat så det är bara göra på motsvarande sätt. (y) Det du kan tänka på dock är att också ange bakgrundsfärg så det funkar även utan bilder.

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/154937-olika-design-css