[clirre]

Hej,

Jag håller på att göra en lösning för jobbet. Jag har en applikation som sprutar ur sig fast HTML-kod med divvar och dylikt som inte går att ändra på.

Det jag får är en rad ul-ar och li-ar som ska skapa en tabell och denna tabell ska kunna användas i IE6 med olika inställningar och upplösningar. Ja, så standardiserat som möjligt.

HTML:en ser ut så här ungefär:

<ul id='port_1'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='slot_1'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='kod_1'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='port_2'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='slot_2'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='kod_2'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='port_3'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='slot_3'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]<ul id='kod_3'>
<li class='description'>Description
<li class='locked'>Lock
<li class='param'>Parameter[/list]
Dessa ska rada upp sig fint och lydigt i en tabell enligt:

port_1 slot_1 kod_1
port_2 slot_2 kod_2
port_3 slot_3 kod_3

li-arna ska för övrigt rada upp sig på rad men det är lätt fixat.

Att få port_# att lägga sig längst till vänster sköter jag med clear: left; och float: left;

Det mesta skulle nog vara frid och fröjd om man kunde skriva kod_# clear: right; men det följer inte IE6 (de följer inte W3-standarden tydligen).

Problemet som det är nu är att slot_2 hamnar efter kod_1 i vissa fall, ett problem jag bara kan lösa genom att sätta bredden så att den automatiskt skuttar ner på andra raden. Detta sätt är alltså inte att föredra då det måste fungera för olika upplösningar och så.

Har ni något tips på hur jag ska göra? Nåt CSS-hack som fungerar i såna här lägen?

mvh

Christoffer

[martine]

Liten snabbkommentar: att följa webstandard innebär inte att man aldrig får använda <table>, i just ditt fall ser det ut som det du vill skapa är just en tabell och då bör du använda just <table> som är det semantiskt mest riktiga. (du ser också ut att ganska många class & id på dina taggar, inte så effektivt) Hack finns det förstås alltid men försök strukturera bättre först (och man skulle behöva se css:n för ul för att kunna föreslå något)

[clirre]

Hej,

Tack för ditt svar. Det jag menade med fast HTML-kod är att jag alltså inte kan ändra i HTML-koden (tro mig, jag hade gjort <table> för länge sen annars ). Den kommer färdigpackad och klar från en applikation. Tycka vad man vill om det men det är så det fungerar.

ul-koden i CSS:en har jag lekt runt med och den är inte nödvändigtvis korrekt. Så här har jag det idag:

ul {
float: left;
clear: none;
}

li {
list-style-type: none;
float: left;
clear: none;
}

Jag tror inte att de är till så stor nytta för jag letar mer efter en helhetslösning.

[martine]

Originally posted by clirre@Dec 6 2006, 10:55
Tack för ditt svar. Det jag menade med fast HTML-kod är att jag alltså inte kan ändra i HTML-koden (tro mig, jag hade gjort <table> för länge sen annars ). Den kommer färdigpackad och klar från en applikation. Tycka vad man vill om det men det är så det fungerar.

Jaha, ja då var det inte mycket nytta med mina pekpinnar…

Att ha både clear och float på samma element kan ibland ge lite märkliga resultat (vissa webläsare har mer problem än andra). Har du provat med:

ul {
width: 33%;
float: left;
}
li {
list-style: none;
}

Om du sätter bredden till 33 % så får tre stycken ul plats bredvid varandra och nästa halkar ner på följande rad (eventuellt måste du också sätta height på ul om de har olika höjd så att de inte hakar i varandra i ovankant). Du får sedan sätta clear:left på det element som följer ul:arna.

[clirre]

Hmm, det låter så självklart att jag känner att jag måste testat det nån gång, men jag tror inte det!

Ska testa det på direkten!! Tack