[CSS] Tabel met afgeronde celhoeken maken - Softwareontwikkeling

woensdag 10 november 2004 13:40

Acties:

Topicstarter

Ik wil een tabel maken waarin de hoeken van de cellen zijn afgerond. Nu is dit op zich niet zo een heel groot probleem aangezien ik dit kan maken door de tabel uit te breiden met meer cellen en binnen deze cellen een witte pixel te plaatsen. Het probleem hierbij is echter dan ik hiermee een enorme lap html code krijg en dit werkt niet in het content management system dat ik gebruik.

De oplossing voor mijn probleem is het gebruik van een stylesheet, hiermee kan ik de afgeronde hoeken definieren in de css code en zo de html zo simpel mogelijk houden.

Ik heb de volgende code bedacht:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #666666;
    padding: 2px;
    background-image: url(dot.gif);
    background-position: left top;
    background-repeat: no-repeat;
}
.light {
    background-color: #CCCCCC;
    padding: 2px;
    background-image: url(dot.gif);
    background-position: left top;
    background-repeat: no-repeat;
}
.dark {
    background-color: #999999;
    padding: 2px;
    background-image: url(dot.gif);
    background-position: left top;
    background-repeat: no-repeat;   
}
.rounded {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
}
-->
</style>
</head>
<body> 
<table width="75%"  border="0" cellspacing="1" cellpadding="0" class="rounded"> 
  <tr class="header"> 
    <td>Title</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr class="light"> 
    <td>Text</td> 
    <td>More text </td> 
    <td>Contents</td> 
  </tr> 
  <tr class="dark"> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
</body>
</html>

Het probleem is zoals jullie kunnen zien dat het me alleen lukt om de pixel in de linkerbovenhoeken van de cellen te plaatsen. Met 'background-image' kan ik namelijk slechts één pixel plaatsen.

Iemand een idee hoe dit op te lossen (zonder gif's te gebruiken in de html code) ik denk aan verschillende layers, maar dan moet ik met div's gaan werken en ik wil de html echt zo eenvoudig mogelijk houden.

[ Voor 26% gewijzigd door spocky op 12-02-2006 14:00 ]

Portugese Wijn

woensdag 10 november 2004 13:49

Acties:

André

Analytics dude

Met simpele html, geen gifs en geen layers in de code gaat dit gewoon niet lukken met alleen CSS. Je zou een JS script kunnen maken die alle TD's voorziet van de juist gifs op de hoeken.

Hier word de techniek beschreven:
http://www.yourhtmlsource.com/tables/roundedcorners.html
http://www.htmlgoodies.com/tutors/roundcorners.html

[ Voor 30% gewijzigd door André op 10-11-2004 13:50 ]

woensdag 10 november 2004 13:53

Acties:

steffex

Mag ik vragen waarom je het op deze manier wilt doen?

Je kunt makkelijker wat plaatjes maken... scheelt een hoop ge**kel

woensdag 10 november 2004 13:54

Acties:

killercow

eth0

3 oplossingen,
echte browser kunnen de volgende 2 gebruiken:
1: border-radius property in css (en moz-border-radius)
2: met :before, : after ism :content pseudo elements in de css.

IE kan eventueel hier mee overweg:
een LI bolletje (van een grote font-size) zo positioneren dat je alleen het nodige kwart op de juiste plek gebruikt.

meer info

openkat.nl al gezien?

woensdag 10 november 2004 14:01

Acties:

Prut

Gebruikte iedereen maar browsers uit de mozilla familie, dan kon je gewoon dit gebruiken

-moz-border-radius:20px

woensdag 10 november 2004 14:01

Acties:

André

Analytics dude

killercow schreef op 10 november 2004 @ 13:54:
border-radius property in css (en moz-border-radius)

http://www.w3.org/TR/2002...021107/#the-border-radius

CSS3 wordt helaas nog niet echt goed ondersteund

woensdag 10 november 2004 15:34

Acties:

spocky

Topicstarter

Misschien verduidelijkt het volgende screenshot mijn probleem een beetje:

Afbeeldingslocatie: http://picserver.org/view_image.php/1ECDP416Z50K

Afbeeldingslocatie: http://picserver.org/view_image.php/1ECDP416Z50K

Het betreft hier dus slechts gifjes van één pixel die in alle vier de hoeken van de cellen moeten verschijnen. Omdat het me tot nu toe alleen gelukt is om dit voor elkaar te krijgen in de linkerbovenhoeken is het screenshot overigens niet zo duidelijk als ik zou hebben gewild.

Iemand misschien een oplossing hiervoor. Kleine wijzigingen in de html code zijn mogelijk, het moet echter zo compact en simpel mogelijk blijven...

Portugese Wijn

woensdag 10 november 2004 16:31

Acties:

Blaise

Moet de inhoud tabel rekbaar zijn?

Zoniet dan kan je gewoon een achtergrondplaatje maken voor de bovenste en onderste rij, i.p.v. een achtergrondkleur. Dat doe je met CSS.

Anders wordt het wat ingewikkelder.

[ Voor 4% gewijzigd door Blaise op 10-11-2004 16:33 ]

woensdag 10 november 2004 16:38

Acties:

chris

Kijk eens bij alistapart:
CSS Design: Creating Custom Corners & Borders en Part II

woensdag 10 november 2004 17:00

Acties:

spocky

Topicstarter

Ja, de tabel moet helaas ook nog resizable zijn.

Ik ben nu écht ten einde raad! Ik heb alle aangegeven pagina's bekeken, maar zoals ik het wil (simpele html tabel, uitgebreide css) is me nog niet gelukt.

Er zijn een hoop tabel-loze voorbeelden gegeven, maar in de WYSIWYG editor van het content management systeem (Vignette V7) werken div's helaas helaas niet.

De tabellen op de site dienen door volstrekte n00bs te worden gemaakt en ik dacht met mijn code op de goede weg te zijn.

Iemand een idee hoe ik meerdere classes aan één cel kan toewijzen? Zo zou ik dan gewoon vier keer een background attribuut kunnen gebruiken per cel en dan iedere keer voor een andere hoek.

Portugese Wijn

woensdag 10 november 2004 17:02

Acties:

André

Analytics dude

Spocky schreef op 10 november 2004 @ 17:00:

Iemand een idee hoe ik meerdere classes aan één cel kan toewijzen? Zo zou ik dan gewoon vier keer een background attribuut kunnen gebruiken per cel en dan iedere keer voor een andere hoek.

4 class is simpel: <td class="bla1 bla2 bla3 bla4"> maar 4 achtergronden gaat daarmee niet lukken

woensdag 10 november 2004 20:30

Acties:

Verwijderd

[rml][ CSS] Ronde hoeken maken om DIV's met CSS[/rml]
iets aan?

woensdag 10 november 2004 21:56

Acties:

chris

Spocky schreef op 10 november 2004 @ 17:00:
Ik ben nu écht ten einde raad! Ik heb alle aangegeven pagina's bekeken, maar zoals ik het wil (simpele html tabel, uitgebreide css) is me nog niet gelukt.

Volgens mij kan je met de links van mij die ik boven je heb gegeven toch een hele hoop..... Hier is ook nog een artikel: Rounded Corners met css en javascript

woensdag 10 november 2004 23:11

Acties:

mullah

hebben je rows allemaal dezelfde hoogte? of is die ook rekbaar.

als ze dezelfde hoogte hebt kun je namelijk met de achtergrond al twee hoeken doen (gewoon een plaatje met twee pixels boven en onder aan de tabel een.

Een andere oplossing .. je geef de tr een achtergrondplaatje met een witte pixel boven en onder, dit kan eventueel met :before en :after.
en dan in de cellen een plaatje dat de hele hoogte van de cel gebruikt en een padding aan de zijkanten van een pixel.

Ik ga nog FF snel een voorbeeldje maken van wat ik bedoel.

Bij deze dus een voorbeeldje dat het helaas alleen in firefox doet (natuurlijk ook andere gecko's) Aan de andere kant doet het het nu wel zonder extra plaatjes.

[ Voor 18% gewijzigd door mullah op 11-11-2004 00:08 . Reden: voorbeeld toegevoegd ]

donderdag 11 november 2004 15:30

Acties:

spocky

Topicstarter

Wow, mullah! Dit is exact wat ik zocht! $_/-\o_$

Ik kan deze manier alleen niet gebruiken omdat mijn oplossing IE compatible dient te zijn

Omdat ik er niet achter kom wat het probleem is in IE ga ik maar de manier van Chris proberen (met javascript de div's achteraf invoegen, link).

Helaas ben ik niet zo'n held met javascript dus ik hoop dat ik er ooit nog uit ga komen...

Portugese Wijn

donderdag 11 november 2004 15:36

Acties:

Verwijderd

even een gedachtenspinsel voor IE:

stel je maakt je hele rij met 1 dezelfde achtergrondkleur
en je maakt een plaatje in de zin van:

][

dus zeg maar de hele scheiding 1 plaatje, als je die dan als achtergrondplaatje instelt, heb je alle tussenscheidingen al voor elkaar

misschien kan je met wat prutsen de rest ook wel regelen (ik dacht dat je geen background-image op je tr kan zetten, wel? anders heb je de eerste ook klaar)

donderdag 11 november 2004 15:48

Acties:

mullah

Dat idee met dat plaatje bij mophor is eigenlijk wel heel handig ...

Je hebt alleen ook nog steeds het probleem dat je de rijhoogte niet kunt scalen.

Als je het echter iets aanpast door er net als bij mijn voorbeeld een <span> tussen de <td> te zetten die dus bijvoorbeeld bovenaan een '|' (T vorm) plaatje neerzet, en dat je dan de <td> met het plaatje .|. (omgekeerde T vorm) onderaan doet .. dan moet je verder alleen de uiteinden nog goed maken en heb je ook een redelijke oplossing.

vrijdag 31 december 2004 11:46

Acties:

spocky

Topicstarter

Ja, ik ben nog steeds aan het "vechten" met dit probleem... Inmiddels ben ik een stuk verder gekomen. Het is me gelukt om met relatief simpele code de tabel te maken:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
table { font-family: verdana, arial, helvetica, sans-serif; font-size: 9px; }
.header { font-weight: bold; color: #ffffff; background-color: #666666; }
.light { background-color: #cccccc; }
.dark { background-color: #999999; }
.rounded { background: transparent url(dot_br.gif) no-repeat top right; }
div.rounded div { background: transparent url(dot_br.gif) no-repeat top left; }
div.rounded div div { background: transparent url(dot_br.gif) no-repeat bottom right; }
div.rounded div div div { background: transparent url(dot_br.gif) no-repeat bottom left; }
div.rounded div div div div { padding: 2px; }
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="0">
  <tr class="header"> 
    <td colspan="3"><div class="rounded"><div><div><div><div>Title</div></div></div></div></div></td>
  </tr>
  <tr class="light"> 
    <td><div class="rounded"><div><div><div><div>Content goes here. Let's see what happens when inserting lots of text!</div></div></div></div></div></td>
    <td><div class="rounded"><div><div><div><div>Content goes here</div></div></div></div></div></td>
    <td><div class="rounded"><div><div><div><div>More text in this cell to start the overflow...</div></div></div></div></div></td>
  </tr>
  <tr class="dark"> 
    <td><div class="rounded"><div><div><div><div>Content goes here</div></div></div></div></div></td>
    <td><div class="rounded"><div><div><div><div>Content goes here</div></div></div></div></div></td>
    <td><div class="rounded"><div><div><div><div>Content goes here</div></div></div></div></div></td>
  </tr>
  <tr class="light"> 
    <td><div class="rounded"><div><div><div><div>Content goes here. Let's see what happens when inserting lots of text!</div></div></div></div></div></td>
    <td><div class="rounded"><div><div><div><div>Content goes here</div></div></div></div></div></td>
    <td><div class="rounded"><div><div><div><div>Content goes here</div></div></div></div></div></td>
  </tr>
</table>
</body>
</html>

Dit werkt bijna helemaal goed in zowel IE als Firefox.

Ik heb alleen een probleem: het is absoluut noodzakelijk dat de tabel flexibel is, maar helaas wanneer een tekst automatisch over twee regels wordt verdeeld passen de hoekpixels zich niet aan de nieuwe celhoogte aan. Ze blijven op de zelfde positie ten opzichte van de tekst. Een screenshot ter verduidelijking:

Afbeeldingslocatie: http://picserver.org/view_image.php/Q51YR8TTZ62Y/p.gif

Afbeeldingslocatie: http://picserver.org/view_image.php/Q51YR8TTZ62Y/p.gif

Zoals jullie kunnen zien werkt de code goed voor de cellen met twee regels. In de cellen waar slechts één regel staat, daar worden de pixels niet in de hoeken geplaatst. Ik heb al vanalles geprobeerd met regelhoogtes, maar ik kom er nog steeds niet uit.

Iemand een idee? (ik voel dat de oplossing van het probleem dichtbij is!)

Portugese Wijn

donderdag 24 februari 2005 09:48

Acties:

Verwijderd

*kick*

Ik had dit topic in mijn bookmarks staan, en was benieuwd of er al een oplossing was...Ik heb zelf destijds ook zitten stoeien, maar ik heb tot nu toe geen oplossing kunnen verzinnen.

donderdag 24 februari 2005 09:58

Acties:

Verwijderd

alle je 4 images absoluut positioneren.
en dan met z-index werken

http://www.w3schools.com/...p?filename=trycss_zindex2

Ik heb het nog niet geprobeerd maar ik denk dat die z-index voor zulke
zaken uitgevonden is

Gaat wel niet in Netscape 4 ... maja, wie gebruikt er dat nu nog.

donderdag 24 februari 2005 10:21

Acties:

JHS

Splitting the thaum.

Mozal: het zijn wel backgroundimages he

.

DM!

donderdag 24 februari 2005 10:30

Acties:

Verwijderd

JHS schreef op donderdag 24 februari 2005 @ 10:21:
Mozal: het zijn wel backgroundimages he .

Ok, hiermee verkracht je compleet het concept van background images.
Maar met die z-index duw je ze ook naar de achtergrond.

woensdag 2 maart 2005 16:27

Acties:

spocky

Topicstarter

Met het doel de mede-gotters die via de search hier terecht zijn gekomen te kunnen helpen, post ik mijn uiteindelijke 'oplossing'.
Ik schrijf oplossing tussen aanhalingstekens omdat ik niet helemaal tevreden ben met het resultaat. In mijn code gebruik ik namelijk toch de div's die ik eigenlijk wilde vermijden. Mijn belangrijkste doelstelling (minder en eenvoudiger code) is hiermee echter wel gehaald.

Hier is de code:

code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cantos Redondos</title>
<style>

td.titulo {
background-color: #235d99;
color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 9px;
font-weight: bold;
height: 100%;
text-indent: 2px; }

td.subtitulo { 
background-color: #4074ab; 
color: #ffffff; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 9px; 
font-weight: bold; 
height: 100%;
text-indent: 2px; }

td.escura { 
background-color: #a7c0da; 
color: #12477c; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 9px; 
height: 100%;
text-indent: 2px; }

td.clara { 
background-color: #dae6f2; 
color: #12477c; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 9px; 
height: 100%;
text-indent: 2px; } 

.redondo { 
background: transparent url(dot_br.gif) no-repeat top right; 
height: 100%; }

div.redondo div { 
background: transparent url(dot_br.gif) no-repeat top left; 
height: 100%; }

div.redondo div div { 
background: transparent url(dot_br.gif) no-repeat bottom right; 
height: 100%; }

div.redondo div div div { 
background: transparent url(dot_br.gif) no-repeat bottom left; 
height: 100%; }

div.redondo div div div div { 
padding: 2px; 
height: 100%; }

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table cellspacing="2" cellpadding="0" width="100%" border="0">
  <tbody>
    <tr> 
      <td class="titulo" colspan="3" align="right"><div class="redondo">
          <div>
            <div>
              <div>
                <div>Unidade: Euro&nbsp;</div>
              </div>
            </div>
          </div>
        </div></td>
    </tr>
    <tr> 
      <td class="subtitulo" align="left"><div class="redondo">
          <div>
            <div>
              <div>
                <div>Rede</div>
              </div>
            </div>
          </div>
        </div></td>
      <td class="subtitulo" align="middle"><div class="redondo">
          <div>
            <div>
              <div>
                <div>2002</div>
              </div>
            </div>
          </div>
        </div></td>
      <td class="subtitulo" align="middle"><div class="redondo">
          <div>
            <div>
              <div>
                <div>2001</div>
              </div>
            </div>
          </div>
        </div></td>
    </tr>
    <tr> 
      <td class="clara"><div class="redondo">
          <div>
            <div>
              <div>
                <div>N.&ordm; Esta&ccedil;&otilde;es da Rede Digital</div>
              </div>
            </div>
          </div>
        </div></td>
      <td class="clara" align="middle"><div class="redondo">
          <div>
            <div>
              <div>
                <div>3.799</div>
              </div>
            </div>
          </div>
        </div></td>
      <td class="clara" align="middle"><div class="redondo">
          <div>
            <div>
              <div>
                <div>3.496</div>
              </div>
            </div>
          </div>
        </div></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Portugese Wijn

donderdag 3 maart 2005 09:59

Acties:

mullah

koele code (spaans?)

nog een vraagje, wat voor image gebruik je als background image? gewoon 1pixel wit?

[ Voor 4% gewijzigd door mullah op 03-03-2005 09:59 ]

donderdag 3 maart 2005 10:08

Acties:

Verwijderd

Waarom geef je de vier hoekcellen niet een ID en zet je er een background-image voor die hoek?

(Voor de mensen die verwezen naar CSS3. Deze link wil je hebben: The 'border-radius' properties. css3-border is nu onderdeel van css3-background.)

donderdag 3 maart 2005 10:32

Acties:

spocky

Topicstarter

mullah schreef op donderdag 03 maart 2005 @ 09:59:
koele code (spaans?)

nog een vraagje, wat voor image gebruik je als background image? gewoon 1pixel wit?

Portugees

Als background image gebruik ik inderdaad een gif van 1 pixel wit.

Verwijderd schreef op donderdag 03 maart 2005 @ 10:08:
Waarom geef je de vier hoekcellen niet een ID en zet je er een background-image voor die hoek?

Volgens mij heb je niet helemaal goed begrepen wat het idee is. Ik denk dat dit screenshot wel helpt:
Afbeeldingslocatie: http://picserver.student.utwente.nl/view_image.php/27KC73A2K8TN/picserver.gif

Afbeeldingslocatie: http://picserver.student.utwente.nl/view_image.php/27KC73A2K8TN/picserver.gif

Portugese Wijn

donderdag 3 maart 2005 11:08

Acties:

Verwijderd

Als de tabel een vaste breedte heeft zou je wellicht TD en TR kunnen combineren. Ik weet niet meer precies welke properties je moet gebruiken om de TR een 'background' te kunnen geven, maar mogelijk is het wel.

edit:
Nee dus. 75%...

[ Voor 10% gewijzigd door Verwijderd op 03-03-2005 11:10 ]