webForumDet fria alternativet
Logga in

Trubbel med css och tabellramar

25 svar · 834 visningar · startad av @nders

@ndersMedlem sedan juni 200032 969 inlägg
#1

Hepp!

Jag är allt annat än kung på HTML och CSS, och har därför stött på lite patrull. Jag har en tabell, där jag vill ha en enpixels svart ram mellan alla ingående celler. Detta innebär tyvärr också celler som ligger i tabeller som ligger i den yttersta tabellen, och det är väl där problemet kommer, ramen blir förstår olika tjock på olika ställen.

Jag tror att ni förstår vad jag vill ha. En svart enpixels ram helt enkelt.

Det blev lite mycket kod att lägga in, så jag laddade upp en html-fil istället: http://member.webforum.nu/%40nders/1.htm

Det har blivit lite för mycket för min trötta hjärna. ;)

Hoppas någon kan ta sig en kik.

Mvh och tpf,

@ndersMedlem sedan juni 200032 969 inlägg
#2

Och förresten, jag vill ytterst gärna slippa specificera border-left, border-right osv på ingående celler, eftersom 1-2-3-blocken placeras ut dynamiskt och kan komma i vilken ordning som helst.

Mvh

Jesper TMedlem sedan nov. 20017 144 inlägg
#3

Åhhh.... en kacka med en massa tabeller ;)
:i Skulle det inte gå att sätta en pixel minus på marginalerna på vissa tabellelement och på så sätt överlappa ramarna?
OT: Tror att det är första gången jag ser @nders fråga något på wf. :)

spangoMedlem sedan juni 20008 205 inlägg
#4

Man kan (= borde kunna) sätta tabellens bakgrundsfärg till svart, specificera en annan färg för td/th, och sätta (exempelvis) margin-left och margin-top till 1px för td/th.

@ndersMedlem sedan juni 200032 969 inlägg
#5

Hmm...

Tack för förslag, men det vill inte riktigt (läs: inte alls) fjungera. ;) Antingen blir resultatet oförändrat eller så försvinner även alla ramar.

Kanske är det jag som gör det för svårt för mig?

Vi tar om det från början.

Jag vill ha en tabell som består av x antal rader.
Dessa rader / block kan ha antingen en cell som täcker 100% av bredden, två celler som täcker 50% var, eller tre celler, som lämpligen täcker drygt 33% var av bredden. Dessa block kan komma i vilken ordning som helst.

Inuti var och en av dessa celler kommer att placeras en tabell, som kommer att innehålla en del celler, varav en eller två kommer att vilja ha en ram runt sig, som flyter in i den andra ramen. Phew...

Länken ovan gäller fortfarande givetvis, för att demonstrera en ungefärlig resultatönskan. :)

Går det överhuvudtaget att göra som jag önskar?
Måste jag använda en ram uppbyggd av små bilder?

Jag fortsätter att leka lite med marginaler och dylikt.

Tack för era svar. Keep 'em coming! :D

Mvh

Engine^Medlem sedan dec. 20003 887 inlägg
#6

Är det inte nu du vill upptäcka css-möjligheter. Det är väl så att om du på <table> lägger till attributet style="border-collapse: collapse;", så ska väl det lösa sig. Allt enligt vad jag förstår från w3c: Border conflict resolution

@ndersMedlem sedan juni 200032 969 inlägg
#7

Jepp, och det är border-collapse jag har försökt med.
Jag lade till table {border-collapse: collapse;}, och det blev lite bättre.

Jag ska läsa länken du gav mig, tack.

Nu ser det ut så här: http://member.webforum.nu/%40nders/1.htm

Mvh

Engine^Medlem sedan dec. 20003 887 inlägg
#8

Det verkar vara fullständigt omöjligt att få till det där. Mycket beror på dom nästlade tabellerna. Om du verkligen måste, så får du nog göra så att du ger varje cell- och tabelltyp specifika klassnamn och sedan i css:en får du styra border-hanteringen.

Jag tror att jag skulle försökt med den metoden ivarjefall. Även om det är ¤#%&#¤% drygt att sätta typ border: 1px 0px 1px 0px; och sedan veta att kantjäklarna hamnar rätt till slut. Plus överraskningen när man drar igång en annan browser och upptäcker att timmar av slit måste kopieras och göras om :x

Nåja, lycka till ivarjefall §jr

@ndersMedlem sedan juni 200032 969 inlägg
#9

Problemet är ju att jag inte vet vart blocken hamnar. Blocket med tre celler kan lika gärna hamna i mitten, och då gäller ju inte samma höger-, vänster-, uppe- och neremarginaler. Eller gör det det?

Jag får försöka... :x

Tack ändå för svar! :D

Mvh

Engine^Medlem sedan dec. 20003 887 inlägg
#10

Jo, men är det inte alltid samma celltyper som kommer med? Dynamiskt är bra, men för dynamiskt kan vara för jobbigt... ;)

@ndersMedlem sedan juni 200032 969 inlägg
#11

Jo, det är de här tre typerna av standardblock som kommer. Så det kanske går? Snurrigt dock. Får sätta av helgen på att pilla med sånt här känns det som...

Det är tyvärr inte jag som bestämmer dynamiknivån, utan det finns ju de som betalar min lön. :)

HTML och CSS är för krångligt, det bara snurrar. Undrar när vi ska anställa en webbdesigner som kan göra allt sånt här? ;)
Tacka vet jag andra bullar.

Mvh,

Engine^Medlem sedan dec. 20003 887 inlägg
#12

Kräv högre lön! ;)

jarvkloMedlem sedan juli 20013 378 inlägg
#13

@nders skrev:

Problemet är ju att jag inte vet vart blocken hamnar. Blocket med tre celler kan lika gärna hamna i mitten, och då gäller ju inte samma höger-, vänster-, uppe- och neremarginaler. Eller gör det det?

Jodå - om man klurar lite! ;)

Du behöver inte ha separata tabeller för raderna - det går att fixa med colspan och lite matematik...
Du behöver sex kolumner i tabellen för att kunna dela den som du vill:
rad 1: colspan="6"
rad 2: colspan="3" (två celler med "hälften")
rad 3: colspan="2" (tre celler med "en tredjedel")

Sätt sedan border på:
Tabellen: uppe och till vänster.
Varje cell: nere och till höger.

Kör du sedan med border-colapse:collapse på tabellen... Så har du löst det första problemet.

Och det spelar ingen roll om du kastar om raderna eftersom cellerna ställer in border likadant oavsett hur många de är på raden ;)

De "flytande" inre tabellerna löser du genom att slänga in dem i varsin div med en marginal på -1px samtidigt som du ser till att tabellcellerna har padding:0....

Om jag inte missuppfattat dig borde du kunna utgå från den här mallen... Den är iofs bara testad i MSIE6 och Moz 1.3 - men det finns säkert någon här som kan hjälpa till med att verifiera den även i andra webbläsare ;)

@ndersMedlem sedan juni 200032 969 inlägg
#14

Det ser ju helt fantastiskt ut! Jag utgår ifrån att det löser sig med jarvklos underbara hjälp.

Jag är så till mig så jag sitter och hoppar.

Jag återkommer med resultatet. :)

Mvh,

m_soderlundMedlem sedan sep. 20026 425 inlägg
#15

Det ingen annan klarade, klarade Jarvklo. :D
(Jag satt i 15 minuter och testade på datorn här, men lade ner det förbannade ;) projektet..)

m_soderlundMedlem sedan sep. 20026 425 inlägg
#16

Bevis:

snabelbevis.gif
@ndersMedlem sedan juni 200032 969 inlägg
#17

Tack för att du också försökte, Martin.

Mvh

@ndersMedlem sedan juni 200032 969 inlägg
#18

Jag behöver nog lite mer hjälp...

... för att få det att fungera.

Jag har också en massa andra tabeller på sidan, en som ska ligga runt denna, en annan ovanför och en under. Typ så här:

<table>
   <tr>
      <td>
           Här är lite skräp ovanför
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
           [b]Här slänger jag in Jarvklo-tabellen[/b]
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
           Och en massa skräp under
      </td>
   </tr>
</table>

Det är alltså endast den s.k. Jarvklo-tabellen som ska påverkas av det här css-andet. Jag har försökt tvinga det med tabell-klasser och liknande, men jag får inte till det.

Det här är för mig som att åka skateboard på rullskridskor; långsamt och förbarkat vingligt. ;)

Så länge jag använder endast Jarvklo-koden så är det ju lugnt, men det är efter xsl-transformeringen det börjar ryka.

Tack för all hjälp än så länge...

Mvh,

bossseMedlem sedan juni 2003772 inlägg
#19

Har bara läst denna tråd lite sporadiskt.
Men jag lägger ut ett litet exempel med css och klasser.
Det liknar i vart fall bildbeskrivningen som jag kollat.

<html> 
<head> 
<style "text/css"> 
<!-- 
#Tabell1 {width:100%; height:10%; border-collapse:collapse; border:1 solid black;} 
#Tabell2 {width:100%; height:30%; border-collapse:collapse; border:1 solid black;} 

.TR1 {height:10px;} 
.TR2 {height:20px;}
.TD1{width:20%; border:1 solid black;background-color:gray;} 
.TD2{width:40%; border:1 solid black;background-color:silver;} 
.TD3{width:40%; border:1 solid black;background-color:gray;} 
.TD0{width:100%;border:1 solid black;background-color:silver;} 
.TD4{width:20%; border:1 solid black;background-color:silver;} 
.TD5{width:40%; border:1 solid black;background-color:gray;} 
.TD6{width:50%; border:1 solid black;background-color:silver;} 
.TD7{width:33%; border:1 solid black;background-color:silver;} 
--> 
</style> 
</head> 
<body bgcolor=green> 

<table id=Tabell1 > 
<tr class=TR1> 
	<td class=td1></td> 
	<td class=td2></td> 
	<td class=td3></td> 
</tr> 
</table> 
<table id=Tabell2> 
<tr class=TR2> 
<td class=td0></td>
</tr>   
</table> 
<table id=Tabell1> 
  <tr class=TR1> 
<td class=td4></td> 
<td class=td5></td> 
<td class=td4></td> 
<td class=td5></td> 
  </tr>
</table>
<table id=Tabell2> 
  <tr class=TR2> 
<td class=td6></td> 
<td class=td6></td> 
  </tr>
</table> 
<table id=Tabell1> 
  <tr class=TR1> 
<td class=td7></td> 
<td class=td7></td> 
<td class=td7></td>
  </tr>
</table>
</body> 
</html>
@ndersMedlem sedan juni 200032 969 inlägg
#20

Ett litet tillägg medans jag läser bossses kod; jag kan inte modifiera tabellerna och koden som ligger runt, utan den nya tabellen och den nya css-koden är det enda jag har kontroll över.

*lusläser*

136 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
133 ms — hämta tråd, inlägg och bilagor (db)