Lukas Schmelzeisen: Hilfe bei CSS-Layout

Hi Forum,

Ich habe Probleme bei der erstellung eines CSS-Layout. Undzwar soll folgender Code

<?xml version="1.0" encoding="iso-8859-1"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">  
  <head>  
    <link rel="stylesheet" type="text/css" href="normal.css" title="Normal" />  
    <title>CSS-Layout</title>  
  </head>  
  <body>  
    <ul id="navi">  
      <li><a href="index.html">Navi 1</a></li>  
      <li><a href="index.html">Navi 2</a></li>  
      <li><a href="index.html">Navi 3</a><ul>  
        <li><a href="index.html">Navi 3.1</a><ul>  
          <li><a href="index.html">Navi 3.1.1</a></li>  
          <li><a href="index.html">Navi 3.1.2</a></li>  
          <li><a href="index.html">Navi 3.1.3</a></li>  
          <li><a href="index.html">Navi 3.1.4</a></li>  
        </ul></li></li>  
        <li><a href="index.html">Navi 3.2</a></li>  
        <li><a href="index.html">Navi 3.3</a></li>  
        <li><a href="index.html">Navi 3.4</a></li>  
        <li><a href="index.html">Navi 3.5</a></li>  
        <li><a href="index.html">Navi 3.6</a></li>  
        <li><a href="index.html">Navi 3.7</a></li>  
      </ul></li>  
      <li><a href="index.html">Navi 4</a></li>  
      <li><a href="index.html">Navi 5</a></li>  
    </ul>  
    <div id="content">  
      Content  
    </div>  
  </body>  
</html>

so aussehen: http://x4rd3n.bplaced.net/selfhtml_css_layout/. Die Schwierigkeit besteht für mich darin, dass das Content-Element unter der Navigation sitzt und nicht mittendrin. Dabei will ich nur ohne das height-Attribut bei #navi auskommen, da die Anzahl an Elementen in der Navigation anpassbar sein soll.

Mfg Lukas

  1. Hi,

    Die Schwierigkeit besteht für mich darin, dass das Content-Element unter der Navigation sitzt und nicht mittendrin.

    da dieser Satz sowohl grammatisch als auch von meiner Beobachtung der Seite her den ist-Stand widerspiegelt: Es ist Dein *Ziel*, das Content-Element mittendrin stehen zu haben?

    Wenn nicht, bitte ich um eine Umformulierung. Dein Problem ist mir nicht ersichtlich. Und wenn doch, so beschreibe bitte, wie Du "mittendrin" definierst.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi,

      da dieser Satz sowohl grammatisch als auch von meiner Beobachtung der Seite her den ist-Stand widerspiegelt: Es ist Dein *Ziel*, das Content-Element mittendrin stehen zu haben?

      Ja, da hast du recht :). Am Ende des Satzes sollte ein soll angefügt werden. Also: "Die Schwierigkeit besteht für mich darin, dass das Content-Element unter der Navigation sitzt und nicht mittendrin soll."

      Mfg Lukas

      1. Ok der Satz war auch mist. So ists richtig:

        "Die Schwierigkeit besteht für mich darin, dass das Content-Element unter der Navigation und nicht mittendrin seitzen soll."

  2. Ich habe Probleme bei der erstellung eines CSS-Layout. Undzwar soll folgender Code

    snip

    so aussehen: http://x4rd3n.bplaced.net/selfhtml_css_layout/. Die Schwierigkeit besteht für mich darin, dass das Content-Element unter der Navigation sitzt und nicht mittendrin. Dabei will ich nur ohne das height-Attribut bei #navi auskommen, da die Anzahl an Elementen in der Navigation anpassbar sein soll.

    Ich schildere dein Problem mal mit meinen Worten:
    Damit die Unterlisten so dargestellt werden können, dürfen sie weder vom Typ display: static noch relative sein.
    Damit ist es nicht möglich, dass eine Höheninformation aus diesen Unterlisten in den normalen Flowcontent zurückgeführt werden kann.

    Dein Problem liesse sich derzeit nur mit Javascript lösen.
    Dabei musst du für Hauptliste und beide Unterlisten den y Wert des letzten Elements auslesen.
    Um dann den Content zu versetzen, musst du entweder dessen margintop manipulieren, oder wiederum mit absoluter Positionierung spielen.

    Deine Navigation, welche den Content nicht verdecken darf, impliziert, dass sie permanent sichtbar ist.
    Eine solche Navigation KANN nicht beliebig erweiterbar sein, weil Bildschirme nicht beliebig gross sind.

    Du musst also irgend ein Konzept finden, wie du mit mangelndem Platz auskommen kannst. In der Regel sind hierfür Scrollbars zuständig.
    Wenn ich, um einen Navigationspunkt zu erreichen aber scrollen muss, dann ist das ein Hinweis, dass die Auswahl überladen ist.

    Du hast weiter ein Designproblem:
    Wie weiss ich nun, mit welchem Listenpunkt ein Punkt verbunden ist? Deine Numerierung ist wenig hilfreich.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Hi,

      dürfen sie weder vom Typ display: static noch relative sein.

      Das ist immer und für alle Elemente der Fall.

      display kennt weder den Wert static noch den Wert relative

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      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. dürfen sie weder vom Typ display: static noch relative sein.
        Das ist immer und für alle Elemente der Fall.
        display kennt weder den Wert static noch den Wert relative

        Troll!!!

        Es geht um position:static bzw relative.

        mfg Beat

        --
                         /|
          <°)))o><   __ / |    /|
                    /__\ _|___/ |     ><o(((°>
                   OvVVvO    __ |        ><o(((°>
        <°)))o><  /v    v\/  |
         <°)))o>< ^    ^/_/_         ><o(((°>
                   ^^^^/___/
                    ----            ><o(((°>
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
  3. hi $name,

    <ul id="navi">
          <li><a href="index.html">Navi 1</a></li>
          <li><a href="index.html">Navi 2</a></li>
          <li><a href="index.html">Navi 3</a><ul>
            <li><a href="index.html">Navi 3.1</a><ul>
              <li><a href="index.html">Navi 3.1.1</a></li>
              <li><a href="index.html">Navi 3.1.2</a></li>
              <li><a href="index.html">Navi 3.1.3</a></li>
              <li><a href="index.html">Navi 3.1.4</a></li>
            </ul></li></li>
            <li><a href="index.html">Navi 3.2</a></li>
            <li><a href="index.html">Navi 3.3</a></li>
            <li><a href="index.html">Navi 3.4</a></li>
            <li><a href="index.html">Navi 3.5</a></li>
            <li><a href="index.html">Navi 3.6</a></li>
            <li><a href="index.html">Navi 3.7</a></li>
          </ul></li>

    wo kommt denn dieses </li> her? das wurde doch weiter oben schon geschlossen?

    <li><a href="index.html">Navi 4</a></li>
          <li><a href="index.html">Navi 5</a></li>
        </ul>
        <div id="content">
          Content
        </div>
      </body>
    </html>[/code]

    so aussehen: http://x4rd3n.bplaced.net/selfhtml_css_layout/. Die Schwierigkeit besteht für mich darin, dass das Content-Element unter der Navigation sitzt und nicht mittendrin. Dabei will ich nur ohne das height-Attribut bei #navi auskommen, da die Anzahl an Elementen in der Navigation anpassbar sein soll.

    willst du also dein menu teilen:
    menu
    content
    menu
    ??

    gruss
    shadow

    p.s.
    ich finde es witzig das du schmelzeisen mit nachnamen heißt (und bevor das wieder einer löscht - ich heiße auch so mit nachnamen und darf das daher witzig finden - erst lesen, dann löschen)

    --
    Vor dem Parser und auf hoher See sind wir allein in Gottes Hand
    1. Hi,

      Und der nächste Fehler der mir nicht aufgefallen ist.

      Also witzig find ich den Nachnahmen nicht, nur andere :)

      Mfg

      1. hi $name,

        Und der nächste Fehler der mir nicht aufgefallen ist.

        Also witzig find ich den Nachnahmen nicht, nur andere :)

        ich finde den auch nicht witzig (ich fand nur die tatsache witzig das wir den gleichen nachnamen haben)
        ich wurde schon öfter mal angeschrieben "ob ich wirklich so heißen würde" *grummel* als ob ich mir freiwillig schmelzeien als pseudonym wählen würde *schauder*.

        gruss
        Christine Schmelzeisen

        --
        Vor dem Parser und auf hoher See sind wir allein in Gottes Hand
        1. Hallo,

          (ich fand nur die tatsache witzig das wir den gleichen nachnamen haben)

          Tja, das bietet nun jede Menge Platz für konspirative Theorien, aber wohl alle Enten.

          Grüße
          Thomas

          1. hi $name,

            Hallo,

            | (ich fand nur die tatsache witzig das wir den gleichen nachnamen haben)

            Tja, das bietet nun jede Menge Platz für konspirative Theorien, aber wohl alle Enten.

            verschwörungen und enten? haha, dazu sag ich ja besser nichts....

            gruss
            shadow

            --
            Vor dem Parser und auf hoher See sind wir allein in Gottes Hand
            1. Hallo,

              verschwörungen und enten? haha, dazu sag ich ja besser nichts....

              ;-)

              Grüße
              Thomas

  4. Hallo Forum,

    Da scheinbar neimand einen Lösungansatz hat, verbleibt für mich als einzigste Möglichkeit das HTML-Markup zu ändern. Meint ihr folgenden HTML-Code ist noch zugänglich?

    <ul id="navi">  
      <li><ul>  
        <li><a href="index.html">Navi 1</a></li>  
        <li><a href="index.html">Navi 2</a></li>  
        <li><a href="index.html">Navi 3</a></li>  
        <li><a href="index.html">Navi 4</a></li>  
        <li><a href="index.html">Navi 5</a></li>  
      </ul></li>  
      <li><ul>  
        <li><a href="index.html">Navi 3.1</a></li>  
        <li><a href="index.html">Navi 3.2</a></li>  
        <li><a href="index.html">Navi 3.3</a></li>  
        <li><a href="index.html">Navi 3.4</a></li>  
        <li><a href="index.html">Navi 3.5</a></li>  
        <li><a href="index.html">Navi 3.6</a></li>  
        <li><a href="index.html">Navi 3.7</a></li>  
      </ul></li>  
      <li><ul>  
        <li><a href="index.html">Navi 3.1.1</a></li>  
        <li><a href="index.html">Navi 3.1.2</a></li>  
        <li><a href="index.html">Navi 3.1.3</a></li>  
        <li><a href="index.html">Navi 3.1.4</a></li>  
      </ul></li>  
    </ul>
    

    Mfg Lukas