iselgrim: strich im hintergrund über gesamte seitenlänge

hallo

ich möchte eine linie im hintergrund meiner seite haben, die über die gesamte seitenlänge gezogen wird.
ich habe ein div auf der seite absolut positioniert und die linie als 1px hohes und 18px breites gif-file als hintergrundbild des divs eingestellt.

wenn ich als höhe des divs 100% angebe, wird die linie ordnungsgemäß angezeigt, allerdings nicht bis zum ende der seite, sondern nur bis zum ende des monitorausschnitts. die seite geht also nach unten noch viel weiter, die linie endet bei einer höhe von rund 1000px, weil mein browserfenster so hoch ist.

dem div eine feste höhe geben geht nicht, weil der inhalt dynamisch erzeugt wird und manchmal auch deutlich kürzer ist.

weiß jemand eine lösung?

  1. weiß jemand eine lösung?

    Ja, und Du wirst hoffentlich auch gleich drauf kommen...

    ich möchte eine linie im hintergrund meiner seite haben, die über die gesamte seitenlänge gezogen wird.

    Ich wiederhole: Wo möchtest Du sie haben? Im Hintergrund der Seite.

    ich habe ein div auf der seite absolut positioniert und die linie als 1px hohes und 18px breites gif-file als hintergrundbild des divs eingestellt.

    Warum denn nicht als Hintergrund der Seite?

    wenn ich als höhe des divs 100% angebe, wird die linie ordnungsgemäß angezeigt, allerdings nicht bis zum ende der seite, sondern nur bis zum ende des monitorausschnitts. die seite geht also nach unten noch viel weiter, die linie endet bei einer höhe [...]

    Das ist richtig so. Die Linie soll aber doch gar nicht Hintergrund eines divs sein, sondern der Seite.

    Hoffe, Dir den richtigen Denkanstoss gegeben zu haben, ansonsten hak' noch mal nach.
    schönen Gruß, David.

    1. Warum denn nicht als Hintergrund der Seite?

      Hintergrund der Seite ist ein Streifenmuster, der Strich soll links neben dem eigentlichen Content nach unten verlaufen und bei jeder Auflösung einen Abstand von 20px zur Contentbox haben. Ich weiß nicht, wie man das als festen Seiten-Hintergrund vereinbaren kann.

      1. hi,

        der Strich soll links neben dem eigentlichen Content nach unten verlaufen und bei jeder Auflösung einen Abstand von 20px zur Contentbox haben.

        Wenn es ein einfarbiger Strich sein soll, genügte dazu doch ein einfacher linker border für den Contentbereich, plus padding-left von 20px.
        Zusätzlich noch eine Mindesthöhe für den Contenbereich.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. hi,

          der Strich soll links neben dem eigentlichen Content nach unten verlaufen und bei jeder Auflösung einen Abstand von 20px zur Contentbox haben.

          Wenn es ein einfarbiger Strich sein soll, genügte dazu doch ein einfacher linker border für den Contentbereich, plus padding-left von 20px.
          Zusätzlich noch eine Mindesthöhe für den Contenbereich.

          gruß,
          wahsaga

          geht leider nicht, weil der strich 1. zweifarbig ist und 2. an mehreren boxen vorbeilaufen soll. über der contentbox ist eine header-box, die einen abstand von 20px zur oberkante hat. die contentbox hat nach unten einen abstand von 20px zur unterkante. als border geht es also leider nicht.

          1. hi,

            geht leider nicht, weil der strich 1. zweifarbig ist

            Gut, dann wäre er immer noch als in y-Richtung wiederholtes, links positioniertes Hintergrundbild realisierbar.

            und 2. an mehreren boxen vorbeilaufen soll. über der contentbox ist eine header-box, die einen abstand von 20px zur oberkante hat. die contentbox hat nach unten einen abstand von 20px zur unterkante.

            Dann könntest du ggf. die alle Zusammen noch mal in einen Container packen, der das Hintergrundbild bekommt.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. hi,

              geht leider nicht, weil der strich 1. zweifarbig ist

              Gut, dann wäre er immer noch als in y-Richtung wiederholtes, links positioniertes Hintergrundbild realisierbar.

              wie kann ich ein hintergrundbild denn genau positionieren und nur in y-richtung wiederholen?

              1. hi,

                wie kann ich ein hintergrundbild denn genau positionieren und nur in y-richtung wiederholen?

                Frag bitte jetzt nicht für jede Kleinigkeit, sondern schlag es in selfhtml nach.

                Wenn du dir hier schon die Ideen liefern lässt, dann eigne dir die zur Umsetzung nötigen Kenntnisse bitte erst mal selber an.

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. hi,

                  wie kann ich ein hintergrundbild denn genau positionieren und nur in y-richtung wiederholen?

                  Frag bitte jetzt nicht für jede Kleinigkeit, sondern schlag es in selfhtml nach.

                  Wenn du dir hier schon die Ideen liefern lässt, dann eigne dir die zur Umsetzung nötigen Kenntnisse bitte erst mal selber an.

                  gruß,
                  wahsaga

                  habe mir das mal eben angeeignet. eine frage bleibt noch offen: kann ich einem einzigen element (body) mehrere hintergrundbilder zuweisen? denn ich habe ja noch das strich-muster als hintergrund.

                  1. habe mir das mal eben angeeignet. eine frage bleibt noch offen: kann ich einem einzigen element (body) mehrere hintergrundbilder zuweisen? denn ich habe ja noch das strich-muster als hintergrund.

                    Nein, das geht nicht. Allerdings kannst Du dem html-Element ein Hintergrundbild zuordnen.
                    Das wird allerdings vom Internet Explorer nicht unterstützt, falls sich der Internet Explorer 6 aber im standard-compliance-mode befindet, kann er es.
                    Effektiv funktioniert es also nicht bei IE<6

                    1. habe mir das mal eben angeeignet. eine frage bleibt noch offen: kann ich einem einzigen element (body) mehrere hintergrundbilder zuweisen? denn ich habe ja noch das strich-muster als hintergrund.
                      Nein, das geht nicht. Allerdings kannst Du dem html-Element ein Hintergrundbild zuordnen.
                      Das wird allerdings vom Internet Explorer nicht unterstützt, falls sich der Internet Explorer 6 aber im standard-compliance-mode befindet, kann er es.
                      Effektiv funktioniert es also nicht bei IE<6

                      ich habe probiert, die drei boxen (header, navi und content) in ein div zu stecken und diesem div die grüne linie als border zu geben. allerdings funktioniert das scheinbar deshalb nicht, weil die drei boxen absolut positioniert sind.

                      gibt es noch irgendeine möglichkeit? ich müsste es irgendwie hinbekommen, dass der streifen absolut positioniert und unendlich lang ist, und er vom browserfenster abgeschnitten wird, eben so wie ein hintergrundbild.

                      1. hi,

                        ich habe probiert, die drei boxen (header, navi und content) in ein div zu stecken und diesem div die grüne linie als border zu geben. allerdings funktioniert das scheinbar deshalb nicht, weil die drei boxen absolut positioniert sind.

                        Dann natürlich nicht nur scheinbar, sondern ziemlich sicher.
                        Von absoluter Positionierung war bisher allerdings noch gar nicht die Rede. Warum rückst du erst jetzt damit heraus?

                        Außerdem kannst du im Archiv oft genug nachlesen, dass gerade CSS-Anfänger von absoluter Positionierung lieber erst mal die Finger lassen sollten - weil sie oftmals die Auswirkungen nicht abschätzen können (wie man auch hier wieder sieht).

                        _Warum_ sind die Elemente absolute positioniert?

                        gruß,
                        wahsaga

                        --
                        /voodoo.css:
                        #GeorgeWBush { position:absolute; bottom:-6ft; }
                        1. _Warum_ sind die Elemente absolute positioniert?

                          Hmm... Wenn ich sie relativ positioniere, stehen zB die Headerbox und die Navigationsbox nicht mehr nebeneinander, sondern untereinander. es soll so aussehen:

                          ||   -------
                          ||  |       |  ---
                          ||  |   H   | | N |
                          ||  |       | |   |
                          ||   -------   ---
                          ||   -------------
                          ||  |             |
                          ||  |     C       |
                          ||  |             |
                          ||  |             |
                          ||  |             |
                          ||   -------------
                          ||

                          H = Header, N = Navi, C = Content, der Strich links daneben ist die besagte Linie.

                          1. Hmm... Wenn ich sie relativ positioniere, stehen zB die Headerbox und die Navigationsbox nicht mehr nebeneinander, sondern untereinander. es soll so aussehen:

                            Um Elemente nebeneinander anzuordnen gibt es noch mehr möglich als absolut zu positionieren. z.b. mit float

                            Aber bevor sich jetzt nochmal jemand Gedanken um eine Lösung macht, wäre es nicht besser wenn du einmal ALLE Bedingungen die du erfüllt haben möchtest, auflistest oder besser einfach mal zeigen wie das ganze aussieht?
                            Bisher hast du bei fast jedem Vorschlag eine neue Anforderung gestellt, die vorher hier keinem bekannt ist/war

                            Struppi.

                            1. wäre es nicht besser wenn du einmal ALLE Bedingungen die du erfüllt haben möchtest, auflistest oder besser einfach mal zeigen wie das ganze aussieht?

                              http://www.radiopilot.de/v2/

                              ich habe die drei boxen absolut positioniert (muss wahrscheinlich nicht unbedingt so sein, oder?) und möchte links von den boxen von ganz oben nach ganz unten eine zweifarbige linie ziehen.

                              1. Hallo.

                                ich habe die drei boxen absolut positioniert (muss wahrscheinlich nicht unbedingt so sein, oder?) und möchte links von den boxen von ganz oben nach ganz unten eine zweifarbige linie ziehen.

                                Bevor du dich mit der Darstellung befasst, solltest du die Inhalte deiner Seite vielleicht noch sinnvoll auszeichnen. Diese Ansammlung vieler <div>, <span> und <br /> im  Zusammenspiel mit einer Layout-Tabelle und vielen nicht semantischen Klassennamen wirkt jedenfalls bestenfalls unhandlich. Und für die Javascript-Verweise solltest du eine sinnvolle Notation verwenden, wie du sie im Archiv recherchieren kannst. Die CSS-Tipps, die du bisher erhalten hast, lassen sich dann ja noch immer anwenden. Und nein, absolute Positionierung ist hier völlig überflüssig; relative Positionierung könnte je nach Machart der Navigation notwendig sein, um die Bündigkeit zu gewährleisten.
                                Grafisch ist die Seite übrigens ein großer Schritt nach vorn.
                                MfG, at

                              2. http://www.radiopilot.de/v2/

                                ich habe die drei boxen absolut positioniert (muss wahrscheinlich nicht unbedingt so sein, oder?) und möchte links von den boxen von ganz oben nach ganz unten eine zweifarbige linie ziehen.

                                Grafisch ist die Seite sehr schön, was den HTML-Code angeht und wie at schon bemerkte, leider gar nicht. Absolute Positionierung ist an dieser Stelle absolut (*scnr*) überflüssig.

                                Mein Vorschlag:
                                Setze das Bild nicht in ein div, sondern in eine h1-Überschrift, den entsprechenden alt-Text hat es ja schon.

                                Die Navigation ist bereits ein Block-Element, wenn Du sie als Liste realisierst, ein weiteres div drum herum ist also unnötig.

                                Die h1-Überschrift floatest Du nach links, die Navigation bekommt einen entsprechenden margin auf der linken Seite.

                                Den Seitentext bringst Du in einem div unter, lässt aber diese total unnötige Tabelle mit einer Zelle/einer Reihe weg. Außerdem lässt Du solche Konstruktionen wie <span class="text_schwarz">, <br /><br /> und <div id="abstand_30"></div> weg, es ist eine Qual (sorry), sich das anzusehen.
                                Setze den Text mit den Text mit den dafür vorgesehenen Elementen (h1 -h6 für Überschriften, p für Absätze, adress für Adressen) und weise diesen über CSS Abstände (margins) zu. Die Bilder "Was gibt's Neues?", "Die Livetermine" und "Newsletter" bringst Du, da es ja Überschriften sind, in h2-Elementen unter.

                                Das Body-Hintergrundbild wird natürlich per CSS zugewiesen.

                                Damit Du jetzt Deine Linie hinbekommst, packst Du alles in ein Container-Div, dem Du die Linie als Hintergrundbild verpasst, padding-right: 20px; dafür einstellst und das Du zentriert ausrichtest, siehe Forums-FAQ.
                                Damit Deine drei Boxen wieder exakt mittig sind, kannst Du diesem Wrapper-div noch einen negativen margin-left verpassen.

                                Alles, was Du brauchst, findest Du im CSS-Kapitel von SelfHTML.

                                schönen Gruß, David

                                1. Validiere die Seite mal... http://validator.w3.org/check?uri=http%3A%2F%2Fwww.radiopilot.de%2Fv2%2F

                                  id's darf man nur einmal vergeben, außerdem müssen sie mit einem Buchstaben anfangen.

                                  Übrigens: ich persönlich bin der Meinung, Formularfelder sollten auch wie Formularfelder aussehen (Newsletter-Anmeldung), ist aber nur meine Meinung...

                                2. danke für deine vorschläge, habe mich daran gemacht, den code aufzubessern. allerdings bin ich auf zwei probleme gestoßen:

                                  die navigationsbox soll ja nicht am oberen rand stehen, sondern ca. 40px tiefer. wenn ich der box einen margin-top von 40px gebe, rutscht das bild (h1) automatisch mit herunter (übrigens nur bei opera und firefox, IE machts richtig).

                                  ich habe ein wrapper-div um alles gelegt und diesem die linie als hintergrund gegeben. verhält sich das ja unten am bildschirmrand (logischerweise) nicht wie ein hintergrundbild, es ist einfach zu ende, wenn die contentbox rechts zuende ist. bei höheren auflösungen zieht sich der strich also nicht automatisch bis ans ende der seite durch.

                                  1. Hallo Iselgrim,

                                    ich habe das mal schnell zusammengeschmissen, so wie Du es Dir (denke ich) vorstellst.

                                    Die Seite findest Du unter http://www.stud.uni-siegen.de/david.aurelio/radiopilot/, das CSS-file unter http://www.stud.uni-siegen.de/david.aurelio/radiopilot/style.css. Ich habe es mal recht ausführlich kommentiert, damit Du nachvollziehen kannst, was ich gemacht habe.
                                    Schau Dir auch an, wie ich den HTML-Text aufgebaut habe, insbesondere das Entfernen der meisten span- und div-Elemente. Das ist das, was at angesprochen hatte: Verwendung der passenden HTML-Elemente.

                                    Das Zuweisen einer body-Breite wird vom Internet Explorer erst ab Version 6 unterstützt (und auch dann nur im standardkonformen Modus), d.h., die Seite sieht im IE 5 bzw. 5.5 (Installation Win 2000) nicht so aus, wie angedacht, ist aber benutzbar.

                                    Solche fertigen Beispiele entsprechen, das ist mir bewusst, nicht der "hilf mir es selbst zu tun"-Philosophie dieses Forums. Daher möchte ich Dich bitten, Dir die beiden Dateien genau anzusehen und zu versuchen nachzuvollziehen, was da geschieht. Solltest Du diesbezüglich noch Fragen haben, kannst Du sie an dieser Stelle natürlich los werden.

                                    Zur Info: Ich werde die Seite in ca. einer Woche wieder löschen.

                                    schönen Gruß, David

                                    1. ich habe das mal schnell zusammengeschmissen, so wie Du es Dir (denke ich) vorstellst.

                                      Solltest Du diesbezüglich noch Fragen haben, kannst Du sie an dieser Stelle natürlich los werden.

                                      Wow. Danke für deine Arbeit!

                                      Besonders interessant fand ich

                                      * html .navi { /* IE-Hack*/

                                      hatte ich vorher noch nie gesehen :-)

                                      body {
                                          background: url(linielinks.gif) repeat-y left;
                                          ...

                                      damit hast du die grüne Linie eingefügt. Ich frage mich nur, warum sie, wenn sie für den Body als Hintergrundbild vereinbart ist, nicht bis zum Bildschirmrand angezeigt wird.
                                      vielleicht klappt das ja noch irgendwie.

                                      1. Hi,

                                        damit hast du die grüne Linie eingefügt. Ich frage mich nur, warum sie, wenn sie für den Body als Hintergrundbild vereinbart ist, nicht bis zum Bildschirmrand angezeigt wird.

                                        Vermutlich, weil der body nicht bis zum Bildschirmrand reicht.

                                        cu,
                                        Andreas

                                        --
                                        Warum nennt sich Andreas hier MudGuard?
                                        Schreinerei Waechter
                                        O o ostern ...
                                        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                                        1. Vermutlich, weil der body nicht bis zum Bildschirmrand reicht.

                                          So ist es. Der body braucht also eine Mindesthöhe.
                                          Beim Internet Explorer wird übrigens die normale Höhe so interpretiert.