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

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