Padding-Top im div Container wird nicht funktioniert nicht

[ps2freak]

Hallo, ich habe mittlerweile etwas mehr Ahnung von PHP, html und CSS.
Mein Problem ist, dass ich n CSS stylesheet gemacht hab und dort verschiedene div-container gemacht hab, unter anderem einen festen footer, ich weiss nicht ob ausreicht den CSS code nur für den footer hier reinzupacken, darum mach ich einfach mal alles rein. Das Problem ist halt, dass ich in der html Datei in den entsprechenden div-container einen Text reingepackt habe, dieser wird aber nicht korrekt angezeigt! Es wird bloß der Padding left gemacht, aber der Abstand zum oberen Rand des divs wird nicht ausgeführt. Also wie gesagt, es handelt sich um den div#footer!

 body{
  margin:0;
  padding:101px 0 262px 200px;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:40px;
  background-image:url(../images/header.png);
 }
 div#inner-header{
     position:absolute;
     top:40px;
     left:200px;
     width:100%;
     height:50px;
     background:white;
 }
 div#inner-inner-header{
     position:absolute;
     top:90px;
     left:200px;
     width:100%;
     height:1px;
     background:#cccccc;
 }
 div#left-sidebar{
  position:absolute;
  top:40px;
  left:0;
  width:180px;
  height:100%;
  background:#f3f3f3;
 }
 div#footer{
  position:absolute;
  bottom:0;
  left:180px;
  width:100%;
  height:30px;
  font-size:12px;
  padding-left:20px;
  padding-top:9px;
  background:white;
 }
  div#inner-footer{
  position:absolute;
  bottom:30px;
  left:180px;
  width:100%;
  height:1px;
  background:#cccccc;
 }
  div#inner-inner-footer{
  position:absolute;
  bottom:31px;
  left:180px;
  width:100%;
  height:231px;
  background:white;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#inner-header{
      position:fixed;
  }
  body>div#inner-inner-header{
      position:fixed;
  }
  body>div#left-sidebar{
   position:fixed;
  }
  body>div#inner-left-sidebar{
    position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
  body>div#inner-footer{
   position:fixed;
  }
  body>div#inner-inner-footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }

Wenn ihr noch mehr braucht, sagt bitte bescheid! Ich hoffe, es handelt sich um einen ganz simplen Anfängerfehler...


MfG.




Edit:Nun, nach fast 3 Stunden rumprobiererei habe ich es hingekriegt, dass der Text da ist, wo er hingehört. Ich habe einfach den entsprechenden Text in einen <p> Tag gesetzt und dann halt mit margin den Abstand festgelegt - und siehe da, es hat geklappt ;Jump
Da mir die Lösung leicht unschön vorkommt, bin ich trotzdem noch daran interessiert, ob es anders zu lösen gewesen wäre!

 

[thuemmy]

Ich habe einfach den entsprechenden Text in einen <p> Tag gesetzt und dann halt mit margin den Abstand festgelegt - und siehe da, es hat geklappt ;Jump
Da mir die Lösung leicht unschön vorkommt, bin ich trotzdem noch daran interessiert, ob es anders zu lösen gewesen wäre!

Das kann man so nicht sagen, ob das anders zu lösen gewesen wäre oder nicht, da wir den Inhalt des Textes nicht kennen.

Aber grundsätzlich ist zu sagen, dass HTML lediglich dazu dient, um Inhalte einer Webiste semantisch korrekt auszuzeichnen, mit wenigen Ausnahmen. Zu den Ausnahmen zählt u.a. das <div>-Tag. Das dient dazu, mehrere Elemente zu gruppieren, um sie gemeinsam mit CSS zu gestalten. Ein Text alleine in einem div-Container ist daher auf jeden Fall falsch, da ein div-Container keine Bedeutung in Bezug auf den Inhalt hat.

Auf jeden Fall wäre es sinnvoll gewesen, auch den HTML-Code zu der betreffenden Stelle zu posten. Am allerbesten ist aber immer noch, den Link zur "Problem"-Seite zu posten, zumindest wenn es Fragen zu HTML und CSS gibt. Dann hat man alle Informationen die man braucht, und kann das Problem mit den entsprechenden Tools "untersuchen".

Hilfreiche Tools zur Webentwicklung sind die Firefox-AddOns WebDeveloper und Firebug.

 

[ps2freak]

Okay, vielen Dank für deine Hinweise und Tips! Aber eine Frage habe ich noch:

Ein Text alleine in einem div-Container ist daher auf jeden Fall falsch, da ein div-Container keine Bedeutung in Bezug auf den Inhalt hat.

WiebitteWas? :?::?::?:
Es handelt sich übrigends um nur eine Zeile Text der Schriftgröße 12! Also das sind erstmal nur zum Testen irgendwelche zwei, drei Wörter gewesen...

MfG.

 

[Elroy]

Es handelt sich übrigends um nur eine Zeile Text der Schriftgröße 12!

Selbst wenn es nur ein Wort ist sollte man es semantisch richtig auszeichnen. Denn dazu ist HTML nun einmal da.

Gruss
Elroy

 

[ps2freak]

Dennoch weiss ich immernochnicht was jetzt semantisch richtig ist in diesem Fall....

 

[thuemmy]

Ganz einfach ausgedrückt, bedeutet semantisches HTML nichts anderes als bedeutungsvolles HTML (Semantik = Lehre der Bedeutung). HTML-Code schreiben heißt somit nichts anderes als Inhalte gliedern, Strukturen schaffen, logische Beziehungen herstellen, Bedeutung markieren. Die HTML-Elemente übermitteln bei semantischem Code nicht wie die Inhalte aussehen sollen, sondern welche Bedeutung oder Funktion sie haben.

Quelle: Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel

Wie schon in meinem ersten Posting, habe ich darauf hingewiesen, dass wir es nicht wissen können, da wir die Bedeutung der 2-3 Worte nicht kennen. Aber bei normalem Fließtext ist das <p>-Tag nicht falsch.