Två kolumner i punktlista?

7 svar · 1 965 visningar · startad av lbs129 21 mars 2010

lbs129Medlem sedan apr. 200899 inlägg

Frågan21 mars 2010 17:43#1

Hej!

Jag försöker göra så att jag kan ha som en tabell med två kolumner inuti en punktlista, fast inte använda <table> utan <div> istället. Jag hör försökt en del men det funkade inte bra:

CSS:

.lank
{
	width: 100%;
}

.lankextra
{
	width: 35%;
	height: 100%;
	float: right;
}

HTML:

<div class="lank">
	<div class="lankextra">
	Test! <img src="images/thumb_up.png">
	</div>
	<span class="lankrubrik"><a href="?vad=ut&amp;id=<%=RecSet("id")%>" target="_blank" title="Gå till <%=RecSet("adress")%>"><%=RecSet("rubrik")%></a></span><br>
	<span class="lankbeskrivning"><%=RecSet("beskrivning")%></span><br>
	<span class="lankinfo">Kategori: <a href="?visa=kategori&amp;katid=<%=RecSet("kategori")%>"><%=RecSet("kategorinamn")%></a>&nbsp;|&nbsp;Antal klick: <%=RecSet("antalklick")%>&nbsp;|&nbsp;Inlagd: <%=RecSet("inlagd")%></span>
</div>

Det är ungefär så här jag vill ha det:
http://www.webforum.nu/attachment.php?attachmentid=21454&stc=1&d=1269193360

Tack på förhand! :)

Mvh Johan

Danne VMedlem sedan aug. 20068 090 inlägg

21 mars 2010 18:08#2

Fattar inte vad den där koden du skickade med skulle göra. Men det borde vara nåt sånt här:

<ul>
<li><div class="nånting">blablaba</div></li>
<li><div class="nånting">blablabablabla</div></li>
</ul>

lbs129Medlem sedan apr. 200899 inlägg

21 mars 2010 19:58#3

Hmm, det där blir ju inte två kolumner. Kolla på bilden så förstår du hur jag menar. :)

Mvh Johan

Danne VMedlem sedan aug. 20068 090 inlägg

21 mars 2010 20:28#4

lbs129 skrev:

Hmm, det där blir ju inte två kolumner. Kolla på bilden så förstår du hur jag menar. :)

Mvh Johan

Heh.. ok, men alltså: Du får ju själv göra kolumnerna inuti <li>-taggarna. Inte fan vet jag hur du vill att dom ska se ut. ;)

Men ok, testa att lägga nånting som det innanför varje list-tag då:

<div style="border:1px solid #000;"><div style="float:left; border-right:1px solid #000;">blablabla</div><div>blabla</div></div>

Stilsätt som du vill.

lbs129Medlem sedan apr. 200899 inlägg

21 mars 2010 20:35#5

Det var just grejen att göra kolumner som jag inte fixade nåt bra... Men jag tror jag fattade nu vad som var fel. Jag satte bredden på den högra kolumnen och float:right på den, fast man skulle sätta bredden på den vänstra och ha float:left. Jag gjorde en snabbkoll med din kod och det verkar stämma men ska kolla ordentligt lite senare.

Tack för hjälpen! :)

Mvh Johan

FuelMedlem sedan okt. 20001 285 inlägg

22 mars 2010 12:54#6

Kör display: display: table; table-row; display: table-cell; på lista & div

lbs129Medlem sedan apr. 200899 inlägg

22 mars 2010 20:33#7

Fuel skrev:

Kör display: display: table; table-row; display: table-cell; på lista & div

Tackar, ska testas!
Men menar du alltså att jag ska ha display:table på li-taggen eller på en container-div?

Mvh Johan

Danne VMedlem sedan aug. 20068 090 inlägg

22 mars 2010 22:39#8

Fuel skrev:

Kör display: display: table; table-row; display: table-cell; på lista & div

Njae.... tanken är god, men jag har tyvärr för mig att det inte funkar särskilt bra i många webbläsare. Bl.a. tror jag det är IE7 som inte klarar detta (hinner inte kolla just nu...).

Red: Hittade nyss denna som bekräftar vad jag skrev ovan: http://www.quirksmode.org/css/display.html