nicht angemeldet
Grafik bis zum unteren Seitenrand verlängern
1 0 
Gernot Back
0 0 
MudGuard
0 1 0
0 0
Grafik bis zum unteren Seitenrand verlängern
Moin moin,
irgendwie komme ich mal wieder nicht weiter...
Ich möchte eine Grafik (1x1 px, die per height als Trennlinie genutzt wird) bis zum unteren Seitenrand verlängern.
Es geht um http://ruchatz.net/if/test.html, und zwar soll die senkrechte blaue Linie, die den Menübereich begrenzt, automatisch verlängert werden, wenn der Inhalt - wie im Beispiel - nicht mehr auf den Bildschirm passt.
Nach anderen verworfenen Möglichkeiten, versuche ich es derzeit so:
<DIV ID="Linie3"><IMG SRC="images/1pixel_blau.gif" WIDTH="2" HEIGHT="2300" BORDER="0" ALT="blau" TITLE=""></DIV>
mit dem dazugehörigen Stil:
div#Linie3 {position:absolute; left:127px; top:35px; height:100%; overflow:hidden;}
Der Gedanke dabei war, dass eine Maximalhöhe angegeben wird (hier 2300px) und dann per height:100%; overflow:hidden; das Ganze auf die Seitenhöhe beschränkt wird.
Leider werden die 100% aber als Fensterhöhe interpretiert, nicht als Seitenhöhe... Gibt es dazu Abhilfe?
Einen Workaround hätte ich noch, der funktioniert aber leider nur im Mozilla/Firefox: das DIV mit dem eigentlichen Seiteninhalt bekommt noch eine Grafik, die mit left:-xx px; links neben dem DIV positioniert wird und wie oben verlängert wird (es ist die blaue Linie zwischen der, die ich haben will und dem Inhalt):
<DIV ID="Linie4"><IMG SRC="images/1pixel_blau.gif" WIDTH="2" HEIGHT="2300" BORDER="0" ALT="blau" TITLE=""></DIV>
div#Linie4 {position:absolute; left:-10px; top:0px; height:100%; overflow:hidden;}
Dabei taucht leider das Problem auf, dass der IE die Linie gar nicht anzeigt und Opera die Höhe und Overflow-Angabe des DIV ignoriert, also wirklich die 2300 px anzeigt. Vielleicht liesse sich aber ja auf diesem Wege etwas erreichen...?
Glück auf
Dirk
PS: Eine Ideallösung wäre natürlich eine, die ohne Angabe einer Maximalhöhe (hier:2300px) auskommt, aber wenn die drin ist, könnte ich damit leben...
-
Binde das Bild doch als Hintergrund des Layers ein und lasse es wiederholen (repeat)..
-
Moin Adromir,
Binde das Bild doch als Hintergrund des Layers ein und lasse es wiederholen (repeat)..
die Idee hatte ich auch schon, aber verworfen, weil der Layer bereits einen Hintergrund hat (die halbtransparente Box hinter dem Inhalt) und die Linie ein Stück links davon sein soll...
Glück auf
Dirk-
Also, wenn ich das Richtig sehe, handelt es sich nur um die 2. blaue Linie, die direkt links neben dem Inhalt steht?
Dann würde ich das so machen:
Du machst die Blaue linie als linken Border des div- Containers .
Diesem gibst du ein padding- left von x px und versetzt das halbtransparente Hintergrundbild um x px nach rechts..
-
-
-
Hallo Dirk,
Ich möchte eine Grafik (1x1 px, die per height als Trennlinie genutzt wird) bis zum unteren Seitenrand verlängern.
Ich fürchte, da bleibt dir wohl nichts anderes übrig, als diese Linie als Hintergrundbild dem gesamten Body-Ellement zuzuordnen.
vgl.: http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm
Gruß Gernot
-
Moin Gernot,
Ich fürchte, da bleibt dir wohl nichts anderes übrig, als diese Linie als Hintergrundbild dem gesamten Body-Ellement zuzuordnen.
hab ich auch schon drüber nachgedacht, leider fängt die Linie aber ja nicht ganz oben an, sprich oben auf der Seite sind etwa 35 px Platz und ab da soll sie bis ganz unten gehen...
Das hat man davon, wenn ein Dipl.-Designer das Layout macht, nichts als Probleme bei der Umsetzung <g>
Glück auf
Dirk-
Hi,
Ich fürchte, da bleibt dir wohl nichts anderes übrig, als diese Linie als Hintergrundbild dem gesamten Body-Ellement zuzuordnen.
hab ich auch schon drüber nachgedacht, leider fängt die Linie aber ja nicht ganz oben an, sprich oben auf der Seite sind etwa 35 px Platz und ab da soll sie bis ganz unten gehen...Und wo ist da das Problem? background-position existiert.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Moin MudGuard,
h´(...) leider fängt die Linie aber ja nicht ganz oben an, sprich oben auf der Seite sind etwa 35 px Platz und ab da soll sie bis ganz unten gehen...
Und wo ist da das Problem? background-position existiert.
da muss ich jetzt aber doch noch mal nachfragen: mir sind die in SelfHTML (http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position) genannten Möglichkeiten bekannt...
Damit kann ich aber eine Hintergrundgrafik nicht an einem definierten Ort (also hier 35px von oben) beginnen lassen. Gibt's da mittlerweile weitere Möglichkeiten, die in SelfHTML einfach noch fehlen...?
Glück auf
Dirk-
hi,
mir sind die in SelfHTML (http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position) genannten Möglichkeiten bekannt...
Damit kann ich aber eine Hintergrundgrafik nicht an einem definierten Ort (also hier 35px von oben) beginnen lassen.
echt? dann kannst du weniger als alle anderen :-)
die lesen da nämlich den satz "Erlaubt sind numerische Angaben [und ...]", und wissen dann, was sie zu tun haben ...
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Moin wahsaga,
echt? dann kannst du weniger als alle anderen :-)
die lesen da nämlich den satz "Erlaubt sind numerische Angaben [und ...]", und wissen dann, was sie zu tun haben ...
wer lesen kann ist klar im Vorteil... <g>
Womit mal wieder bewiesen wäre, dass ich das Buch aus dem Gewinnspiel dringend brauche - obwohl, um das zu nutzen sollte ich aus lesen können ;-)
Glück auf
Dirk-
Hallo Dirk,
echt? dann kannst du weniger als alle anderen :-)
die lesen da nämlich den satz "Erlaubt sind numerische Angaben [und ...]", und wissen dann, was sie zu tun haben ...
Ehrlich gesagt, ich weiß es noch nicht, da du ja dem Body noch etwas anderes als nur diese Linie geben willst. Deine derzeitige Lösung mit einem Vordergrundbild erscheint mir auch nicht so allgemeingültig. Wenn der Content mal sehr umfangreich wird, schießt er wieder über die Linie hinaus.
Wäre es denn nicht das Einfachste, die Linie an passender Stelle mit in die dem Body-Element zugewiesene sich nicht-wiederholende fixierte Hintergrundgrafik zu integrieren?
Gruß Gernot
-
Warum wird es nicht mal so versucht, wie ich es vorgeschlagen habe?
-
Moin Adromir,
Warum wird es nicht mal so versucht, wie ich es vorgeschlagen habe?
Ganz einfach: weil ich - wie ja bereits erwähnt - zu blöd zum Lesen war... und daher einfach nicht wusste, dass man numerische Angaben bei background-position machen kann.
Ohne diese hätte ich nicht gewusst, wie ich deinen Vorschlag umsetzen sollte und als ich meine Lese-Schwäche bemerkte war es 0:47 Uhr und Zeit für den Feier"abend".
Da die Lösung "versetzter Background + Rahmenlinie links" aber mit Abstand die beste ist, wird das selfverständlich nachgeholt ;-)
Glück auf
Dirk
-
-
Moin Gernot,
Ehrlich gesagt, ich weiß es noch nicht, da du ja dem Body noch etwas anderes als nur diese Linie geben willst. Deine derzeitige Lösung mit einem Vordergrundbild erscheint mir auch nicht so allgemeingültig. Wenn der Content mal sehr umfangreich wird, schießt er wieder über die Linie hinaus.
Wäre es denn nicht das Einfachste, die Linie an passender Stelle mit in die dem Body-Element zugewiesene sich nicht-wiederholende fixierte Hintergrundgrafik zu integrieren?
im Prinzip ist es ja das, was ich jetzt mache, nur halt nicht als Body-Hintergrund (die Linie da zu fixieren wäre schlecht, da sie ja nicht ganz oben anfängt, beim Scrollen aber natürlich irgendwann die Bildschirmhöhe nutzen soll), sondern als Hintergrund im Inhalts-DIV.
Aber eben nicht als "Vordergrundbild" sondern als "Hintergrundbild", in sofern recht nahe an deinem Vorschlag...
Glück auf
Dirk
-
-
-
-
-
-
-
-
hi,
Es geht um http://ruchatz.net/if/test.html, und zwar soll die senkrechte blaue Linie, die den Menübereich begrenzt, automatisch verlängert werden
warum da eine grafik?
die linie wünscht sich wahrscheinlich nichts sehnlicher, als ein blauer border statt einer grafik sein zu dürfen - also quäle sie bitte nicht unnötig ...vielleicht kannst du die obere header-grafik und den inhaltsbereich in einen weiteren div-container packen, der dann solch einen border-left bekommt?
abstände des inhaltsbereiches etc. dann über margin/padding.ich würde jedenfalls eher einen zusätzlichen container ins markup einfügen, als einem bild gewalt anzutun und irgendwelche aufwendigeren workarounds zu basteln.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Moin moin,
Lösung gefunden, danke für die Denkanstöße...
Ich habe jetzt einfach die Linie und die halbtranzparente Box als 1px hohes Hintergrundbild in das Inhals-DIV gepackt und mit margin-left den eigentlichen Inhalt nach rechts geschoben.
Zu sehen unter http://ruchatz.net/if/
Glück auf
Dirk