Float oder nicht Float

d0ne · 05.04.2010, 18:20

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

ChrisB · 05.04.2010, 18:33

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

halskrause · 05.04.2010, 19:25

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

PHP-Code:

  #rahmen{
    width:800px;
}
.produkte {
    width: 400px;
    height: 200px;
    float:left;
}
.produktBild {
    width: 200px;
    float:left;
}
.produktBeschreibung {
        width: 200px;
        font-size: 12px;
        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>

d0ne · 07.04.2010, 12:00

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

halskrause · 07.04.2010, 17:24

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?

d0ne · 08.04.2010, 08:46

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

halskrause · 08.04.2010, 19:40

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

nikosch · 08.04.2010, 21:05

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

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] DIV Boxen fest platzieren durch float	abdullah	HTML, Usability und Barrierefreiheit	6	27.02.2010 23:49
SQL- Dezimal und Float Formatierung	aha_01	Datenbanken	4	08.01.2010 11:12
[Erledigt] Typkonvertierung float zu double	Felix	PHP Tipps 2008	4	05.08.2008 16:14
Bereich um einen float left und float right Bereich	andrew22	HTML, Usability und Barrierefreiheit	8	27.02.2007 18:27
Float für Fortgeschrittene	axelnes	HTML, Usability und Barrierefreiheit	5	12.04.2006 10:29
Float bei zwei DIVs		HTML, Usability und Barrierefreiheit	14	29.01.2006 10:54
[Erledigt] arges float Problem		HTML, Usability und Barrierefreiheit	9	30.04.2005 14:31
CSS: 2 Spalten á 50% ohne float		HTML, Usability und Barrierefreiheit	2	31.03.2005 14:37
float: right; hängt unten raus		HTML, Usability und Barrierefreiheit	6	31.03.2005 14:17
$_GET['var1'] prüfen ob Float		PHP Tipps 2005	4	17.02.2005 17:57
float oder string?		PHP Tipps 2005	2	28.01.2005 17:38
Float mit bestimmter Länge ausgeben		PHP Tipps 2005	2	08.01.2005 19:41
CSS: Probleme mit float:!!	18inch	HTML, Usability und Barrierefreiheit	1	30.12.2004 13:55
float in Mozilla	tikal	HTML, Usability und Barrierefreiheit	2	15.12.2004 15:37

05.04.2010, 18:20
d0ne Benutzer Registriert seit: 21.02.2010 Beiträge: 70 PHP-Kenntnisse: Fortgeschritten	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


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.04.2010, 18:33
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Als Einführung ins Thema Umgang mit Float empfehle ich: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

05.04.2010, 19:25
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Du brauchst float in float. Hier ein Beispiel, was funktionieren müsste... PHP-Code: #rahmen{ width:800px; } .produkte { width: 400px; height: 200px; float:left; } .produktBild { width: 200px; float:left; } .produktBeschreibung { width: 200px; font-size: 12px; 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>

07.04.2010, 12:00
d0ne Benutzer Registriert seit: 21.02.2010 Beiträge: 70 PHP-Kenntnisse: Fortgeschritten	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

07.04.2010, 17:24
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	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?

08.04.2010, 08:46
d0ne Benutzer Registriert seit: 21.02.2010 Beiträge: 70 PHP-Kenntnisse: Fortgeschritten	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

08.04.2010, 19:40
halskrause Erfahrener Benutzer Registriert seit: 29.08.2008 Beiträge: 777	Super Tool. Wenn man bedenkt, dass ich mit IE <= 6 am meisten Probleme habe, und es nicht mal testen konnte...

08.04.2010, 21:05
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Also kleiner IE6 solltest Du nun wirlich nicht mehr testen. Man entwickelt ja auch nicht für Lynx oder Netscape 3. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --