[div+css] Einige Fragen

[svg-Bastler]

Ich arbeite gerade an einer Seite und brauche an einigen Stellen Hilfe:

Ich habe keinen konkreten Titel gewählt, weil ich heute Abend wohl noch einige Fragen stellen werde. So muss ich nicht immer einen neuen Thread öffnen.

1. Ich möchte per css ein Textelement (<p>) am rechten Rand einer div-Box ausrichten. Wenn ich das hier benutze: text-align:right; wird der Text am rechten Seitenrand platziert. Wie richte ich es am div Rand aus?

 

[Maxi]

Ist der Textabsatz innerhalb des Divs?
Zeig doch mal den ganzen Code her...

 

[svg-Bastler]

Ich sehe gerade eigentlich gehört das hier ja in css. Entschuldigung.

<div id="header">

         <img src="header.png" alt="Seitenbanner"></img>

         <p id="Navigation">
                 <a href="Start.php">Start</a>&nbsp;&bull;&nbsp;
                 <a href="Index.php">Index</a>
         </p>

         <p id="NavSchrift">Navigation</p>

</div>

#Navigation { font-size:14px; float:left; }
#NavSchrift { font-size:14px; }

Das Problem ist: die Breite der div wird von header.png definiert, und unter dem Header sollen die Links horizontal, linksbündig angeordnet sein. Neben den Links soll auf der gleichen Höhe rechtsbündig Navigation stehen.

 

[Junny]

Hallo svg-Baster,

div ist ein sogenanntes Blockelement. Blockelemente nehmen standardmäßig immer die gesamte Breite des Elternelements ein. Dein div#header geht also über die gesamte Bildschirmbreite. Um Dir das anschaulich zu machen, markiere einfach mal die Elemente Deiner Seite mit farbigen Rahmen:

div {
  border: 1px solid #FF0000;
}

Blockelementen bekommen eine kleinere Breite, wenn sie floaten (dann nur soviel wie nötig) oder wenn man eine Breite festlegt.

Außerdem wäre es eine gute Idee, sich mal mit dem Thema semantische Auszeichnung des Inhalts zu beschäftigen, wenn Du eine gute Seite zustandebringen möchtes. Jedes Element sollte als das ausgezeichnet werden, was es ist. Überschriften sind h1-h6, Navigationen sind ul und Textabsätze sind p. Erst wenn die Auszeichnung des Inhalts mit HTML stimmt, wird mit der Formatierung per CSS begonnen.

Gruß
Junny

 

[svg-Bastler]

Ich habe es verstanden, ich bin auch schon ein ganzes Stück weiter.
Allerdings; Wenn ich die Navigation als ul kennzeichne missachtet sie die css- definierte linksbündigkeit. Woran liegt das?

 

[Junny]

Nunja, normalerweise tut sie das nicht. Warum das bei Dir so ist, können wir leider nur erraten, bis Du uns Deinen Quelltext oder noch besser einen Link gibst.

Gruß
Junny

 

[_Thor_]

Hast du vielleicht vergessen, margin und padding der ul und li auf 0 zu setzen?