Seitenaufteilung / Positionierung

  • im "alten" Thread habe ich schon beschlossen die Seite von Grund auf neu aufzubauen. Durch Hilfe / Tipps habe ich nun die Seite mit den bereitgestellten "Containern" : Header; Nav; Main; und Footer das Grundgerüst mir zusammengestellt.


    Hier mal der zwischenstand :



    In der Mitte befinden sich zwei "Main" Container welche auf einer Ebene nebeneinander sind. Diese sollen sich auch je nach inhalt in der Höhe anpassen. Allerdings sollte es auch eine Mindesthöhe geben, undzwar mindestens bis zum Footer. ("left" und "right")


    ich habe es durch die angabe von height:100%; versucht, allerdings änderte sich da garnichts. wenn ich aber statt % px eingesetzt habe, hat es geklappt.


    Aber da ich ja möglichst mit wenig pixel arbeiten möchte, da es ja auf möglichst vielen verschiedenen auflösungen gut dargestellt werden soll, suche ich nach einer passenden lösung.


    Aktueller Quellcode :



    und das die CSS :




    Gruß z1000

  • Hallo,


    bevor du weiter unnütz rumdoktorst solltest du vielleicht doch erst mal die Grundlagen von HTML5 / CSS3 lernen.


    So darf das main-Element nur einmal auf jeder Seite vorkommen.


    Da die Semantik bei HTML5 eine große Rolle spielt läßt sich eine Seite ohne konkreten Inhalt auch kaum beurteilen. Deine Quellcodeschnipsel helfen da nicht viel weiter.


    Gruss


    MrMurphy

  • Habe nochmals von Grundauf alles neu "geschrieben".


    #



    Wenn ich fertig werden sollte :-) würde ich dann die CSS als extra file machen. vorerst habe ich mal alles in der .html.


    die Höhenangaben von "left" und "main" habe ich mal mit der angabe von "450px" gesetzt. Allerdings hätte ich dies gerne prozentuell bzw. bis hin zum Footer. Ob nun genügend inhalt da ist oder nicht sollte keine Rolle spielen.



    Hier mal ein Screen in FireFox, wo mir bisher ganz gut gefällt :-)



    Was haltest du / ihr nun vom Code. Sauberer ? Übersichtlicher ?


    Gruß


    z1000

  • Sieht doch schon ganz gut aus.
    Die Höhenangaben von #left und main würde ich auf min-height: 450px setzen, dann hast du die MIndesthöhe bist aber nach unten falls es mehr Inhalt wird flexibel.



    Code
    1. #header {
    2. }


    kannst du auch

    Code
    1. header {
    2. }


    schreiben. Ersteres spricht die ID an, letzteres das Element.


    Dir fehlt das Meta-Element Charset für den Zeichensatz im head und auch das title-Tag ist zwingend notwendig für den Seitentitel.


    In HTMl5 kannst du
    <style type="text/css">
    abkürzen zu <style>


    font: 100.01% ist aus uralten Zeiten und sieht man noch viel. Ein font: 100% ist ausreichend oder gleichbedeutend zu 1em.


    Die Schrift im Header ist keine Schrift sonder Bildbestandteil. Das sollte besser Schrift sein und das Bild ein Hintergrundbild. Auch würde ich mir das Auto freigestellt vom Grafiker geben lassen und dann über den Hintergrund packen. Im Moment verzerrt dein Bild wenn die Proportionen des Viewport nicht stimmen. MAch dazu mal dein Fenster kleiner von rechts nach links, dann siehst du es, was ich meine.


    Ansonsten -> weiter so.




  • habe es nun mal bearbeitet...


    habe nun das auto und das logo als einzelne grafiken. ebenfalls habe ich die anderen änderungen soweit mit angepasst. charset utf-8 i.o. ?


    mein größtes problem ist immernoch, dass z.B. Main eine höhe bis hin zum footer haben sollte. dies möglichst "prozentuell" bzw. automatisch bis zum footer. wie bekomme ich das gelöst ?

  • Habe mal ein wenig weiter gemacht, kleinigkeiten verändert. Ein paar sachen hinzugefügt etc.


    Nun habe ich noch ein kleines problem. Ich denke nachdem dass gelöst ist, sollte das Grundgerüst stehen :-)


    In FireFox und Google Chrome sieht die Seite ganz gut aus... siehe hier :



    Im Internet Explorer (11) "verrutscht" dieser weise Balken (ein eingefügtes Bild) unter der Navigation weit nach unten weg. Siehe hier :




    Hier nochmals die Quellcodes, habe nun auch die CSS ausgelagert.


    Einmal editiert, zuletzt von z1000 () aus folgendem Grund: Tippfehler korrigiert :-)


  • Hallo, kannst du das mal als Testcase(zb. square7.ch) hochladen, ich habe deinen Code jetzt local übernommen aber da mir die Grafiken nicht zur Verfügung stehen kann ich dir nicht wirklich helfen...


    Zur info noch: size: auto; gibt es nicht:roll: