Ankündigung

Einklappen
Keine Ankündigung bisher.

Float oder nicht Float

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Float oder nicht Float

    Hallo,

    ich habe ein Problem bei dem "designen" einer Webseite. Es geht darum, (vier) verschiedene Produkte anzubieten. Es sollen immer zwei neben einander angezeigt werden. Das was anzeigt werden soll, ist ein Bild und ein Text (wahrscheinlich eine Liste). Im Moment soll das Bild links und der Text rechts sein, aber das soll sich auch schnell ändern lassen.

    Jetzt ist die Frage, wie bekomme ich das schön (gut aussehend und valide) hin?
    Ich habe schon einiges mit Float probiert, aber zum einen habe ich Float noch nicht ganz verstanden - werde mich da mal einlesen müssen, wenn jemand einen guten Link hat ... - und zum anderen bin ich mir nicht sicher, ob "floaten" wirklich richtig ist!? Ich war 'mal der Meinung, dass das floaten nur für das nächste Element gilt, aber das scheint ja nicht ganz richtig zu sein...

    Ich wäre froh, wenn mir jemand helfen kann - bevor ich das irgendwie mit Tabellen bastel ^^ - ich hoffe ich habe alle relevanten Infos geschrieben!

    mfg
    d0ne


  • #2
    Als Einführung ins Thema Umgang mit Float empfehle ich:
    http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

    Kommentar


    • #3
      Du brauchst float in float.
      Hier ein Beispiel, was funktionieren müsste...

      PHP-Code:
      #rahmen{
          
      width:800px;
      }
      .
      produkte {
          
      width400px;
          
      height200px;
          
      float:left;
      }
      .
      produktBild {
          
      width200px;
          
      float:left;
      }
      .
      produktBeschreibung {
              
      width200px;
              
      font-size12px;
              
      float:left;    
      }

      // ------------------------------

      <body>
      <
      div id="rahmen">

          <
      div class="produkte">
              <
      div class="produktBild"></div>
              <
      div class="produktBeschreibung">BeispielText</div>
          </
      div>
          
          <
      div class="produkte">
              <
      div class="produktBild"></div>
              <
      div class="produktBeschreibung">BeispielText</div>
          </
      div>
        
          
      // kannst hier wiederholen.....
          
      </div>
      </
      body

      Kommentar


      • #4
        So...

        vielen Dank für den Link, ich werde mir das in Kürze durchlesen!

        Der Code hat mir auch weiter geholfen, es ist jetzt "alles so, wie ich es wollte.
        Allerdings hatte ich noch das Problem, dass nach "meinen Produkten" (und damit dem FloatCode) einiges durcheinander kam. DAs habe ich mit
        PHP-Code:
        <div style="clear: left;"></div
        lösen können - vll. braucht das ja mal 'wer!

        mfg & thx
        d0ne

        Kommentar


        • #5
          Hier noch ein Trick, wenn man viel mit floats in floats arbeiten muss.
          Falls irgendein Mutter-Div sich nich von der Grösse einpasst, dann gebe diesem einfach die Eigenschaft "overflow:hidden". Die Grössenanpassung wird dann erzwungen. Funktioniert bei IE 7-8, FF,Chromeund Safari(Windows). IE 6 und Opera konnte ich nicht testen...

          By the way? Kann man eigentlich IE 6 installieren, wenn IE 8 schon vorhanden ist?

          Kommentar


          • #6
            Danke für den Tipp - ich werde mich in nächster Zeit mal in richtig HTML/CSS "weiterbilden" !

            Zu deiner IE Frage, wenn ich mich richtig erinnere ist es zumindest schwer bis ummöglich zwei IEs zu installieren - auch wenn es irgendwelche Tricks gibt. Ich habe das aber zuletzt mit Windows Xp versucht, seit dem benutze ich: My DebugBar | IETester / Browser Compatibility Check for Internet Explorer Versions from 5.5 to 8. Der hat zwar auch ein paar Fehler (Flash, Java ...), aber meistens reicht es zum testen!

            mfg
            d0ne

            Kommentar


            • #7
              Super Tool. Wenn man bedenkt, dass ich mit IE <= 6 am meisten Probleme habe, und es nicht mal testen konnte...

              Kommentar


              • #8
                Also kleiner IE6 solltest Du nun wirlich nicht mehr testen. Man entwickelt ja auch nicht für Lynx oder Netscape 3.
                --

                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                --

                Kommentar

                Lädt...
                X