3 Spalten Layout

X

Xching

Erfahrenes Mitglied
Ich habe Homepage erstellt aber Ich habe Problem mit 3 Spalten Layout,wenn ich die Seite verkleinern,wird die Inhalt und Bild von jedem Seite nach links und manchmal nach rechts verschieben.

HTML: 
body {
	font-family: Arial;
	font-size: 1.0 em;
	color:#000000;
	margin:0px;
	background-color:#CECECE;
	}
	
	*html body {font-size: 10pt;}   /* Internet Explorer 6 */
	
a:link { text-decoration:none; font-weight: bold; color:#00849C;}    /* noch nicht besuchte Ziele */
a:visited { text-decoration:none; font-weight: bold; color:#00849C;} /* besuchte Ziele */
a:hover { text-decoration:underline; font-weight: bold; color:#00849C; }   /* Verweise bei "MouseOver" */

img {border: 0;}



#gesamt {
	background-color: #FFFFFF;
	background-position:center center;
	background-repeat:no-repeat;
	border: 5px solid #3366FF;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	margin-bottom: 0px;
	min-width: 900px;
	height: 1000px;
	display: table;		
	}

#header {
	background-color:#3366FF;
	background-position:center center;
	background-repeat:no-repeat;
	min-width: 900px;
	height: 120px;
	}
	
	#headline {
	color:#FFFFFF;
	font-size:1.5em;
	font-weight:bold;
	padding-left:20px;
	padding-top:20px;
	width:400px;
	}
		*html #headline {font-size: 15pt;}   /* Internet Explorer 6 */

		#headline a:link { text-decoration:none; font-weight: bold; color:#FFFFFF;}    /* noch nicht besuchte Ziele */
		#headline a:visited { text-decoration:none; font-weight: bold; color:#FFFFFF;} /* besuchte Ziele */
		#headline a:hover { text-decoration:none; font-weight: bold; color:#FFFFFF; }   /* Verweise bei "MouseOver" */
	
	#uebersetzung {
	float:right;
	color:#FFFFFF;
	margin-right:30px;
	margin-top:-30px;
	width:200px;
	text-align:right;
	}
		*html #uebersetzung {margin-top:-20px; margin-right:10px;}   /* Internet Explorer 6 */

	#uebersetzung a:link { text-decoration:none; font-weight: normal; color:#FFFFFF;}    /* noch nicht besuchte Ziele */
        #uebersetzung a:visited { text-decoration:none; font-weight: normal; color:#FFFFFF;} /* besuchte Ziele */
        #uebersetzung a:hover { text-decoration:underline; font-weight: bold; color:#FFFFFF; }   /* Verweise bei "MouseOver" */
		
	#menue1 {
	margin-left:20px;
	margin-top:38px;
	color:#000000;
	}
						
				#menue1 a:link {text-decoration:none; font-weight: bold; color:#FFFFFF;}
				#menue1 a:visited {text-decoration:none; font-weight: bold; color:#FFFFFF;}
				#menue1 a:hover {text-decoration:underline; font-weight: bold; color:#FFFFFF;}
				#menue1 a:active {text-decoration:underline; font-weight: bold; color:#FFFFFF;}
		
		#menue1 ul{
  		margin: 0px;
  		padding: 0px;
   		}
   
		#menue1 ul li {
   		list-style-image:none;
   		list-style-type:none; 
   		padding: 14;
   		margin-right: 20px;
   		margin-top: 6px;
   		float: left;
   		}
   		
   		a#menue1act:link, 
        	a#menue1act:active, 
        	a#menue1act:visited, 
        	a#menue1act:hover { 
                   text-decoration:underline; 
                   font-weight: bold; 
                   color:#FFFFFF;
                   }
	

	#strich
	{
	float:left;
	margin-top:2px;
	width:100%;
	height:0px;
	}
	
	*html #strich {margin-top:10px;}   /* Internet Explorer 6 */

#menue2 {
	background-color:#66CCFF;
	float:left;
	height: auto;
	margin-left:20px;
	margin-top: 10px;
	width:180px;
	padding:5px;
	color: #000000;
	display:table-cell;
	/*background-color: grey;*/
	}
		*html #menue2 {margin-left:10px;}   /* Internet Explorer 6 */
				
				#menue2 a:link {text-decoration:none; font-weight: bold; color:#CECECE;}
				#menue2 a:visited { text-decoration:none; font-weight: bold; color:#CECECE;}
				#menue2 a:hover { text-decoration:underline; font-weight: bold; color:#CECECE;}
				#menue1 a:active { text-decoration:underline; font-weight: bold; color:#CECECE;}
				
		#menue2 ul{
  				margin: 0px;
  				padding: 0px;
   				}
   
		#menue2 ul li {
   					list-style-image:none;
   					list-style-type:none; 
   					padding: 0;
   					margin-left: 10px;
   					margin-right: 10px;
   					margin-top: 5px;
   					margin-top: 5px;
   					float: left;
			}					  
				
	    a#menue2act:link, 
            a#menue2act:active, 
            a#menue2act:visited, 
            a#menue2act:hover { 
                   text-decoration:underline; 
                   font-weight: bold; 
                   color:#000000;
                   }	
   
#text {
	float:right;
	margin-left:10px;
	margin-right:10px;
	margin-top:10px;
	padding-bottom:20px;
	display:table-cell;
	min-width:630px;
	
	}
		*html #text {width:610px;}   /* Internet Explorer 6 */
	
	#inhalt
	{
	background-color: white;
	}
	
	#Rechte {
	background-color:#66CCFF;
	float:right;
	height: auto;
	margin-right:20px;
	margin-top: 10px;
	width:180px;
	padding:12px;
	color: #000000;
	display:table-cell;
	/*background-color: grey;*/
	}
		*html #Rechte {margin-right:10px;}   /* Internet Explorer 6 */
				
				#Rechte a:link {text-decoration:none; font-weight: bold; color:#CECECE;}
				#Rechte a:visited { text-decoration:none; font-weight: bold; color:#CECECE;}
				#REchte a:hover { text-decoration:underline; font-weight: bold; color:#CECECE;}
				#menue1 a:active { text-decoration:underline; font-weight: bold; color:#CECECE;}
				
		#Rechte ul{
  				margin: 0px;
  				padding: 0px;
   				}
   
		#Rechte ul li {
   					list-style-image:none;
   					list-style-type:none; 
   					padding: 0;
   					margin-left: 10px;
   					margin-right: 0px;
   					margin-top: 5px;
   					margin-top: 5px;
   					float: right;
			}					  
				
	    a#Rechteact:link, 
            a#Rechteact:active, 
            a#Rechteact:visited, 
            a#Rechteact:hover { 
                   text-decoration:underline; 
                   font-weight: bold; 
                   color:#000000;
                   }	
   
	   
					
    #text {
	float:right;
	margin-left:20px;
	margin-right:20px;
	margin-top:10px;
	padding-bottom:20px;
	display:table-cell;
	/*width:630px;*/
	}
		*html #text {width:610px;}   /* Internet Explorer 6 */
	
	
	
#fusszeile {
	background-color:#FF7F00;
	background-position:center center;
	background-repeat:no-repeat;
	border: 1.5px solid #FFFFFF;
        margin-left: auto;
        margin-right: auto;
	padding-left: 10px;
	min-width: 900px;
	height: 20px;
	color:#FFFFFF;
	font-size: 0.9em;
	text-align:center;
	line-height:210%;
	vertical-align:middle;
	margin-bottom:20px;
	display:table;
	}
	
	#fusszeile ul{
                  margin: 0px;
                  padding: 0px;
                   }
   
        #fusszeile ul li {
                       list-style-image:none;
                       list-style-type:none; 
                       padding: 0;
                       margin-left: 10px;
                       margin-right: 10px;
                       float:left;
                       }                
	
    *html #fusszeile {margin-bottom:20px; font-size: 8pt;}   /* Internet Explorer 6 */
    *+html #fusszeile {margin-bottom:20px;}   /* Internet Explorer 7 */

	#fusszeile a:link { text-decoration:none; font-weight: normal; color:#FFFFFF;}    /* noch nicht besuchte Ziele */
        #fusszeile a:visited { text-decoration:none; font-weight: normal; color:#FFFFFF;} /* besuchte Ziele */
        #fusszeile a:hover { text-decoration:underline; font-weight: bold; color:#FFFFFF; }   /* Verweise bei "MouseOver" */
	#fusszeile a:active { text-decoration:underline; font-weight: bold; color:#FFFFFF; }

	a#fusszeileact:link, 
        a#fusszeileact:active, 
        a#fusszeileact:visited, 
        a#fusszeileact:hover { 
                   text-decoration:underline; 
                   font-weight: bold; 
                   color:#FFFFFF;
                   }

h1 {
	font-family: Arial;
	font-size: 1.4em;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	color:#727272;
	margin: 0px !important;
	}
	*html h1 {font-size: 14pt;}   /* Internet Explorer 6 */


.clearer {
	 clear: all;
	 }

Hier ist mein html.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
	<link rel="stylesheet" type="text/css" href="style.css" media="all">
</head>
<body>

###DOCUMENT###
<div id="gesamt"> 

		<div id="header">
			<div id="headline">
			<a href="index.html">Name von Helder           </a>

			</div>		
			
			<div id="menue1">
			###MENUE1###
			</div>
			
			
			<div id="strich"><hr width="100%" size="2px" color="#FFFFFF"></div>
		</div>
		
		<div id="menue2">
			###MENUE2###
		</div>
				<div id="Rechte">
			###RECHTE###
		</div>
		<div id="text">
           	<div id="inhalt">###INHALT###</div>   		
   		</div>	

		<div class="clearer"></div>

       </div>

<div id="fusszeile">
###FUSSZEILE###
</div>

###DOCUMENT###	

</body>
 
Zuletzt bearbeitet:
Ohne den dazugehörigen HTML-Code lässt sich keine Ursachenforschung betreiben, geschweige denn ein sachdienlicher Hinweis äußern.
 
Zuletzt bearbeitet:
CSS: 
#text {
        /*float:right;*/
        margin-left:210px;
        margin-right:224px;
        margin-top:10px;
        padding-bottom:20px;
        display:table-cell;
        /*min-width:630px;*/

        }
                /* *html #text {width:610px;} */   /* entfällt für Internet Explorer 6 */

Und entferne im Verlauf des Stylesheets den doppelt vorhandenen Regelblock für #text unmittelbar vor #fusszeile

Desweiteren besitzt die clear-Eigenschaft keinen Wert "all" - hier ist both gefragt.
 
Hallo,
ich habe gerade festgestellt, dass die Bilder mehr nach rechte Seite und untere Seite verschieben,wenn ich die Seite verkleinern,woran liegt das**** und Ich habe both anstatt all eingesetzt,funktioniert nicht,er sagte Please check whether if this file is opened in another programm
 
Da aus deinem "abgespeckten" HTML-Code überhaupt nicht hervorgeht, von welchen Bildern du sprichst, in welchen DIV-Blöcken sie konkret eingebunden sind, und wir keine hellseherischen Kräfte besitzen, um diese Wissenslücke zu schließen, wäre es an dieser Stelle hilfreich, die Seite hier zu verlinken, damit sie direkt im Browser in Augenschein genommen werden kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück