Sven: Bilder ausrichten

Hallo,

ich habe nicht soo viel Ahnung von CSS und komme einfach nicht weiter. Vielleicht findet sich ja hier jemand der mir weiterhelfen kann...
Ich habe folgendes Problem:

Ich habe eine Seite welche 500px breit ist. Darauf soll ein großes 270px Bild im linken Bereich Zentriert angezeigt werden und rechts 3 kleine (90px breit) übereinander an rechten Seitenrand. Der folgende Text soll unter diesen Bildern als neuer Absatz beginnen.

Also etwa so:

########################
#     Überschrift      #
#                      #
#                      #
#     ########     ### #
#     #      #     ### #
#     #      #         #
#     #  Gr. #     ### #
#     # Bild #     ### #
#     #      #         #
#     #      #     ### #
#     ########     ### #
#                      #
#                      #
#         TEXT         #
#                      #
########################

Kann mir einer helfen ich bin am verzweifeln.

Wenn ich die rechten Bilder rechts floaten lasse, stehen sie immer am rechten Seitenrand UNTER dem großen Bild. Wenn ich das große Bild dann links Floate sieht es gut aus, aber dann rutscht der Text von unten hoch.

Wie mache ich sowas???

  1. Hallo,

    Wie mache ich sowas???

    So etwa:

      
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      
    	  
    <html xmlns="http://www.w3.org/1999/xhtml">  
       <head>  
      
    [code lang=css]  
            <style type="text/css">  
                #site {  
                  position:relative;  
                  width:500px;  
    	      background-color:red;  
                }  
    	    #preview {  
                  float: left;  
    	      width:270px;  
                }  
                #thumbs {  
                  float: right;  
    	      width:90px;  
                }  
    	    img {  
    	      display:block;  
    	    }  
            </style>  
    
    
    </head>  
    
    <body>  
    

    <div id="site">
          <h1>HEADLINE</h1>
            <div id="preview">
    <img src="test.jpg" width="270px" height="270px" />
          </div>
          <div id="thumbs">
             <img src="test.jpg" width="90px" height="90px" />
    <img src="test.jpg" width="90px" height="90px" />
    <img src="test.jpg" width="90px" height="90px" />
          </div>
          <div style="clear:both"></div>
          <div class="text">
    <p>
      TextTextTextTextTextTextTextTextTextTextText
    </p>
          </div>
       </div>
    </body>
    </html>
    [/code]

    Müsstes du in allen relevanten Browsern mal testen. Kann nämlich immer sein, dass einer da noch was anders interpretiert. Dann müsste man nochmal handanlegen. Oft aber nicht wildes

    1. Lieber Georg,

      DIV-Suppe? Wem's schmeckt...

      <body>

      <div id="site">
            <h1>HEADLINE</h1><!-- bis hierher keine Einwände -->
            <div id="preview"><!-- Warum DIV und nicht P? -->
      <img src="test.jpg" width="270px" height="270px" />
            </div>
            <div id="thumbs"><!-- Warum DIV und nicht P oder gar UL? -->
               <img src="test.jpg" width="90px" height="90px" />
      <img src="test.jpg" width="90px" height="90px" />
      <img src="test.jpg" width="90px" height="90px" />
            </div>
            <div style="clear:both"></div><!-- das hättest Du auch innerhalb des vorhergehenden Blockelements mit einem SPAN erreicht! -->
            <div class="text"><!-- kein guter Klassenname - Welche Bedeutung hat dieses Element? -->
      <p>
        TextTextTextTextTextTextTextTextTextTextText
      </p>
            </div>
         </div>
      </body>

        
      Liebe Grüße,  
        
      Felix Riesterer.
      
      -- 
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      
      1. Lieber Georg,

          
        <div id="site">  
          
        
        >               <div id="preview"><!-- Weil ich p nur für Text verwenden mag! -->  
          
        
        >               <div id="thumbs"><!-- ul verwende ich eher für navs und kein lust die jetzt zu formatieren  -->  
          
        
        >               <div style="clear:both"></div><!-- Div junky! -->  
        >               <div class="text"><!-- sollte nur textbereich kenntlich machen sonst unsinnig p hätte auch völlig gereicht natürlich-->  
          
        
        

        Ich wollte auch kein Contest jetzt gewinnen sondern nur schnell eine hilfestellung geben

        1. Verdammt, habe versehentlich ganz oben auf meinen Thread geantwortet da ich das Forum hier nicht kenne.... Bitte oben lesen. Danke!

      2. Lieber Georg,

        DIV-Suppe? Wem's schmeckt...

        ~~~html
        

        <body>

        <div id="site">
              <h1>HEADLINE</h1><!-- bis hierher keine Einwände -->
              <div id="preview"><!-- Warum DIV und nicht P? -->
        <img src="test.jpg" width="270px" height="270px" />
              </div>
              <div id="thumbs"><!-- Warum DIV und nicht P oder gar UL? -->
                 <img src="test.jpg" width="90px" height="90px" />
        <img src="test.jpg" width="90px" height="90px" />
        <img src="test.jpg" width="90px" height="90px" />
              </div>
              <div style="clear:both"></div><!-- das hättest Du auch innerhalb des vorhergehenden Blockelements mit einem SPAN erreicht! -->
              <div class="text"><!-- kein guter Klassenname - Welche Bedeutung hat dieses Element? -->
        <p>
          TextTextTextTextTextTextTextTextTextTextText
        </p>
              </div>
           </div>
        </body>

        
        >   
        > Liebe Grüße,  
        >   
        > Felix Riesterer.  
          
        Na wenigstens versucht er mit seiner "Div-Suppe" zu helfen!  
        Du treibst dich nur rum und kritisierst ohne im Gegenzug einen besseren Vorschlag zu machen. Es gibt ja es ne schicke Bezeichnung für so Leute, aber lassen wir das....  
          
          
        Wie gesagt nochmal allen die Tips gegeben haben einen herzlichen Dank, auch wenns vielleicht nicht perfekt sein mag, solange es mich weiterbringt ist es hilfreich, Danke!
        
    2. @@Georg:

      nuqneH

      <div id="site">

      Das div ist zum einen völlig überflüssig, zum anderen unsinnig benannt: in einem div kann keine Website stecken.

      Qapla'

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

        schon KLAR.

        Ich habe eine Seite welche 500px breit ist....

        Also hab ich mir gedacht... legste die einfach in ein Div 500px breit und nennst es site.....

        So und nun helft dem fragenden statt auf meinem Vorschlag rumzueiern

        1. @@Georg:

          nuqneH

          Also hab ich mir gedacht... legste die einfach in ein Div […]

          Eben dieser Gedanke ist falsch, da schon ausreichend Elemente vorhanden sind und ein zusätzliches div nicht notwendig ist.

          […] und nennst es site.....

          Auch dieser Gedanke ist falsch, da Site nicht Seite bedeutet.

          So und nun helft dem fragenden statt auf meinem Vorschlag rumzueiern

          Den Fragenden nicht in die Sackgasse falscher Antworten rennen zu lassen, ist auch Hilfe.

          Qapla'

          --
          Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
          (Mark Twain)
          1. Eben dieser Gedanke ist falsch, da schon ausreichend Elemente vorhanden sind und ein zusätzliches div nicht notwendig ist.

            Mein Gott, du bist aber auch päpstlicher als der Papst.

            Ob ein zusätzliches Element nötig ist, sieht man im Einzelfall. Ich würde immer mit einem gesonderten div arbeiten, und gute Gründe gibt es auch dafür: In der Praxis verbessert es die Wartbarkeit, gekapselte, autarke HTML/CSS-Module zu schreiben und Aufgaben zu trennen. Das gilt eigentlich für sämtliche Teile eines Layouts.

            Den body zu stylen ist keine gute Idee, wenn das Grundgerüst (html-head-body) gleich bleiben kann, aber die body-Inhalte sich unterscheiden. Das passiert bei den Sites, an denen ich arbeite, durchaus häufig, weil Dokument-Gerüst und Module in verschiedenen Templates verteilt sind. Formatiert man den body, so müssen sich die Regeln korrekt überschreiben, wenn man mal ein anderes Layout auf oberster Ebene braucht. Oder man lädt Stylesheets fallweise, was das Zusammenfassen der Stylesheets verhindert.t wird.

            Natürlich kann man darum herumcoden, aber wieso sollte ich ohne Zwang die Abgeschlossenheit eines Moduls aufgeben. Dann muss das Modul immer an bestimmter Stelle stehen, hier ganz oben im Dokument, und es kann nur ein solches Modul gleichzeitig verwendet werden. Wünschenswert wäre hier eine Flexibilität.

            Meine Erfahrung zeigt, dass solches »Festzurren« häufig zu Problemen führt, denn das ist nachträglich schwer änderbar. Das gilt auch für den obersten Layout-Container. Wenn ich dem etwas voran- oder nachstellen will oder ihn wrappen will, wird es schwierig, wenn der body formatiert wird. Dass nachträglich ein Teaser, eine Werbung oder ein Footer eingebaut werden muss, welche aus dem Rest-Layout herausfallen, passiert durchaus häufig.

            Mathias

            1. @@molily:

              nuqneH

              Den body zu stylen ist keine gute Idee, wenn das Grundgerüst (html-head-body) gleich bleiben kann, aber die body-Inhalte sich unterscheiden. […] Formatiert man den body, so müssen sich die Regeln korrekt überschreiben, wenn man mal ein anderes Layout auf oberster Ebene braucht.

              Das hört sich eher nach sinvollem Einsatz von @class für body denn nach sinnvollem zusäzlichem div-Element an.

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. Den body zu stylen ist keine gute Idee, wenn das Grundgerüst (html-head-body) gleich bleiben kann, aber die body-Inhalte sich unterscheiden. […] Formatiert man den body, so müssen sich die Regeln korrekt überschreiben, wenn man mal ein anderes Layout auf oberster Ebene braucht.

                Das hört sich eher nach sinvollem Einsatz von @class für body denn nach sinnvollem zusäzlichem div-Element an.

                Dass ein Modul nicht irgendwelche gesetzten Klasse über ihm erfordert, ist doch der ganze Sinn von Modularisierung und Kapselung. Klassen über ihm sind höchstens als Kontextinformationen/Konfiguration sinnvoll, um dann aber Elemente im Modul zu formatieren, also bspw. .parent-class element-in-module {}.

                Es bliebe das Problem, dass ich nicht bspw. einen 100%-Teaser einfügen kann, wenn ich mit dem body die gesamte Seite zentriere. Den body anzufassen, obwohl er nichts damit zu tun hat, ist in jedem Fall etwas, was sich durch Modularisierung vermeiden lässt.

                Der body ist vergleichbar mit dem globalen Objekt in JavaScript, von dessen »Verpestung« man mittlerweile abgesehen hat. Die Annahme, dass es immer nur ein Setup auf oberster Ebene gibt, hat sich als falsch erwiesen. Heutzutage muss man nicht mehr nicht alles auf oberster Ebene umkrempeln, wenn man abgeschlossene Teile auswechselt.

                Mathias

                1. @@molily:

                  nuqneH

                  Dass ein Modul nicht irgendwelche gesetzten Klasse über ihm erfordert, ist doch der ganze Sinn von Modularisierung und Kapselung.

                  Ich meinte auch eher, dass das (jeweils eine!) Modul auch die <body>- und </body>-Tags generiert.

                  Wenn natürlich mehrere Module gleichzeitig in die Seite eingebunden werden (könnten), müssten die <body>- und </body>-Tags außehalb von diesen generiert werden.

                  Dann generiert aber jedes Modul seinen eigenen Container und es ist nicht ein div Einzelkind des body.

                  Es bliebe das Problem, dass ich nicht bspw. einen 100%-Teaser einfügen kann, wenn ich mit dem body die gesamte Seite zentriere.

                  Wenn der eine feste Höhe hat, könnte man ihn absolut positionieren.

                  Der body ist vergleichbar mit dem globalen Objekt in JavaScript

                  Wenn man Apfel-Birnen-Kompott mag, ja.

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
        2. Also ich habs schon verstanden, danke Dir!

  2. Hallo,

    Hier nochmal eine Divarme variante. FTW

      
            <style type="text/css">  
                #imgArea {  
                  position:relative;  
    			  width:500px;  
    			  background-color:red;  
                }  
    			 #preview {  
                  float: left;  
    			  width:270px;  
    			  margin : 0px 0px 0px 0px;  
    			  padding : 0px 0px 0px 0px;  
    			  
                }  
    			 #thumbs {  
                   float: right;  
    			  width:90px;  
    			  margin : 0px 0px 0px 0px;  
    			  padding : 0px 0px 0px 0px;  
    			  list-style : none;  
                }  
    			img {  
    				display:block;  
    			}  
            </style>  
    
    
      
    <div id="imgArea">  
      <h1>HEADLINE</h1>  
      <p id="preview"><img src="test.jpg" width="270px" height="270px" /></p>  
      <ul id="thumbs">  
         <li><img src="test.jpg" width="90px" height="90px" /></li>  
         <li><img src="test.jpg" width="90px" height="90px" /></li>  
         <li><img src="test.jpg" width="90px" height="90px" /></li>  
      </ul>  
      <p style="clear:both">  
         TextTextTextTextTextTextTextTextTextTextText  
      </p>  
    </div>  
    
    
    1. Lieber Georg,

      Hier nochmal eine Divarme variante.

      das ist empfehlenswert!

      FTW

      Was bedeutet das? Meinst Du damit "For The Win"?

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Lieber Felix,

        FTW

        Was bedeutet das? Meinst Du damit "For The Win"?

        Ja. Weil diese Variante anscheinend mehr Annerkennung findet und ich es somit geschafft habe jemandem evtl. weiterzuhelfen ohne das jeder 2. etwas anders machen würde ;)

  3. Also die Div Variante ist mir fast am liebsten ;=)

    Problem ist das ganze ist auf ner Seite im CMS Drupal und ich habe vorgegebenen Quelltext (es sei denn ich treibe einen riesen Aufwand, den ich vermeiden will). Daher muss ich möglichst die vorhandenen Div's mit CSS stylen um das hinzubekommen.

    Das das große Bild nicht links floaten soll sondern MITTIG im linken Bereich (also zwischen linkem Rand und den rechts ausgerichteten Bildern) ist rübergekommen oder?
    Ich habe nämlich eben beim groben durchsehen eurer Vorschläge (aus Zeitmangel muss ich morgen testen) den EIndruck gehabt dass das links floatet, aber vielleicht versteh ich nur den Quelltext so auf die Schnelle nicht wirklich. Wie gesagt ich teste morgen mal genauer.

    Auf jeden Fall schonmal vielen Dank allen die Tips gegeben haben (und nicht rumstreiten bitte ;=)

    Hier mal der Auszug aus dem Drupal Quelltext den ich stylen will/muss:

    (Die IMG und A Tags haben auch je eine ID oder style den man verwenden kann. Ich hoffe ich hab beim Editieren nicht versehentlich eben ne Klammer zuviel weggelöscht, aber darum gehts ja auch nicht)

      
    <div class="field field-type-filefield field-field-productpicture">  
        <div class="field-items">  
                <div class="field-item odd">  
                        <a href="BILD_GROSS">  
    			<img src="BILD_GROSS">  
    		    </a>  
    	    </div>  
            </div>  
    </div>  
      
    <div class="TEXT-DIV"><p>...</p>  
    </div>  
    <div class="field field-type-filefield field-field-productpicture2">  
        <div class="field-items">  
                <div class="field-item odd">  
                        <a href="BILD_KLEIN1">  
    			<img src="BILD_KLEIN1">  
    		    </a>  
    	    </div>  
                <div class="field-item even">  
                        <a href="BILD_KLEIN2">  
    			<img src="BILD_KLEIN2">  
    		    </a>  
    	    </div>  
                <div class="field-item odd">  
                        <a href="BILD_KLEIN3">  
    			<img src="BILD_KLEIN3">  
    		    </a>  
    	    </div>  
        </div>  
    </div>  
    
    
    1. Problem ist das ganze ist auf ner Seite im CMS Drupal und ich habe vorgegebenen Quelltext (es sei denn ich treibe einen riesen Aufwand, den ich vermeiden will). Daher muss ich möglichst die vorhandenen Div's mit CSS stylen um das hinzubekommen.

      Du kannst nicht beliebig gegebenen HTML-Code beliebig mit CSS formatieren. Das (einfache) Arbeiten mit float benötigt zumeist eine bestimmte Codereihenfolge.

      Das das große Bild nicht links floaten soll sondern MITTIG im linken Bereich (also zwischen linkem Rand und den rechts ausgerichteten Bildern) ist rübergekommen oder?

      Bitte beschäftige dich doch einmal mit den einfachsten CSS-Layout-Tutorials. Da werden solche Fragen geklärt.
      Wenn es nicht links floaten soll, dann lass ein Element links floaten, welches die Gesamtbreite der linken Spalte hat und bringe darin ein zentriertes Element unter, welches weniger breit ist.

      <div class="field field-type-filefield field-field-productpicture">
          <div class="field-items">
                  <div class="field-item odd">
                          <a href="BILD_GROSS">
      <img src="BILD_GROSS">
          </a>
          </div>
              </div>
      </div>

      <div class="TEXT-DIV"><p>...</p>
      </div>
      <div class="field field-type-filefield field-field-productpicture2">
          <div class="field-items">
                  <div class="field-item odd">
                          <a href="BILD_KLEIN1">
      <img src="BILD_KLEIN1">
          </a>
          </div>
                  <div class="field-item even">
                          <a href="BILD_KLEIN2">
      <img src="BILD_KLEIN2">
          </a>
          </div>
                  <div class="field-item odd">
                          <a href="BILD_KLEIN3">
      <img src="BILD_KLEIN3">
          </a>
          </div>
          </div>
      </div>

        
      Mit der Codereihenfolge kannst du nicht mit Floats die gewünschte Darstellung erreichen. Vielleicht mit position:absolute. Auch dazu findest du viele Tutorials. Hier bei SELFHTML oder anderswo.  
        
      Mathias
      
    2. Nachtrag:

      Ich kann übrigens recht einfach die DIV Tags der Bilder bzw. vom Text hin und her schieben, so dass z.B. die ganzen Bilder hintereinander liegen falls es das leichter macht.

      1. Ich kann übrigens recht einfach die DIV Tags der Bilder bzw. vom Text hin und her schieben, so dass z.B. die ganzen Bilder hintereinander liegen falls es das leichter macht.

        Dann sollte es recht einfach sein, die Reihenfolge so zu ändern, dass sie der in den geposteten Beispielen entspricht, oder?

        Mathias

        1. Ich kann übrigens recht einfach die DIV Tags der Bilder bzw. vom Text hin und her schieben, so dass z.B. die ganzen Bilder hintereinander liegen falls es das leichter macht.

          Dann sollte es recht einfach sein, die Reihenfolge so zu ändern, dass sie der in den geposteten Beispielen entspricht, oder?

          Mathias

          Ja, davon gehe ich aus. Ich glaube auch durch eure Hilfe bekomme ich es nachher hin, werde dann mal Feedback geben.

          1. Ich kann übrigens recht einfach die DIV Tags der Bilder bzw. vom Text hin und her schieben, so dass z.B. die ganzen Bilder hintereinander liegen falls es das leichter macht.

            Dann sollte es recht einfach sein, die Reihenfolge so zu ändern, dass sie der in den geposteten Beispielen entspricht, oder?

            Mathias

            Ja, davon gehe ich aus. Ich glaube auch durch eure Hilfe bekomme ich es nachher hin, werde dann mal Feedback geben.

            Habs hinbekommen, vielen Dank allen Helfern! Wenn man das PRinzip verstanden hat ist es auch nicht wirklich schwer, aber vorher wusste ich garnicht wie man sowas angehen sollte. Vielen Dank!

    3. Lieber Sven,

      Also die Div Variante ist mir fast am liebsten ;=)

      das kann nur dann der Fall sein, wenn Du zu wenig Erfahrung hast. Du musst unsere Ratschläge nicht berücksichtigen, Du darfst Dir aber versichert sein, dass sie ihre Begründungen haben. Die Erfahrung, die Dir vielleicht (noch) fehlt, haben andere längst gesammelt. Ob Du nun darauf hörst, oder mangels Kompetenz stur bei Deinem ursprünglichen Ansatz bleibst, ist selbstverständlich Deine freie Entscheidung. Aber warum fragst Du dann hier nach?

      Problem ist das ganze ist auf ner Seite im CMS Drupal und ich habe vorgegebenen Quelltext (es sei denn ich treibe einen riesen Aufwand, den ich vermeiden will).

      Du hast also ein übel konfiguriertes System. Anstatt das Übel an der Wurzel zu packen willst Du lieber dieses Übel weiter pflegen? Klingt nach Lernverweigerung...

      Daher muss ich möglichst die vorhandenen Div's mit CSS stylen um das hinzubekommen.

      Irrtum. Aber Du musst mir das nicht glauben.

      Ich habe nämlich eben beim groben durchsehen eurer Vorschläge (aus Zeitmangel muss ich morgen testen) den EIndruck gehabt dass [...]

      Das ist das mieseste Dankeschön, welches Du freiwilligen Helfern machen kannst. Leute hier opfern Dir ihre Freizeit, um für Dich Probleme zu lösen. Als Dank hast Du dann noch nicht einmal genügend Zeit, die Dir erarbeiteten Lösungen genauestens zu studieren...?! Na, das nenn ich doch mal die feine Englische Art. Hoffentlich hast Du morgen nicht nur "Zeit zum Testen", sondern auch Zeit zum Dazulernen, um die Dir gemachten Angebote nicht einfach in die Tonne zu treten!

      Liebe Grüße,

      Felix Riesterer.

      --
      ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      1. Om nah hoo pez nyeetz, Felix Riesterer!

        ... vielleicht auch mangels Kompetenz:

        Problem ist das ganze ist auf ner Seite im CMS Drupal und ich habe vorgegebenen Quelltext (es sei denn ich treibe einen riesen Aufwand, den ich vermeiden will).

        Du hast also ein übel konfiguriertes System. Anstatt das Übel an der Wurzel zu packen willst Du lieber dieses Übel weiter pflegen? Klingt nach Lernverweigerung...

        Daher muss ich möglichst die vorhandenen Div's mit CSS stylen um das hinzubekommen.

        Irrtum. Aber Du musst mir das nicht glauben.

        Eine Vielzahl von CMS erzeugen grausiges HTML und setzen CSS-Formatierungen durch meist nicht notwendige Klassen oder IDs um. Wenn man also auf das CMS angewiesen ist, ist der Vorwurf der Lernverweigerung übertrieben.

        Matthias

        --
        Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Lieber Matthias Apsel,

          Eine Vielzahl von CMS erzeugen grausiges HTML und setzen CSS-Formatierungen durch meist nicht notwendige Klassen oder IDs um.

          in den allermeisten Fällen (und auch bei Drupal AFAIR) wird das HTML mittels Templates erzeugt, und die lassen sich sehr gut ohne DIV-Suppe gestalten.

          Wenn man also auf das CMS angewiesen ist, ist der Vorwurf der Lernverweigerung übertrieben.

          Nur, wenn das CMS keine Templates hat, bzw. der "grausige Code" hart kodiert ist. Aber wie gesagt, bei Drupal ist das meines Wissens nicht so.

          Liebe Grüße,

          Felix Riesterer.

          --
          ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
      2. Lieber Sven,

        Also die Div Variante ist mir fast am liebsten ;=)

        das kann nur dann der Fall sein, wenn Du zu wenig Erfahrung hast. Du musst unsere Ratschläge nicht berücksichtigen, Du darfst Dir aber versichert sein, dass sie ihre Begründungen haben. Die Erfahrung, die Dir vielleicht (noch) fehlt, haben andere längst gesammelt. Ob Du nun darauf hörst, oder mangels Kompetenz stur bei Deinem ursprünglichen Ansatz bleibst, ist selbstverständlich Deine freie Entscheidung. Aber warum fragst Du dann hier nach?

        Also das stimmt sicher habe ich nicht die Erfahrung wie Ihr, sonst würde ich ja nicht fragen.

        Problem ist das ganze ist auf ner Seite im CMS Drupal und ich habe vorgegebenen Quelltext (es sei denn ich treibe einen riesen Aufwand, den ich vermeiden will).

        Du hast also ein übel konfiguriertes System. Anstatt das Übel an der Wurzel zu packen willst Du lieber dieses Übel weiter pflegen? Klingt nach Lernverweigerung...

        Wieso ist Drupal übel? Es ist meiner MEinung nach genial, auch wenn es einige ziemliche Schwachstellen gibt meiner MEinung nach. Aber ich werde ganz sicher nicht wegen einer einzigen Sache eine ganze Website mit einem anderen System neu erstellen.

        Daher muss ich möglichst die vorhandenen Div's mit CSS stylen um das hinzubekommen.

        Irrtum. Aber Du musst mir das nicht glauben.

        Ja ich weiss dass man mit Drupal Templates erstellen kann, aber da ich damit wenig Erfahrung habe und sehr unter Zeitdruck bin, da ich die Website nur zusätzlich mache habe ich keine Chance das auf die Schnelle zu lernen.

        Ich habe nämlich eben beim groben durchsehen eurer Vorschläge (aus Zeitmangel muss ich morgen testen) den EIndruck gehabt dass [...]

        Das ist das mieseste Dankeschön, welches Du freiwilligen Helfern machen kannst. Leute hier opfern Dir ihre Freizeit, um für Dich Probleme zu lösen. Als Dank hast Du dann noch nicht einmal genügend Zeit, die Dir erarbeiteten Lösungen genauestens zu studieren...?! Na, das nenn ich doch mal die feine Englische Art. Hoffentlich hast Du morgen nicht nur "Zeit zum Testen", sondern auch Zeit zum Dazulernen, um die Dir gemachten Angebote nicht einfach in die Tonne zu treten!

        Mein Gott! Was zickst Du mich so an? Ist das hier der übliche Umgangston? Grausig!
        Ich habe gestern lediglich nach einem 12h Arbeitstag vor Feierabend als ich auf dem Sprung war schnell auf die Antworten geschaut und hatte keine Zeit weil ich los musste und mir das daher heute genauer durchlesen wollte.
        Ich wollte lediglich schnell ergänzen was ich vergessen hatte und mir gerade einfiel und ich habe mich auch bedankt.
        Wo da dann der Grund ist mich anzugehen als sei ich ein Massenmörder ist mir nicht ganz klar.

        1. Nachtrag:
          Was ist denn an den Div's so nachteilig, dass Du die so verdammst? Ich hatte damit bisher weniger Probleme als mit Tabellen oder ähnlichem (wobei ich nochmal sagen muss, dass ich nur nebenbei vor mich hin programmiere).

          1. Hallo,

            Was ist denn an den Div's so nachteilig, dass Du die so verdammst?

            das kommt immer drauf an, wie und wie zahlreich man sie einsetzt. Gegen den sinnvollen Gebrauch von div-Elementen spricht natürlich nichts: Sie sind dafür gedacht, andere Elemente zu einem Block zu gruppieren, wenn die Dokumentstruktur nicht schon ein anderes, besser geeignetes blockbildendes Element enthält.

            Wenn ein div-Element beispielsweise nur ein einziges Kindelement enthält (z.B. ein Bild, eine Überschrift oder ein ul), ist das ein starkes Indiz dafür, dass das div-Element unnötig ist. Ebenso div-Elemente, die anhand eines Klassennamens oder einer ID (ggf. auch an der Dokumentstruktur) erkennen lassen, dass sie eigentlich eine Überschrift sein wollen.
            Und wenn ich HTML-Code anschaue und mir auf den ersten Blick überwiegend div-Elemente ins Auge springen, zweifle ich deren Sinnhaftigkeit auch an. Das kann man meistens sinnvoller strukturieren.

            Ich hatte damit bisher weniger Probleme als mit Tabellen oder ähnlichem

            Das eine hat mit dem anderen nichts zu tun.
            "Ich hatte mit Socken bisher weniger Probleme als mit Handschuhen."

            (wobei ich nochmal sagen muss, dass ich nur nebenbei vor mich hin programmiere).

            Weder HTML noch CSS sind Programmiersprachen, der Begriff "programmieren" ist hier also fehl am Platz. Es sei denn, du meinst eher Javascript oder PHP.

            So long,
             Martin

            --
            Ich habe gerade erfahren, dass Tante Frieda gestorben ist. Der Tod hat sie im Schlaf ereilt. - Schrecklich. Dann weiß sie es also noch gar nicht?
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Hi,

              Was ist denn an den Div's so nachteilig, dass Du die so verdammst?

              ich stelle gerade fest, dass ich vor lauter Für und Wider die Antwort auf die eigentliche Frage schuldig geblieben bin. ;-)

              Der Nachteil des übertriebenen Gebrauchs von div- oder span-Elementen ist, dass sie den Quellcode aufblähen, ihn unübersichtlich machen, ohne aber Information über die wirkliche Struktur des Dokuments beizusteuern. Sie sind neutrale, d.h. aussagefreie Containerelemente im Gegensatz zu beispielsweise ol/ul, h1..h6, p, fieldset oder label. Sogar die Elemente, die Tabellen bilden (also table, thead, tbody, tfoot, tr, th, td) sind -wenn es sich *wirklich* um eine Tabelle handelt- aussagekräftiger und damit sinnvoller, als Tabellen mit generischen Elementen und CSS nachzubauen.

              Daher ist es vernünftig, die Dokumentstruktur so gut wie möglich mit den zur Verfügung stehenden speziellen Elementen abzubilden, und die Verwendung von neutralen gruppierenden Elementen wie div oder span eher als Ausnahmefall zu sehen. Damit wird der Quellcode nicht nur leichter verarbeitbar, sondern auch übersichtlicher und leichter lesbar.

              So long,
               Martin

              --
              Zwei Kumpels sitzen vor dem Computer. "Welche Suchmaschine beutzt du eigentlich meistens?" - "Prima Vera." - "Hmm, kenn' ich gar nicht." Dann geht die Tür auf: "Schatz ich habe deine Sonnenbrille wiedergefunden!" - "Prima, Vera!"
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. Hurraaa!

                Habs so wie gewünscht hinbekommen, vielen Dank allen die Tips gegeben haben!