[HTML] - Fieldset met dubbele border

[gvanh]

Goedemorgen,

Voor een formulier wil ik graag een fieldset gebruiken met een dubbele border, om zo een "panel"-look te bereiken. Zie als voorbeeld:

.

Iemand een idee hoe dit te bereiken zonder al te rare verhandelingen?

Alvast bedankt voor de suggesties.

[Verwijderd]

Probeer dit eens:

fieldset {
border: 2px solid black;
}

[TeeDee]

En de diverse manieren (anders dan solid) CSS borders bieden ook geen uitkomst? Ridge, outset, inset etc. etc.

[gvanh]

Verwijderd schreef op maandag 08 juni 2009 @ 10:33:
Probeer dit eens:

fieldset {
border: 2px solid black;
}

??? Wat ga ik daarmee opschieten?

TeeDee schreef op maandag 08 juni 2009 @ 10:38:
En de diverse manieren (anders dan solid) CSS borders bieden ook geen uitkomst? Ridge, outset, inset etc. etc.

Nee, helaas. Allemaal al geprobeerd, maar het is het steeds net niet.

[ Voor 26% gewijzigd door gvanh op 08-06-2009 10:42 ]

[blaatkipje]

Het lijkt nog het meeste op een "normale" fieldset, is het niet een samenloop van de rand kleur en de blauwe achergrond?

[Manuel]

Zoals Sasjee aangeeft is dat een border om de fieldset plaatsen van 2px, dat schiet je er dus mee op..
Maar goed, indien niemand echt het antwoord weet kan ik je nog altijd een tip geven dat je een plaatje erachter kan zetten.. Of (nou komt het), kijken naar de CSS3-tags, daar moest namelijk een soort van "shadow" inzitten, alleen ben ik niet zeker of IE dat wel ondersteunt, Firefox en andere browsers (Chrome etc.) ondersteunen het wel.

[Afvalzak]

http://www.webcredible.co...urces/css/css-forms.shtml

Deze tutorial legt het helemaal uit

edit: o sorry, ik dacht dat het over de fieldset zelf ging. De border lijkt mij inderdaad meer een effect door het kleurverschil.

[ Voor 36% gewijzigd door Afvalzak op 08-06-2009 10:54 . Reden: Foutje ]

[crisp]

Het probleem zit 'm in de beperkingen qua styling van het legend-element. Het makkelijkst is om die gewoon te verbergen en een ander element te misbruiken als legend. Je kan dan een dergelijke constructie maken:

HTML:

<style>
body {
    background: #ddecff;
}
fieldset {
    border: 1px solid;
    border-left-color: #9ab8e1;
    border-top-color: #9ab8e1;
    border-right-color: #fff;
    border-bottom-color: #fff;
    padding: 0;
    position: relative;
    margin-top: 10px;
}
legend {
    display: none;
}
p.legend {
    font-size: 13px;
    line-height: 18px;
    background: #ddecff;
    padding: 0 2px;
    position: absolute;
    top: -23px;
    left: 10px;
}
    
fieldset > div {
    border: 1px solid;
    border-left-color: #fff;
    border-top-color: #fff;
    border-right-color: #9ab8e1;
    border-bottom-color: #9ab8e1;
    padding: 10px;
}
</style>
<fieldset>
    <legend>Algemeen</legend>
    <p class="legend">Algemeen</p>
    <div>
        <p>tralala</p>
    </div>
</fieldset>

[BtM909]

crisp schreef op maandag 08 juni 2009 @ 11:31:
Het probleem zit 'm in de beperkingen qua styling van het legend-element. Het makkelijkst is om die gewoon te verbergen en een ander element te misbruiken als legend. Je kan dan een dergelijke constructie maken:

HTML:

Dat lost 't probleem toch niet echt met de border om de fieldset heen? Je kan die legend een margin-left geven, wat redelijk goed wordt ondersteund.

---

Voor de andere reageerders: het weergegeven voorbeeld is wel degelijk anders dan een gewone border icm met de background kleur (ik zou zeggen: test 't even zelf uit ). Het probleem zit hem erin dat de meeste browsers grijs als base color gebruiken, ipv een gradient tint van de background (zoals veel controls wel hebben).

[ Voor 30% gewijzigd door BtM909 op 08-06-2009 11:41 ]

[gvanh]

crisp schreef op maandag 08 juni 2009 @ 11:31:
Het probleem zit 'm in de beperkingen qua styling van het legend-element. Het makkelijkst is om die gewoon te verbergen en een ander element te misbruiken als legend. Je kan dan een dergelijke constructie maken ...

Ja, precies. De "standaard" legend zorgt er keurig voor dat de border wordt onderbroken daar waar de legend staat. Zodra je de legend vervangt door iets anders, dan moet je hem een achtergrondkleur geven, maar die achtergrondkleur bevat natuurlijk niet het kleurverschil tussen de achtergrond buiten de fieldset en binnen de fieldset.

[crisp]

gvanh schreef op maandag 08 juni 2009 @ 11:45:
[...] maar die achtergrondkleur bevat natuurlijk niet het kleurverschil tussen de achtergrond buiten de fieldset en binnen de fieldset.

Wat in dit specifieke geval geen issue is aangezien er afgaande op het voorbeeld in de topicstart geen kleurverschil is

[BtM909]

crisp schreef op maandag 08 juni 2009 @ 11:57:
[...]

Wat in dit specifieke geval geen issue is aangezien er afgaande op het voorbeeld in de topicstart geen kleurverschil is

Mmmm, wat betreft die border trek ik ff m'n woorden terug... blijkbaar bugte Firefox net, want die renderde anders

[Bosmonster]

Enige dat ik kan bedenken als inset niet werkt in combinatie met de achtergrondkleur is een extra container gebruiken voor de binnenste border.

edit: ah dat is wat crisp z'n voorbeeld ook doet, naast de custom legend.

[ Voor 20% gewijzigd door Bosmonster op 08-06-2009 12:19 ]