Zum Inhalt springen

Inhalte schieben sich untereinander

Erstellt am 21. September 2006 · 4 Antworten · letzte Antwort am 21. September 2006

Tags: HTML & CSS, Frage

manoman ·

Hallo,

wenn ich die Fenstergröße verkleiner, schieben sich die einzelnen Spalten(Menü, Content und Rechts) untereinander. wie kann ich das verhindern und erreichen das er in kleinen Fenstern ein scrollbalcken anzeigt?

einpraegsam.​net ·

Sorry, aber das ist nicht sehr aussagekräftig, da wir dein HTML und CSS nicht kennen.

Allgemein
im Prinzip legst du einen DIV Container um deine Spalten, gibst diesem eine feste Breite und sagst weiter:

overflow: auto;
manoman ·

ok hier mal mein css:

und da jetzt bei "container" overflow:auto; eingeben?

a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none; color:#000000; }

img {
	border-style:none;
	display: block;
}

div.tx-gooffotoboek-pi1 img {
	display:inline;
}

h1,h2,h3,h4,h5,h6,div,body,p,html,input,button { 
	font: normal  Verdana ;
	font-size : 68,2% ;
}


div#container {
	 background:  url(../images/hintergrund.gif) repeat-y; 
	 position: absolute;
}

div#header {
	background-color:white; 
}

div#links { 
	float:left; 
	width:180px; 
	padding-top:37px;
	padding-bottom:10px;
	background-color:#F4F8BC;
		
}

div#center { 
	padding-top:37px;
	width: 630px; 
	height:553px;
	
}

div#right { 
	float:right; 
	width:180px; 
	padding-top:37px;
	padding-bottom:10px;
	text-align:left; 	
	background-color:#F4F8BC;
	height:553px;	
}
}

und das Template

<html>
  <head>
    <link rel="stylesheet" type="text/css"  href="fileadmin/style.css" />
    
  </head>
  <body>
  	
  	<!-- ###DOKUMENT### begin -->
  	
    <div id="container">
    	
      <div id="header">
        ###LOGO######TRAILER###
      </div>    
      
      <div id="links">
	<div>
		###MENU###
	</div>
      	<div>
      		###ROUTENPLANER###
      	</div>
      	<div>
      		###DRUCKEN###
      	</div>
      	
      </div>      

      <div id="right">
       <div>
           ###RECHTS###
            
       </div>
      </div>

      <div id="center">
       
        <div>
          ###INHALT###
        </div>
      
      </div>
    </div>     
    
    <!-- ###DOKUMENT### end -->
    
  </body>
</html>