<ul> und <p> formatieren

[AirMax]

Hallo zusammen

Ich habe ein Problem und ich frage mich, wie das denn sein kann. Also:
Ich habe in einem übergeordnete <div> auf der linken Seite ein Menü:

  
  <ul id="menu">  
    <li class="dark">bla bla</li>  
    <li class="dark">bla bla</li>  
    <li class="dark">bla bla</li>  
  </ul>

Rechts daneben befindet sich auf gleicher Höhe ein Absatz <p>:

  
  <p id="text">  
    <span class="coloured">bla blub</span><br />  
    <span class="light">bla blub</span>  
  </p>

Obwohl im CSS steht, dass "margin" und "padding" für <ul> und <p> leich 0 sind und die Klassen "dark", "light" und "coluered" die gleichen Eigenschaften haben (bloß die Farbe des Textes ändert sich) liegen die einzelnen Zeilen nicht auf der gleichen Flucht:

  
ul {  
	margin: 0;  
	padding: 0;  
	list-style-type: none;  
}  
p {  
	margin: 0;  
	padding: 0;  
}  
.dark {  
	font-family: Arial, Helvetica, sans-serif;  
	font-size: 0.72em;  
	font-style: normal;  
	line-height: 1.64em;  
	font-weight: normal;  
	font-variant: normal;  
	text-transform: lowercase;  
	color: #666666;  
}

Woran liegt denn das? Sollte man, wenn man 2 Elemente nebeneinander haben will, die genau gleich aussehen sollen, immer das gleiche Element verwenden? z.B. links <li> und rechts auch <li>? Momentan habe ich ja links <li> und rechts <p>. Rein von der Seitenstruktur her würde ich es so lassen, wie ich es jetzt habe: links ein Menü und rechts ein Fließtext. Aber wie gesagt, irgendwie werden die CSS-Angaben nicht 100%ig identisch auf <li> und <p> angewendet. Ist das normal? Ich hoffe, Ihr versteht, was ich meine. Falls nicht, gebe ich mal den link zur Seite an.

Danke & Gruß

[ChrisB]

Hi,

Obwohl im CSS steht, dass "margin" und "padding" für <ul> und <p> leich 0 sind und die Klassen "dark", "light" und "coluered" die gleichen Eigenschaften haben (bloß die Farbe des Textes ändert sich) liegen die einzelnen Zeilen nicht auf der gleichen Flucht

Du hast also weder die LI nach deinen Wünschen formatiert, noch dich um die jeweilige Zeilenhöhe gekümmert.

Sollte man, wenn man 2 Elemente nebeneinander haben will, die genau gleich aussehen sollen, immer das gleiche Element verwenden?

Quatsch.
Der HTML-Code wird abhängig von der Struktur der Inhalte gewählt, noch bevor überhaupt an Darstellung gedacht wird.

MfG ChrisB

[AirMax]

Hi

Du hast also weder die LI nach deinen Wünschen formatiert, noch dich um die jeweilige Zeilenhöhe gekümmert.

Ich habe doch LI formatieret:

  
<li class="dark">bla bla</li>

  
.dark {  
	font-family: Arial, Helvetica, sans-serif;  
	font-size: 0.72em;  
	font-style: normal;  
	line-height: 1.64em;  
	font-weight: normal;  
	font-variant: normal;  
	text-transform: lowercase;  
	color: #666666;  
}

Ich habe bloß kein padding und margin für LI angegeben. Aber ob ich es mache oder nicht - es macht keinen Unterschied. Hab's schon probiert.

Quatsch.
Der HTML-Code wird abhängig von der Struktur der Inhalte gewählt, noch bevor überhaupt an Darstellung gedacht wird.

Das leuchtet mir absolut ein!

[ChrisB]

Hi,

Ich habe bloß kein padding und margin für LI angegeben. Aber ob ich es mache oder nicht - es macht keinen Unterschied. Hab's schon probiert.

Dann zeig doch bitte mal die Beispielseite.

MfG ChrisB

[AirMax]

Dann zeig doch bitte mal die Beispielseite.

link zum Beispiel

Irgendetwas stimmt mit der Zeilenhöhe nicht!? Die Zeilen verschieben sich in der Vertikalen immer mehr ...

[ChrisB]

Hi,

link zum Beispiel

Irgendetwas stimmt mit der Zeilenhöhe nicht!? Die Zeilen verschieben sich in der Vertikalen immer mehr ...

Wie ich schon sagte, du hast dich nicht richtig um die line-height gekümmert.

Deine LI haben eine line-height von 1.64em bei Schriftgrösse .72em, die SPANs im P auch.
P hast du aber keine line-height gegeben, die deinem Wunsch entspricht - und deshalb bewirken die BR, die du dort zu Formatierungszwecken(!) eingefügt hast, auch einen höheren Zeilenabstand, als dir angenehm ist.

Btw., die P/SPAN-Auszeichnung ist an dieser Stelle auch kaum sinnvoll.
Das, was du mit <span class="coloured">...</span> ausgezeichnet hast, sollten entweder Zwischenüberschriften gefolgt von einer Auflistung sein; oder das ganze ggf. auch gleich eine Definitionsliste.

MfG ChrisB

[AirMax]

Hi,

P hast du aber keine line-height gegeben, die deinem Wunsch entspricht

Stimmt. Hab's eben bemerkt.

und deshalb bewirken die BR, die du dort zu Formatierungszwecken(!) eingefügt hast, auch einen höheren Zeilenabstand, als dir angenehm ist.

Ja, "white spaces" sind doof. Aber wie kann ich denn im CSS den Text manuell umbrechen lassen. Will dem P keine fixe Breite geben! Will lieber selber entscheiden, wo gebrochen wird.

Btw., die P/SPAN-Auszeichnung ist an dieser Stelle auch kaum sinnvoll.
Das, was du mit <span class="coloured">...</span> ausgezeichnet hast, sollten entweder Zwischenüberschriften gefolgt von einer Auflistung sein; oder das ganze ggf. auch gleich eine Definitionsliste.

Klar, kann ich noch anpassen

Gruß

[ChrisB]

Hi,

Ja, "white spaces" sind doof. Aber wie kann ich denn im CSS den Text manuell umbrechen lassen. Will dem P keine fixe Breite geben! Will lieber selber entscheiden, wo gebrochen wird.

Wenn du die Inhalte sinnvoll strukturierst, dann sollten sich von alleine Elemente ergeben, die sich entsprechend formatieren lassen - bspw. mittels display oder float. (Dabei beachten, welchen Einfluss eine Darstellung als block dann wieder darauf hat, wie die Elemente die Zeilenhöhe beeinflussen.)

MfG ChrisB