mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 14:29 Benutzername: Passwort: Auto-Login

Thema: [CSS] ungewollte Umbrüche beim floaten vom 22.05.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] ungewollte Umbrüche beim floaten
Autor Nachricht
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 22.05.2007 10:45
Titel

[CSS] ungewollte Umbrüche beim floaten

 Antworten mit Zitat Zum Seitenanfang
Servus!

Folgende Problematik:
Angennommen ich habe 3 DIV-Container in einem Wrapper. Der Wrapper hat 100% Breite und die Container sind darin positioniert (per float: left).

Nun wird das Browserfenster vom Benutzer soweit verkleinert, dass die DIV's beginnen umzubrechen.
Mir ist klar, dass dies die Eigenschaft von float ist.

Gibt es da eine elegantere Lösung, die den Umbruch verhindert und den Text (wie damals bei Tabellen-Layouts) stehen lässt?

Vielen Dank im Voraus
Mario
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 22.05.2007 10:52
Titel

Antworten mit Zitat Zum Seitenanfang
Sollte der Fall sein.


Code:
div#wrapper {
   width: 900px;
}
div#wrapper div {
   float: left;
   width: 300px;
}

<div id="wrapper">
   <div>Test</div>
   <div>Test</div>
   <div>Test</div>
</div>



Ansonsten zeig doch einfach mal den Quelltext unc CSS.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 22.05.2007 11:28
Titel

Antworten mit Zitat Zum Seitenanfang
m hat geschrieben:
Sollte der Fall sein.


Code:
div#wrapper {
   width: 900px;
}
div#wrapper div {
   float: left;
   width: 300px;
}

<div id="wrapper">
   <div>Test</div>
   <div>Test</div>
   <div>Test</div>
</div>



Ansonsten zeig doch einfach mal den Quelltext unc CSS.


Funktioniert so leider nicht.
Anbei mein Quelltext:

CSS (Auszug)
Code:
Start: 21.05.2007
Letzte Aenderung: 22.05.2007
*/
/* Reset all */
*{
   padding: 0;
   margin: 0;
   border: 0;
}

/* Allgemeines */
body {
   font-size: 12px;
   color:#344a33;
   line-height: 18px;
   background: #f2ecdf;
   font-family: Arial, Helvetica, sans-serif;   
   }

/* Layout */
#wrapper {
   width: 100%;
   }

#header {
   background-image:url(img/header-hintergrund.jpg);
   }

#navi {
   float: left;
   width: 150px;
   height: 575px;
   background-image:url(img/navi-hintergrund.jpg);
   }

#content {
   float: left;
   width: 440px;
   height: 575px;
   padding: 15px 30px 5px 30px;
   }


HTML (Auszug)
Code:
<!-- *** Seitenwrap *** -->
<div id="wrapper">

<!-- *** Kopfbereich inkl. H1 *** -->
<div id="header">
  <a href="index.html"><img src="img/header.jpg" alt="Willkommen im LOC-Tiershop" border="0" /></a></div>
<!-- Ende  header-->
 
<!-- *** Navigation *** -->
<div id="navi">
  navi
</div>
<!-- Ende  navi-->

<!-- *** Beginn Kontentbereich *** -->
<div id="content">Blabla
</div>
<!-- *** Ende Seitenwrap *** -->
</div>


Wichtig ist, dass die Seite immer 100% Breite hat, da das Hintergrundbild im Header immer die volle Breite haben soll.
Ansonsten passt das Layout ja super - nur das umbrechen bei einer zu kleinen Breite des Browserfensters stört mich. Das soll einfach abgeschnitten werden.

Grüße & Danke im Voraus Lächel

Zuletzt bearbeitet von Xaven am Di 22.05.2007 11:30, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 22.05.2007 11:45
Titel

Antworten mit Zitat Zum Seitenanfang
Für die modernen Browser würde das hier schonmal reichen:
#wrapper {
width: 100%;
min-width:650px;
}
  View user's profile Private Nachricht senden
Xaven
Threadersteller

Dabei seit: 26.03.2002
Ort: Motorcity Rüsselsheim
Alter: 41
Geschlecht: Männlich
Verfasst Di 22.05.2007 12:06
Titel

Antworten mit Zitat Zum Seitenanfang
[quote="Raumwurm"]Für die modernen Browser würde das hier schonmal reichen:
Code:
#wrapper {
   width: 100%;
   min-width:650px;
}[/quote]


Das löst mein Problem.

Vielen Dank!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Mark-Korb

Dabei seit: 11.04.2007
Ort: -
Alter: 38
Geschlecht: Männlich
Verfasst Di 22.05.2007 12:21
Titel

Antworten mit Zitat Zum Seitenanfang
[quote="Xaven"]
Raumwurm hat geschrieben:
Für die modernen Browser würde das hier schonmal reichen:
Code:
#wrapper {
   width: 100%;
   min-width:650px;
}[/quote]


Das löst mein Problem.

Vielen Dank!


Teste das aber mit dem IE, ich meine das das erst ab nem patch mit dem 6er ging von der 7er hab ich keinen Plan.
  View user's profile Private Nachricht senden
Butterfliege

Dabei seit: 07.01.2006
Ort: OWL
Alter: 47
Geschlecht: Weiblich
Verfasst Di 22.05.2007 13:06
Titel

Antworten mit Zitat Zum Seitenanfang
Der IE versteht kein min-width, da mußt du schon ein bisschen mehr machen. Aber hier kannst du das gut nachlesen:min-width für IE

Ansonsten solltest Du die Breite für die divs nicht in Pixel, sondern ebenfalls in Prozent angeben.

Zuletzt bearbeitet von Butterfliege am Di 22.05.2007 13:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Probleme mit dem Floaten
Übereinander floaten von Div's
[CSS] Boxen untereinander floaten
[css] div floaten - warum klappts nicht?
CSS floaten nach oben! Möglich?
div - auch nach floaten unten ausrichten
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB