Ska jag bygga upp det här med en tabell eller divs?

2010-01-19 14:09

Medlem

Registrerad: Mar 2002

●

Ska jag bygga upp det här med en tabell eller divs?

Hej om ni kollar på bilden så har jag i nuläget byggt upp det med tabeller men undrar om det är mer rätt och göra det med divs? Och hur skulle man göra det isåfall?

Sen satt jag i dreamweaver och drog lite manuellt i tabellernas TD kolumner, för jag ville flytta katogorierna närmare eller längre ifrån bilden och dylikt. Men dreamweaver gjorde så att flytta jag en kategori så flyttade den själv en annan automatiskt, blev ju tokig när den gjorde så men varför!?

Bilden: http://img696.imageshack.us/img696/7603/bildu.jpg

Rapportera Redigera

Citera flera Citera

2010-01-19 14:50

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Eftersom du vill linjera allt textinnehåll så är det nog smidigast att använda tabellstruktur för det. Dreamweaver är inte bra på att hantera tabeller mer än att skapa dem, styr det hellre via koden i pixlar eller procent.
Men du behöver ju bara använda tabellstrukturen för informationen om Årsmodell - Reg Nr, därefter blir det lättare om du använder divar om du vill förändra utseendet i efterhand på strukturen.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-19 16:16

Permalänk

Guru Meditation

Medlem

Plats: Stockholm
Registrerad: Nov 2003

●

Ska det vara semantiskt korrekt - Varje bil ska vara en LI i en UL. Listan med egenskaper bör vara en DL.

Visa signatur

/Mvh Stefan

Rapportera Redigera

Citera flera Citera

2010-01-19 16:43

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Väldigt snabbt exempel på vad Guru menar:

<head>
<style>
body {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:1em;
	color:#FFF;
	background-color:#000;
}
h2 {
	font-size:1.2em;
	font-weight:normal;
	margin-top:0px;
	margin-bottom:10px;
}
#cars ul{
	list-style-type: none;
	margin:0px;
	padding:0px;
}
#cars ul li{
	clear:both;
}
#cars ul li img {
	display:inline;
	float:left;
	margin-right:60px;
}
#cars dl {
	width:600px;
}
#cars dt {
	width:90px;
	display:inline;
	float:left;
}
#cars dd {
	width:120px;
	display:inline;
	float:left;
	margin:0px;
}
#cars span {
	width:600px;
	color:#FC3;
	display:inline;
	float:left;
	margin-top:10px;
	margin-bottom:20px;
	clear:both;
}
#cars span a {
	color:#FC3;
	display:inline;
	float:right;
}
</style>
</head>

<body>
<div id="cars">
    <ul>
      <li>
        <h2>Cayman S-07</h2>
          <img src="" alt="" width="120px" height="110px" />
          <dl>
            <dt>Årsmodell:<dd>2003
            <dt>Effekt:<dd>257 KW / 321 HP
            <dt>Mil:<dd>8130
            <dt>Växellåda:<dd>Manuell
            <dt>Färg:<dd>Basalt svart metallic
            <dt>Reg Nr:<dd>xxx xxx
            <dt>Färg interiör:<dd>Svart
        </dl>
            <span>Pris: 589 000kr <a href="#">Mer info >></a></span>
      </li>
        
        <li>
            <h2>Cayman S-07</h2>
            <img src="" alt="" width="120px" height="110px" />
            <dl>
                <dt>Årsmodell:<dd>2003
                <dt>Effekt:<dd>257 KW / 321 HP
                <dt>Mil:<dd>8130
                <dt>Växellåda:<dd>Manuell
                <dt>Färg:<dd>Basalt svart metallic
                <dt>Reg Nr:<dd>xxx xxx
                <dt>Färg interiör:<dd>Svart
            </dl>
            <span>Pris: 589 000kr <a href="#">Mer info >></a></span>
        </li>
    </ul>
</div>
</body>

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-19 17:01

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Nu blir det roligt! Jag har funderat på det där med DLs och EGENTLIGEN så ska väl en definitionsterm bara förekomma en gång?
Mjölk: vit vätska som utvinns ur vissa däggdjur är ju en klar definition, medan Bilmodell: Saab och Bilmodell: Volvo utesluter varandra.

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2010-01-19 17:14

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Flamskyddsimpregnerar vardagsrummet.
Som jag ser det så borde definitionen i DD handla om den tidigare nämnda DT, vilket borde göra det ok semantiskt att definiera olika föremål med samma nämnare inom separata definitionslistor. Men det kan hända att jag missuppfattar dig mitt i potatisplättsstekandet.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-19 18:00

Permalänk

MB

Medlem

Registrerad: Mar 2002

●

Citat:

Ursprungligen inskrivet av save
Men du behöver ju bara använda tabellstrukturen för informationen om Årsmodell - Reg Nr, därefter blir det lättare om du använder divar om du vill förändra utseendet i efterhand på strukturen.

Du menar att jag ska ha divar för bilderna och tabell för informationen/faktan?

För just nu så kör jag ju allt i en enda tabell.

Har aldrig sett den strukturen på listor med dl, dt och dd, visste inte det fanns.
Provade ändra, för ville ha ut 257KW / 321 HP så det inte blev radbyte. Provade på widthen på #cars dd och ändrade den ifrån 120 till 130 pixlar, men då hoppade alting ihop istället.

Sen om jag vill ändra första kolumnen med Årsmodell-Färg så den kommer närmare bilden. Hur gör jag då?

Rapportera Redigera

Citera flera Citera

2010-01-19 18:07

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Citat:

Ursprungligen inskrivet av MB
Du menar att jag ska ha divar för bilderna och tabell för informationen/faktan?

För just nu så kör jag ju allt i en enda tabell.

Har aldrig sett den strukturen på listor med dl, dt och dl, visste inte det fanns.
Provade ändra, för ville ha ut 257KW / 321 HP så det inte blev radbyte. Provade på widthen på #cars dd och ändrade den ifrån 120 till 130 pixlar, men då hoppade alting ihop istället.

Sen om jag vill ändra första kolumnen med Årsmodell-Färg så den kommer närmare bilden. Hur gör jag då?

Det kan förenkla lite om du tänker tabeller endast för tabulär data och generellt all layout med hjälp av div:ar. Sen kan man göra vissa genvägar, låt säga att du har en bild i en div som ska ligga någon annanstans så kan du deklarera det via diven den redan ligger i istället för att skapa en ny div för den.

Som det ser ut i stilmallen jag gjorde så är det margin-right:60px; för #cars ul li img som du ska minska.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-01-19 18:13

Permalänk

Guru Meditation

Medlem