✔ 2 Linien von einem Punkt bis zum "Browserrand"

[Sladda]

Hallo!

Ich möchte folgendes machen, habe aber leider keine Idee:

ich möchte von einem fixpunkt (zB. 1000px 600px) zwei Linien (width1px) laufen lassen, eine horizontal nach rechts und eine vertikal nach unten und beide soweit, bis sie an den Rand vom Browser (oder kann man sagen: viewport?) stoßen. weiter sollen sie nicht laufen, damit keine Scrollbalken entstehen. Das Problem ist halt, dass ich ja nicht weiß, wie weit das dann ist, soll heißen: welche Auflösung grad auf dem Rechner läuft... !?
Hab ich mich verständlich ausgedrückt?

Für Tips wäre ich sehr dankbar!
Viele Grüße
Sladda

 

[Maik]

Hi,

das würde dann in etwa so lauten:

div#horizontal {
position:absolute;
top:100px;
left:600px;
right:0;
height:1px;
background:#000;
}

div#vertikal {
position:absolute;
top:100px;
left:600px;
bottom:0;
width:1px;
background:#000;
}

 

[Sladda]

Hallo Maik,

das klappt leider so gar nicht, aber du ahst mich auf eine idee gebracht: kann man denn nicht von einem div die obere linke ecke und die untere rechte ecke festlegen? dann ergibt sich doch die Breite und Höhe automatisch!? Ich habe das versucht, leider werden keine Linien angezeigt:

#linien_untenrechts{
	position:absolute;
	right:0px;
	bottom:0px;
	top:610;
	left:1010;
	border-right:0px;
	border-bottom:0px;
	border-top: 1px solid #e4e4e4;
	border-left:1px solid #e4e4e4;
}

so eingebunden:

<div id="linien_untenrechts"></div>

es soll also so aussehen:

http://sladda.kilu.de/linien.jpg

kann mir jemand sagen was ich falsch gemacht habe, bzw. wie man das lösen könnte?
Danke!!

 

[Maik]

Bekanntermaßen führen viele Wege nach Rom, denn mein Vorschlag funktioniert in den standardkonformen Browsern einwandfrei, stellvertretend für die übrigen Browser hänge ich hier den Firefox-Schnappschuß an:



Lediglich der IE6 (und älter) tanzt mal wieder aus der Reihe, da er die angewandte Kombination der top- und bottom-, sowie left- und right-Positionseigenschaft nicht unterstützt.

Hierfür muss ihm das HTML-Dokument im "Quirksmodus" übergeben, und er mit dem fettmarkierten Stylesheet bedient werden:

div#horizontal {
position:absolute;
top:100px;
left:600px;
right:0;
height:1px;
background:#000;
}

* html div#horizontal {
left:0;
width:100%;
border-left:600px solid #fff;
overflow:hidden;
}

div#vertikal {
position:absolute;
top:100px;
left:600px;
bottom:0;
width:1px;
background:#000;
}

* html div#vertikal {
top:0;
height:100%;
border-top:100px solid #fff;
}

Anstelle des "Star-HTML-Hacks" kann den älteren IEs das Stylesheet auch mit Hilfe des "Conditional Comments" zugeführt werden.

Dass dein Stylesheet in den modernen Browsern nicht funktioniert, liegt einfach an der fehlenden Einheitenangabe "px" für die top- und left-Eigenschaft. Bei der right- und bottom-Deklaration kannst du sie getrost weglassen, da der Wert "0" beträgt, bei den anderen muss sie aber genannt werden, denn ansonsten wissen die Browser mit den "nackten" Zahlen nichts anzufangen.

 

[Sladda]

argh, ja, mit "px" funktionierts einwandfrei
1000 Dank!
mfg