[CSS] 3 randen

[m33p]

Ik heb de search natuurlijk gebruikt maar daarin niet veel kunnen vinden met dubbele, of zelfs drie-dubbele randen. Ik probeer het volgende

Ik heb een table. Die table heeft een zwarte rand, met daarom een witte rand, en daarom weer een zwarte rand. Dit kan ik natuurlijk doen met plaatjes, maar ik probeer de laad-tijd zo laad- en render tijd zo laag mogelijk te houden.

Iemand enig idee of dit wel mogelijk is en zo ja hoe?

Alvast bedankt

[crisp]

zoiets:

HTML:

<div style="border: 1px solid #000;width:200px">
  <div style="border: 1px solid #FFF">
    <div style="border: 1px solid #000">
      hier je tabel
    </div>
  </div>
</div>

beter dan met plaatjes

testje:

hier je tabel

[ Voor 43% gewijzigd door crisp op 11-10-2003 12:43 ]

[Verwijderd]

Als border-style: double; niet is wat je zoekt, dan kan het niet. Niet met CSS2 in ieder geval. Dan zul je CSS3 properties moeten gaan gebruiken. Maar bedenk je dan wel dat het er niet in iedere browser werkt dan, dus zorg ervoor dat je het niet gebruikt als je design ervan afhangt.

[CH4OS]

Kan je dan niet beter border: double doen? dan hoef je er nog maar 1

EDIT:
Net te laat...

[ Voor 15% gewijzigd door CH4OS op 11-10-2003 12:45 ]

[Verwijderd]

3 div's zijn ook niet nodig, met 2 kan het ook. Alleen moet je dan wel een achtergrondkleur voor de content opgeven

HTML:

<div style="border: 1px solid #000;width:200px;background-color:#fff;">
    <div style="border: 1px solid #000;margin:1px;padding:5px;background-color:#ccc;">
        hier je tabel
    </div>
</div>

[ Voor 12% gewijzigd door Verwijderd op 11-10-2003 12:49 ]

[crisp]

hoe je het precies doet boeit niet eigenlijk, punt is dat je dit met enkel CSS niet kan bereiken en dus een iets creatievere oplossing moet verzinnen
Ik geef gewoon een alternatief voor het werken met plaatjes - wat TS ermee doet moet hij zelf weten

[Verwijderd]

Ik daag crisp uit om eens het volgende als HTML te posten:

<p style="border: 3px double black;">hier je meuk</p>

[m33p]

Cheatah, dat is precies wat ik zocht, bedankt! Crisp´s manier werkt natuurijk ook maar die van jou / U is wel een stuk simpeler.

Edit:
Hmz, kom er net achter dat de double manier niet op de juiste manier werkt, maar die van crisp wel, alleen jammer dat die wel een wat grotere code heeft.

Ik probeer het volgende

HTML:

<div style="border: 1px solid #000;width:200px;background-color:#C5C5C5;">
    <div style="border: 1px solid #000;margin:1px;padding:5px;background-color:#43505E;">
        hier je tabel
    </div>
</div>

en die moet zo worden:



Het voorbeeld is gewoon een design in photoshop... en deze wil ik zoveel mogelijk met CSS maken, vandaar...

[ Voor 84% gewijzigd door m33p op 11-10-2003 13:23 ]

[crisp]

hier je meuk

hé, die is geinig

[ Voor 5% gewijzigd door crisp op 11-10-2003 13:14 ]

[crisp]

m33p schreef op 11 oktober 2003 @ 13:07:
Edit:
Hmz, kom er net achter dat de double manier niet op de juiste manier werkt, maar die van crisp wel, alleen jammer dat die wel een wat grotere code heeft.

[...]

Zoals je ziet in mijn testje hierboven neemt Cheatah's manier de achtergrond over, op het moment dat het randje een andere achtergrond moet hebben dan je contentvlak, dan moet je het toch weer anders doen, bijvoorbeeld zo:

HTML:

<div style="border: 3px double #000;width:100px">
  <table style="background-color:#808080;width:100px">
    <tr>
      <td>hier je meuk</td>
    </tr>
  </table>
</div>

test:

hier je meuk

[ Voor 20% gewijzigd door crisp op 11-10-2003 13:26 ]

[m33p]

Dit werkt onder elkaar, maar niet juist naast elkaar (bij mij tenminste...) Er moeten 2 cellen naast elkaar komen waar die rand dan dus 1 keer tussen moet... nou heb ik wat zitten prutsen maar ik krijg hem wel dubbel (dus, zwart-wit-zwart-zwart-wit-zwart), maar niet enkel?

@Crisp:
Daar ben ik ook al mee aan´t prutsen, maar dan krijg je het probleem dat de witte rand weer niet meegaat, en zodra je die divjes weer gebruikt, krijg je vreemde aansluitingen en open stukken.

[ Voor 28% gewijzigd door m33p op 11-10-2003 13:32 ]

[crisp]

m33p schreef op 11 oktober 2003 @ 13:26:
Dit werkt onder elkaar, maar niet juist naast elkaar (bij mij tenminste...) Er moeten 2 cellen naast elkaar komen waar die rand dan dus 1 keer tussen moet... nou heb ik wat zitten prutsen maar ik krijg hem wel dubbel (dus, zwart-wit-zwart-zwart-wit-zwart), maar niet enkel?

ik moet ineens aan spacing denken, even wat testen...

[crisp]

HTML:

<style type="text/css">

body {
  background-color:#38424C;
}

table {
  border: 1px solid #000;
  background-color: #c0c0c0;
}

td {
  border:1px solid #000;
  background-color:#272F3A;
  color:#fff;
}

</style>
<body>
<table cellspacing="1">
  <tr>
    <td width="24" height="24">3D</td>
    <td width="200" height="24">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" height="200" >&nbsp;</td>
  </tr>
</table>
</body>

[Millennium]

http://meq.ath.cx/double.htm

Was het best wat ik er van kan maken

[kleautviool]

Dit is ietsje korter:

HTML:

<table bgcolor="#FFFFFF" border="1" cellpadding="1" bordercolor="#000000">
<tr>
<td width="24">3D</td>
<td width="200">Iets</td>
</tr>
<tr>
<td colspan="2" width="224">Tekst</td>
</tr>
</table>

Laat maar... is hetzelfde als die van crisp. Was de td ff vergeten Sorry

[ Voor 114% gewijzigd door kleautviool op 11-10-2003 14:34 ]

[crisp]

kleautviool schreef op 11 October 2003 @ 14:32:
Dit is ietsje korter:

HTML:

<table bgcolor="#FFFFFF" border="1" cellpadding="1" bordercolor="#000000">
<tr>
<td width="24">3D</td>
<td width="200">Iets</td>
</tr>
<tr>
<td colspan="2" width="224">Tekst</td>
</tr>
</table>

Laat maar... is hetzelfde als die van crisp. Was de td ff vergeten Sorry

Ik heb geprobeerd zoveel mogelijk in CSS te vatten (behalve de width en height) echter ondersteund IE nog niet de CSS property border-spacing, dus moest ik wel cellspacing gebruiken....

[Millennium]

crisp schreef op 11 October 2003 @ 14:54:
[...]

echter ondersteund IE nog niet de CSS property border-spacing....

Das waar ook.
Waarom staat me bij dat border-spacing door MS was bedacht.... ach ouderdom komt met gebreken.

[m33p]

Antwoorden genoeg en ´t wil al aardig vlotten nu, echt hartstikke bedankt voor alle reply´s!

[Sendy]

Ik doe ook een duit in het zakje. Een oplossing zonder tabellen
http://rotzorg.org/~sgr/m33p/try1.html

Ik heb wel 1 raar probleempje: ik krijg de CSS van de <img> niet in de style sectie zonder dat de 3d boven de streepjes komt te staan.

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
          <style type="text/css">
                .box {
                        width: 100px;
                        border: 1px solid black;
                }

                .stripes {
                        background-image: url(stripes.png);
                        height: 19px;
                        border: 1px solid #DDDDDD;
                }

                .content1 {
                        clear: left;
                        border: 1px solid #DDDDDD;
                        border-top: none;
                }

                .content2 {
                        border: 1px solid black;
                        background-color: #222233;
                        color: gray;
                        padding: 2px;
                }
          </style>
</head>
<body style="background-color: #333344;">
<div class="box">
        [img]"3d.png"/>
[/img]</div>
        <div class="content1"><div class="content2">
                te kst te kst te kst te kst tekst tek st
        </div></div>
</div>
</body>
</html>

Disclaimer: Alleen getest in Mozilla 1.4; er is geen IE voor Debian

--edit
Er zijn genoeg mensen die met IE6 kijken (vreemd genoeg nog niemand met IE5(.5)). Hoe werkt het daarop?

[ Voor 35% gewijzigd door Sendy op 11-10-2003 17:23 ]

[pasta]

Onder IE6 ziet het er zo uit:

[crisp]

pastapappie.NET schreef op 11 oktober 2003 @ 18:21:
Onder IE6 ziet het er zo uit:
[afbeelding]

Niet verwonderlijk gezien de transitional doctype, en dus gebruikt IE6 het Microsoft boxmodel

[raoulduke]

Onder IE5 ziet ie er ook zo -dus niet goed- uit

[Sendy]

Mijn ervaring met floats en IE is best goed te noemen. Het lijkt erop dat IE een kantlijn gebruikt om de float. Nieuw probeersel:
http://rotzorg.org/~sgr/m33p/try2.html
Met strict doctype, en hij valideerd. Hoe doet deze het?

Ik baal er zo van dat er geen IE is voor GNU.. (maar niet heus)

> raoulduke
Toch ziet het er wel mooi uit, alleen dat zwarte randje is een beetje vreemd

[ Voor 14% gewijzigd door Sendy op 11-10-2003 18:41 ]

[crisp]

Sendy schreef op 11 October 2003 @ 18:40:
[...]
Met strict doctype, en hij valideerd. Hoe doet deze het?

best aardig dus (win2k en IE6)

[ Voor 4% gewijzigd door crisp op 11-10-2003 19:09 ]

[pasta]

Kijkt en oordeel zelf

(Het ziet er dus goed uit, naar mijn mening)

[Sendy]

Yeah! crisp had gelijk, de strict DOCTYPE maakt het werken! Nu nog dat dubbele randje weg en klaar
http://rotzorg.org/~sgr/m33p/try3.html

--edit
webdevven is leuk! Jammer genoeg ben ik assembler programmeur

[ Voor 31% gewijzigd door Sendy op 11-10-2003 19:16 . Reden: asm is ook leuk hoor... ]

[crisp]

Sendy schreef op 11 October 2003 @ 19:08:
Yeah! crisp had gelijk, de strict DOCTYPE maakt het werken! Nu nog dat dubbele randje weg en klaar
http://rotzorg.org/~sgr/m33p/try3.html

--edit
webdevven is leuk! Jammer genoeg ben ik assembler programmeur

Bedenk wel dat versies voor IE6 geen strict mode hebben...