klein: vertikale linien im background

Hallo,
ich bin auf eine Seite gestoßen die vertikale
und horizontale linien hat.
Die Seite ist mit Framesets erstellt worden(wovon ich keine Ahnung habe)

Hier die Seite:http://www.andreakoopmann.de/

Nun möchte ich wissen wie man so ein Layout in CSS hinbekommt.

Gruß klein

Danke im Vorraus

  1. Hallo,

    das Problem ist, die Seite an die Höhe des Browsers anzupassen. In css 2 funktioniert height:100% nicht.
    Ich hätte da höchstens eine Idee mit geschachtelten divs und backgrounds aber elegant wäre das nicht.

    mfg Koken

    Hallo,
    ich bin auf eine Seite gestoßen die vertikale
    und horizontale linien hat.
    Die Seite ist mit Framesets erstellt worden(wovon ich keine Ahnung habe)

    Hier die Seite:http://www.andreakoopmann.de/

    Nun möchte ich wissen wie man so ein Layout in CSS hinbekommt.

    Gruß klein

    Danke im Vorraus

    1. @@koken:

      nuqneH

      In css 2 funktioniert height:100% nicht.

      Doch, natürlich funktioniert das.

      Es muss lediglich klar sein, 100% wovon.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
  2. Hi,

    Die Seite ist mit Framesets erstellt worden(wovon ich keine Ahnung habe)

    Am besten auch nicht lernen was das ist. Das ist ein "Relikt" aus ganz alten Zeiten. Frames haben immer diejenigen genommen, die nicht wollten, dass sich deren URL ändert bzw. das Menü, das meist da drum war nicht neugeladen werden musste. Ist aber allein schon wegen SEO nichts Wert und ist auch ärgerlich für die Besucher, besonders in der Form wie angewandt.

    ich bin auf eine Seite gestoßen die vertikale
    und horizontale linien hat.

    Ich würde das für mich in der Art lösen:
    1.
    Oben zwei Spans, relative, mit border min 3px solid und fester höhe. Das eine links und das andere rechts.
    2.
    Ein Div mit am besten fester absoluter Breite, zentriert & relative.
    3.
    Nochmal Nummer eins wiederholen nur mit relativer Höhe.

    Wichtig ist ja dann einfach, dass du den Spans auch zuerst sagst die sollen von der Mitte anfangen. Mit left: 50% und dann mit margin-left einfach die Hälfte des zentrierten Divs für links abziehen und für rechts hinzuaddieren. Im Grunde reichen also für das Konstrukt 3 Klassen. Einmal sagen dieses span links, das andere rechts, und dann noch eins für das Div das nur mitte sein soll.

    Ist nurn Vorschlag für ein >Grundgerüst<. Habs nicht getestet, aber ich merks mir schonmal vor als ein schönes Projekt für zwischendurch. :)

    Gz,
    Rowland

  3. @@klein:

    nuqneH

    Die Seite ist mit Framesets erstellt worden(wovon ich keine Ahnung habe)

    Besser ist auch. Das einzige, was über Frames wissen sollte, ist dass sie out sind. Zumindest solange, bis man verstanden hat, wofür man Frames und Iframes wirklich sinnvoll einsetzen könnte. Zur Seitenaufteilung sind sie jedenfalls ein völlig ungeeignetes Mittel.

    Hier die Seite:http://www.andreakoopmann.de/

    An der sollte man sich kein Beispiel nehmen, und wenn, dann ein schlechtes.

    Nicht nur wegen der Frames. Durch die unterdrückte Scrollbar erreicht man nicht alle Inhalte. Unter 510 Pixel Viewporthöhe ist das Impressum nicht erreichbar – autsch!

    Nun möchte ich wissen wie man so ein Layout in CSS hinbekommt.

    Allein mit 'html' und 'body' und generierten Pseudoelementen. Und so, dass es sowohl mit Viewports geringer Höhe als auch geringer Breite funktioniert.

    Danke im Vorraus

    Gerrn geschehen.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Moin,

      Allein mit 'html' und 'body' und generierten Pseudoelementen. Und so, dass es sowohl mit Viewports geringer Höhe als auch geringer Breite funktioniert.

      Chrome tut nicht, wollt ich nur anmerken :)

      Gruß,
      Take

      1. Om nah hoo pez nyeetz, Take!

        Chrome tut nicht, wollt ich nur anmerken :)

        und bei großen Viewports, wenig Inhalt oder kleiner Zoomstufe ist es auch subobtimal.

        Matthias

        --
        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Om nah hoo pez nyeetz, Matthias Apsel!

          und bei großen Viewports, wenig Inhalt oder kleiner Zoomstufe ist es auch subobtimal.

          dies ließe sichj lösen durch body, html {height: 100%} und einer prozentualen Höhe für die Pseudoelemente.

          Matthias

          --
          1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
      2. @@Take:

        nuqneH

        Chrome tut nicht, wollt ich nur anmerken :)

        Hm, ja. Safari auch nicht. Mal sehen, was den Webkits da nicht bekommt …

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
        1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

          Hm, ja. Safari auch nicht. Mal sehen, was den Webkits da nicht bekommt …

          html::before und html::after sind so hoch wie der Viewport und überdecken den body. Letzteres ließe sich durch einen passenden z-index beheben, aber Höhen- oder Hintergrundanweisungen bleiben schwierig. Aber ich bin sicher, dir fällt was ein ;p

          Matthias

          --
          1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
    2. Om nah hoo pez nyeetz, Gunnar Bittersmann!

      Nun möchte ich wissen wie man so ein Layout in CSS hinbekommt.

      Allein mit 'html' und 'body' und generierten Pseudoelementen. Und so, dass es sowohl mit Viewports geringer Höhe als auch geringer Breite funktioniert.

      auch und möglicherweise etwas einfacher mit mehreren Hintergrundgrafiken.

      Matthias

      --
      1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
  4. Vielen Dank für eure schnelle Hilfe
    ich glaub ich muss das Kapitel über pseudoklassen
    nochmal lesen^^

    Grüße klein

    1. @@klein:

      nuqneH

      ich glaub ich muss das Kapitel über pseudoklassen nochmal lesen^^

      Ob dir das bei Pseudo-_Elementen_ helfen wird?

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. @@Qapla':

        Ups,
        bin wohl noch nicht ganz eins mit dieser Materie

        danke für das Beispiel...

        klein

      2. @@Qapla':

        wie stelle ich denn nun bei deinem genannten Beispiel
        die " height: ; " der beiden vertikalen Linien ein?

        mfg klein

        1. Om nah hoo pez nyeetz, klein!

          wie stelle ich denn nun bei deinem genannten Beispiel die " height: ; " der beiden vertikalen Linien ein?

          Die beiden vertikalen Linien sind border-left und border-right des body-elements.

          Matthias

          --
          1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
          1. Danke

            mfg klein