Problem bei dem Kapitel Design per CSS - float

t-i-m · 17. August 2012

hallo

Ich bin gerade am CSS lernen und komme im besagten kapitel nicht weiter

der Code der im kapitel angezeigt wird muss doch als komplette datei folgendermasen aussehen

HTML

<!DOCTYPE html>
 
<html>
 
<head>
 <title>Navigation auf der Steite</title>
 <style type="text/css">
<!--
body {
  text-align: center; /* Zentrierung IE */
}
#seitenbereich {
  text-align:left;  /* Inhalt wieder links */
  margin: 0 auto;   /* Zentrierung mitte */
  width: 780px;
  background-color:silver;
}
#navi {
  float:left;
  width:13em;
  background-color:thistle;
}
#inhalte {
  margin-left: 14em;
  background-color:lightblue;
}
 -->
</style>
 




 
</head>
 
<body>




<div id="seitenbereich">
  <div id="navi">
    <ul>
      <li>Startseite</li>
      <li>Impressum</li>
    </ul>
  </div>
  <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
  </div>
</div>
 




</body>
</html>

Alles anzeigen

im IE sieht die seite jedoch so aus

[Blockierte Grafik: http://img5.fotos-hochladen.net/uploads/d19pmoacy5z.png]

danke für die hilfe

grüße tim

lauras · 17. August 2012

Sieht ansich nicht schlecht aus, leider kann man dein Bild nicht vergrößern
Wie dachtest du denn, dass es aussehen muss?

t-i-m · 17. August 2012

ersten danke für die schnelle antwort
hier nochmal das bild in groß http://img5.fotos-hochladen.net/uploads/d2tc5wxyszk.png
die website is mittig und ich habe den grauen seitenbereich. Ich dachte nur, dass dieser bis ans untere ende der seite geht und sich nicht zwischen den beiden anderen bereichen befindet.
die breite beträgt ja 780px
und dieser neue seitenbereich wird um die andren herum gelegt, daher sollte er auch etwas höher sein und die anderen umschließen
oder hab ich das falsch verstanden?

lauras · 17. August 2012

Naja, wenn du das willst musst du das auch so schreiben Woher soll der Browser wissen, wie hoch der sein soll? Wenn keine Höhe angegeben ist haben Elemente i.d.R. die Höhe, die sie benötigen
Probier mal dem Seitenbereich ein height: 100%; zu geben

cgee · 17. August 2012

HTML

#seitenbereich {
  text-align:left;  /* Inhalt wieder links */
  margin: 0 auto;   /* Zentrierung mitte */
  width: 780px;
 height: 200px;
  background-color:silver;
}

Versuch das mal und versuch es zu verstehen.

Roland · 17. August 2012

boar ich kenne das problem t-i-m

das float nervt ich verstehe das immer noch nicht.
ich denke genauso wie du eigentlich muss doch das graue alles umschließen was drin ist mm^^
aber das tut es nicht ich verwende dafür immer einen kleinen trick ich füge als letztes element in den grauen bereich (also da wo die floads sind) immer noch ein div ein mit dem style clear: both;
clear: both; hebt das float wider auf so ,dass das div dann unter die beiden fload elemente kommt daran wird dann das graue ausgerichtet an gefloateten dingen richtet er es komischerweise nicht aus.

aber das sind so paar probleme die überall auftauchen der browser machts nicht so wie man sich das dachte^^ also keine sorge

http://test.ds-pro.de/float.html <--- so dachtest du dir das doch nehme ich an?

HTML

<!DOCTYPE html>




<html>




<head>
 <title>Navigation auf der Steite</title>
 <style type="text/css">




body {
  text-align: center; /* Zentrierung IE */
}
#seitenbereich {
  text-align:left;  /* Inhalt wieder links */
  margin: 0 auto;   /* Zentrierung mitte */
  width: 780px;
  background-color:silver;
}
#navi {
  float:left;
  width:13em;
  background-color:thistle;
}
#inhalte {
  margin-left: 14em;
  background-color:lightblue;
}
#blocker{
   clear: both;
}




</style>




</head>




<body>




<div id="seitenbereich">
  <div id="navi">
    <ul>
      <li>Startseite</li>
      <li>Impressum</li>
    </ul>
  </div>
  <div id="inhalte">
    Hier HTML und CSS lernen und die
    eigene Website erstellen - selbst ist der Mensch
  </div>
  <div id="blocker"></div>
</div>







</body>
</html>

Alles anzeigen

lauras · 18. August 2012

Float nimmt halt die damit ausgezeichneten Elemente aus.dem Fluss der anderen Elemente heraus. Somit hat der Seitenbereich quasi keinen Inhalt mehr. So schwer ist das nun nicht wenn man es einmal lernt und versteht. Und das Problem tritt in der Realität nach meiner Erfahrung eher weniger auf.

Problem bei dem Kapitel Design per CSS - float

Jetzt mitmachen!

Teilen