Laures: Span objekt erzeugt ungewollten zeilenumbruch

<-- css noob.

span soll ja ein inline objekt sein. nun erzeugt mein browser zwischen 2 von mir geschriebenen spans jedesmal einen zeilenumbruch, den ich da garnicht haben will. hier mal der Code:

<span>
  <div class="bg" style="width:174px;">
   <div class="sidel">
    <div class="sider">
     <div class="botc">
      <div class="botl">
       <div class="botr">
        ###MENU_LINKS###
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </span>
 <span class="bg">
  <div class="topc">
   <div class="sidel">
    <div class="sider">
     <div class="botc">
      <div class="topl">
       <div class="topr">
        <div class="botl">
         <div class="botr">
          <div class="content">
           ###CONTENT###
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </span>
</div>

bitte nicht haun wenn er schlecht ist, um einen rahmen zu erzeuben bei dem die grafiken im hintergrund stehn hatte ich einfach keine bessere idee :(

wie gesagt stehn diese 2 spans in meinem browser immer in 2 unterschiedlichen "zeilen" und das obwohl das span beispiel von selfhtml 100%ig funktioniert. Woran kann das liegen?

Laures

  1. Hi,

    span soll ja ein inline objekt sein.

    Ist es. In HTML sowieso, und in CSS auch, solange Du es nicht aktiv änderst.

    <span>
      <div class="bg" style="width:174px;">

    Da div als HTML-block-Element nicht in einem HTML-inline-Element (span) stehen darf, wird das span implizit vor dem div geschlossen ...

    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. wenn ich also jedes der internen divs durch weitere span ersetze (sollte am ergebnis ja nix ändern) würde mein code wie gewünscht dargestellt werden?

      1. Hi,

        wenn ich also jedes der internen divs durch weitere span ersetze (sollte am ergebnis ja nix ändern) würde mein code wie gewünscht dargestellt werden?

        wie kann so eine Suppe in irgend einer Form "gewünscht" sein? Der Code ist grausamer als ein Tabellenlayout!

        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. Hallihallo!

          Ich habe zwar keine Lösung parat, aber dieses Thema interessiert mich gewaltig:

          Du kennst eine bessere (elegantere, suppenfreie) Möglichkeit, einem Element einen skalierbaren grafischen Rahmen zu geben?
          (Vergleiche: http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm ).
          Ganz ernsthaft: Das soll keine Provokation und auch kein pampiger Kommentar sein, das interessiert mich wirklich. Denn ich dachte bis jetzt, man käme  für diesen gewünschten Effekt nicht um eine solche "Suppe" herum...

          Viele liebe Grüße,
          Der Dicki

          1. Hallo Martin.

            Du kennst eine bessere (elegantere, suppenfreie) Möglichkeit, einem Element einen skalierbaren grafischen Rahmen zu geben?

            Ich bevorzuge die Nutzung von ::before und ::after.

            Einen schönen Donnerstag noch.

            Gruß, Ashura

            --
            <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
            <html><head>
            <title>404 Not Found</title>
            </head><body>
            <h1>Not Found</h1>
            <p>The requested URL /scripts/self_sig.php was not found on this server.</p>
            <hr>
            <address>Apache/2.0.52 Server at download.noctus.net Port 80</address>
            </body></html>
            1. Hallo Ingrid.

              Hallo Martin.

              Ahem, natürlich nicht „Der“ (Martin) sondern „Der“ (Dicki).
              Verzeihung.

              Einen schönen Donnerstag noch.

              Gruß, Ashura

              --
              <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
              <html><head>
              <title>404 Not Found</title>
              </head><body>
              <h1>Not Found</h1>
              <p>The requested URL /scripts/self_sig.php was not found on this server.</p>
              <hr>
              <address>Apache/2.0.52 Server at download.noctus.net Port 80</address>
              </body></html>
              1. Hell-O!

                <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
                <html><head>
                <title>404 Not Found</title>
                </head><body>
                <h1>Not Found</h1>
                <p>The requested URL /scripts/self_sig.php was not found on this server.</p>
                <hr>
                <address>Apache/2.0.52 Server at download.noctus.net Port 80</address>
                </body></html>

                Originelle Signatur, die du da hast, aber geht's nicht ein bisschen kürzer?

                Siech*scnr*fred

                1. Hallo Siechfred.

                  Originelle Signatur, die du da hast, aber geht's nicht ein bisschen kürzer?

                  Sobald all meine Domains wieder da sind, ja.
                  (Frag’ besser nicht, ich weiß selbst keine Antwort.)

                  Einen schönen Donnerstag noch.

                  Gruß, Ashura

                  --
                  *narf*
            2. sobald mein kleiner mozilla das kann bin ich auch voll dafür (denn wie gesagt: ich find die schachtelung auch nich schön...)

              leider scheint 1.7.11 das noch nicht zu unterstützen

              1. Hallo Laures.

                sobald mein kleiner mozilla das kann bin ich auch voll dafür (denn wie gesagt: ich find die schachtelung auch nich schön...)

                leider scheint 1.7.11 das noch nicht zu unterstützen

                Bist du sicher? Mein Mozilla 1.7.12 setzt das beispiel wie gewünscht um.

                Einen schönen Donnerstag noch.

                Gruß, Ashura

                --
                *narf*
                1. es ist toll wieviel so eine kleine stelle ausmachen kann...

                  jedenfalls wird deine beispielseite bei mir ohne die runden ecken und den schatten angezeigt. eigentlich schade, da mir die methode sehr gefallen hätte.

                  1. Hallo Laures.

                    es ist toll wieviel so eine kleine stelle ausmachen kann...

                    Diese Kleinigkeit kann unmöglich Einfluss auf die Rendering-Fähigkeiten der Gecko-Engine haben. Wir verwenden beide die selbe (Gecko 1.7).

                    jedenfalls wird deine beispielseite bei mir ohne die runden ecken und den schatten angezeigt. eigentlich schade, da mir die methode sehr gefallen hätte.

                    Das ist in der Tat verdammt merkwürdig. Ich wüsste aber auch nicht, woran dies liegen sollte. Wird das <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after@title=SELFHTML-Beispiel zu ::before und ::after> bei dir korrekt angezeigt?

                    Einen schönen Donnerstag noch.

                    Gruß, Ashura

                    --
                    *narf*
              2. Hi,

                leider scheint 1.7.11 das noch nicht zu unterstützen

                Dann mußt Du Dein Exemplar verhunzt haben.

                Mein Mozilla 1.7.11 kann das.

                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.
          2. ich hab mal meinen code neu geschrieben und alles einfließen lassen was  so vorgeschlagen wurde:

            da das ganze vom code her etwas länger ist und die grafiken nicht unwichtig sind hier mal das ganze als .rar

            im mozilla sieht alles gut aus, aber im IE werden der linke und rechte rand der ersten schachtelung nicht angezeigt und die dritte schachtelung fehlt ganz... an diesen stellen sieht man den standarthintergrund der seite.

            --
            don't fear the darkness, be a part of it
            (nicht nur kritisieren, lösungen liefern)
            1. kleiner nachtrag: wenn ich das IE fenster sehr schmal mache wird der dritte rahmen doch angezeigt, sobald ich das fenster wieder vergrößere verschwindet er wieder

              --
              don't fear the darkness, be a part of it
              (nicht nur kritisieren, lösungen liefern)
  2. <-- css noob.

    span soll ja ein inline objekt sein. nun erzeugt mein browser zwischen 2 von mir geschriebenen spans jedesmal einen zeilenumbruch, den ich da garnicht haben will. hier mal der Code:

    <span>
      <div class="bg" style="width:174px;">

    ...

    </div>
    </span>

    <span class="bg">
      <div class="topc">

    ...

    </div>
    </span>

    Du weisst, dass ein <div> ein block-Element ist?

    Du hast also zwei Blöcke untereinander, jeder ist von einem <span> umschlossen.

    Und du möchtes die Blöcke nebeneinander?

    div.bg, div.topc {
      display: inline;
      ...
    }

    sollte gehen.

    Kalle

    1. ich glaub ich erklär einfach nochmal was der code eigentlich tun soll:

      die verschachtelten div blöcke erzeugen einen rahmen aus grafiken der sich um den inhalt legt. dabei werden die grafiken als background image eingebunden. ich bin mir zwar bewusst das es sicherlich eine schönere lösung gibt als meine, aber ich hatte keine bessere idee wie ich das realisiere.

      ich möchte jetzt 2 dieser rahmen in der selben zeile nebeneinander. einen für ein seitenmenü und einen für den jeweiligen inhalt.

      1. Hallo Laures

        ich möchte jetzt 2 dieser rahmen in der selben zeile nebeneinander. einen für ein seitenmenü und einen für den jeweiligen inhalt.

        Dann schau dir mal float an, interessant dürfte für dich auch ganz besonders
        CSS-basierte Layouts sein.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!