3 Spalten Layout @ tutorials.de: Tutorials, Forum & Hilfe

Xching · 06.10.10 10:13

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-Code:

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-Code:

<!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&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</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>

spicelab · 06.10.10 10:27

Ohne den dazugehörigen HTML-Code lässt sich keine Ursachenforschung betreiben, geschweige denn ein sachdienlicher Hinweis äußern.

Xching · 06.10.10 10:31

Entschudigung hab ich vergessen

spicelab · 06.10.10 10:32

Zitat von Xching

Entschudigung hab ich vergessen

Und warum postet du ihn nicht gleich direkt mit der zweiten Antwort?

spicelab · 06.10.10 10:42

Code 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.

Xching · 06.10.10 10:48

vielen Dank,es hat jetzt funktioniert

)

Xching · 06.10.10 11:29

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

spicelab · 06.10.10 11:49

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.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

3-Spalten-Layout unter 2-Spalten-Layout setzen

3-Spalten-Layout / Moz vs. IE

3-Spalten-Layout mit 2-Spalten ContentArea

3-Spalten-Layout mit CSS

3 Spalten Layout

E-Mail:

Abonnieren Abbestellen