Das <div> TAG  ist dazu gedacht, mehrere Elemente wie Grafiken, Tabellen, Texte uund vieles mehr, in einen gemeinsamen Bereich einzuschließen.

Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS und dem TAG <style> (der im head Bereich einer reinen HTML Seite untergebracht wird) formatiert werden..

<div> bedeutet division, etwa Abteilung oder Bereich.
<style> bedeutet etwas Aussehn.

In meinem Beispiel werde ich ohne externe css Datei arbeiten um dem <div> sein Aussehen geben und nutze hierzu den TAG <style> im head Bereich meines Dokumentes und hinterlege hier die css Daten.

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
  <title>Systemschock.net / div - Bereiche</title>
 <style type="text/css">
     div { border: 2px solid; float: left; margin-Left: 45px; color:#bbbbbb}
 </style>
    </head>
      <body>
<div>
   <h3>Listenüberschrift</h3>
      <ul>
          <li>Listenpunkt 1</li>
          <li>Listenpunkt 2</li>
          <li>Listenpunkt 3</li>
     </ul>
</div>
      </body>
  </html>

Auch diese Art ist möglich:

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
  <title>Systemschock.net / div - Bereiche</title>
    </head>
      <body>
<div style="border: 2px solid; float: left; margin-Left: 45px; color:#bbbbbb">
   <h3>Listenüberschrift</h3>
      <ul>
          <li>Listenpunkt 1</li>
          <li>Listenpunkt 2</li>
          <li>Listenpunkt 3</li>
     </ul>
</div>
      </body>
  </html>

Dies würde im Browser so aussehen:

 

Listenüberschrift

  • Listenpunkt 1
  • Listenpunkt 2
  • Listenpunkt 3

 

 

 

 

 

Mit hilfe des <div> Tag können auch Menübereiche ohne ähnliches erzeugt werden.

Eine Erklärung zu den css Befehlen broder float color findest du hier. 

 

 

© Systemschock. All Rights Reserved.
Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok Ablehnen