Bereiche

hume · 9. Juni 2010

Hallo, ich hab immer wieder Probleme wie die einzelnen Bereiche heißen wie z.B. Header der obere Bereich. Wie heißt eigentlich der untere Bereich? Oder wie kann ich den Hintergrund der ganzen Seite bestimmen? Es befindet sich noch ein Screenshot dabei, was ich genau meine. Hab mir dass Boxenmodell mal angeschaut und wollte es mal ausprobieren, kommt aber nichts gutes dabei heraus.

[Blockierte Grafik: http://s3.directupload.net/images/user/100609/temp/nviqgj6j.jpg]

Sarkkan · 9. Juni 2010

Die Sachen kannst du theoretisch so nennen, wie du lustig bist

Meistens wird für den oberen Teil Header oder Kopf verwendet
Die Liste Links mit den Links ist meist die Navi(gation) und der Bereich wo dein Inhalt rein kommt der Content, Inhalt, Seite o.Ä.
Das Ding unten nennt sich Footer oder auch Fußzeile

Um den Hintergrund auf der ganzen Seite zu ändern schreibt man das am besten in den Body bereich (CSS):

Code

body {
   background-color: black;
}

Alles was dort rein kommt ist meistens für die ganze Seite bestimmt.

hume · 9. Juni 2010

Aber wie gehe ich da am besten vor? Das ganze verwirrt mich ein wenig, den wie bestimme ich dass ganze genau wenn ich den unteren Bereich will. Geht man da mit DIV vor oder doch anders?

Sarkkan · 9. Juni 2010

Dafür benutzt man üblicherweise Divs, jopp

Es gibt auch welche, die auf Frames oder Tabellenlayouts stehen, aber davon halte ich persönlich nicht besonedrs viel^^

CSS kannst du?

hume · 9. Juni 2010

Ja, kann ich. DIV ist meines Wissens immer gleich der nächste Bereich, wie aber kann ich dann die Fusszeile machen? Muss ich die extra eingestellt werden? Hier mal der Code, wo die Fusszeile schon dabei ist, kA warum sie nicht funktioniert.

Index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
          <title>
            BHKWPartner - das optimale BHKW von Ihrem Installateur!
          </title>
          <link href="./design.css" type="text/css" rel="stylesheet" />
      </head>
      <body>




          <div id="header">
              <h1>
                BHKWPartner Das richtige Aggregat vom richtigen Installateuer!
              </h1>
         </div>
          <ul id="navigation">
            <li> <a href="index.html">Startseite</a> </li>       
            <li> <a href="simulation.html">Simulationsanfrage </a> </li>
            <li> <a href="planung.html">BHKW-Planung </a> </li> 
            <li> <a href="abrechnung.html">BHKW-Abrechnung </a> </li>
            <li> <a href="aktuelles.html">Aktuelles </a> </li> 
            <li> <a href="info.html">Info </a> </li> 
            <li> <a href="agb.html"> AGB </a> </li> 
            <li> <a href="impressum"> Impressum </a> </li> 
          </ul>

          <div id="fusszeile">
          </div>
      </body>




  </html>

Alles anzeigen

CSS Datei:

Code

* { 
  margin:1;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}




div#header {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  border-style:double;
  line-height:3cm;
  padding-top: 2%;




} 
    div#header h1 {
       font-size:14pt;
       color:#fff;

    }




    ul#navigation li {
        margin: 5px;
        width: 20%;
    }




    ul#navigation li a {
        display: block;
        border: 1px solid #FFA500;
        background: #616161;
        padding: 10px;
        color: #FFFFFF;
        font-weight: bold;
        border-style: outset;
    }




    ul#navigation li a:hover {
        display: block;
        border: 1px solid #FFA500;
        background: #FFA500;
        color: #FFFFFF;
        border-style: outset;
    }




div#fusszeile {




background: black;

Alles anzeigen

Muss bei Div immer ein Text dabei sein oder kann man den auch weglassen?

Sarkkan · 9. Juni 2010

Du hast die Fusszeile nicht geschlossen in der CSS Datei^^

Es sollte immer Text da sein, oder eine Feste höhe.
Außerdem musst du auch eine Breite definieren

Code

div#fusszeile {
    background-color: black; /* oder #Hezadezimal-Farbcode */
    width: 800px; /* anpassen! */
    height: 20px; /* anpassen, oder min-height benutzen! */
    /* Wenn keine Text drin stehen soll: */
   visibility: visible;
}

hume · 9. Juni 2010

Auch wenn ich den Tag schließe bekomme ich keine Meldung

CSS Datei

Code

* { 
  margin:1;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}




div#header {
  background-color:orange;
  text-align:center;
  margin-top:3px;  
  border-style:double;
  line-height:3cm;
  padding-top: 2%;




} 
    div#header h1 {
       font-size:14pt;
       color:#fff;

    }




    ul#navigation li {
        margin: 5px;
        width: 20%;
    }




    ul#navigation li a {
        display: block;
        border: 1px solid #FFA500;
        background: #616161;
        padding: 10px;
        color: #FFFFFF;
        font-weight: bold;
        border-style: outset;
    }




    ul#navigation li a:hover {
        display: block;
        border: 1px solid #FFA500;
        background: #FFA500;
        color: #FFFFFF;
        border-style: outset;
    }




div#fusszeile {




background: #FFA500;
visibility: visible;




}

Alles anzeigen

Sarkkan · 9. Juni 2010

wie gesagt du musst auch eine Breite und höhe angeben

lauras · 9. Juni 2010

Man sollte vielleicht noch erwähnen, dass die divs normalerweise zum gruppieren von Elementen gedacht sind oder dazu, inline Elemente richtig zu positionieren.

Um h1 brauchst du kein div - das ist selbst block-Element. Das gleiche gilt für ul. Natürlich immer nur, wenn du nur EIN Element hast, dass du umschließen willst.

Gruß

hume · 9. Juni 2010

Zitat von "Sarkkan"

wie gesagt du musst auch eine Breite und höhe angeben

Jop, jetzt klappts

Bereiche

Jetzt mitmachen!

Teilen