width 100% funktioniert nicht korrekt
0 
Gernot Back
0 Gernot Back
0 
Gunnar Bittersmann
0 0 Gernot Back
0 
at
width 100% funktioniert nicht korrekt
Hallo zusammen,
ich möchte eine schwarze Linie ins "Endlose" laufen lassen, ähnlich der Angabe in einem Tabellen-Tag:
<table width="100%">
Dazu habe ich folgende Angaben gemacht:
#schwarzelinie { background-color:000000; height:1px; position:absolute; top:100px; left:200px; width:100%; z-index:2; }
<div id="schwarzelinie">(leeres Pixel)</div>
Das geht insofern, das ich eine Linie habe, die über den Browserrand hinaus läuft. Dafür wird aber eine Scrollbar erzeugt.
Was mache ich falsch? Ich möchte einfach eine Linie, die dynamisch immer am Browserrand rechts endet und keine Scrollbar erzeugt.
Viele Grüße
Alexander
-
Hallo myAlexander,
#schwarzelinie { background-color:000000; height:1px; position:absolute; top:100px; left:200px; width:100%; z-index:2; }
Das geht insofern, das ich eine Linie habe, die über den Browserrand hinaus läuft. Dafür wird aber eine Scrollbar erzeugt.
Ist doch klar, wenn du deine Linie in 100% Weite des übergeordneten (BODY?)-Elementes erst 200px links vom rechten Rand beginnen lässt, gibt es Scrollbalken.
Gruß Gernot
-
Hallo nochmal,
vom rechten Rand
meinte natürlich "linken"
Gruß Gernot
-
-
Hallo myAlexander,
browserübergreifend und unabhängig davon, ob sich die Seite im standardkonformen compatMode befindet oder nicht (wichtig für IEs bis einschließlich Version 5.x, die diesen Modus nicht beherrschen), schaffst du das nur, indem du dein Element mit der schwarzen Linie noch einmal mit einem anderen Block-Element umgibst, dem du eine Weite von 100% ein Padding-left von 200px und eine passende Overflow-Eigenschaft verpasst.
Gruß Gernot
-
Hello out there!
#schwarzelinie { background-color:000000; height:1px; position:absolute; top:100px; left:200px; width:100%; z-index:2; }
<div id="schwarzelinie">(leeres Pixel)</div>
Warum div? Du möchtest eine horizontale Line → horizontal rule → hr
hr { border-top: 1px solid black; border-bottom: 0 none; height: 0; margin-left: 200px; }Die Linie geht bis zur rechten Inhaltskante [CSS2 §8.1]; dann kommen noch Innen- und Außenrand der body-Box, evtl. auch noch der html-Box. Diese müsstest du auf 0 setzen, wenn du willst, dass die Linie bis zum Viewportrand reicht.
Oder du verschiebst die Line um den Wert dieses Abstandes, wobei den dann setzen musst und dich nicht auf Browserdefaults verlassen darfst:
html { margin: 0; padding: 0; } body { margin: 0; padding: 42px; } hr { border-top: 1px solid black; border-bottom: 0 none; height: 0; left: 42px; margin-left: 158px; position: relative; }See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Hallo Gunnar und Gernot,
danke für euer Feedback! Ich teste das nochmal!
Viele Grüße
Alexander-
Hallo myAlexander,
ich habe glaube, ich habe unterwegs in diesem Thread allerlei Schwachsinn erzählt (Margin und Padding verwechselt):
Probier dies hier mal ohne und mit DOCTYPE-Tag; d.h. im Quirks- und CompatMode!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Trennlinie mit Abstand von links</title> <style type="text/css"> [code lang=css] html, body { padding:0; margin:0; width:100%; } .clipper { padding-left:200px; margin-top:100px; } hr.schwarzeLinie { border:solid #000000; border-width:1px 0 0 0; width:100%; height:0; }</style>
</head>
<body><div class="clipper">
<hr class="schwarzeLinie" />
</div></body>
</html>
[/code]Gruß Gernot
-
Hallo.
danke für euer Feedback! Ich teste das nochmal!
Dann auch vielleicht gleich das Richtige.
MfG, at
-