CSS LAyout ausrichten

  • Hey Leute.


    Hab den halben tag schon gegoogelt und gesucht und getestet aber da ich nie wirklich was finde was exakt auf mich zutrifft versuche ich mal mein glück hier :3


    HTML/PHP kriege ich mittlerweile zumindest den anfang ganz gut hin. css klappt auch meist nur habe ich stets probleme mit dem ausrichten. nun habe ich nach einiger zeit wieder von vorne angefangen und verzweifel daran, das layout auszurichten. Ich habe einen <div> Header, Menu, sidebar, content und footer. In der css datei möchte ich sie logischerweise dann an ort und stelle bringen. Da nun jeder eine andere Auflösung hat dachte ich, ich leg alles auf 1024-768 aus. Alles was größer ist wird einfach links und rechts "leer" sein.


    Der Header und das Menu sollen gleich lang sein, und egal bei welcher Auflösung, die ganze Breite ausfüllen. Die Sidebar und das Content sind dann darunter. Die sidebar dabei fest und den Content soll mal scrollen können (sofern es genug inhalt gibt). Am Schluss unten soll dann der Footer sein. Dieser soll auch immer zu sehen sein und nur so breit sein wie sidebar und content zusammen. Ihc habe das hier mal grob vorgezeichnet:


    [Blockierte Grafik: http://www.fotos-hochladen.net/uploads/layout1vh9f8l2ap.png]


    leider recht schwer zu sehen. Aber ich hoffe mane rkennt was ich meine.


    Ich denke mal dass man header und menu eine width von 100% gibt, nur wie zentriere ich dann die anderen und an sich wie positioniere ich das nochmal alles richtig :( bin gerade wieder mal am verzweifeln^^ möchte aber nicht direkt aufgeben. Vielleicht mag mir ja jemand helfen :)


    vielen dank schonmal


    edit* was auf dem bild nun falsch zu sehen ist... der footer soll natürlich ganz unten sitzen und nicht mitten drin

  • Herzlich Willkommen im Forum,


    In der heutigen Zeit , in der mobile Devices immer mehr an Bedeutung gewinnen , sollte man seine Seite auf keinen Fall auf eine gewisse Seitenlänge festlegen.
    Stattdessen sollte man Media Queries nutzen um auf jedem Gerät optimale Nutzbarkeit zu ermöglichen.


    Das mit der eigenen Scrollleite für den Content finde ich auch etwas wage, ich möchte sowas beispielsweise nicht haben. Gibt es irgendwelche Gründe warum dies so sein soll?


    Hab dir trotzdem mal ein Rohgerüst gezimmert:


    http://codepen.io/Nitamud/pen/aOOMgq


    PS: Entschuldigt meine spärlichen Worte, bin gesundheitlich gerade noch nicht wieder am Höhepunkt :)

  • Dann ists ja gut dass ich gefragt habe :P


    Ich wollte nun erst die Seite für den PC designen und wenn sie mal fertig ist mich damit beschäftigen sie auf handys gut anzuzeigen und sogar als app zu entwickeln wovon ich noch null ahnung habe.
    Dann muss ich mich wohl mal direkt von anfang an damit beschäftigen. Im endeffekt wäre es eigentlich sogar wichtiger, dass sie eher auf Handys gut aufgebaut ist anstatt auf PC aber am besten wäre es natürlich, wenn beides gut funktioniert.


    Kennst du ein gutes Tutorial an dem ich mich orientieren kann oder hast du sonst tipps für mich? wie gesagt - php/html klappt soweit ganz gut, css ist noch sehr mager, mysql hatte ich nur mal nachgebaut und nicht wirklich verstanden.


    Freue mich auf eine Antwort :)


    PS: gute besserung ^^

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!