Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[css] layer border "padding"

10 antwoorden
  • Beste medewebdesigners, Even een css vraagje: Is het mogelijk met css een border een stukje van de daadwerkelijke border te positioneren, dus een soort padding mee te geven? Ik zou het natuurlijk kunnen oplossen door 2 layers in elkaar te plaatsen en alleen de binnenste een border te geven maar ik vroeg me af of het ook mogelijk is m.b.v. css dit met slechts 1 layer voor mekaar te spelen. Alvast bedankt voor reactie! Groetjes Jeroen
  • Hint: padding. ;) - Bas
  • een soort padding? http://www.handleidinghtml.nl/css/eigenschappen/padding.html Is dat iets? ;)
  • Kan zijn dat hij in quirksmode werkt, dan gaan adviezen over padding niet zondermeer op. In dat geval is de oplossing een correct doctype te gebruiken en daarna pas padding. Zie over doctypes: '[url=http://frontaal.net/200612/doctype-welke-moet-ik-kiezen/]doctype: welke moet ik kiezen[/url]'.
  • Als doctype heb ik XHTML 1.0 STRICT. Maar als ik een padding instel op de layer dan schuift hij de border niet naarbinnen. Die blijft gewoon aan de buitengrenzen van de layer staan. Even een voorbeeldje met wat ik precies probeer te bereiken voor de duidelijkheid: [img:b66f37d3fd]http://www.adchannel.nl/test/border_example.gif[/img:b66f37d3fd] Zo'n witte "border" probeer ik dus te bouwen. Die op een x aantal pixels van de buitengrens van de layer zit.
  • Ruimte binnen je border is padding, ruimte buiten je border is margin. Dat gezegd hebbende, als je ook daadwerkelijk die groene rand om die witte rand heen wil hebben dan zal je óf creatief met de achtergrond van het parent-element moeten omgaan óf het simpel houden en er een extra div in zetten. Toegegeven, niet de meest semantisch wenselijke manier, maar soms moet je dat (m.i.) laten varen voor een praktisch wenselijke oplossing. Overigens zou je ook eerst kunnen experimenteren met de verschillende soorten borders die er zijn, zoals bijvoorbeeld "double". Misschien dat je dan ook al het gewenste effect kan bereiken. [b:73ecf10185]Edit:[/b:73ecf10185] Met een beetje creatief CSS-en kom je ook een eind, het onderstaande benadert volgens mij aardig wat je wil. Enig nadeel van deze methode is dat de witte lijn en de buitenste groene lijn altijd even dik zijn. Sorry voor het ontbreken van een doctype, die mag je er zelf in plakken. ;) [code:1:73ecf10185]<html> <head> <style type="text/css"> html,body{ background: #fff; margin: 0; padding: 10%; } #specialborder{ border: 15px double #090; } #specialborder p{ background: #090; margin: 0; padding: 1em; color: #fff; } </style> </head> <body> <div id="specialborder"> <p>Tekst </p> <p>Tekst </p> <p>Tekst </p> </div> </body> </html>[/code:1:73ecf10185] - Bas
  • Hé, da's een leuke oplossing van Bas! Had ik niet aan gedacht. (Overigens wel gevaarlijk om te suggereren dat een doctype er niet toe doet, want het verschil in boxmodel slaat [i:8b9f2221d5]juist[/i:8b9f2221d5] op deze verschillen.)
  • [quote:1a846f4c7d="boelieboelie"]Hé, da's een leuke oplossing van Bas![/quote:1a846f4c7d] :D Het schoot me zo te binnen toen ik over "double" begon, dus ben het toen gelijk gaan proberen. [quote:1a846f4c7d="boelieboelie"](Overigens wel gevaarlijk om te suggereren dat een doctype er niet toe doet, want het verschil in boxmodel slaat [i:1a846f4c7d]juist[/i:1a846f4c7d] op deze verschillen.)[/quote:1a846f4c7d] Suggereer ik dat? Dat was uiteraard niet de bedoeling, ik weet natuurlijk wel beter... Het is alleen een van die dingen die ik nooit uit mijn hoofd weet maar netjes uit een ander bestand knip-en-plak. Had daar nu gewoon geen zin in. :roll: - Bas
  • Dank voor deze creatieve oplossing! Dit was precies waar ik naar op zoek was!
  • Om er toch nog even op terug te komen: In principe is het met deze oplossing wel alleen mogelijk om een witte (eigenlijk transparante) border te maken toch? Of kan ik met een double border ook aangeven welke kleur hij dat lijntje moet maken?

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.