Dmitri Rettig: Zwei DIVs nebeneinander

Hallo,

Ich will zwei DIVs nebeneinander postieren. Folgenden Code habe ich:

<div style="width:300px; margin:0px 20px 0px 0px; padding:0px; float:left;>
<a href="link1.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link1</a>
<p>Beschreibung des Links...</p>
<br />
<a href="link2.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link2</a>
<p>Beschreibung des zweiten Links...</p>

<!-- usw //-->

</div>

<p>Das ist meine Navigationsleiste. Daneben will ich einen Kurzen Text plazieren. </p>

<p>Da erzähle ich was vom Pferd ...</p>

<p style="clear:left">Und hier geht es ganz normal weiter</p>
<hr />

Der Mozilla interpretiert alles richtig. Ich nehme an, dass Netscape es auch tut. Der MSIE plaziert den Text "Das ist meine Navigationsleiste. Daneben will ich einen Kurzen Text plazieren." genau unter meinen DIV, und macht diesen auch 300px breit [warum?], auch wenn ich den Text ebenfalls in einen DIV verschachtle.

Bitte keine Lösung mit Tabellen. Ich bin gerade dabei, von Tabellen wegzukommen.

MfG Dmitri

  1. Du solltest etwas grundsätzliches über DIV und SPAN-Tags wissen. Sie wurden extra für CSS entwickelt.
    Der DIV-Tag ist für eine ganze _Zeile_ gedacht, der SPAN-Tag hingegen nur für eine Anordnung von Zeichen.
    Das heißt, wenn du 2 "DIVs" nebeneinander plazieren willst solltest du lieber zwei SPAN-Tags nehmen. Die werden auf jeden fall neben einander dargestellt.

    Hoffe das konnte dir weiterhelfen.

    MfG, A Bad Suliban

    1. Hallo,

      Du solltest etwas grundsätzliches über DIV und SPAN-Tags wissen. Sie wurden extra für CSS entwickelt.
      Der DIV-Tag ist für eine ganze _Zeile_ gedacht, der SPAN-Tag hingegen nur für eine Anordnung von Zeichen.
      Das heißt, wenn du 2 "DIVs" nebeneinander plazieren willst solltest du lieber zwei SPAN-Tags nehmen. Die werden auf jeden fall neben einander dargestellt.

      Irgendwo [bin zu faul um zu suchen] in SELFHTML steht, dass span als Inline-Element zur Textformatiereung gedacht ist. z. B. wenn ich ein Wort mit vielein bunten Buchstaben schreiben will. In meinen Fall ist es eine Menüleiste. Und diese kann man als einen Absatz, oder besser gesagt als einen Block betrachten. Deswegen, denke ich, ist div logischer als span.

      MfG Dmitri

  2. Hallo,

    Hallo

    Ich will zwei DIVs nebeneinander postieren. Folgenden Code habe ich:

    <div style="position:absolute; left:0px; top:20px; width:300px;">

    <a href="link1.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link1</a>
    <p>Beschreibung des Links...</p>
    <br />
    <a href="link2.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link2</a>
    <p>Beschreibung des zweiten Links...</p>

    <!-- usw //-->

    </div>

    div style="position:absolute; left:300px; top:20px; width:150px;">

    <p>Das ist meine Navigationsleiste. Daneben will ich einen Kurzen Text plazieren. </p>

    <p>Da erzähle ich was vom Pferd ...</p>

    <p style="clear:left">Und hier geht es ganz normal weiter</p></div>
    <hr />

    Gruß
    David

    1. Sorry, drei Fehler, hier korrigiert:

      Ich will zwei DIVs nebeneinander postieren. Folgenden Code habe ich:

      <div style="position:absolut; left:0px; top:20px; width:300px;">
      <a href="link1.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link1</a>
      <p>Beschreibung des Links...</p>
      <br />
      <a href="link2.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link2</a>
      <p>Beschreibung des zweiten Links...</p>

      <!-- usw //-->

      </div>

      <div style="position:absolut; left:300px; top:20px; width:150px;">
      <p>Das ist meine Navigationsleiste. Daneben will ich einen Kurzen Text plazieren. </p>

      <p>Da erzähle ich was von der Kuh ...</p>

      <p style="clear:left">Und hier geht es ganz normal weiter</p></div>

      Gruß
      David

      1. hi David,

        wenn du jetzt noch aus:

        <div style="position:absolut; left:0px;

        <div style="position:absolute; left:opx;
        usw. machst (da fehlte ein "e"), könnte es werden ...

        Grüße aus Berlin

        Christoph S.

        1. hi David,

          wenn du jetzt noch aus:
          <div style="position:absolute; left:opx;

          Der erste Div hat left:0; width:300;  und der 2. DIV left:300 somit stehen sie nebeneinander, was ist daran falsch ?

          usw. machst (da fehlte ein "e"), könnte es werden ...

          hab ichs bei meinem 2. posting verschlimmbessert ;-))

          Grüße aus Isny (Allgäu)

          David

          1. n'abends, Forum ;-)

            mir ist grade danach: David schreibt eben

            Der erste Div hat left:0; width:300;

            heißt das jetzt "der" oder "das "DIV" ?

            der Rest zum sachlichen Inhalt des Threads ist eigentlich erläutert, und ich muß mich beeilen, dieses posting heute noch loszuwerden ...

            Grinsegrüße aus (na ihr wißt schon)

            Christoph S.

            1. Hi

              Naja ein DIV ist ein Positionsrahmen.

              Also _DER_ DIV ;)

              Greets aus West-Erlangen - TOM

              1. Hi

                Naja ein DIV ist ein Positionsrahmen.

                Also _DER_ DIV ;)

                der weibliche Artikel wird gar nicht in die überlegung einbezogen.
                in der wettervorhersage haben wenigstens die tiefs weibliche namen.

                ;-))

                1. Hallo

                  Also _DER_ DIV ;)

                  der weibliche Artikel wird gar nicht in die überlegung einbezogen.
                  in der wettervorhersage haben wenigstens die tiefs weibliche namen.

                  Dann wäre es ja nicht mehr der oder das DIV, sondern _die_DIVA_. *hehe*

                  Tschüß, Auge

              2. Hallo!

                Naja ein DIV ist ein Positionsrahmen.

                Ein Div gruppiert gewissermaßen ein oder mehrere andere Blockelemente - über deren Positionierung sagt es nichts aus, dafür würde man CSS brauchen. Die Überlegung halte ich daher für falsch.

                Also _DER_ DIV ;)

                Ich würde sagen, das Div, denn es ist ja gewissermaßen eine Abkürzung für Div-Tag oder Div-Element. Im schlimmsten Fall könnte man auch auf das natürliche Geschlecht zurückgreifen - und da ein Tag wohl kaum männlich oder weiblich sein kann, würde ich es als sächlich bezeichnen.

                Übrigens ist das Gebiet durchaus interessant, vor allem, wenn man einmal nachdenkt, warum es der URL und nicht die URL heißen muss.

                emu
                [volksetymologie betreibend]

                1. Hallo!

                  Hallihallo!

                  Übrigens ist das Gebiet durchaus interessant, vor allem, wenn man einmal nachdenkt, warum es der URL und nicht die URL heißen muss.

                  So ein Mist.... Das heißt _der_ URL? Dann möchte ich mich an dieser Stelle für all meine bisherigen grammatikalischen Fehler entschuldigen und gelobe hiermit Besserung....

                  emu
                  [volksetymologie betreibend]

                  viele liebe Grüße,
                  Der Dicki [immer wieder dazulernend]

                  1. Hallo!

                    So ein Mist.... Das heißt _der_ URL?

                    »URL« ist die Abkürzung für »Uniform Resource Locator«. Im Deutschen
                    sind Nomina agentis (Träger eines Geschehens; hier also etwas, das
                    etwas auffindet bzw. auffinden hilft) auf »-ator« von Verben auf
                    »-ieren« (hier »lozieren«) Maskulina, so daß man »der URL« vermuten
                    würde, erhalten Abkürzungen ihr Genus doch meist nach der Vollform
                    (hier »der Lokator«).

                    Tatsächlich ist dieser Gebrauch aber eher selten. (Andere Abweichungen
                    sind beispielsweise »das Foto«, »das Kino« trotz »die Fotografie«,
                    »der Kinematograph«; siehe auch »der/das Modem« weiter oben. Wolf
                    Schneider leitet »Kino« in »Wörter machen Leute« passend zum Genus von
                    »Kinematographentheater« ab.) Vorherrschend ist vielmehr »die URL«.
                    Peter Brülls vermutet einen Transfer vom ähnlich klingenden »die Uhr«,
                    einem bekannten femininen Substantiv.

                    Der zehnbändige Duden von 1999 und die 22. Duden-Auflage von 2000
                    bestätigen den Gebrauch beider Genera und bezeichnen »der URL« als
                    »selten«.

                    (http://faql.de/desdfaql.txt)

                    Ich weiß, es ist verboten, aber da das Dokument keine internen Anker hat, hoffe ich, das man die Urheberschaftsrechtsverletzung billigt :-)

                    Dann möchte ich mich an dieser Stelle für all meine bisherigen grammatikalischen Fehler entschuldigen und gelobe hiermit Besserung....

                    Unsinn, für nichts musst du dich entschuldigen :o)

                    emu
                    [...]

                2. Hallo,

                  Da fällt mir ein, dass ich in einem Java-Buch die Applet gelesen habe. Es heisst aber das Applet, oder?

                  MfG Dmitri

          2. mein letztes Posting war Quatsch

            Gruß
            David

        2. Hi Christoph,

          wenn du jetzt noch aus:

          <div style="position:absolut; left:0px;

          <div style="position:absolute; left:opx;

          ^

          usw. machst (da fehlte ein "e"), könnte es werden ...

          und wenn wir noch "0" statt "o" schreiben, geht's noch besser *fg*

          LG Orlando

          --
          SELF-TREFFEN 2002
          http://www.rtbg.de/selftreffen/
          http://www.megpalffy.org/temp/penneninhh.html

          1. grrrrrr ....

            und wenn wir noch "0" statt "o" schreiben, geht's noch besser *fg*

            ich glaube, ich muß dringend meine Bildschirmauflösung wieder zurücksetzen oder mir die neue Brille aufsetzen, die ich seit vorgestern habe

            grüßchens

            Christoph S.

            --
            SELF-TREFFEN 2002
            http://www.rtbg.de/selftreffen/
            http://www.megpalffy.org/temp/penneninhh.html

  3. Hi Dmitri,

    Ich will zwei DIVs nebeneinander postieren. Folgenden Code habe ich:

    <div style="width:300px; margin:0px 20px 0px 0px; padding:0px; float:left;>

    ^
    Hier fehlt ein " Oder ist das nur ein Tippfehler?

    <a href="link1.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link1</a>
    <p>Beschreibung des Links...</p>
    <br />
    <a href="link2.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link2</a>
    <p>Beschreibung des zweiten Links...</p>

    Das könntest du einfacher über eine Klasse lösen, wenn du der Navigation noch eine id namens "navi" verpasst:

    #navi a { ... }

    spart die redundanten Style-Definitionen.

    Bei mir macht der M$IE jedenfalls das, was er soll. Kannst du die Seite mal hochladen?

    Bitte keine Lösung mit Tabellen. Ich bin gerade dabei, von Tabellen wegzukommen.

    You got style, babe :)

    LG Orlando

    --
    SELF-TREFFEN 2002
    http://www.rtbg.de/selftreffen/
    http://www.megpalffy.org/temp/penneninhh.html

    1. Hi Dmitri,

      Ich will zwei DIVs nebeneinander postieren. Folgenden Code habe ich:

      <div style="width:300px; margin:0px 20px 0px 0px; padding:0px; float:left;>

      Die Seite habe ich auf einem anderen PC, und den Quelltext habe ich "skizziert". Ist ein Tippfehler.

      ^
      Hier fehlt ein " Oder ist das nur ein Tippfehler?

      <a href="link1.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link1</a>
      <p>Beschreibung des Links...</p>
      <br />
      <a href="link2.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link2</a>
      <p>Beschreibung des zweiten Links...</p>

      Das könntest du einfacher über eine Klasse lösen, wenn du der Navigation noch eine id namens "navi" verpasst:

      #navi a { ... }

      spart die redundanten Style-Definitionen.

      hmmm ... das ist mir fremd. Ich kenne Klassen nur mit .navi und dann mit <a class="navi">Link</a>. Gehört es zum CSS Standard?
      Ich wollte es auf meine Weise lösen.

      Bei mir macht der M$IE jedenfalls das, was er soll. Kannst du die Seite mal hochladen?

      Hast du den M$IE6? Ich "benutze" den 5er [zu gross der Mist, um den herunterzuladen]. Hochladen kann ich sie nicht, weil die alte Domain nicht mehr existiert. Ich will den Namen ändern, habe aber bis jetzt noch keinen gescheiten gefunden.

      1. Hi,

        <div id="navi">
        <a href="link1.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link1</a>
        <a href="link2.htm" style="display:block; margin:0px; padding:3px; background-color:#EEEEEE; width:300px;">Link2</a>
        </div>

        -> #navi a { ... }

        hmmm ... das ist mir fremd. Ich kenne Klassen nur mit .navi und dann mit <a class="navi">Link</a>. Gehört es zum CSS Standard?

        Sorry, ich meinte ein Individualformat - die Erklärung dazu gibt's hier: http://selfhtml.teamone.de/css/formate/zentrale.htm#individualformate Das spart bei umfangreichen Definitionen viel Quelltext und ist natürlich Standard.

        Bei mir macht der M$IE jedenfalls das, was er soll.

        Hast du den M$IE6?

        Ich gestehe.

        Kannst du die Seite mal hochladen?

        Hochladen kann ich sie nicht, weil die alte Domain nicht mehr existiert.

        Hm, das erschwert natürlich die Fehlersuche. Kann durchaus sein, dass der M$IE5 einen Bug hat. Hier auch, meine ich ;)

        LG Orlando

        --
        SELF-TREFFEN 2002
        http://www.rtbg.de/selftreffen/
        http://www.megpalffy.org/temp/penneninhh.html

        1. Hi,

          habe den Fehler gefunden. Ich habe ja vorher Tabellendesign gehabt, und habe einen Teil der Tabelle nicht gelöscht. Daher der Fehler.

          MfG Dmitri