Beiträge von hume

hume

Zitat

Wenn ich den Aufbau noch richtig im Kopf hab, dann braucht div#linksunten ein float: left; und ein clear: left;

Und der Inhaltsdiv entweder ein float: right; oder muss nach der Navi und nach dem linksunten stehen..

Also die CSS Datei mit dem div "linksunten", hat immer noch ein float:left; und ein clear:left; ich habe festgestellt wenn ich bei der Index.html einen bestimmten Umbruch entferne schließt es wieder auf, was aber normal nicht sein sollte oder doch?

hume

Das untere DIV "linksunten" schließt nicht auf, obwohl dass ein float:right; gesetzt wurde, was hab ich falsch gemacht?

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>
         <h4> <span class="h4"> <strong> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </strong> </span> </h4> 
         <p> <span class="zusammen"> <strong>Senden Sie uns Ihre Simulationsanfrage.</strong> Schnell und einfach!<strong> Wir erstellen</strong> 
         f&uuml;r Sie<strong> ein herstellerunabh&auml;ngiges <br /> BHKW-Gutachten, mit Aggregatsempfehlung,</strong> ob und <strong>wie es 
         sich rechnet</strong> - was es kostet,<strong> was es bringt!</strong> </span> </p>
         <br />  <p> <strong> <span class="Rot">Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten 20.--€ zzgl. Ust.</span> </strong> </p>
         <p> <span class="Abstand"> <strong>Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW nutzen!</strong> </span> </p>
         <span class="Link"> <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a> </span>
         <p> <span class="Abstand">Und so einfach geht's <br /> </span> </p>
         <p> <span class="Blau"> <strong>1.</strong>Simulationsanfrage stellen.</span> </p>
         <p> <span class="Blau"> <strong>2.</strong>BHKW-Gutachten abwarten.</span> </p>
         <p> <span class="Blau"> <strong>3.</strong>Unverbindliches Angebot erhalten - vom Installateur in Ihrer Nähe.</span> </p>
         <span class="Link2"> <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt; </a> </span>
         <p> <span class="auseinander"> <strong>BHKWPartner - in Deutschland einmalig!</strong> </span> </p> <br />
         <p> <span class="zusammen">Der erste neutrale BHKW - Volldienstleister. Von der Auslegung bis zur Planung, Inbetriebnahme und Abrechnung.
         Alle marktg&auml;ngige, zuverl&auml;ssige und f&ouml;rderf&auml;hige Aggregate von 1 - 500 kW (el)! </span> </p> <br />
         <p> <span class="unten"> <strong>Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung. F&uuml;r Sie immer Up to Date!</strong> 
         <strong>Blockheizkraftwerk ? - Ja, aber richtig!</strong> </span> </p>
         </div> 




           <div id="linksunten"> 
           <p> 
    <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
        <img style="border:0;width:88px;height:31px;padding-top:40%;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

design.css:

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; 
background-repeat:no-repeat; 
}




.h4 { 
color:black; 
text-indent:1cm; 
line-height:1cm;
float:right;
width:80%; 
font-size:12pt;




} 




.zusammen {
color:black;
width:80%;
font-size:11pt;
float:right;
}




.Rot {
color:red;
line-height:1cm;
width:80%;
float:right;
} 
.Link {
color:blue;
width:80%;
font-size:9pt;
text-indent:3cm;
float:right;
}
.Abstand {
color:black;
width:80%;
font-size:12pt;
line-height:1cm;
float:right;
}
.Blau {
color:black;
float:right;
width:80%;
}
.Link2 {
color:red;
width:80%;
font-size:12pt;
text-indent:2cm;
line-height:1cm;
float:right;
}
.auseinander {
color:black;
width:80%;
font-size:11pt;
float:right;
line-height:1cm;
float:right;




}
.unten {
color:black;
font-size:9pt;
width:80%;
float:right;
line-height:2cm;
}
ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both;       
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:98px; 
width:182px; 
float:left; 
clear:left; 
} 
ul#navigation a{ 
display: block; 
border: 1px outset #FFA500; 
background: #616161; 
padding: 10px; 
color: #FFFFFF; 
font-weight: bold; 
border-style: outset; 
} 
ul#navigation a:hover { 
display: block; 
border: 1px outset #FFA500; 
background: #FFA500; 
color: #FFFFFF; 
border-style: outset; 
} 
div#fusszeile { 
background: #FFA500; 
height: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 
}

Alles anzeigen

Edit: Das alte hat sich erledigt.

hume

Zitat

Und warum schreibst du das dann in eine Liste???

Naja, dass ich es dann in CSS definieren kann. Aber jetzt weiß ich ja, dass man dass mit class auch machen kann. Ich bin eigentlich mit dem Grundlagen sehr gut vertraut, aber manchmal komm ich einfach durcheinander oder verwechsle etwas. Ich arbeite eigentlich schon seit 3 Jahren mit HTML und hab auch einige Vorlagen entworfen (leider nach dem veralteten Prinzip). Ich finde dass wirklich sehr gut, dass wenigstens jemand sagt dass ich etwas falsch gemacht habe, dass ich wieder etwas daraus lernen kann.

PS: Bei dem alten Prinzip meine ich dass ich die Farben noch in HTML definiert habe und keine CSS Datei verwendet habe. Natürlich musste ich auch wieder neue Befehle dazu nehmen und dass kann manchmal verwirrend sein.

hume

Code

<ul id="Link"> 
<li> <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a> </li> 
</ul>

Sollte ein Link sein.

Zitat

Alles, was mit Aussehen zu tun hat GRUNDSÄTZLICH mit CSS. Außenabstände kannst du mit margin einstellen. Du kannst außerdem class vergeben, wenn du mehrere Dinge gleich auszeichnen willst.

Also kann ich theoretisch ja nur mit class arbeiten, den wenn ich unter Div#Inhalt etwas verändern würde verändert sich ja der ganze Inhalt oder?

hume

Zitat

Du kannst auch mit min-width arbeiten, sodass eine gewisse Breit immer vorhanden ist und bei breiteren Bildschirmen dann halt breiter.

Hört sich gut an

Bin jetzt mal mit der Startseite fertig geworden, also jetzt hat es mir nichts mehr verschoben. Ich möchte dass aber die Textabstände nicht so groß sind. Manche sollten aber schon wieder einen größeren Abstand haben muss ich dass dann in HTML definieren oder in CSS?

Hier mal mein Code, wenn etwas nicht korrekt ist bitte einfach schreiben.

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="Inhalt"> 
         <h4> <strong> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </strong> </h4>
         <p> <strong>Senden Sie uns Ihre Simulationsanfrage.</strong> Schnell und einfach!<strong> Wir erstellen</strong> 
         f&uuml;r Sie<strong> ein herstellerunabh&auml;ngiges BHKW-Gutachten, mit Aggregatsempfehlung,</strong> ob und <strong>wie es 
         sich rechnet</strong> - was es kostet,<strong> was es bringt!</strong> </p>
         <p> <strong> <span class="Rot">Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten 20.--€ zzgl. Ust.</span> </strong> </p>
         <p> <strong>Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW nutzen!</strong> </p>
         <ul id="Link">
         <li> <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a> </li>
         </ul>
         <p> Und so einfach geht's <br /> </p>
         <p> <strong>1.</strong> <span class="Blau">Simulationsanfrage stellen.</span> <br /> </p>
         <p> <strong>2.</strong> <span class="Blau">BHKW-Gutachten abwarten.</span> <br /> </p>
         <p> <strong>3.</strong> <span class="Blau">Unverbindliches Angebot erhalten - vom Installateur in Ihrer Nähe.</span> </p>
         <ul id="Link2">
         <li> <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt; </a> </li>
         </ul>
         <p> <strong>BHKWPartner - in Deutschland einmalig!</strong> </p>
         <p>Der erste neutrale BHKW - Volldienstleister. Von der Auslegung bis zur Planung, Inbetriebnahme und Abrechnung. </p>
         <p>Alle marktg&auml;ngige , zuverl&auml;ssige und f&ouml;rderf&auml;hige Aggregate von 1 - 500 kW (el)! </p>
         <p> <strong>Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung. F&uuml;r Sie immer Up to Date!</strong> </p>
         <p> <strong>Blockheizkraftwerk ? - Ja, aber richtig!</strong> </p>
         </div> 




           <div id="linksunten"> 
           <p> 
    <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
        <img style="border:0;width:88px;height:31px;padding-top:40%;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

design.css:

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; 
background-repeat:no-repeat; 
}




#h4 { 
color:black; 
text-indent:4cm; 
line-height:1cm;
float:right;
width:80%; 
font-size:12pt;




} 
div#Inhalt { 
color:black;  
line-height:1cm;
float:right;
width:80%; 
font-size:11pt;  
}
.Rot {
color:red;
} 
ul#Link {
color:blue;
width:80%;
font-size:8pt;
text-indent:3cm;
}
.Blau {
color:blue;
}
ul#Link2 {
color:red;
width:80%;
font-size:12pt;
text-indent:1cm;
}




ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both;       
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:290px; 
width:182px; 
float:left; 
clear:left; 
} 
ul#navigation a{ 
display: block; 
border: 1px outset #FFA500; 
background: #616161; 
padding: 10px; 
color: #FFFFFF; 
font-weight: bold; 
border-style: outset; 
} 
ul#navigation a:hover { 
display: block; 
border: 1px outset #FFA500; 
background: #FFA500; 
color: #FFFFFF; 
border-style: outset; 
} 
div#fusszeile { 
background: #FFA500; 
height: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 
}

Alles anzeigen

hume

Jetzt müsste es normal stimmen, hab nur einen Inhalt, aber wie bekomme ich nun in der Index.html Datei hin dass ein Bereich wie z.B.

Code

<p>Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten 20.--€ zzgl. Ust.</p>

in Rot ist ohne dass ich es in CSS definieren muss, ist dass möglich oder kommt man hier nicht hinweg. Oder ist es dann falsch wann man es hier definiert und in CSS nicht.

Hier mal mein korrigierter Code (auch wegen Strong)

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="Inhalt"> 
         <h4> <strong> Jetzt 1.000 € Förderung für Mikro-BHKW(Bis 31.12.2010;Standortabhängig) </strong> </h4>
         <p> <strong>Senden Sie uns Ihre Simulationsanfrage.</strong> Schnell und einfach!<strong> Wir erstellen</strong> 
         f&uuml;r Sie<strong> ein herstellerunabh&auml;ngiges BHKW-Gutachten, mit Aggregatsempfehlung,</strong> ob und <strong>wie es 
         sich rechnet</strong> - was es kostet,<strong> was es bringt!</strong> </p>
         <p>Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten 20.--€ zzgl. Ust.</p>

          </div> 




           <div id="linksunten"> 
           <p> 
    <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
        <img style="border:0;width:88px;height:31px;padding-top:40%;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

design.css:

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; 
background-repeat:no-repeat; 
}




#h4 { 
color:black; 
text-indent:4cm; 
line-height:1cm;
float:right;
width:80%; 
font-size:12pt;




} 
div#Inhalt { 
color:black;  
line-height:1cm;
float:right;
width:80%; 
font-size:11pt;  
} 
ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both;       
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:160px; 
width:182px; 
float:left; 
clear:left; 
} 
ul#navigation a{ 
display: block; 
border: 1px outset #FFA500; 
background: #616161; 
padding: 10px; 
color: #FFFFFF; 
font-weight: bold; 
border-style: outset; 
} 
ul#navigation a:hover { 
display: block; 
border: 1px outset #FFA500; 
background: #FFA500; 
color: #FFFFFF; 
border-style: outset; 
} 
div#fusszeile { 
background: #FFA500; 
height: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 
}

Alles anzeigen

PS: Das es in anderen Bildschirmen die Website anderes aussieht wird man wahrscheinlich nicht umgehen können oder sehe ich dass falsch?

hume

Zitat

Hast du das mal hochgeladen?

Ja, dass letzte ist zurzeit dass aktuellste also wenn du dass meinst (index.html und design.css). Gibt es irgendwie eine Möglichkeit wie ich dass untere DIV wieder mit der Navigation aufschließt? Hab einige Varianten schon ausprobiert, bleibt aber gleich. Noch zum Text, dass mit dem vielen DIV kann man dass umgehen oder muss dass so sein. Folgendes Problem, wenn ich den oberen mit dem unteren Text in einem DIV nehme, ist die Ausrichtung mit Umbrüchen nicht gerade dass Wahre. Ich meinte eigentlich mit dem Umbruch, sieht es nicht gerade toll aus, von den Abständen her. Wo ich eigentlich nicht weiter komme ist dass mit dem unteren DIV.

hume

Zitat

Ja, dass kommt von der Höhe des Inhalts.

Du musst den linksunten div in der index.html zwischen navigation und inhalt verschiebn und dann in der design.css die Höhe von linksunten anpassen.

Wie das geht, dass die Höhe sich automatisch anpasst weiß ich allerdings nicht.

Jetzt hast ja noch mehr Bereiche für den Inhalt ...

Ja, ich brauch die Bereiche, denn mit den Umbrüchen klappt es bei mir nicht so. Also irgendwie komme ich wegen den unteren DIV nicht mehr weiter, irgendwie klappt dass ganze irgendwie nicht....

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.html"> 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:40%;padding-left:25%;" 
src="http://jigsaw.w3.org/css-validator/images/vcss" 
alt="CSS ist valide!" /> </a> </p> </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 />
          <b>BHKW&ndash;Gutachten, mit Aggregatsempfehlung</b>&ndash; ob und <b>wie es sich rechnet</b>&ndash;was es kostet,<b>was es bringt!</b> </p>
          </div> 
          <div id="Inhalt3">
          <p> <b>Unkostenbeitrag</b> f&uuml;r herstellerunabh&auml;ngiges <b>Gutachten 27.--€ zzgl. Ust. </b> </p>
          </div>
          <div id="Inhalt4">
          <p> <b>Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW nutzen!</b> </p> 
          </div>
          <ul id="Link">
          <li> <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a> </li>
          </ul> 
          <div id="Inhalt5">
          <p>Und so einfach geht's <br /> <b>1.</b>Simulationsanfrage stellen.<br /> <b>2.</b>BHKW-Gutachten abwarten. <br /> <b>3.</b>Unverbindliches Angebot erhalten - vom Installateur in Ihrer Nähe.</p> 
          </div>
          <ul id="Link2">
          <li> <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt; </a> </li>
          </ul>
          <div id="Inhalt6">
          <p> <b>BHKWPartner - in Deutschland einmalig!</b> <br /> Der erste neutrale BHKW - Volldienstleister. Von der Auslegung bis zur Planung, Inbetriebnahme und Abrechnung.<br /> Alle marktg&auml;ngige,  zuverl&auml;ssige und f&ouml;rderf&auml;hige Aggregate von 1&ndash;500 kW(el)!  </p> 
          </div>
          <div id="Inhalt7">
          <p> <b>Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung. F&uuml;r Sie immer Up to Date! 
          <br /> Blockheizkraftwerk ?-Ja,aber richtig!</b> </p>
          </div>




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


      </body> 





  </html>

Alles anzeigen

design.css:

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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:3cm; 
line-height:1cm;
float:right;
width:80%; 
font-size:12pt;  
} 
div#Inhalt2 { 
color:black; 
font-size:11pt; 
float:right; 
font-size:12pt; 
width:81%; 
} 
div#Inhalt3 {
color:red; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%; 
line-height:2cm;
}
div#Inhalt4 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
} 




ul#Link {
color:black; 
font-size:11pt;
float:right; 
font-size:9pt; 
width:81%;
text-indent:4cm;
line-height:1cm;
}
div#Inhalt5 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
}
ul#Link2 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
text-indent:2cm;
line-height:1cm;
}
div#Inhalt6 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
}
div#Inhalt7 {
color:black; 
font-size:12pt;
float:right; 
font-size:12pt; 
width:81%;
line-height:1cm;
}
ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both; 










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:90px; 
width:182px; 
float:left; 
clear:left; 
} 




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




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




div#fusszeile { 




background: #FFA500; 
height: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

PS: Statt b besser strong benutzen, wenn eine logische Wichtigkeit vorliegt, wenn du nur formatieren willst über span mit CSS

Warum, was ist den der Nachteil von <b>?

Hab ein kleines Problem wieder mit dem Menü, wahrscheinlich weil der Text zu lange ist, wie kann ich den Fehler am besten beheben?

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.html"> Impressum </a> </li> 
          </ul>        
         <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 />
          <b>BHKW&ndash;Gutachten, mit Aggregatsempfehlung</b>&ndash; ob und <b>wie es sich rechnet</b>&ndash;was es kostet,<b>was es bringt!</b> </p>
          </div> 
          <div id="Inhalt3">
          <p> <b>Unkostenbeitrag</b> f&uuml;r herstellerunabh&auml;ngiges <b>Gutachten 27.--€ zzgl. Ust. </b> </p>
          </div>
          <div id="Inhalt4">
          <p> <b>Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW nutzen!</b> </p> 
          </div>
          <ul id="Link">
          <li> <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a> </li>
          </ul> 
          <div id="Inhalt5">
          <p>Und so einfach geht's <br /> <b>1.</b>Simulationsanfrage stellen.<br /> <b>2.</b>BHKW-Gutachten abwarten. <br /> <b>3.</b>Unverbindliches Angebot erhalten - vom Installateur in Ihrer Nähe.</p> 
          </div>
          <ul id="Link2">
          <li> <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt; </a> </li>
          </ul>
          <div id="Inhalt6">
          <p> <b>BHKWPartner - in Deutschland einmalig!</b> <br /> Der erste neutrale BHKW - Volldienstleister. Von der Auslegung bis zur Planung, Inbetriebnahme und Abrechnung.<br /> Alle marktg&auml;ngige,  zuverl&auml;ssige und f&ouml;rderf&auml;hige Aggregate von 1&ndash;500 kW(el)!  </p> 
          </div>
          <div id="Inhalt7">
          <p> <b>Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung. F&uuml;r Sie immer Up to Date! <br /> Blockheizkraftwerk ?-Ja,aber richtig!</b> </p>
          </div>
           <div id="linksunten"> 
           <p> 
    <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
        <img style="border:0;width:88px;height:31px;padding-top:40%;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

design.css:

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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:3cm; 
line-height:1cm;
float:right;
width:80%; 
font-size:12pt;  
} 
div#Inhalt2 { 
color:black; 
font-size:11pt; 
float:right; 
font-size:12pt; 
width:81%; 
} 
div#Inhalt3 {
color:red; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%; 
line-height:2cm;
}
div#Inhalt4 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
} 




ul#Link {
color:black; 
font-size:11pt;
float:right; 
font-size:9pt; 
width:81%;
text-indent:4cm;
line-height:1cm;
}
div#Inhalt5 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
}
ul#Link2 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
text-indent:2cm;
line-height:1cm;
}
div#Inhalt6 {
color:black; 
font-size:11pt;
float:right; 
font-size:12pt; 
width:81%;
}
div#Inhalt7 {
color:black; 
font-size:12pt;
float:right; 
font-size:12pt; 
width:81%;
line-height:1cm;
}
ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both; 










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:160px; 
width:182px; 
float:left; 
clear:left; 










} 




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




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




div#fusszeile { 




background: #FFA500; 
height: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

Du hast immer noch zwei Inhalts divs.. funktioniert zwar so, wie du es jetzt gemacht hast, aber warum packst du das nicht in einen div?

Das hab ich auch schon überlegt

hume

Zitat

Steht da immer noch, das li^^

Wurde gerade korrigiert. Hab es jetzt hin bekommen.

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>          

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

           <div id="linksunten"> 
           <p> 
    <a href="http://jigsaw.w3.org/css-validator/check/referer"> 
        <img style="border:0;width:88px;height:31px;padding-top:40%;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

design.css:

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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:1cm; 
float:right;
width:80%; 
font-size:12pt;  
} 
div#Inhalt2 { 
color:black; 
font-size:11pt; 
line-height:1cm; 
float:right; 
font-size:12pt; 
width:81%; 
} 

ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both; 










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:124px; 
width:184px; 
float:left; 
clear:left; 










} 




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




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




div#fusszeile { 




background: #FFA500; 
height: 93px; 
text-align: center; 
line-height:2cm; 
clear:both; 




}

Alles anzeigen

PS: Bitte um Aufklärung wenn etwas nicht korrekt sein sollte.

hume

Zitat

Dann schau mal in dein Beispiel und schau, was du da eigentlich definiert hast und probier deine Probleme zu verstehen. Wenn es dann immer noch nicht klappt, probier mal dir das ganze mit so Pfeilen, wie sie auf der Seite waren, die ich vor dem Beispiel genannt hatte, zu verdeutlichen. So hab ich es damals gelernt - hat ganz gut funktioniert, würde ich sagen^^

Ich werde mir dass ganze genau anschauen und wie du sagtest probieren dass Problem zu verstehen.

Code

ul#navigation { 
[...] 
}

Du meinst aber schon die CSS Datei oder? Weil in der Index.html Datei kann ich unmöglich dass "li" weglassen.

Wenn du CSS Datei meinst hab ich sie folgendermaßen geändert, wie du es meintest. Ich hoffe ich habe dich richtig verstanden

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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:1cm; 
float:right;
width:80%; 
font-size:12pt; 
margin:0; 
} 
div#Inhalt2 { 
color:black; 
font-size:11pt; 
line-height:1cm; 
float:right; 
font-size:12pt; 
width:81%; 
} 

ul#navigation li { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both; 










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:124px; 
width:184px; 
float:left; 
clear:both; 










} 




ul#navigation 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: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

Richtig. Du musst nur deine Sachen noch reinschreiben, das wollte ich jetzt nicht alles übernehmen.. Probier es nachzuvollziehen..

Ich hab mir mal dein Beispiel angeschaut, sehr verständlich... Was ich überhaupt nicht verstehe wie ich auf meiner Seite den Text nach oben bringe und das DIV nach oben dass es aufschließt. Weil normal müsste dass DIV eigentlich aufschließen, da es ja gleich nach Navigation ist, was es aber nicht macht. Ich kann zwar jetzt dein Beispiel verwenden, aber am Schluss hat es eigentlich keinen Sinn da ich es ja selbst verstehen muss, wie ich die Objekte usw. ausrichten kann...

hume

Zitat

Ich hatte dir vorhin Code gepostet mit den richtigen float-Einstellungen...

Sorry, verlesen meinst du dass Beispiel?

hume

Zitat

Ne mögliche Idee wäre auch, dass du die Navigation im HTML über den Inhalt schreibst, dann kannst du beides nach links floaten, dann wäre das mit der Breite einfacher..

Hab mal deine Variante genommen, aber wie bekomme ich nun den Inhalt nach oben und wie bekomme ich dass DIV "linksunten" nach oben dass es aufschließt mit der Navigation?

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

           <div id="linksunten">
           <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px;padding-top:40%;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

design.css:

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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:1cm; 
float:right;
width:80%;
font-size:12pt;
margin:0;
} 
div#Inhalt2 { 
color:black; 
font-size:11pt; 
line-height:1cm; 
float:right;
font-size:12pt;
width:81%;
} 

ul#navigation li { 
margin: 0px; 
width: 18%; 
float:left;
clear:both;










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:124px; 
width:184px; 
float:left; 
clear:both;










} 




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: 76px; 
text-align: center; 
line-height:2cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

Du musst dem Inhalt und der Navigation jeweils eine Breite geben (am besten in %), und zwar so, dass sie beide noch nebeneinander Platz haben. Da die Navigation schon ne Breite hat, musst du den Inhalt anpassen. Einfach ausprobieren, womit es passt, ein Wert um die 80% müsste passen.

Du meinst schon die Breite im Inhalt oder?? Kann sich dadurch die Navigation anpassen?

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="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> </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:40%;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

design.css:

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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:1cm; 
float:right;
width:80%;
font-size:1pt;
} 
div#Inhalt2 { 
color:black; 
text-indent:1cm; 
font-size:12pt; 
line-height:1cm; 
float:right;
font-size:1pt;
width:80%;
} 

ul#navigation li { 
margin: 0px; 
width: 18%; 
float:left;
clear:both;










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:114px; 
width:181px; 
float:left; 
clear:both;










} 




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: 103px; 
text-align: center; 
line-height:2cm; 
margin-top:3cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

Hoffe du verstehst was ich gemeint habe.

Ich glaube ich verstehe was du meinst
Habs mal versucht, und die Objekte stehen richtig, nun hat es mir aber die Navigation verschoben unter der Text steht daneben ersichtlich im Screenshot muss ich jetzt die Navigation vergrößern? Ich hoffe dass ich es so richtig gemacht habe wie du es gemeint hast. Poste zur Sicherheit nochmal den Code.

[Blockierte Grafik: http://s5.directupload.net/images/user/100622/temp/utm3v8u4.jpg]

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="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> </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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:9cm; 
float:right;




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

ul#navigation li { 
margin: 0px; 
width: 18%; 
float:left;
clear:both;










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:113px; 
width:181px; 
float:left; 
clear:both;










} 




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: 104px; 
text-align: center; 
line-height:2cm; 
margin-top:3cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

Jetzt hast du ja gar kein float mehr benutzt.

Jetzt hab ich aber wieder dass Problem dass es mir alles verschoben hat
Warum verschiebt es den alles?

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="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> </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; 
background-repeat:no-repeat; 




} 







div#Inhalt { 
color:black; 
text-indent:9cm; 
float:right;




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

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










        
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:113px; 
width:181px; 
float:left; 
clear:both; 










} 




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: 100px; 
text-align: center; 
line-height:2cm; 
margin-top:3cm; 
clear:both; 




}

Alles anzeigen

hume

Zitat

Doch, auf der Seite "Fusszeile integrieren" ist kurz erwähnt, dass man die Fusszeile durch "clear: both;" abgrenzen muss. (<a class="postlink" href="http://www.html-seminar.de/css-design-fusszeile-integrieren.htm">https://www.html-seminar.de/css-design-f ... rieren.htm</a>)

Stimmt, hab ich wahrscheinlich übersehen :wink:

Jetzt bin ich schon weiter gekommen, aber ich hab noch ein kleines Problem und zwar die Navigation will nicht ganz richtig. Möchte dass die Navigation mit dem Header aufschließt, weiteres Problem obwohl ich einen erzwungenen Umbruch gemacht habe, geht dieser Text links weiter "BHKW - Gutachten,", warum? Hier nochmal die Url: <a class="postlink" href="http://www.bhkwpartner.de/test">http://www.bhkwpartner.de/test</a>

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="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 /> 
          <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;
background-repeat:no-repeat;




}







div#Inhalt {
color:black;
text-indent:9cm;




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

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










        
}
div#linksunten {
background:#FFA500;
visibility:visible;
height:113px;
width:181px;
float:left;
clear:both;










}




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: 100px;
text-align: center;
line-height:2cm;
margin-top:3cm;
clear:both;




}

Alles anzeigen

PS: Bitte um kurze Schilderung ob meine Vorgehensweise richtig oder falsch ist, ich mach nämlich auch Fehler....

hume

Zitat

Ich hab doch oben geschrieben wer floatet muss auch clearen

Ok, bei manchen Antworten kennt man sich am Schluss dann nicht mehr aus, erst clearen, dann wieder nicht

Zitat

Hab dir doch oben ein Beispiel gepostet, ich empfehle dir dringend:

LERN GRUNDLAGEN:

Ok, ich werde sie durchnehmen Was mir aufgefallen ist, clearen ist aber hier nicht aufgezeigt. <a class="postlink" href="http://www.html-seminar.de/design_per_css_-_float.htm">https://www.html-seminar.de/design_per_css_-_float.htm</a>