Beiträge von hume

hume

Naja, sieht nicht gerade viel versprechend aus...
[Blockierte Grafik: http://s3.directupload.net/images/user/100618/temp/7zy48haj.jpg]

hume

Code

Dann benutze Float: bei einigen Objekten, dass haben wir dir aber auch schon mal gesagt

Ja ich weiß, aber irgendwie komme ich mit dem "float" nicht ganz klar. Es werden trotzdem auch die Objekte von mir verschoben.

Zitat

clear: both; /* Wer floatet muss auch clearen */

Denn Begriff clear, was hat der eigentlich für einen Sinn?? Hab schon mal unter Google gesucht, aber nichts genaueres beschriebenes gefunden.

hume

Zitat

Dann mach ihn valide und guck dann nochmal

Sorry, hab mich beim Edit verschieben, wollte eigentlich schreiben der Code war vorher nicht valide. Also beim Text verschiebt es mir dass Menü nach unten, kann man dass umgehen? Unter <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a> ist dass auch ersichtlich. Hab mal einen Screenshot gemacht.
[Blockierte Grafik: http://s1.directupload.net/images/user/100618/temp/uv5uo227.jpg]

Hier mal mein Code:

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">   
          </div>          

          <div id="linksoben">
          </div>

          <div id="Inhalt">
         <p> <b> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </b> </p>
          </div>
          <div id="Inhalt2">
          <p> <b>Senden Sie uns Ihre Simulationsanfrage.</b>Schnell und einfach! Wir <b>erstellen</b> für Sie <b>ein</b> <b>herstellerunabh&auml;ngiges</b> 
                    <br /> 
           <br /> <b>BHKW - Gutachten,</b> </p>
          </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="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei

Code

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




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;




}




  
div#linksoben {
background: #FFA500;
visibility: visible;
height:0px;
width:200px;




}




div#Inhalt {
float:left;
color:black;
text-indent:9cm;
line-height:1cm;
}
div#Inhalt2 {
float:left;
color:black;
text-indent:5cm;
line-height:3cm;
font-size:12pt;
}

ul#navigation li {
margin: 0px;
width: 18%;

}
div#linksunten {
background:#FFA500;
visibility:visible;
height:113px;
width:184px;







}




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




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




div#fusszeile {




background: #FFA500;
height: 77px;
text-align: center;
line-height:2cm;
}

Alles anzeigen

PS: Ist der Aufbau eigentlich richtig? Oder hab ich da was falsch gemacht?

hume

Zitat

Dann musst du mit float arbeiten, um die divs nebeneinander zu kriegen.
Schau dir das hier mal an: <a class="postlink" href="http://thestyleworks.de/tut-art/layout_div_2.shtml">http://thestyleworks.de/tut-art/layout_div_2.shtml</a>

Ok, aber ist dass normal dass das ganze Menü verschoben wird?

Hier mal mein Code:

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">   
          </div>          

          <div id="linksoben">
          </div>

          <div id="Inhalt">
         <p> <b> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </b> </p>
          </div>
          <div id="Inhalt2">
          <p> <b>Senden Sie uns Ihre Simulationsanfrage.</b>Schnell und einfach! Wir <b>erstellen</b> für Sie ein </p>
          </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="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei

Code

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




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;




}




  
div#linksoben {
background: #FFA500;
visibility: visible;
height:0px;
width:200px;




}




div#Inhalt {
float:left;
color:black;
text-indent:9cm;
line-height:1cm;
}
div#Inhalt2 {
float:left;
color:black;
text-indent:5cm;
line-height:3cm;
font-size:12pt;
}

ul#navigation li {
margin: 0px;
width: 18%;

}
div#linksunten {
background:#FFA500;
visibility:visible;
height:113px;
width:184px;







}




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




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




div#fusszeile {




background: #FFA500;
height: 77px;
text-align: center;
line-height:2cm;
}

Alles anzeigen

Edit: Code nicht valide

hume

Zitat

Wo soll den der Inhalt überhaupt hin?
Das ist mir gerade nicht ganz erkenntlich^^

Den weißen Bereich rechts den du siehst

hume

Wie mache ich am besten den Inhalt, hab es schon mit DIV versucht, bin ich da schon richtig dran oder gibt es da noch eine andere Lösung?
Hab es mal mit DIV "linksoben" gemacht, folgendes Problem, es verschiebt sich alles. Das gleiche Problem wenn ich es nach der "Navigation" mache. Wie gehe ich da am besten vor?

Mein Code:

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">   
          </div>          

          <div id="linksoben">
          </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="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:60%;padding-left:25%;"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="CSS ist valide!" />
    </a>
</p>
           </div>

          <div id="fusszeile">
          <p>&copy; Otto Huml W&auml;rme und Strom</p>
          </div>


      </body>





  </html>

Alles anzeigen

CSS Datei

Code

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




div#header {
background:url(images/header.gif);
visibility: visible;
height:110px;
padding-left: 100px;




}




  
div#linksoben {
background: #FFA500;
visibility: visible;
height:0px;
width:200px;




}




  
ul#navigation li {
margin: 0px;
width: 18%;

}
div#linksunten {
background:#FFA500;
visibility:visible;
height:140px;
width:184px;







}




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




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




div#fusszeile {




background: #FFA500;
height: 77px;
text-align: center;
line-height:2cm;
}

Alles anzeigen

hume

Dann ist es ja gut

hume

Zitat

Für Was????(du willst doch das man dein Inhalt sieht??)

Ja sicher will ich dass man meinen Inhalt sieht, wer will dass auch nicht.
Hätte es für die Kachel vorgesehen. Das left top wäre für den Abstand vorgesehen.

hume

Zitat

Och..so hab ich auch mal angefangen. Jag deinen Quellcode immer hierdurch, wenn das alles passt, also keine Fehler mehr angezeigt werden kannste damit kommen...

Ich hab mal die index.html und die CSS Datei validiert und die Fehler beseitigt. Weiteres Problem der obere Header was man in Screenshot sieht müsste normal auf der Seite <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>
zu sehen sein, bei mir ist es zu sehen.
Aber für den ich die Website mache, sieht den Header oben nicht... dass verstehe ich nicht ganz. Er hat den Browserverlauf sogar gelöscht und nochmal neu aufgerufen ohne Erfolg.

Zitat

m auf die Lösung deines Problems zu kommen, solltest alle paddings nochmal entfernen

Ja, werde ich machen.

Hier mal der Fehlerfreie Code:

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">   
          </div>

          <div id="linksoben">
          </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:0;
  padding:0;

}




div#header {
background:url(images/header.gif)no-repeat left top;
visibility: visible;
height:110px;
padding-left: 100%;
margin-bottom:1cm;
  }

div#linksoben {
background: #FFA500;
visibility: visible;
height:100%;
margin:0;







}

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

}




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

}




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




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




div#fusszeile {




background: #FFA500;
visibility: visible;
height: 110px;
padding-left:100%;
padding-top:1%;
padding-bottom:2%;
margin-top:1cm;




}

Alles anzeigen

hume

Ok, ich hab es hin bekommen. Habe noch ein kleines Problem mit DIV und zwar möchte ich dass zwischen den Links oben und unten der weiße Bereich gefüllt wird, kann mir aber jetzt nicht erklären warum mir dass nicht angezeigt wird.

Hier mal mein Code:

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">   
          </div>

          <div id="linksoben">
          </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:0;
  padding:0;
  border:0;
  list-style:none;
  text-decoration:none;
  font-family: Arial, Helvetica, sans-serif;
}




div#header {
  background:url(images/header.gif)no-repeat left top;
  visibility: visible;
  height:110px;
  padding-top:1,5%;
  padding-left: 100%;
  margin-bottom:1cm;
  }

div#linksoben {
background: #FFA500;
visibility: visible;
height:100%;
margin:0;







}

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

    }




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

    }




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




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




div#fusszeile {




background: #FFA500;
visibility: visible;
height: 110px;
padding-left:100%;
padding-top:1%;
padding-bottom:2%;
margin-top:1cm;




}

Alles anzeigen

PS: Die Höhe entspricht nicht den echten Wert, da es nur zum testen ist.

[Blockierte Grafik: http://s5.directupload.net/images/user/100616/temp/kz7q8aa7.jpg]

hume

Ok, es klappt

Möchte folgendes machen, möchte dass DIV von der Fußzeile eins nach unten setzen also, nach Impressum, wenn ich es mit padding-top mache, verändert sich aber nichts

hume

Zitat

moinsen, du musst auch mal das html-seminar lernen oder hier die videos dazu --> <a class="postlink" href="http://www.youtube.com/user/webmastercrashkurs">http://www.youtube.com/user/webmastercrashkurs</a>

Komm manchmal ein wenig durcheinander, hab wenigstens den rechten Rand schon hin bekommen dass es aufschließt, habe folgendes Problem was ich nicht verstehe, wenn ich padding-left nehme erwarte ich eigentlich dass er den linken Abstand nimmt, dass Gegenteil ist der fall statt den linken wird der rechte Rand genommen. Hier mal die Website <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>

Hier mal der Code:

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">

         </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:url(images/header.gif)no-repeat left top;
  visibility: visible;
  height:110px;
  padding-top:1,5%;
  padding-left: 102%;




  





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

    }




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




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




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




div#fusszeile {




background: #FFA500;
visibility: visible;
width: 100 px;
height: 100px;
border-right-width: medium;




}

Alles anzeigen

hume

Hallo, ich möchte dass bei der Grafik sowie bei der Fußzeile kein Abstand nach rechts oder links ist sowie oben. Hab es schon mit margin-left
oder margin-right versucht scheint nicht wirklich zu klappen. Hab mal einen Screenshot gemacht, was ich genau meine.

[Blockierte Grafik: http://s5.directupload.net/images/user/100616/d2j86wga.jpg]

hume

Was ich nicht verstehe die Grafik sieht eigentlich so aus:
[Blockierte Grafik: http://s3.directupload.net/images/user/100615/temp/g2z3itrc.gif]

Auf der Seite wird sie aber so angezeigt:

[Blockierte Grafik: http://s3.directupload.net/images/user/100615/paxbhv6j.jpg]

hume

Hallo, ich möchte dass in ersten DIV Bereich eine Grafik angezeigt wird, scheint aber nicht zu klappen hier mal die Url <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>

Hier mal der Code

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">

         </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-image:url(images/header.gif)no-repeat left top;
  visibility: visible;
  width: 100 px;
  height: 100px;




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

    }




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




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




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




div#fusszeile {




background: #FFA500;
visibility: visible;
width: 100 px;
height: 100px;




}

Alles anzeigen

hume

Zitat von "Sarkkan"

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

Jop, jetzt klappts

hume

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

hume

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?

hume

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?

hume

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]

Beiträge von hume

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Inhalt

Abstände

Abstände

Abstände

Abstände

Abstände

Abstände

Abstände

Grafik wirdf nicht angezeigt

Grafik wirdf nicht angezeigt

Bereiche

Bereiche

Bereiche

Bereiche

Bereiche