aside ausrichten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • aside ausrichten

    Hallo,

    Wie in einem anderen Thread zu lesen ist arbeite ich derzeit mit HTML5.
    Nun versuche ich 2 boxen nebeneinaner zu bekommen aber egal ie ich es anstelle <aside> will nicht so wich ich will. Entweder wird der Text über oder unter dem Inhalt angezeigt, aber nicht daneben.

    Hier mal mein Code

    Quellcode

    1. <section class="s_container">
    2. <p>test</p>
    4. </section>
    6. <aside>
    7. <p>test</p>
    8. </aside>


    Quellcode

    1. .s_container {
    2. position:relative;
    3. margin:0 auto;
    4. width:960px;
    5. padding-top: 40px;
    6. }
    8. aside {
    9. float:left;
    10. }

  • Hallo,

    Nein dies führte zum gleichen Ergbniss und setzte die ganze Page nicht mehr mittig was aber wohl mein Fehler bei der Beschreibung war.

    Quellcode

    1. <section class="s_container"> <!-- Setzt die Seite mittig -->
    3. <section style="float:left;"> <!-- Rechter div -->
    4. <article>test</article>
    5. </section>
    7. <aside> <!-- Linke Navigation -->
    8. <article>test</article>
    9. </aside>
    11. </section>
    Alles anzeigen

  • The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.


    Zum zentrieren des Containers ist das div klar besser (siehe Definition), dann beissen sich auch deine sections nicht mehr.

    Quellcode

    1. <div class="s_container">
    3. <aside style="float:left">ich stehe links</aside>
    5. <article>und ich floate links ran (o_O) </article>
    7. </div>




    Ich kenne den Umfang nicht, aber du kannst den Inhalt selber nochmal in Sektionen unterteilen.

    Quellcode

    1. <div class="s_container">
    3. <section style="float:left">
    4. <aside>ich stehe links</aside>
    5. </section>
    7. <section>
    8. <article>und ich floate links ran (o_O) </article>
    9. </section>
    11. </div>
    Alles anzeigen

  • Die Definition der <section> ist ein wenig schwammig.

    w3.org/TR/html5/sections.html#the-section-element

    Das Sectionelement ist nur zum aufteilen, nicht zum stylen, zum scripten oder als Container gedacht.


    Quellcode

    1. <article>
    2. <hgroup>
    3. <h1>Apples</h1>
    4. <h2>Tasty, delicious fruit!</h2>
    5. </hgroup>
    6. <p>The apple is the pomaceous fruit of the apple tree.</p>
    7. <section>
    8. <h1>Red Delicious</h1>
    9. <p>These bright red apples are the most common found in many
    10. supermarkets.</p>
    11. </section>
    12. <section>
    13. <h1>Granny Smith</h1>
    14. <p>These juicy, green apples make a great filling for
    15. apple pies.</p>
    16. </section>
    17. </article>
    Alles anzeigen


    Quellcode

    1. <section>
    2. <article>
    3. <hgroup>
    4. <h1>Apples</h1>
    5. <h2>Tasty, delicious fruit!</h2>
    6. </hgroup>
    7. <p>The apple is the pomaceous fruit of the apple tree.</p>
    8. <h1>Red Delicious</h1>
    9. <p>These bright red apples are the most common found in many
    10. supermarkets.</p>
    11. <h1>Granny Smith</h1>
    12. <p>These juicy, green apples make a great filling for
    13. apple pies.</p>
    14. </article>
    15. </section>
    Alles anzeigen

  • Fragz schrieb:

    Hm, Beide Lösungen, sowohl DIV als auch SECTION sind laut W3C Valide.

    Ich denke mal ich änder die Punkte auf div, das macht es auch übersichtlicher.


    Klar sind beide valide. Das wäre ein logischer "Fehler" (wobei Fehler nicht richtig ist, da es ja "nur" eine Richtlinie ist, die man einhalten sollte) , den ein Validator nicht erkennen kann.

    Siehe die offizielle Definition:
    The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
    Quelle: w3.org/TR/html5/sections.html#the-section-element