1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Information ausblenden

kein float im IE

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von wapplegraph, 12.04.08.

  1. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo

    Im IE werden zwei Hauptelemente nicht gefloated.
    Könnte mir jemand helfen?

    Code:
    <div id="balken_h">
    		<div id="bilder_top">
    			[COLOR="Red"]<div id="galerie"></div>
    			<div id="einzel_bild"></div>[/COLOR]
    		</div>
    	</div>
    	
    	<div id="wrapper">
    		[COLOR="Red"]<div id="wrapper_left">[/COLOR]
    			<div id="navigation">
    
    			</div>
    			<div id="content">
    		
    			</div>
    		</div>
    		
    		
    		
    		[COLOR="red"]<div id="balken_v">[/COLOR]
    			
    			<div id="navigation2"><a href="kontakt">Kontakt</a>
    </div>
    
    		</div>
    	</div>
    #galerie und #einzelbild sollte nebeneinander liegen
    und #wrapper-left und #balken_v



    Code:
    div#galerie
    			{
    			width:800px;
    			height:150px;
    			background-image:url(../../images/hg/regenbogen.jpg);
    			float:left;
    			}
    			
    		div#einzel_bild
    			{
    			width:200px;
    			height:150px;
    			background-image:url(../../images/hg/wechsel/kraftort.jpg);
    			margin-left:800px;
    			clear:right;
    			border-right:#000000 solid 2px;
    			border-left:#000000 solid 2px;			
    		
    			}
    
    
    div#wrapper_left
    		{
    		width:800px;
    		
    		background-color:#C9B62C;
    		background-image:url(../../images/hg/ecken.jpg);
    		background-position:left bottom;
    		background-repeat:no-repeat;
    		
    		float:left;
    		}
    
    div#balken_v
    		{
    		width:200px;
    		height:100%;
    		overflow:hidden;
    		margin:0px;
    		
    		background-color:#7691BC;
    		
    		border-left:#000000 solid 2px;
    		border-right:#000000 solid 2px;
    		
    		clear:right;
    		}
    Merci wapplegraph
     
  2. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Mach die Spalten mal nach diesem Prinzip:
    Code:
    <style type="text/css">
    	.clear {
    		clear: both;
    	}
    	
    	#spalte1 {
    		float: left;
    	}
    	
    	#spalte2{
    		margin-right: [Breite von "spalte1" plus Abstand];
    	}
    </style>
    
    <div id="spalte1">
    	Spalte 1
    </div>
    
    <div id="spalte2">
    	Spalte 2
    </div>
    
    <div class="clear"></div>
    
     
  3. hello

    hello Schöner von Nordhausen

    Dabei seit:
    02.07.06
    Beiträge:
    327
    dein code sieht ziemlich chaotisch aus (also zumindest hier) wenn er bei dir im prog auch so aussieht dan würde ich als erstes mal den ein bisschen struckturieren;)

    ich würde den tipp von mschoening befolgen und auf sein prinzip wechseln
    mfg
    manuel
     
  4. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Ja also er ist hier nicht so schön dargestellt, doch der Aufbau ist ja der gleiche.
    Ich habe jetzt das von mschoenig angewandt einfach mit margin-left und das Resultat ist wie folgt:

    Im IE 7 perfekt.
    Im IE 6 kein float: siehe hier
    Im IE 5.5 float bei den Bildern, jedoch kuriose Abstände und Breiten: siehe hier
    Im IE 5.01 float, jedoch kleine Abstände: siehe hier

    Ich würde sagen, die kleinen Abstandfehler hängen mit den Rahmen zusammen.

    Hier wären alle Fotos.
     
  5. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    ich hab mich auch vertan. Es müssen für den IE 6 beide Spalten gefloatet werden. Hab den Fehler leider nicht bemerkt gehabt. Sorry. Hier ist der korrekte Code:

    Code:
    <style type="text/css">
        .clear {
            clear: both;
        }
        
        #spalte1 {
            float: left;
        }
        
        #spalte2{
            [COLOR=Red]float: left;[/COLOR]
            margin-right: [COLOR=Red][nur der Abstand][/COLOR];
        }
    </style>
    
    <div id="spalte1">
        Spalte 1
    </div>
    
    <div id="spalte2">
        Spalte 2
    </div>
    
    <div class="clear"></div>
    
     
  6. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Hallo jetzt komme ich gar nicht mehr draus.

    2x float:left
    und margin-right?

    Wenn ich dies ausprobiere, so gibt es ein riesen Chrüsimüsi.
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Mist ich bin einfach nicht konzentriert, kommt davon wenn man mit dem iPhone postet. Das margin-right muss natürlich in die #spalte1
     
  8. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    So jetzt sitze ich am Rechner. So gehört es sich:

    Code:
    <style type="text/css">
        .clear {
            clear: both;
        }
        
        .spalte {
            float: left;
            height: 100px;
            width: 100px;    
        }
        
        #spalte1 {
            background: #000;
            margin-right: 10px;
        }
        
        #spalte2{
            background: #ff0000;
        }
    </style>
    
    <div id="spalte1" class="spalte">
        Spalte 1
    </div>
    
    <div id="spalte2" class="spalte">
        Spalte 2
    </div>
    
    <div class="clear"></div>
    
     
  9. wapplegraph

    wapplegraph Normande

    Dabei seit:
    12.04.06
    Beiträge:
    571
    Mhm

    Das funktioniert gar nicht:

    Code:
    div#galerie
    			{
    			width:800px;
    			height:150px;
    			margin-right:200px;
    			
    			background-image:url(../../images/hg/regenbogen.jpg);
    			
    			float:left;
    			}
    			
    		div#einzel_bild
    			{
    			width:200px;
    			height:150px;
    			background-image:url(../../images/hg/wechsel/kraftort.jpg);
    			
    			border-right:#000000 solid 2px;
    			border-left:#000000 solid 2px;	
    			
    			float:left;		
    		
    			}
    http://www.natur-raum.ch/aufbau/
     
  10. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764

Diese Seite empfehlen