Absätze funktionieren nicht mehr!

Yvi · 12. Juli 2009

Hallo,

Hier kommt auch schon mein erstes Problem, ich hab mich durch das Seminar durch gearbeitet und bin jetzt an der Beispiel Website. Ich hab diese gleich mit eigenen Bildern und Inhalt gemacht vom Prinzip aber genauso wie auch die Beispiel Seite. Klappt auch alles wunderbar bis auf die
Absätze. Ich benutz ganz normal die Funktion <p>Text</p> jedoch wird nachher auf der fertigen Seite kein Absatz angezeigt! Sämtlicher Text wird einfach untereinander geschrieben ohne Abstand dazwischen.
Ich hab auch schon den Quelltext der Beispielseite angeschaut aber der war auch nicht anders als meiner. Wenn ich meinen Quelltext komplett auf eine andere Datei kopiere zeigt es die Absätze an! (Jedoch die Bilder nicht mehr außerdem zeigt es keine farblichen Hervorhebungen oder Fehler mehr an. Ich arbeite mit Webocton-Scriptly)
Woran kann das liegen?

Ich würde mich über Hilfe freuen
Liebe Grüße
Yvi

lauras · 12. Juli 2009

Eventuell hast du den p-Tag in der CSS schon definiert, oder du verwendest die falsche Doctype-Definition. Poste doch mal den kompletten Code und auch den der Datei, wo es funktioniert.

Greetz
Laura

Yvi · 12. Juli 2009

Ok hier mal meine Datei:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>Something to Say!</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>




 <div id="kopfbereich">
    <p>Something to Say!</p>
 </div>




 <div id="steuerung">
    <a href="index.htm">Startseite</a>
    <a href="impressum.htm">Impressum</a>
    <a href="kontakt.htm">Kontakt</a>




 </div>




 <div id="schatten">




 </div>




 <div id="inhalt">
   <h1>Willkommen bei Something to Say!</h1>




   <p>Hier findet ihr meinen Blog, also immer wieder neue Themen die mich besch&auml;ftigen oder die ich einfach mal ansprechen m&ouml;chte! Was k&ouml;nnnt ihr hier finden?</p>




   <ul>
     <li>Aktuelles zu meiner Sammlung!</li>
     <li>Aktuelle Themen die mich interessieren</li>
     <li>Was wollt ihr noch mehr?!</li>
   </ul>




   <p>Warum funktioniert es nicht?</p>
 </div>




 <div id="fusszeile">
 <center>Something to Say! 2009</center> </div>
 <div id="schatten"></div>




</body>
</html>

Alles anzeigen

Hier die css dazu:

Code

html, body
{
  font:100% Arial, Helvetica, sans-serif;







}







* {
  margin:0;
  padding:0;
}







 #kopfbereich {
     background:url(bilder/headerfertig2.jpg) no-repeat left top;
     height:150px;
 }




  #kopfbereich p {
     color:black;
     text-align:right;
     font-size:2em;
     padding:0.6em 2em 0 0;
}







 #steuerung {
     background-color:#B3B3B3;
     color:white;
     word-spacing:10px;
     padding-left:1em;
 }




 #steuerng a:link { color:white; text-decoration:none; }










 #schatten {
     background:url(bilder/schattenwurf-grau-v.png) repeat-x;
     height:12px;




 }




 #inhalt {
  padding-left:2em;
  line-height:20pt;







 }
 #inhalt p h1 h2 ul  {
    padding-bottom:.7em;







  }




 #inhalt ul {
    padding-left:2em;
  }




 #fusszeile {
    background-color:#B3B3B3;
    color:white
  }

Alles anzeigen

Und wenn ich den ersten Quellcode in eine neu geöffnete Datei komplett kopiere zeigt es den Abstand an, jedoch kein Bild mehr (oder sonstige Farben)

Danke schon mal fürs duchschaun!

lauras · 12. Juli 2009

Also das mit dem Abstand liegt höchst wahrscheinlich daran, dass du p in der CSS falsch definiert hast.

Wenn du den Abstand nach unten einstellen willst, nimmst du margin und nicht padding - ich denke doch mal dafür war das padding gut, oder?

Das es in der neuen Datei nicht funktioniert mit den Bildern und Farben ist klar, schließlich werden diese über das Stylesheet definiert, was bei einer Datei, die nicht im gleichen Verzeichnis wie das Sheet oder gar nciht abgespeichert ist ja gar nicht geht, da das Stylesheet dann nicht vorhanden ist.

LG
Laura

Yvi · 12. Juli 2009

Danke für die schnelle Antwort!

Ah ok jetzt macht das mit der neuen Datei auch Sinn. Wenn ich diese speichere sind die Absätze wieder weg. Also muss der Fehler definitiv im CSS sein.

Das mit Margin verändert gar nichts. Hab es gerade ausprobiert. (Im Beispiel beim Seminar wurde auch Padding verwendet)

Sonst noch eine Idee woran es liegen könnte?

Axel · 12. Juli 2009

Zitat von "Yvi"
Ok hier mal meine Datei:

Hier die css dazu:
Code
#inhalt p h1 h2 ul  {
    padding-bottom:.7em;




  }
Danke schon mal fürs duchschaun!
Alles anzeigen

Hi Yvi,

Kleine Zeichen, große Ursache

Code

#inhalt p,  #inhalt h1, #inhalt h2, #inhalt ul  {
    padding-bottom:.7em;




  }

Du brauchst zur Trennung ein Komma. Es gibt dafür nun auch ein Video mit der Lösung - als Playlist unter:

<a class="postlink" href="http://www.youtube.com/view_play_list?p=D08919661927D875">http://www.youtube.com/view_play_list?p ... 661927D875</a>

Das letzte davon (Lösung Liquid Design: Abstände für den Inhalt - Schritt 7/7) geht auf die Abstände ein.

Bei deiner Auflistung hast du gesagt, das im #inhalt dem ul, welches nach einem h2 und auch nach einem h1 und auch nach einem p kommt der untere Abstand zugeteilt wird. Diese Kombination dürfte sehr selten sein

schönen Abend
Axel

Yvi · 12. Juli 2009

Vielen Dank, Axel!

Das war das Problem, endlich hab ich wieder Absätze

Nochmals vielen Dank für die schnelle Antwort und Hilfe!!!

Liebe Grüße
Yvi

Absätze funktionieren nicht mehr!

Jetzt mitmachen!

Teilen