<p> macht keinen Absatz...

[Peter]

Hallo,

ich hab ein wenig mit CSS herumexperimentiert. Und plötzlich wird eine Seite, die ich per include (PHP) einbinde, nicht mehr korrekt angezeigt. Genauer gesagt habe ich so etwas:

  
...  
<div id="haupt">  
  
<div id="kopf">  
<img src="images/...>  
</div>  
  
<div id="menucontainer">  
<?php include("menue.php"); ?>  
</div>  
  
...  
<div id="inhalt">  
  
<p><b>Überschrift 1</b><br>Text...Text...Text...</p>  
  
<p><b>Überschrift 2</b><br>Text...Text...Text...</p>  
  
<p><b>Überschrift 3</b><br>Text...Text...Text...</p>  
  
</div>  
...  
  
</div>  

Das zugehörige CSS sieht so aus:

  
* {  
 margin: 0;  
 padding: 0;  
}  
  
  
html {  
 background-color:#000000;  
 color:#FFFFFF;  
 font: 12px Verdana, Arial, sans-serif;  
}  
  
  
body {  
 text-align: center;  
}  
  
  
div#haupt {  
 margin: auto;  
 width: 770px;  
 text-align: left;  
}  
  
#inhalt {  
 float: left;  
 font-size: 12px;  
 width: 610px;  
 color: #000;  
 background-color:#EAF1F7;  
 padding: 5px;  
 margin-bottom:20px;  
}  

Vorher hatte es mir (wie bei HTML üblich) die Absätze mit einer fetten Überschrift angezeigt. Zwischen den Absätzen war immer eine Lücke, so dass sie auch als Absätze sichtbar waren. Nach einigen CSS-Formatierungen waren diese Absätze jedoch aufgehoben, d.h. es gab keine grössere Abstände mehr zwischen den Absätzen, sondern alles sah nach einfachen <br> aus.

Gibt es irgendwas in CSS, was diese Absätze (<p></p>) aufhebt und wie  normale Zeilenschaltungen (<br>) aussehen lässt?

Ach ja, angeschaut und gestestet hatte ich mit Firefox 2.0.0.6.

Vielen Dank und viele Grüsse
Peter

[Orlando]

Gibt es irgendwas in CSS, was diese Absätze (<p></p>) aufhebt und wie normale Zeilenschaltungen (<br>) aussehen lässt?

Ja, hebe die Aufhebung auf.

* {  
  margin: 0;  
  padding: 0;  
}

Damit alle Innen- und vor allem Außenabstände auf null zu setzen führt dazu, dass sie nicht mehr vorhanden sind. Was bleibt, ist ein armer abstandsloser Zeilenumbruch.

Roland

[Peter]

Gibt es irgendwas in CSS, was diese Absätze (<p></p>) aufhebt und wie normale Zeilenschaltungen (<br>) aussehen lässt?

Ja, hebe die Aufhebung auf.

• {

margin: 0;
  padding: 0;
}

>   
> Damit alle Innen- und vor allem Außenabstände auf null zu setzen führt dazu, dass sie nicht mehr vorhanden sind. Was bleibt, ist ein armer abstandsloser Zeilenumbruch.  
>   
> Roland  
>   
  
Ja, das war das Problem. Leider verschiebt es dadurch auch wieder alle meine Bereiche auf der Seite, die ich vorher angeordnet hatte. Ich hatte das Beispiel aus einem Buch, da wurden grundsätzlich immer alle Aussen- und Innenabstände auf null gesetzt. Hmm, mal schauen, wie ich das jetzt wieder richtig angeordnet bekomme. Vielen Dank für deine schnelle Hilfe!  
  
Gruss  
Peter

[Jonathan]

Hallo Peter,

Hmm, mal schauen, wie ich das jetzt wieder richtig angeordnet bekomme.

Du könntest erstmal generell alles auf 0 setzen, aber dann für deinen p-Tag wieder einen Abstand definieren.

Jonathan

[Peter]

Hallo Peter,

Hmm, mal schauen, wie ich das jetzt wieder richtig angeordnet bekomme.

Du könntest erstmal generell alles auf 0 setzen, aber dann für deinen p-Tag wieder einen Abstand definieren.

Jonathan

Ich hab jetzt das Problem, dass mein Menü nicht mehr so stimmt, wie vorher. Ich kann da aber nicht erkennen, warum es mir das Menü nun verschiebt, wenn ich das mit * {...} rausgenommen habe. Mit dem margin und padding für alles (*) auf null gesetzt ist das Menü so, wie es sein soll. Es rückt mir die Menüpunkte alle nach rechts, was es mit dem #inhalt überlappt.

Das Menü sieht so aus:

  
...  
<div id="menucontainer">  
<ul>  
 <li><a href="#">Punkt 1</a></li>  
 <li><a href="#">Punkt 2</a></li>  
 <li><a href="#">Punkt 3</a></li>  
 <li><a href="#">Punkt 4</a></li>  
 <li><a href="#">Punkt 5</a></li>  
 <li><a href="#">Punkt 6</a></li>  
</ul>  
</div>  
...  

Hier das CSS für das Menü:

  
div#menucontainer {  
 float: left;  
 height: 462px;  
 width: 160px;  
 background-color:#7b7d8e;  
}  
  
  
div#menucontainer ul {  
 border-bottom: 1px solid #FFF;  
 list-style: none;  
 margin-top: 45px;  
}  
  
  
div#menucontainer li, div#menucontainer li a {  
 color: #FFF;  
 text-align: right;  
}  
  
  
div#menucontainer li {  
 border-top: 1px solid;  
 font-size: 1.2em;  
 height: 27px;  
 width: 160px;  
}  
  
  
div#menucontainer li a, div#menucontainer li span {  
 display: block;  
 font-weight: bold;  
 height: 100%;  
 padding-right: 18px;  
 text-decoration: none;  
}  
  
  
div#menucontainer li a:hover, div#menucontainer li span {  
 font-weight: bold;  
 color: #FDEB1F;  
 background-color: #1B2654;  
}  

Kann mir bitte wer einen Tipp geben?

Danke
Peter

[Peter]

Hallo,

hab's wohl nun hingekriegt, indem ich einfach bei

  
div#menucontainer ul {  
   ...  
}  

margin-left auf null gesetzt habe. Weiss zwar nicht, warum mir das ohne das die Menüpunkte eingerückt hatte, aber so komme ich wenigstens zu dem gewünschten Ergebnis.

Vielen Dank an alle und eine gute Nacht...

Peter

[Antipitch]

Hi Peter,

oder du lässt das so (ich fahr da immer gut mit) und stylest dir schöne eigene <h> und <p> Klassen für unterschiedliche Platzierungen in deinen Seiten (margins, font-size etc). Sonst kriegt der User immer die Standardwerte seines Browsers. Und du musst jetzt nicht alles ändern...

Gruß
Antipitch

[Peter]

Hi Peter,

oder du lässt das so (ich fahr da immer gut mit) und stylest dir schöne eigene <h> und <p> Klassen für unterschiedliche Platzierungen in deinen Seiten (margins, font-size etc). Sonst kriegt der User immer die Standardwerte seines Browsers. Und du musst jetzt nicht alles ändern...

Gruß
Antipitch

Danke für die Antwort. Werde ich vielleicht mal testen. Hab CSS leider bisher immer etwas vernachlässigt und versuch das nun nachzuholen und zu lernen.

Peter

[Jonathan]

Hallo Peter,

<b>Überschrift 1</b>

Überschriften sollten sillvollerweise mit <h…> ausgezeichnet werden, nicht mit <b>.

Jonathan

[Der Martin]

Hallo Jonathan,

<b>Überschrift 1</b>
Überschriften sollten sillvollerweise mit <h…> ausgezeichnet werden, ...

"sinnvoll" oder "stilvoll", was meintest du nun wirklich?

*scnr*
 Martin

[Jonathan]

Hallo Der,

"sinnvoll" oder "stilvoll", was meintest du nun wirklich?

Sinnvoll meinte ich. Stilvoll wäre es aber auch.

Jonathan