HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

Übergroßer Inhalt in Elementen

Im folgenden Beispiel habe ich den Befehl overflow eingebaut. Wurde eine Bereich mit width oder height definiert, und der Inhalt passt hier nicht rein, können Sie mit overflow die Anzeige bestimmen. Folgende Angaben sind möglich:

overflow:visible = Das Element wird soweit ausgeweitet, bis es in den Bereich passt
overflow:hidden = Das Element wird abgeschnitten
  nicht Netscape bis 4.x
overflow:scroll = Es werden scrollbalken angezeigt
  nicht in Netscape bis 4.x und Opera bis 6.0
overflow:auto = Der Browser entscheidet, wie die Anzeige aussieht.
  nicht in Netscape bis 4.x und Opera bis 6.0
   <html>
   <head>
   <title>Layout 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="author" content="Frank Gancosch">
    ...
    <style type="text/css">
     body {
      color: #FFFFFF; background-color: #0000C0;
      font-size: 12px; font-family: Helvetica,Arial,sans-serif;
      margin: 0; padding: 10px; min-width: 41em; }
     h1 {
      padding:8px; background-color:#0000C0; border:0; margin:4px;
      text-align:center; font-family:Arial,Helvetica,sans-serif; 
      font-size:20px; color:#FFFF00; }
     ul#menue {
      font-size:12px; float:left; width:100px; margin:4px; padding:4px;
      border:0; background-color:#0000C0; }
     ul#menue li { list-style:none; margin:0 0 0 4px; padding:10px; }
     ul#menue a { display:block; padding:2px; font-weight:bold; }
     ul#menue a:link { color:#FFFFE0;}
     ul#menue a:visited { color:#FFFFFF; }
     ul#menue a:hover { color:#000000; background-color:#FFFFC0; }
     ul#menue a:active { color:#FFFFFF; }
     div#inhalt { margin:8px 4px 4px 130px; padding:8px; border:1px double black; 
      background-color:#FFFFE0; overflow:auto; height:300px }
     div#inhalt h2 { font-size: 18px; 
      font-family:Helvetica,Arial,sans-serif; color:#0000C0}      
     div#inhalt p {font-size:12px; margin:20px 0px; color:#000000;}
     div#fusszeile { 
      clear:both; margin:8px 4px 4px 4px; padding:8px; border:0; 
      background-color:#0000C0; color:#FFFF00; text-align:center; }
    </style>
   </head>
   <body>
   <h1>Überschrift</h1>
   <ul id="menue">
    <li><a href="#eins">Thema 1</a></li>
    ...
    <li><a href="#sechs">Thema 6</a></li>
   </ul>
   <div id="inhalt">
    <h2>Inhalt</h2>
    <p><img style="border:0; width:100px; height:40px; float:left; 
        margin:5px;" src="bild01.gif" alt="[Bildname]">
    <a name="eins">Thema 1</a> - Hier steht irgendwelcher Text. 
    ....
    Thema 6 - Hier steht irgendwelcher Text.</p>
   </div>
   <div id="fusszeile">
     Design 2006 by Frank Gancosch
   </div>
   </body>
   </html>
Das ganze sieht so aus

back top next