Halv pixel linje?

Är det möjligt att få till en halvpixel hög linje? Jag har testat att sätta height till 0.5 men det fungerar inte. Finns det något annat sätt att göra detta på?

<table border="0" cellpadding="0" cellspacing="0" width="180">
<tr height="1" bgcolor="black">
  <td><img src="Images/pixel.gif" height="1" /></td>
</tr>
</table>

Det finns inga halva pixlar. ;)

Jag antar då att det inte är möjligt i html-världen... :(

Lukaspojken skrev:

<table border="0" cellpadding="0" cellspacing="0" width="180">
<tr height="1" bgcolor="black">
  <td><img src="Images/pixel.gif" height="1" /></td>
</tr>
</table>

Det är lustigt att man kan ta sånna omvägar för att få fram en linje.

Hört talas om CSS?

#foo { border-bottom:1px solid black; }

Hur som helst kan man inte rita ut en halv pixel på en skärm. En pixel består vanligtvis av tre delar -- en röd, grön och en blå -- så du kan få en tredjedels eller två tredjedels pixel, men på bekostnad av att det blir en annan färg (och det ser ut som "en pixel" ändå).

Det ska nämnas också att en CSS-pixel inte nödvändigtvis är samma sak som en pixel på skärmen. Tex kan en CSS-pixel motsvara två fysiska pixlar på skärmen och då "funkar" 0.5px. (Att pixlar skalas på det här sättet används redan vid utskrift.)

Det du kan göra är att göra linjen lite genomskinlig eller använda en färg som är närmare bakgrunden.

Till skillnad från atomen så är det ingen som lyckats klyva en pixel ännu.

Du kan ju göra den 50% grå, så kommer det ju att upplevas som tunnare :)

<HR WIDTH="180" SIZE="1" COLOR="#808285">

Eller så kan man:

zcorpan skrev:

göra linjen lite genomskinlig eller använda en färg som är närmare bakgrunden.

;)

#foo { border-bottom:1px solid black; }

??? inte så smart om man nu ska ha flera linjen :P

voigtann1 skrev:

#foo { border-bottom:1px solid black; }

??? inte så smart om man nu ska ha flera linjen :P

Vad menar du?

#foo är unik... dvs om jag nu ska ha två #foo så blir det inte bra....

...

Fast det jag antar voigtann1 menar är att #foo är för id, vilket inte bör finnas mer än ett unikt per sida.
.foo är för klasser och bör väl snarare användas.

Fuel skrev:

nu klyver vi pxlar med mammutar..

zcorpan kan t.om pixel teknik på molekylnivå :o :birp

<style type="text/css">
#foo {
    width: 180px;
    height: 1px;
    background-color: #000000;
}
</style>

<div class="foo"></div>

Du har skrivit # för att komma åt ett id, men class i taggen. Går inte så bra.
Dessutom blir det problem i Internet Explorer att div:en blir för hög.

Detta skulle funka bättre:

<style type="text/css">
.foo {
	width: 180px;
	height: 1px;
	background-color: #000000;
	overflow: hidden;
}
</style>

<div class="foo">&nbsp;</div>

voigtann1 skrev:

#foo är unik... dvs om jag nu ska ha två #foo så blir det inte bra....

Det är väl bara byta ut selektorn?

Erik Juhlin skrev:

<div class="foo">&nbsp;</div>

Jag rekommenderar inte en tom <div></div> för att skapa linjen. Om linjen representerar en sorts avskiljning mellan stycken så passar <hr> bra, annars kan du gruppera de block du vill avskilja från varandra med divar.

Dvs, antingen:

<p>foo
<p>bar
<hr>
<p>baz
<p>quux

...eller:

<div>
 <p>foo
 <p>bar
</div>
<div>
 <p>baz
 <p>quux
</div>

Jepp, <hr> är så klart mer rätt. Men jag lyckas inte få till styleingen på dem. Kommer konstiga marginaler o så...

nolla marginalerna då med

* { margin:0; padding:0; }

Hjälper inte i världens bästa webbläsare. ;)

HEJ!

För att formatera kan man göra div:ar av det, eller använda den vanliga hr-taggen, som jag föredrar, mindre kod på sidan.
Kommer ursprungligen från ett inlägg på wF.

Fördelen med koden är att man kan styla befintlig kod där hr använts.

HR{border:none 0; border-top:1px solid #e8e8e8; width:100%; height:1px;}