Inhalt

hume · 24. Juni 2010

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?

lauras · 24. Juni 2010

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

Du musst dringend die Grundlagen lernen, so kommen wir hier nicht weiter. Du musst wenigstens class und ID beherrschen - auch die Unterschiede und wann man was anwendet, sonst fangen wir immer wieder von vorne an.

LG

hume · 24. Juni 2010

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.

lauras · 24. Juni 2010

Man schreibt nichts in HTML, nur damit man es in CSS definieren kann (abgesehen von den class und ID).. der HTML Code bleibt prinzipiell immer der gleiche.. Abgesehen davon kannst du auch a eine id oder class geben...

hume · 29. Juni 2010

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.

lauras · 29. Juni 2010

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

LG

hume · 29. Juni 2010

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?

lauras · 29. Juni 2010

Wenn du irgendwo zwischen den divs einen Umbruch hast ist es normal wenn es sich verschiebt.. du greifst ja damit ins Layout der Seite ein..

LG

hume · 29. Juni 2010

Zitat

Wenn du irgendwo zwischen den divs einen Umbruch hast ist es normal wenn es sich verschiebt.. du greifst ja damit ins Layout der Seite ein..

Ja, dass stimmt auch wieder Hab aber jetzt herausgefunden dass es eigentlich nicht an den Umbrüchen lag sondern an den line-height.

Wenn ich es so mache wird es verschoben

Code

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

entferne ich dass line-height schließt es wieder auf. Was ich nicht verstehe ist dass eigentlich line-height für den Zeilenabstand da ist, aber warum wird es mir dann verschoben. Gibt es außer Line-height noch eine andere Lösung oder außer Umbrüchen? margin-top ist auch gerade nicht so gut.

lauras · 29. Juni 2010

Zitat von "hume"

Was ich nicht verstehe ist dass eigentlich line-height für den Zeilenabstand da ist, aber warum wird es mir dann verschoben. Gibt es außer Line-height noch eine andere Lösung oder außer Umbrüchen? margin-top ist auch gerade nicht so gut.

Naja, line-height bezeichnet eigentlich die Höhe einer Zeile Text z.B. in einem Absatz. Das hat nichts mit Umbrüchen oder margin-top zu tun.

Du musst auch mal deinen HTML-Code sauber kriegen.. Ich glaube mittlerweile, dass du das Prinzip von HTML und dem Zusammenspiel mit CSS noch nicht ganz verstanden hat, vielleicht solltest du das einmal nacharbeiten!

LG

hume · 29. Juni 2010

Zitat

Naja, line-height bezeichnet eigentlich die Höhe einer Zeile Text z.B. in einem Absatz. Das hat nichts mit Umbrüchen oder margin-top zu tun.

Ich meine wenn ich einen Text eine Zeile nach unten setzen möchte muss ich normalerweise line-height verwenden oder?

lauras · 29. Juni 2010

Line-height bezeichnet die Höhe einer Zeile Text z.B. in einem Absatz.

Ich verstehe nicht, was du mit runtersetzen meinst, aber ich wette dass es nichts mit line-height zu tun hat.

Sören · 29. Juni 2010

Wie meinst du das jetzt genau?
Bei mir verwende ich überhaupt kein Line-Height.

Sarkkan · 29. Juni 2010

Wenn du einen Text eine Zeile nach unten bewegen möchtest müsstest du diesen Auszeichnen und somit ein

Code

margin-top: 1em;

geben.

Line-height regelt ja nur, wie hoch eine Zeile ist.
Stell dir mal so ein Altmodisches liniertes Schulheft vor. Mit 'line-height' gibst du an, wie hoch eine dieser Zeilen ist

Hoffe hab es richtig verstanden xD Ist mir iwie zu warm zum nachdenken ._.

lauras · 29. Juni 2010

Ja, genau das.

Das Problem ist, dass da wenig Grundlagen vorhanden sind und da vieles nicht sofort verständlich ist

LG

hume · 30. Juni 2010

Zitat

Ja, genau das.

Das Problem ist, dass da wenig Grundlagen vorhanden sind und da vieles nicht sofort verständlich ist

Ja, dass stimmt schon Also dass mit dem margin-top hab ich jetzt verstanden, dass untere DIV "linksunten wird mir schon wieder verschoben Was mach ich nur falsch???

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>
         <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="Abstand1">Und so einfach geht's</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="zusammen"> <strong>BHKWPartner - in Deutschland einmalig!</strong> </span> </p> 
         <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> 
         <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:20%;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; 
line-height:1cm;
float:right;
width:80%; 
font-size:12pt;
font-style:italic;
} 
.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;
margin-top:1em;
}
.Abstand {
color:black;
width:80%;
font-size:12pt;
float:right;
}
.Abstand1 {
color:black;
width:80%;
font-size:12pt;
float:right;
margin-top:4mm;
}
.Blau {
color:black;
float:right;
width:80%;
}
.Link2 {
color:red;
width:80%;
font-size:12pt;
text-indent:2cm;
line-height:1cm;
float:right;
}
.unten {
color:black;
font-size:10pt;
width:80%;
float:right;
line-height:2cm;
}
ul#navigation  { 
margin: 0px; 
width: 18%; 
float:left; 
clear:both;       
} 
div#linksunten { 
background:#FFA500; 
visibility:visible; 
height:83px; 
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: 137px; 
text-align: center; 
line-height:3cm; 
clear:both; 
}

Alles anzeigen

Sören · 30. Juni 2010

Linksunten muss zwischen navi und inhalt, hatten wir aber schon mal.

Jetzt hast du ja gar kein divinhalt mehr?

Ich habe deinen Code mal ein bischen aufgeräumt, sonst dauert das hier ja noch ewig:
Schau was ich verändert habe und versuche es zu verstehen.

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




            <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 class="Rot">
              <strong>
               Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten
               20.--€ zzgl. Ust.
              </strong>
             </p>
             <p>
              <strong>
               Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW
               nutzen!
              </strong>
             </p>
             <p>
              <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a>
             </p>
             <p>Und so einfach geht's</p>
             <p>
              <strong>1. </strong>Simulationsanfrage stellen.<br />
              <strong>2. </strong>BHKW-Gutachten abwarten.<br />
              <strong>3.</strong>Unverbindliches Angebot erhalten -
              vom Installateur in Ihrer Nähe.
             </p>
             <p><strong>
              <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt;</a>
             </strong></p>
             <p><strong>BHKWPartner - in Deutschland einmalig!</strong></p>
             <p>
              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)!
             </p>
             <p>
              <strong>
               Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung.
               F&uuml;r Sie immer Up to Date!
               Blockheizkraftwerk ? - Ja, aber richtig!
              </strong>
             </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;
    }







    #inhalt {
        color: black;
        font-size: 11pt;
        float: right;
    }
    #inhalt p {
        margin-bottom: 1em;
    }
    #inhalt h4 {
    line-height:1cm;
    font-size:12pt;
    font-style:italic;
    }
    .Rot {
    color:red;
    line-height:1cm;
    }
    #inhalt a {
        color: blue;
        margin-left: 2em;
    }
    ul#navigation  {
    margin: 0px;
    width: 18%;
    float:left;
    clear:both;
    }
    div#linksunten {
    background:#FFA500;
    visibility:visible;
    height: 150px;
    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: 137px;
    text-align: center;
    line-height:3cm;
    clear:both;
    }

Alles anzeigen

hume · 30. Juni 2010

Zitat

Linksunten muss zwischen navi und inhalt, hatten wir aber schon mal.

Ja, ich hab mal deinen Code zum testen verwendet, der Text ist aber dann unten...
Wenn ich dass obere DIV nach oben nehme in der HTML Datei, wird der Text nach unten gesetzt. Es muss ja eine Möglichkeit geben, dass untere DIV "linksunten" nach oben zu bekommen, ohne in der HTML Datei basteln zu müssen?

Sören · 30. Juni 2010

Ups, das mit dem Text ist mir nicht aufgefallen, in der Vorschau von Scriptly war es richtig.

Du wirst es aber nicht hinbekommen ohne in der HTML zu basteln. linksunten muss nämlich nach navi und vor inhalt.

Edit:gelöst

Um Navigation und linksunten einen neuen div machen und diesem in der CSS floaten, clearen und ne Breite geben, dafür bei navigation und linksunten float und clear wegnehmen.

Nur funktionieren bei Navigation und Linksunten jetzt keine Prozentbreiten mehr, wieso auch immer.

index:

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="left">
              <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:20%;padding-left:25%;"
                src="http://jigsaw.w3.org/css-validator/images/vcss"
                alt="CSS ist valide!" />
        </a>
    </p> </div>
    </div>
            <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 class="Rot">
              <strong>
               Unkostenbeitrag f&uuml;r herstellerunabh&auml;ngiges Gutachten
               20.--€ zzgl. Ust.
              </strong>
             </p>
             <p>
              <strong>
               Den bis zu 4,5-fachen Vorteil mit dem richtigen BHKW
               nutzen!
              </strong>
             </p>
             <p>
              <a href="aktuelles.html">Lesen sie auch hier&lt;&lt; </a>
             </p>
             <p>Und so einfach geht's</p>
             <p>
              <strong>1. </strong>Simulationsanfrage stellen.<br />
              <strong>2. </strong>BHKW-Gutachten abwarten.<br />
              <strong>3.</strong>Unverbindliches Angebot erhalten -
              vom Installateur in Ihrer Nähe.
             </p>
             <p><strong>
              <a href="simulation.html">Erstellen Sie Ihre Simulationsanfrage hier&lt;&lt;</a>
             </strong></p>
             <p><strong>BHKWPartner - in Deutschland einmalig!</strong></p>
             <p>
              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)!
             </p>
             <p>
              <strong>
               Spezialist f&uuml;r BHKW-Auslegung aller Gr&ouml;ßenordnung.
               F&uuml;r Sie immer Up to Date!
               Blockheizkraftwerk ? - Ja, aber richtig!
              </strong>
             </p>
            </div>




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







          </body>




      </html>

Alles anzeigen

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;
    }




    #left {
        float: left;
        clear: left;
        width: 18%;
    }
    #inhalt {
        color: black;
        font-size: 11pt;
        float: right;
        width: 80%;
    }
    p {
        margin-bottom: 1em;
    }
    h4 {
    line-height:1cm;
    font-size:12pt;
    font-style:italic;
    }
    .Rot {
    color:red;
    line-height:1cm;
    }
    #inhalt a {
        color: blue;
        margin-left: 2em;
    }
    #linksunten {
    background:#FFA500;
    visibility:visible;
    height: 150px;
    width:180px;
    }
    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: 137px;
    text-align: center;
    line-height:3cm;
    clear:both;
    }

Alles anzeigen

hume · 30. Juni 2010

Zitat

Um Navigation und linksunten einen neuen div machen und diesem in der CSS floaten, clearen und ne Breite geben, dafür bei navigation und linksunten float und clear wegnehmen.

Nur funktionieren bei Navigation und Linksunten jetzt keine Prozentbreiten mehr, wieso auch immer.

Ja, jetzt funktioniert es, Frage aber wie kommst du auf #inhalt und #inhalt a?

Inhalt

Jetzt mitmachen!

Teilen