[css] dunne balk

[anoniem]

Dit heeft vast een makkelijke oplossing, maar ik kan het nergens vinden. Als ik een dunne, zeg 6 pixels hoge, balk op m'n pagina wil hebben, hoe doe ik dat met CSS? Wat ik heb gedaan, is dit: background-color: #000000; line-height: 6px; color: #000000; Vervolgens maak ik een <div> aan met deze css style, maar daar moet ik dan wat tekst in typen (die zie je niet want hij is dezelfde kleur) om te zorgen dat deze balk echt daadwerkelijk 6 pixels hoog wordt. Kan ik zonder tekst te moeten typen de balk slechts 6 pixels hoog maken?

[anoniem]

ik weet niet zeker of dit het antwoord op je vraag is, maar hieronder een horizontale lijn: Zet in je stylesheet: hr { color:#000000; width:100%; height:6px; } En daar waar je de balk wilt hebben: <hr>

[anoniem]

'line-height' is om tekst verticaal te vergroten of te verkleinen, niet om een div te vergroten/verkleinen; daar heb je 'height' voor nodig. Dus door gewoon 'line-' uit je code te halen, moet 'ie het al doen. Evt. kun je er nog een width aan meegeven. De oplossing van Mrs. Birdlover zegt het eigenlijk ook al (maar dan met een hr).

[anoniem]

Bedankt, werkt in principe inderdaad. Echter, ik wil graag dat direct onder een titel deze lijn zetten. Deze titel geef ik opmaak met een eigen <div>, en als ik dan een nieuwe div maak voor de balk (zoals ik eerst deed), dan komt deze er meteen onder. Als ik <hr> optie kies, dan zit er witruimte tussen. Enig idee hoe ik daar vanaf kan komen?

[anoniem]

Ho, je reactie kwam net voor die van mij boelieboelie, en ik had hem nog niet gezien. Dit zou op zich een ideale oplossing zijn, maar het werkt niet. Als ik van height 6px maak, en tekst weghaal, dan wordt hij iets van 15 pixels hoog.

[anoniem]

Waarom niet gelijk zeggen dat deze onder een titel moet komen? Beter teveel informatie dan te weinig. Titels moet je altijd met <h1> of <h2> of .... <6> opmaken. Als je alles in dezelfde of verkeerde elementen zet (waar ze niet voor bedoelt zijn), kan je net zo goed van je site één groot plaatje maken omdat je niet de voordelen van html gebruikt.:) [code:1:4bd9de0228]>>css h1.lijnonder {border-bottom:1px solid #F60;} >> html <h1 class="lijnonder"></h1>[/code:1:4bd9de0228]

[anoniem]

Bedankt, dit werkt prima en is inderdaad wel zo makkelijk! Dan nog iets, ik maak een kolom-achtige structuur waarbij ik dmv een div alle tekst in een soort kolom zet die 700 pixels breed is. Dit is de css: body { margin: 0px; padding: 0px; } #hoofdtekst { width: 700px; border-right-width: 1px; border-right-style: solid; } Dit hoofdtekst div plaatst alle tekst in een kader van 700 pixels breed en zet een lijn aan de rechterkant. Tot hier geen probleem. Maar nu wil ik sommige afbeeldingen helemaal tegen de rechterkant van deze div aanplakken. Dit is wat ik doe: .afbeelding{ float: right; } Zou moeten werken, toch? Helaas, in IE6 blijven er iets van 3 pixels tussen de border en de afbeelding. In andere browsers gaat het wel goed. Weet iemand hoe ik dit in IE kan voorkomen?

[anoniem]

u oh, je hebt nu één van de vele wonderlijke "features" van IE te pakken! www.positioniseverything.net , zoek naar 3 pixel gap. Op deze site staan alle bekende bugs van browsers en hun opsollingen, wel zo handig!

[anoniem]

Ah, bekend probleem dus. Ik ga het uitzoeken, bedankt!

[anoniem]

gebruik margin-right:0px in de style van het IMG