21.06.2007, 18:40
|
|||
|
|||
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> 
|
| Sponsored Links |
|
21.06.2007, 18:55
|
|||
|
|||
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
|
|
21.06.2007, 20:40
|
|||
|
|||
|
Vielen Dank! Sie haben mir sehr geholfen.
|
|
21.06.2007, 21:09
|
||||
|
||||
|
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> Code:
</div> <br> </div> Code:
<?xml version='1.0' encoding='UTF-8'?> Code:
<meta http-equiv="content-style-type" content="text/css" /> Und bitte immer validieren! Geändert von heiko_rs (21.06.2007 um 21:14 Uhr)
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ä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 |
Linear-Darstellung
