✔ CSS Problem

[garfield1711]

Anstatt meinen angesprochenen Fehler bzgl. des eingebetteten <div>-Elements im <a>-Element zu korrigieren, hast du ihn jetzt stattdessen vervielfältigt - saubere Arbeit :suspekt:

mfg Maik

Erstmal wollte ich einen Abstand zwischen den Buttons.

Dann zu Deinem oben angegeben Hinweis:
Ich habe das nicht so ganz verstanden, schäme mich auch dafür.

 

[Maik]

Was ist denn hieran nicht verständlich?

Außerdem entspricht dein Markup gemäß deines deklarierten Dokumenttyps und dessen Dokumenttyp-Definition (DTD) nicht der HTML-Spezifikation für Inline-Elemente, die keine Block-Elemente (in diesem Fall das <div>) enthalten dürfen.

Ab "HTML5" ist es zulässig, dass das <a>-Element solche Block-Elemente umschliessen darf, aber nicht für "HTML 4.01", sowie "XHTML 1.0" und "XHTML 1.1".

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

• Quelle: 4.6.1 The a element

Stattdessen kannst du in deinem "XHTML 1.0 Transitional"-Dokument das <a>-Element mittels CSS und der display:block-Eigenschaft formatieren, damit es "Block-Level-Charakteristika" annimmt, sich im Textfluß also wie ein Block-Element verhält, und so seinen Inhalt mit text-align:center in seinem Anzeigebereich horizontal zentrieren, was du derzeit mit dem <div> und dem HTML-Attribut align="center" bewerkstelligt hast.

Und wieso hakst du dann nicht direkt nach, anstatt diesen Fehler zu wiederholen? Obwohl dir ja auf meinen Hinweis zufolge eigentlich soweit zumindest klar sein sollte, dass das Markup so nicht den Regeln entspricht.

Im Zweifelsfall einfach mal meinen beiden genannten Links zur HTML-Elementreferenz für die Inline- und Block-Elemente folgen, wo auch auf diesen Zusammenhang hingewiesen wird, und die einzelnen HTML-Elemente dieser beiden Gattungen aufgelistet sind.

mfg Maik

 

[garfield1711]

Sorry,
habe mir das mir den Block und Inline Elementen durchgelesen und auch so weit kapert, glaube ich.
Inline darf in Blockelement aber Block nicht in Inline, richtig?
Was muß ich aber ändern?
Mein Block ist ja das hier: <div id="inhalt">

Ist das hier jetzt falsch: <div align="center">

Gruß
Garfield

 

[Maik]

Aus:

<a href="bilder2010/naerrischer_auftakt_14.11.2009/naerrischer_auftakt_14.11.2009.php">
    <div align="center"><img src="buttons/naerrischer_auftakt14112009.gif" width="450" height="30"/></div></a>
    <a href="weihnachtsfeier_06.12.2009.php">
  <div align="center"><img src="buttons/weihnachtsfeier09122009.gif" width="450" height="30"/></div></a>

wird:

<a href="bilder2010/naerrischer_auftakt_14.11.2009/naerrischer_auftakt_14.11.2009.php" class="button">
    <img src="buttons/naerrischer_auftakt14112009.gif" width="450" height="30" />
</a>
<a href="weihnachtsfeier_06.12.2009.php" class="button">
    <img src="buttons/weihnachtsfeier09122009.gif" width="450" height="30" />
</a>

a.button {
display:block;
text-align:center;
}

mfg Maik

 

[garfield1711]

Habe es so gemacht und ich glaube auch wieder was gelernt zu haben.
innerhalb von <div> </div> darf ich keine weiteren divs angeben, das bedeutet das ich css Anweisungen dann in class angeben muß.
Stimmt das in etwa?

 

[Maik]

innerhalb von <div> </div> darf ich keine weiteren divs angeben, das bedeutet das ich css Anweisungen dann in class angeben muß.
Stimmt das in etwa?

Nicht ganz

Ein <div>-Element darf sehr wohl weitere Block-Elemente, wie z.B. ein <div>, enthalten.

Im <p>-Element (Textabsatz) oder den <h1> - <h6>-Elementen (Überschriften 1. - 6. Ordnung), die auch zu den Block-Elementen zählen, dürfen keine weiteren Block-Elemente eingebunden werden, sondern nur Inline-Elemente und Text.

Die CSS-Klasse hab ich hier lediglich zur Spezifizierung für die beiden grafischen Verweise angelegt, damit ihre CSS-Formatierung nicht fälschlicherweise auf andere enthaltende <a>-Elemente im HTML-Dokument angewendet wird, bei denen sie überhaupt nicht erwünscht ist.

mfg Maik