✔ hintergrundfarbe füllt nicht alles aus

Status
Nicht offen für weitere Antworten.
B

blubbbla

Erfahrenes Mitglied
hintergrundfarbe füllt nicht alles aus

Ich habe einen div "toptreffer", welcher mehrere divs enthält. toptreffer hat eine hintergrundfarbe. nur leider füllt dies nicht alles aus. ich kann aber auch keine feste größe angeben, damit er dies macht:
Code: 
<div class="toptreffer">
<h2>ueberschrift</h2>
<div class="treffer_left">
<img src="../images/treffer1.jpg" width="82" height="60" alt="" />
</div>
<div class="treffer_right">
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
</div>
</div>

und hier das style dazu:

Code: 
.toptreffer{
background-color: #daebf4;
padding: 3px 10px 10px 10px;
height: auto;
text-align: left;
margin-top:5px;
font-size: 10px;
}

.treffer_left{
float:left;
margin-right: 10px;
clear:left;
width: 100px;
}

.treffer_right{
float:left;
height: auto;
margin-bottom:10px;
width:auto;
}
also wie kriege ich das hin,dass das blau bis runter geht - ohne eine feste größe anzugeben?
 
ja das hab ich auch ausprobiert. im ie haut er mir jetzt aber die divs übereinander und sie sind nicht mehr nebeneinander?
 
Das kann ich bei mir nicht feststellen.

Wie lautet denn der "neue" HTML- und CSS-Code?
 
also html wie vorhin.

und css:

Code: 
.toptreffer{
	background-color: #daebf4;
	padding: 3px 10px 10px 10px;
	height: auto;
	text-align: left;
	margin-top:5px;
	font-size: 10px;
}

.toptreffer:after{
	 content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html .toptreffer {height: 1%;}
.toptreffer {display: block;}
/* End hide from IE-mac */
 
Mit diesem Stylesheet sitzen die beiden floatenden DIVs ebenfalls perfekt nebeneinander - getestet im IE 5.01, 5.5, 6 (Win2k) und IE7 (WinXP).
 
und wenn du mehrere divs noch rein haust, also:

Code: 
<div class="toptreffer">
<h2>ueberschrift</h2>
<div class="treffer_left">
<img src="../images/treffer1.jpg" width="82" height="60" alt="" />
</div>
<div class="treffer_right">
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
</div>
<div class="treffer_left">
<img src="../images/treffer1.jpg" width="82" height="60" alt="" />
</div>
<div class="treffer_right">
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
</div>
<div class="treffer_left">
<img src="../images/treffer1.jpg" width="82" height="60" alt="" />
</div>
<div class="treffer_right">
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
</div>
</div>

hm denn bei mir gehts wunderbar im firefox, opera und safari, aber ie rutscht die völlig zusammen und nicht zwei nebeneinande rund der rest untereinander - so wies sein soll - sondern drei nebeneinander, das andere rechts unterndrunter. also völlig konfus :confused:
 
Versuch es mal hiermit:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_blubbbla</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

.toptreffer{
background-color: #daebf4;
padding: 3px 10px 10px 10px;
height: auto;
text-align: left;
margin-top:5px;
font-size: 10px;
}

.wrap {
margin-top:5px;
}

.wrap:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.wrap {display: inline-block;}

/* Hides from IE-mac \*/
* html .wrap {height: 1%;}
.wrap {display: block;}
/* End hide from IE-mac */

.treffer_left{
float:left;
margin-right:10px;
width: 100px;
}

.treffer_right{
float:left;
height: auto;
margin-bottom:10px;
width:auto;
}
-->
</style>

</head>
<body>
<div class="toptreffer">
     <h2>ueberschrift</h2>
     <div class="wrap">
          <div class="treffer_left">
               <img src="../images/treffer1.jpg" width="82" height="60" alt="" />
          </div>
          <div class="treffer_right">
               1 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
               1 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
               1 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
          </div>
     </div>
     <div class="wrap">
          <div class="treffer_left">
               <img src="../images/treffer1.jpg" width="82" height="60" alt="" />
          </div>
          <div class="treffer_right">
               2 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
               2 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
               2 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
          </div>
     </div>
     <div class="wrap">
          <div class="treffer_left">
               <img src="../images/treffer1.jpg" width="82" height="60" alt="" />
          </div>
          <div class="treffer_right">
               3 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
               3 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
               3 bhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplpbhkjnjoiiokokplp<br />
          </div>
     </div>
</div>
</body>
</html>
 
oh super geht. danke.

aber was bedeutet das * im style? für was ist das? und ansonsten haste jetzt eigentlich bloß noch einen zusätzlichen div um alles herumgelegt, der vehindert, dass nocht etwas daneben erscheint oder?
 
* ist der Universalselektor, der alle im HTML-Dokument enthaltende Elemente anspricht.

Da der IE sich nicht an das clear:left für die Box .treffer_left gehalten hat, habe ich die beiden floatenden DIVs kurzerhand in ein weiteres DIV eingebettet, und darauf die clearfix-Methode angewendet.

Zu guter letzt möchte ich dich darum bitten, in deinen Beiträgen die Groß- und Kleinschreibung zu beachten:

Unser Forum ist kein Chatroom. Kurz-Beiträge ("Ein-Zeilen Postings"), die einfach so ins Forum "geklatscht" werden, werden ohne Vorwarnung von einem Moderator oder Administrator gelöscht. Das gleiche gilt insbesondere für Beiträge, die in Rechtschreibung, Satzbau und Verständlichkeit nicht ein vernünftiges, allgemein übliches und altersgruppen-übergreifendes Niveau erfüllen. Jugendsprache, regional verbreitete Dialekte und durchgehend kleingeschriebene Beiträge sind ebenfalls unerwünscht. Mit anderen Worten: wer erfolgreich die im Deutsch-Unterricht erlernten Kenntnisse praxisnah auf unserem Forum anwenden kann, wird nicht mit dieser Regel in Konflikt kommen. "Wiederholungstäter" werden, nachdem sie zuvor von einem Moderator auf die Mängel hingewiesen wurden, ggf. unbefristet gesperrt.


Quelle: http://www.tutorials.de/netiquette.html
Zum Vergrößern anklicken....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück