HTML, CSS, PHP, MySQL

html-php.de

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

Höhe und Breite

Mit Hilfe von width können Sie die Breite, und mit height die Höhe von Bereiche bestimmen. Mit float:... können Sie Boxen so aurichten, das ein mehrspaltiges Layout entsteht. Im folgenden Beispiel habe ich z.B. drei Spalten: Die Menüleiste wird mit float:left links ausgerichtet, Die News-Spalte wird rechts ausgerichtet. Dazwischen wird dann der Inhalt geschrieben:

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Layout</title>
   <style type="text/css">
    body {
      color: black; background-color: white;
      font-size: 12px; font-family: Helvetica,Arial,sans-serif;
      margin: 0; padding: 10px; min-width: 41em; 
    }
    h1 {
      padding:8px; background-color:#0000C0; border:1px solid #000000; 
      margin:4px; text-align:center; font-family:Arial,Helvetica,sans-serif; 
      font-size:20px; color:#FFFF00; height:40px;
    }
    ul#menue {
      font-size:12px; float:left; width:100px; margin:4px; padding:8px;
      border:1px solid #000000; background-color:#0000C0;
    }
    ul#menue li { list-style:none; margin:0 0 0 4px; padding:10px; }
    ul#menue a { display:block; padding:4px; font-weight:bold; }
    ul#menue a:link { color:#FFFFC0;}
    ul#menue a:visited { color:#C0C0FF; }
    ul#menue a:hover { color:#000000; background-color:#FFFFC0; }
    ul#menue a:active { color:#FFFFFF; }
    div#inhalt { 
     margin:8px 130px 4px 130px; padding:8px; 
     border:1px double black; background-color:#FFFFE0; 
    }
    div#inhalt h2 { font-size: 18px; font-family: Helvetica,Arial,sans-serif; }      
    div#inhalt p {font-size:12px; margin:20px 0px;}
    div#neues {
      font-size:12px; float:right; width:100px; margin:4px; padding:8px;
      border:1px solid #000000; background-color:#0000C0; color:#FFFFFF;
    }
    div#fusszeile { 
      clear:both; margin:8px 4px 4px 4px; padding:8px; border:1px double black; 
      background-color:#0000C0; color:#FFFF00; text-align:center;
    }
   </style>
  </head>
  <body>
   <h1>&Uuml;berschrift</h1>
   <ul id="menue">
    <li><a href="layout01.htm">Seite 1</a></li>
    <li<<a href="layout01.htm">Seite 2</a></li>
    ...
   </ul>
   <div id="neues">
    <p>News:<p>
    <p>Hier stehen irgendwelche News.</p>
   </div>
   <div id="inhalt">
    <h2>Inhalt</h2>
    <p>
    <img style="border:0; width:100px; height:40px; float:left; margin:5px;"
     src="bild01.gif" alt="[Bildname]">
    Thema 1 - Hier steht irgendwelcher Text. Thema 1 - 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