Web Floating will nicht greifen!

Dieses Thema im Forum "Programmierung" wurde erstellt von Elrontur, 23. April 2014.

  1. Elrontur
    Offline

    Elrontur Ehem. Teammitglied

    Registriert seit:
    5. April 2013
    Beiträge:
    138
    Minecraft:
    Elrontur
    [Gelöst+Beispiel] Floating will nicht greifen!

    Hallo Minecrafter und Nicht-Minecrafter,

    ich sitze an meinem neuen tollen Design für unsere Projektwebsite und das Floating hat auch vorher einigermaßen funktioniert.
    Hier die Anfangssituation: Ich habe Boxen gestaltet, die rechts neben der <section> in <aside> angezeigt werden. Im HTML-Code sitzt das <aside> ÜBER <section>. Wenn ich mir jedoch die "Mobilansicht" anschaue, sitzen die <aside>-Boxen auch ÜBER der <section> und das finde ich unpassend, da mir in dem Falle der Content (also die <section>) wichtiger ist. Außerdem gibt's ja so Dinge wegen SEO, aber da bin ich mir nicht so sicher...
    Die jetzige Situation: Ich verrückte im HTML-Code <aside> UNTER <section> und die Mobilansicht macht mir keine Probleme.

    Ich werde das auch in Bildern untermalen, damit ihr mich besser verstehen könnt. Es ist bestimmt schwer vorstellbar mit solchen Angaben, sich da etwas zurechtzurücken und dann noch ohne jegliches Anschauungsmaterial vernünftige Antworten zu geben. (Nicht negativ gemeint!)

    Die Boxen (<aside>) jedoch bleiben stürrisch leicht unter dem Content (<section>) stehen und lassen sich nicht links geschweige denn rechts floaten!! ._.
    Obwohl ich auch irgendwie jetzt die linke Seite bevorzuge für die Boxen (vorher waren sie rechts im Design), ist es mir total egal, ob diese dann doch rechts sein müssen - jede erdenkliche und funktionierende Lösung hilft mir definitiv weiter und werde ich beherzigen.

    Bilder-Anhänge erklärt...
    (Wieso sind das eig. keine PNGs mehr? Ich mag PNG lieber... ;()
    float-problem.jpg - das Original Design, jedoch eine andere Variante, weil ich noch weiteren Krams code...
    float-problem-demo.jpg - Das "Design", welches entsteht, wenn man den HTML- und CSS-Code (die angehängten anderen 2 Bilder) zusammenmixt. Ist nur für Vorführzwecke entstanden...
    float-problem-html.jpg - Der HTML-Code für die Demo. Minimal gehalten.
    float-problem-css.jpg - Der CSS-Code für die Demo. Wiederum minimal gehalten. So kann ich meinen Wundercode verschleiern! :D
    Ein RIESENGROßES Danke und Lob für's Lesen meiner halben Lebensgeschichte. Vielleicht tu ich so, als würde die Welt untergehen und vielleicht wird sie das auch tun, nur das liegt mir auf dem Herzen und ich weiß, dass hier unter allen Minecraftern und Nicht-Minecraftern einige Webspezialisten sitzen.
    Wenn ihr auch nur kleinere Lösungsvorschläge und -ansätze habt, ist das auch gut, denn ich weiß mir echt KEINEN Rat mehr und würde am liebsten Zaubern können... Aber das ist schließlich auch keine Lösung.
    Dann macht's gut und auf weiteres fröhliches Schreiben im Forum (- wenn ich euch nicht nun vergrault haben sollte damit).

    Grüße,
    Elrontur
     

    Anhänge:

    #1
  2. Elrontur
    Offline

    Elrontur Ehem. Teammitglied

    Registriert seit:
    5. April 2013
    Beiträge:
    138
    Minecraft:
    Elrontur
    Gelöst

    Nun hab ich das Problem der ganzen Sache viel simpler gelöst... Anstatt meinen Kram zu floaten, mach ich mittels CSS und etwas Code-Umordnung eine Tabelle draus und setze die Boxen links und rechts hin. Mein Vorbild war dabei das neue WBB4, welches dies auch so gelöst hat und mich regelrecht inspirierte!

    Hier Code-Fetzen zur Veranschaulichung:
    HTML:
    1. <div id="main">
    2.   <div>
    3.     <section id="content" class="content">
    4.       <h1>display: table; -- Lösung für die Float-Probleme!</h1>
    5.       Ganz viel Text...
    6.     </section>
    7.     <aside id="sidebar" class="sidebar">
    8.       Noch mehr überwältigender Text!
    9.     </aside>  
    10.   </div>
    11. </div>
    Code (Text):
    1. #main {
    2.   display: table;
    3.   table-layout: fixed;
    4.   width: 100%;
    5. }
    6. #main > div {
    7.   display: table-row;
    8. }
    9. #main > div > .content,
    10. #main > div > .sidebar {
    11.   display: table-cell;
    12.   vertical-align: top;  
    13. }
    14. #main > div > .sidebar {
    15.   width: 250px;
    16. }
     
    #2
    1 Person gefällt das.