dante: liste + div in span tag am linken rand anordnen

hallo ihr!

der code für die liste und das div tag sieht folgend aus. liegt alles in einem div-tag namens "header" drin:

div id="header">
  <div id="globi"><img src="globi_claim.gif" alt="relax and enjoy." /></div>
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">blubb</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a class="help" href="#">FAQ</a></li>
    <li><a href="#">Press</a></li>
  </ul>
   </div>

die lsite ist so formatiert dass es einer reiter struktur entsprciht (näheres dazu bei alistapart.com)

jetzt will ich beide elemente mit ungefähr 208px abstand vom linken rand aus positionieren. die breite des header tags bzw der lsite sollte dabei möglichst nicht angegeben werden das das komplette design auf skalierbarkeit ausgelegt ist (alle grössen, schriften etc mit em und en)

der abstand von 208px ergibt sich dass genau links von dezu positionierenden elementen eine grafik "drüberliegt"

habs jetzt mit nem span tag probiert:

#links {
position:relative;
left:200px;
/*width:400px;*/
border: 1px solid black;
}

funktioniert leider nciht so wie es wollte. das bild im div wird ordentlich ausgerichtet nur die formatierte liste bleibt an ihrem ort.

hatte es davor mit float: right probiert da kam aber nur müll raus.

davor habe ich versucht in header nen span zu legen mit float-align right. dann wurde aber die lsite falsch gerednert im opera. und so ganz richtig war es niocht weil die lsite rechts umgebrochen wurde.

habt ihr ne nen lösungsvorschlag?

falls noch irgendwas fehlt was ich vergessen haweb anzugeben bitte dazuschreiben.

gruss markus

  1. ???

    zu schwer, zu einfach, unmöglich?

    1. Hallo,

      zu schwer, zu einfach, unmöglich?

      Zu unverständlich?
      (und auch schwer zu lesen (ok, wenn man sich etwas Zeit nimmt, kann man die Tippfehler "richtiglesen" ;-) ))
      Habe deine Frage auch glesen, aber so ganz genau weiss ich nicht was du möchtest, also ließ ich sie liegen.

      Am besten ist, wenn du bei solchen Fragen einfach die/eine Seite mit dem Problem online stellen kannst.

      Grüße
      Thomas

      1. Hallo,

        zu schwer, zu einfach, unmöglich?

        Zu unverständlich?
        (und auch schwer zu lesen (ok, wenn man sich etwas Zeit nimmt, kann man die Tippfehler "richtiglesen" ;-) ))

        den einzigen tippfehler den ich sehe ist lsite statt liste.

        das macht es so kompliziert?

        1. Hi,

          bereits die Überschrift disqualifiziert Dich leider als Jemanden, der die Grundlagen von CSS noch nicht kennt.
          Informiere Dich über zulässige Schachtelungen von inline- und blocklevel-Elementen.

          freundliche Grüße
          Ingo

          1. Hi,

            bereits die Überschrift disqualifiziert Dich leider als Jemanden, der die Grundlagen von CSS noch nicht kennt.

            glaube ich nciht wenn du mal dem beispiel folgen würdest

            1. Hi,

              glaube ich nciht wenn du mal dem beispiel folgen würdest

              sorry, aber Deinen Ausführungen wie insbesondere:

              davor habe ich versucht in header nen span zu legen mit float-align right.

              konnte ich wohl wirklich nicht ganz folgen (und kann es auch jetzt ohne den entsprechenden HTML-code noch nicht).
              Wobei die Überschrift "liste + div _in_ span tag" nach wie vor völlig danaben ist und solche Fehlinterpretationen erst aufkommen läßt.

              freundliche Grüße
              Ingo

  2. also hier das onlinebeispiel:

    http://www.volk-marketing.de/test/css/navigation%20bar.htm

    es geht um den inhalt von dem header div, das muss um 209 pixel nach rechts verrutscht werden ansonsten wird er von einem bild, welches ich EXTRA nciht hochgeladen habe verdeckt.

    das css für den header und dem "globi"-div liegt in navigation.css (daran sollte aber nix verändert werden)

    #header #globi {
    margin-top:5px;
    margin-left:50px;
    }

    #header {
    width:100%;
    line-height:normal;
    background:#00A079 url("navi_bg.gif")
     repeat-x bottom;
    z-index:20;
    }

    das css für die anderen sachen liegt in layout.css

    body {
    margin:0;
    padding:0;
    }

    #rechts {
    position:relative;
    left:200px;
    /*width:400px;*/
    border: 1px solid black;
    }

    !!!
    ich hoffe ich habe es verständlich geschrieben. wenn nciht BITTE sagt was ich noch erläutern soll
    !!!

    markus

    PS.: ich weiss nciht wie man in diesem komischem forum hier links einfügt.

    1. das problem scheint bei der liste zu liegen:

      das andere div kann ich prima mit "meinen unzurecihenden kenntnissen von inline und block-level elementen" durch ein span element so positionieren wie ich möchte.

      die liste spielt nciht mit.

      hier mal der code der die liste betrifft. vielleicht gibt es menschen die nicht oberflächlich sind, trotzdem hier auf dem forum sind und dann auch noch gewollt sind zu helfen.

      wäre dann noch gut wenn sie keine "unzurecihenden kenntnissen von inline und block-level elementen" hätten und auch noch jemanden gewillt sind zu helfen.

      hier jedenfalls die rauskopiertren stellen aus meinen css file:

      #header ul {
      margin:0px;
      list-style:none;
      padding:10px 10px 0;
      }

      #header li {
      float:left;
      background:url("navi_links.gif")
         no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      border-bottom:1px solid #000000;
      }

      #header > ul a {width:auto;}
      /*Kommentierter Schrägstrich Hack
      versteckt Regel vor IE5-Mac \*/
      #header a {float:none;}
      /* Ende IE5-Mac Hack*/

      ps.: danke wenn ihr ironie verstehen könnt

    2. Hallo,

      http://www.volk-marketing.de/test/css/navigation%20bar.htm

      es geht um den inhalt von dem header div, das muss um 209 pixel nach rechts verrutscht werden ansonsten wird er von einem bild, welches ich EXTRA nciht hochgeladen habe verdeckt.

      das css für den header und dem "globi"-div liegt in navigation.css (daran sollte aber nix verändert werden)

      Eh?!?
      Wenn das nicht geändert werden kann/soll wie soll man da überhapt etwas machen?

      Sonst hätte ich einfach gesagt:

      #header ul {
      margin:0px 0px 0px 209px;
      list-style:none;
      padding:10px 10px 0;
      }

      Du hast gefragt, warum du keine Antwort bekommen hast. Ich habe dir geantwortet, warum _ich_ keine gab. Ich war dann auch gewollt dir zu helfen. Deshalb verstehe ich deine Ironie hier leider nicht.

      PS.: ich weiss nciht wie man in diesem komischem forum hier links einfügt.

      http://forum.de.selfhtml.org/faq/#Q-19

      Grüße
      Thomas

      1. Sonst hätte ich einfach gesagt:

        #header ul {
        margin:0px 0px 0px 209px;
        list-style:none;
        padding:10px 10px 0;
        }

        ok das bringt es für die liste in ordnung das andere div habe ich jetzt separat mit nem span gelöst.
        trotzdem verstehe ich nciht wieso es nicht geht, wenn
        liste und das div in einem span tag eingeschlossen sind. die liste war ja nicht fest positioniert.

        Du hast gefragt, warum du keine Antwort bekommen hast. Ich habe dir geantwortet, warum _ich_ keine gab. Ich war dann auch gewollt dir zu helfen. Deshalb verstehe ich deine Ironie hier leider nicht.

        damit habe ich ja nciht dich gemeint =)

        ich finde es halt nur schade dass du der einzige bist der mir hier weitergeholfen hat.

        danke ncohmal

        markus

        ps.: ich finde es scheisse das das eh schlecht übersichtliche forum durch den super toll witzigen aprilscherz jetzt für NOCH mehr unordnung sorgt.

        1. Hallo,

          ok das bringt es für die liste in ordnung das andere div habe ich jetzt separat mit nem span gelöst.
          trotzdem verstehe ich nciht wieso es nicht geht, wenn
          liste und das div in einem span tag eingeschlossen sind. die liste war ja nicht fest positioniert.

          <span> ist nunmal ein inline-level Element und sollte deshalb keine block-level Elemente enthalten. Obwohl man mit CSS  auch ein inline-Element als block darstellen lassen kann (display:block;) rät (auch) das W3C davon ab, <span> in diesem Sinne zu benützen.

          Wenn du diesem Problem wirklich auf den Grund gehen willst, muss du dein CSS und HTML erst radikal kürzen, d.h. dass du alles rausnehmen musst was nicht direkt mit dem Problem zu tun hat, angefangen von der Schriftformatierung bis hin zum layout.css etc.
          Dann kannst du dich wirklich auf das Problem konzentrieren, ohne darüber nachdenken zu müssen, ob irgendeine andere Angabe in einer der CSS-Dateien Auswirkungen auf den HTML-Code hat.

          damit habe ich ja nciht dich gemeint =)

          ich finde es halt nur schade dass du der einzige bist der mir hier weitergeholfen hat.

          Ich möchte nicht, dass du das jetzt missverstehst, ich schildere dir was mir so durch den Kopf ging bei deiner Fragen:
          Bei deiner ersten Posting, ging für mich überhapt nicht hervor was du erreichen wolltest: der HTML-Code passte nicht zum CSS-Fragment, es war nicht klar warum ein div in einem span legen wolltest, was hst du mit float probiert, die liste, eines der divs. Es gab keine Möglichkeit den Code wirklich zu sehen. Also habe ich erst gar nicht geantwortet.

          Dann hast du die Seite verlinkt. OK, dachte ich, schauen wir mal das an. Also gehe ich auf die Seite und sehe mit den Quelltext an: man oh man ... vier externe CSS-Dateien. Normalerweise hätte ich da einfach aufgehört, weil sonst hätte ich genau das machen müssen, was ich dann  bei dir gemacht habe.
          Die Seite lokal gespeichert, alle CSS-Dateien geholt und lokal gespeichert, die Bilder für die Liste lokal gespeichert.
          Dann konnte ich damit beginnen, alles zu entfernen was nicht mit dem problematischen Stelle zu tun hat, bis eben nur noch die navigation.css (plus die angabe für body aud dem layout.css) und das "header"-div ubringblieb.
          Erst jetzt konnte ich mich wirklich auf das Problem konzentrieren.

          Das ist sehr umständlich, kostet viel Zeit und viel Energie ohne dass man sich wirklich um das Problem hätte kümmern können.

          Wie gesagt, ich möchte nicht dass du dies alles missverstehts. Was ich dir damit ziegen wollte, wie andere (z.B. ich) denken, wenn solche Fragen hier im Forum gestellt werden. Es heisst wirklich nicht um sonst, dass man den Helfer leicht machen sollte helfen zu können, sonst beteiben sie eben nicht den Aufwand.

          ps.: ich finde es scheisse das das eh schlecht übersichtliche forum durch den super toll witzigen aprilscherz jetzt für NOCH mehr unordnung sorgt.

          Aber, aber! ;-)
          Wer wird das denn jetzt so tierisch ernst nehmen? :-)

          Grüße
          Thomas

          1. Bei deiner ersten Posting, (...) Es heisst wirklich nicht um sonst, dass man den Helfer leicht machen sollte helfen zu können, sonst beteiben sie eben nicht den Aufwand.

            mmh ja krass. ich dachte ich hätte es durch rauskopieren der betreffenden stellen alles wichtige angegeben. ich hab auch angegeben wo was für was liegt. ich dachte auch dass die *.css-namen eindeutig sind. nun ja.

            hab nicht gedacht, dass es "für aussenstehende" tortzdem so schwer ist nachzuvollziehen

            ps.: ich finde es scheisse das das eh schlecht übersichtliche forum durch den super toll witzigen aprilscherz jetzt für NOCH mehr unordnung sorgt.

            Aber, aber! ;-)
            Wer wird das denn jetzt so tierisch ernst nehmen? :-)

            das hier ist das einzige brauchbare deutsche html etc forum.
            das man mit soner ungewöhnlichen und nciht gerade glücklich gewählten forumsoftware "arbeiten" muss, naja ok - man kann halt nicht immer user freundlich sein. Dass dann noch ne lustige verstümmelung aller threattitel die benutzbarkeit vollends zerstört finde ich überhaupt nicht lustig.
            man hätte auch gleich selbstinstallierende dialer oder so einbauen können, oder nen paar schöne endlosschleifen die den browser abstürzen lassen.
            sooooooo eine lustige idee. wie kreativ.

            gruss markus

            1. Hallo,

              mmh ja krass. [...]  hab nicht gedacht, dass es "für aussenstehende" tortzdem so schwer ist nachzuvollziehen

              Wenn man selbst mitten drinn steckt, ist man natürlich mit dem Code vertraut und man weiss auch was man haben will, aber andere die "plötzlich" damit konfroniert werden, haben dieses Vertrautsein mit dem Code ja nicht.

              das hier ist das einzige brauchbare deutsche html etc forum.
              das man mit soner ungewöhnlichen und nciht gerade glücklich gewählten forumsoftware "arbeiten" muss, naja ok - man kann halt nicht immer user freundlich sein.

              *lol* ;-)
              Aber im ernst, vom Komfort her ist das Forum hier eine der besten  die ich kenne und das hat damit jetzt nicht zu tun, dass ich selbst daran mitentwickelt habe. (Ich gehe davon aus, dass du die Userspezifische Möglichkeiten des Forums kennst http://forum.de.selfhtml.org/cgi-bin/fo_userconf). Es ist ein klassisches Forum mit Threadansicht und kein Board. Was erscheint dir am Forum als nicht userfreundlich?

              Dass dann noch ne lustige verstümmelung aller threattitel die benutzbarkeit vollends zerstört finde ich überhaupt nicht lustig.
              man hätte auch gleich selbstinstallierende dialer oder so einbauen können, oder nen paar schöne endlosschleifen die den browser abstürzen lassen.
              sooooooo eine lustige idee. wie kreativ.

              Am lustigsten fand ich heute die Aufregung manch einer Teilnehmer. Wenn ich bedenke mit welchen Einschränkungen und sonstigen Dingen man sonst im Leben konfrontiert ist, finde ich die Aufregung uber diesen kleinen Unannähmlichkeit wirklich erheiternd :-)

              Grüße
              Thomas