zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 21.06.2007, 18:40
Gummibärchen-Liebhaber
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2007
Beiträge: 10
Webentwickler Eric befindet sich auf einem aufstrebenden Ast
Ausrufezeichen Probleme mit float

Hallo, ich habe ein Problem.
Auf meiner Seite habe ich ein neues Design angefangen. Dort sollen die Textabsätze jeweils rechts von den Bildern angezeigt werden.
Im Internet Explorer funktioniert das ganz gut. Aber der Firefox machts nicht.
Was kann ich da machen? Das Stylesheet ist folgendermaßen:

Code:
body {
width:760px;
height:100%;
margin:20px auto;
}
.hauptteil {
height:100%;
width:510px;
float:left;
}
.kasten {
margin-top:150px;
height:100%;
width:240px;
float:right;
}
/* hauptteil */
.oben {
height:150px;
width:510px;
}
.unten {
height:100px;
}
.text {
float:right;
height:100%;
}
img {
float:left;
clear:left;
padding:20px;
}
Code:
Und der HTML-Code ist folgender:
<body>
<div class="hauptteil">

<div class="oben"></div>
<div class="inhalt">

<div class="artikel">
<img src="images/no-image.png" height="100px" width="100px" />
<p class="text">
Hier soll ein Absatz erscheinen, der rechts vom Bild steht. Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<div class="artikel">
<img src="images/no-image.png" height="100px" width="100px" />
<p class="text">
Hier soll ein Absatz erscheinen, der rechts vom Bild steht. Außerdem soll das Bild auf der linken Seite genau bündig mit diesem Absatz erscheinen (an der Oberseite). Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</p>
</div>
<br><br><br><br><br><br><br><br>
</div>
<div class="unten">Hier stehen die Partner, Validierung und das Copyright.</div>

</div>


<div class="kasten">
<form action="<?php echo $_SERVER['PHP_SELF']?>" method="get">
<fieldset>
<legend>Aussehen ändern</legend>
<select name="style">
<option value="standard" selected="selected">Standard</option>
<option value="apfel">Apfelgrün</option>
<!--[...usw. ...]-->
</select>
<input class="field" type="submit" value="Switch" />
</fieldset>
</form>
</div>


</body>
Ich hoffe, mir kann jemand helfen. Ich will keine Breite für .text angeben, da ich später Bilder unterschiedlicher Größe einfügen werde und da macht sich eine feste Textbreite schlecht.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 21.06.2007, 18:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ausschließlich img floatet (clear braucht es dabei nicht).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.06.2007, 18:55
Gummibärchen-Liebhaber
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2007
Beiträge: 10
Webentwickler Eric befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank. Ich habe die float-Eigenschaft aus .text jetzt entfernt und die clear-Eigenschaft aus img.
Jetzt steht zwar der Text neben dem Bild, doch der Zweite (untere) Beitrag steht etwas seitlich nach rechts gerückt (im Firefox).

Die Bilder sollen aber untereinander stehen. Ich habe dieses Problem schon lange,
bitte helfen Sie mir!
Meine Seite
Mit Zitat antworten
  #4 (permalink)  
Alt 21.06.2007, 19:11
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

.artikel muß clearen.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.06.2007, 20:40
Gummibärchen-Liebhaber
neuer user
Thread-Ersteller
 
Registriert seit: 21.06.2007
Beiträge: 10
Webentwickler Eric befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank! Sie haben mir sehr geholfen.
Mit Zitat antworten
  #6 (permalink)  
Alt 21.06.2007, 21:09
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Gern geschehen! Übrigens noch ein paar Anmerkungen: p innerhalb von .artikel braucht keine Klasse, sondern kann per .artikel p angesprochen werden. Außerdem ist height: 100%; wirkungslos, da das direkte Elternelement .artikel keine height-Deklaration hat - diese wäre aber als Bezugsgröße nötig. Weiterhin leere Elemente möglichst vermeiden:

Code:
<div class="oben"></div>
Und <br /> nicht als Ersatz für margin und padding verwenden:

Code:
</div>
<br>
</div>
Und dieses sollte komplett entfallen (IE Quirksmode):

Code:
<?xml version='1.0' encoding='UTF-8'?>
Dieses ebenfalls:

Code:
<meta http-equiv="content-style-type" content="text/css" />
Außerdem sinnvoll ist ein Blick in die FAQ (z.B. "CSS-Prolog") und das Thema 100% Höhe.

Und bitte immer validieren!

Geändert von heiko_rs (21.06.2007 um 21:14 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Float - Probleme wolf1985 CSS 5 19.08.2008 09:14
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 16:22
IE zeigt gewisse Texte nicht an zitronenbaum CSS 2 16.01.2008 16:25
Testcase: float, overflow: hidden; und alte Geckos... heiko_rs CSS 0 19.11.2007 22:26


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:38 Uhr.