[CSS] Border style - 1 hoekje altijd 'fout' - Softwareontwikkeling

woensdag 26 oktober 2005 11:51

Acties:

Vrolijkheid alom!

Topicstarter

In plaats van een omkadering te maken in Photoshop en deze door middel van plaatjes in een tabel plakken voor elkaar te krijgen, wilde ik ditzelfde effect bereiken met standaard CSS. Dat is een stuk makkelijker aanpassen en is nog sneller ook.

Naar mijn idee moet dat ook netjes kunnen, maar er blijft altijd 1 hoekje in de tabel die niet netjes aansluit bij de rest. Het maakt niet uit welke soort border ik pak (groove, ridge, outset, inset etc.), er blijft er altijd eentje fout. Dit is wat ik bedoel:

Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/got/tabel.jpg

Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/got/tabel.jpg

Dit is de tabel in z'n geheel
Afbeeldingslocatie: http://members.ams.chello.nl/e.venema4/images/got/hoekje.jpg

En dit is het hoekje wat fout zit

Is er een manier om alle hoeken netjes aan te laten sluiten, of is dit gewoon een keiharde tekortkoming met CSS die ook niet goed gaat komen? Het is natuurlijk niet de bedoeling 5 pagina's code te kloppen om alleen zo'n hoekje goed te krijgen met allerlei work-arounds, ik hoop een beetje op iets simpels.. uiteraard

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 12:08

Acties:

Skaah

Hoe doe je het nu dan?

woensdag 26 oktober 2005 12:18

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ik heb nu een aantal aparte styles. Voor boven, rechts, onder, links en de hoekjes, waar een twee zijden gebruikt moeten worden. Ik heb er hierbij voor gekozen om consequent vanuit de binnenkant van de tabel te rekenen. Hier onder de code die ik nu gebruik om te kijken of ik het voor elkaar kan krijgen... dit wordt allemaal nog verkort, variabelen er in etc. etc., maar voor nu wil ik alleen even weten of het mogelijk is

HTML:

<html>
<head>
    <title>test</title>
    <style>
    table{
        border-collapse: collapse;
    }
    td{
        font-family: Verdana, Arial;
        font-size: 11px;
        color: black;
    }
    td.titel{
        font-family: Verdana, Arial;
        font-size: 18px;
        color: black;
    }
    td.boven{
        border-width: 2 0 0 0px;
        border-color: black;
        border-style: inset;
    }
    td.rechts{
        border-width: 0 2 0 0px;
        border-color: black;
        border-style: inset;
    }
    td.onder{
        border-width: 0 0 2 0px;
        border-color: black;
        border-style: inset;
    }
    td.links{
        border-width: 0 0 0 2px;
        border-color: black;
        border-style: inset;
    }
    td.links_boven{
        border-width: 2 0 0 2px;
        border-color: black;
        border-style: inset;
    }
    td.rechts_boven{
        border-width: 2 2 0 0px;
        border-color: black;
        border-style: inset;
    }
    td.links_onder{
        border-width: 0 0 2 2px;
        border-color: black;
        border-style: inset;
    }
    td.rechts_onder{
        border-width: 0 2 2 0px;
        border-color: black;
        border-style: inset;
    }
    img{
        border-width: 0px;
    }
    </style>
</head>
<body>

<table class='outer' width='400'>
    <tr>
        <td>[img]'ima/trans.gif'[/img]</td>
        <td>[img]'ima/trans.gif'[/img]</td>
        <td>[img]'ima/trans.gif'[/img]</td>
        <td class='titel' rowspan='2'>Titel</td>
        <td>[img]'ima/trans.gif'[/img]</td>
        <td>[img]'ima/trans.gif'[/img]</td>
        <td>[img]'ima/trans.gif'[/img]</td>
    </tr>
    <tr>
        <td></td>
        <td class='links_boven'></td>
        <td class='boven'></td>
        <td class='boven'></td>
        <td class='rechts_boven'></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td class='links'></td>
        <td colspan='3'>Duis iaculis, neque quis imperdiet mollis, augue arcu placerat sapien, in vulputate elit nisi vel nunc. Nunc fringilla eleifend lorem. Suspendisse non ligula vel arcu lacinia dapibus. Aenean sagittis aliquet.</td>
        <td class='rechts'></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td class='links_onder'></td>
        <td class='onder' colspan='3'></td>
        <td class='rechts_onder'></td>
        <td></td>
    </tr>

</table>

</body>
</html>

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 12:21

Acties:

Verwijderd

je kan toch eenvoudig twee 'divs' in elkaar schrijven?

bijv

<div class="outerBorder">
<div class="innerBoder">
Content here content here
</div>
</div>

div.outerBorder{
border: 10px Black solid;
}

div.innerBorder{
border: 10px Red solid;
}

woensdag 26 oktober 2005 12:44

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Ik ben ooit eerder met divs bezig geweest, maar ik krijg die dingen nooit normaal gepositioneerd. Hoe krijg je een div zo ver dat je die titel netjes in het midden krijgt overigens?

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 12:46

Acties:

Wacky

Dr. Lektroluv \o/

code:

1	text-align: center;

Nu ook met Flickr account

woensdag 26 oktober 2005 12:47

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Verticaal brainiac

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 12:57

Acties:

André

Analytics dude

Maar dat hoekje is met het blote oog bijna niet zichtbaar

Ik zou er niet te moeilijk over doen omdat het je anders te veel tijd kost voor die paar pixels.

woensdag 26 oktober 2005 12:59

Acties:

Borizz

Kaastosti schreef op woensdag 26 oktober 2005 @ 12:47:
Verticaal brainiac

Cascading Stylesheet:

1
2
3

height: 40px;
line-height: 40px;
vertical-align: middle;

[ Voor 3% gewijzigd door Borizz op 26-10-2005 12:59 ]

If I can't fix it, it ain't broken.

woensdag 26 oktober 2005 13:00

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Helaas wordt het voor een site die redelijk wat bezoekers gaat trekken... en ik ben nou eenmaal een perfectionist

Overigens vallen juist dat soort dingen me juist altijd wel op, als er ergens een pixeltje te veel of te weinig staat...

Wat ik zeg, ik wil er ook liever niet al te moeilijk over doen, maar ik neem toch haast aan dat het hele idee van die border style is dat je er een mooi effect aan kunt geven. Op deze manier klopt het effect gewoon niet.

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 13:04

Acties:

André

Analytics dude

Maar dat hoekje is ook niet perfect te maken op een 2px border? Je mist gewoon een paar pixels om dat netjes te doen. Hoe had jij die hoek in gedachten dan?

woensdag 26 oktober 2005 13:07

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Dat het zwart netjes aansluit en de schaduw klopt... maar nu ik er zo naar zit te kijken wordt dat inderdaad lastig met deze instellingen, je houdt altijd een punt over waar het simpelweg niet kan

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 13:12

Acties:

Reinier

\o/

Volgens mij is dit precies wat je kan verwachten bij een inset-border van 2 pixels. Hoe had je het anders gewild?

woensdag 26 oktober 2005 13:21

Acties:

crisp

Devver

Pixelated

Met een fieldset en een legend bereik je toch hetzelfde effect?

Titel

Duis iaculis, neque quis imperdiet mollis, augue arcu placerat sapien, in vulputate elit nisi vel nunc. Nunc fringilla eleifend lorem. Suspendisse non ligula vel arcu lacinia dapibus. Aenean sagittis aliquet.

Intentionally left blank

woensdag 26 oktober 2005 13:36

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

In dit geval zou ik snel kiezen voor de 'mountaintop'-oplossing zoals hij op Alistapart uitgelegd wordt ...
Dat gaat wel eerder over 'ronde hoeken' maar is ook prima toe te passen om een rand van 1 of 2 pixels rondom een textbox te plaatsen.

http://alistapart.com/articles/mountaintop

(alhoewel crips, natuurlijk gelijk heeft, de fieldset is een specifiek element met zo'n optie, het 'samenbundelen' van een aantal, pagina-elementen; meestal form-elementen ... in dit geval blijft het echter volgens mij bij een visuele overeenkomst, maar is je opzet semantisch niets anders dan <h1>tekst</h1><p> bladieblah stukje alineatekst.</p>)

Kaastosti schreef op woensdag 26 oktober 2005 @ 12:44:
Ik ben ooit eerder met divs bezig geweest, maar ik krijg die dingen nooit normaal gepositioneerd. Hoe krijg je een div zo ver dat je die titel netjes in het midden krijgt overigens?

Juist CSS gebruik is altijd even 'wennen' en leren correct te werken, de mogelijkheden en beperkingen inzien ...

Het is waarschijnlijk slimmer dat dan geheel te doen, en niet 'half' dus slechts een klein deel met CSS doen, maar qua positionering toch terug te vallen op tables en HTML-layouten ...
in dit geval kost het je juist lappen extra code en levert eigenlijk meer problemen op,
enkel lijken die problemen overzichtelijker, omdat je nog altijd zoveel HTML-code hebt om in te vrotten, ipv volledig op CSS je te moeten fixeren

[ Voor 15% gewijzigd door RM-rf op 26-10-2005 13:38 ]

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 26 oktober 2005 14:09

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Weet je wat... ik houd het wel op een border van 1 pixel, dan sluit ie wel netjes aan. Scheelt inderdaad een boel problemen, en als men het niet mee eens is.. dan eeh niet

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

woensdag 26 oktober 2005 16:45

Acties:

r0bert

Wat Crisp zegt, je zit nu geen een fieldset na te bouwen