lijntje in css..

Pro web-ontwikkeling
#1

goed.. ik doe het dus zo:

.greenlines { color: #a0a000; background-color: #a0a000; border: 0px; width: 60%; height: 1px }

gewoon een simpel dun hr lijntje dat 60% van de breedte moet zijn… waarom maakt ie er dan gewoon 100% van? is dat omdat ie css niet begrijpt? of moet ik het dan hard-coden in de hr tag zelf?

overigens is het zo dat als ik de back-groundcolor niet specificeer dat de lijn dan in safari verdwijnt… css blijft en toe vreemd. het gaat hier toch om iets simpels, lijkt me, dan hoef ik toch geen ingewikkelde dingen uit te halen met het aanroepen van andere css bestandjes enzo?

ik doe vast iets simpels fout, anyone?

p.s. ik heb gezocht, vooral op google, w3c, htmlhelp enzo, maar hier wil het gewoon met standaard commando’s niet werken en ik wil liever niet hard-coden in de pagina (ervanuitgaande dat ie het dan wel goed doet)

#2

Tja, ik weet niet hoe dat zit met een HR, maar wat je kunt proberen is gewoon bijv:

<style>
.hr {
width: 60%;
height: 1px;
border: 1px solid green;
}
</style>

<div class=“hr”>&nbsp;</div>

#3

of <hr class="hr" />

:slight_smile:

#4

[quote:201931cbcc]overigens is het zo dat als ik de back-groundcolor niet specificeer dat de lijn dan in safari verdwijnt... css blijft en toe vreemd[/quote:201931cbcc]

Is niet zo gek hè, de background color is het enige waardoor die lijn een kleurtje krijgt, aangezien je border op 0 px staat.

Bij mij staat ie trouwens gewoon netjes op 60% hoor in Safari.

Zo moet ie werken:
CSS:

[code:1:201931cbcc].greenlines {
color: #a0a000;
background-color: #a0a000; width: 60%;
height: 1px }[/code:1:201931cbcc]

HTML:

[code:1:201931cbcc]<body>
<div class="greenlines"></div>
</body>
</html>[/code:1:201931cbcc]

#5

een <hr> heeft in sommige browsers wel een border en geen background, en in andere wel een background, maar geen border. Ik weet nu even niet uit mijn hoofd welke browsers hoe reageren, maar dat kan je zelf snel genoeg testen.

@iRik: dat is werkelijk de meest onzinnige suggestie die ik in tijden gezien heb: de &nbsp; zorgt ervoor dat de hoogte 1em is, en dan heb ik het nog niet eens over de semantische onzinnigheid en overbodigheid.

@Strifer: voor het verkrijgen van de juiste breedte moet je denk ik ‘margin : 0 auto;’ toevoegen. Kan het nu niet even testen, maar ergens achter ik lepel nu even een vage herinnering ergens uit mijn brein op.

#6

als de bordern iet op 0 staat dan krijgt hij een schaduw. ik bedenk me nu net at ik dan beter het noshade commando kan gebruiken in plaats van 0px border...

bedankt voor de reacties! ik ga het snel proberen

edit: syndic, in safari is het gewoon goed, maar in ie = internet explorer doet hij het niet goed :slight_smile: ik begrijp de verwarring nu :s

#7

Volgens mij moet dit gewoon werken:

hr {
display: block;
background: #a0a000;
height: 1px;
border: 0;
}

#8

Klopt, dat is de manier. IE en volgens mij Opera versies lager dan 7 hebben standaard een 1 pixel border om de hr. display:block hoeft toch niet perse ?

#9

In IE word een <hr> als een soort tekst item behandeld (net als <br>) in de mozilla browsers word het als een block-element behandeld dat verklaart het verschil [code:1:6d7cb02ae2]hr { background-color: #000; color: #000; height: 1px; border: 0; padding: 0; }[/code:1:6d7cb02ae2]