Seitenlayout bringt mich zum Wahnsinn

  • Hallo Ihr,
    ich bin muss ich vorweg sagen, weder sicher in HTML, noch in PHP oder CSS.
    Ich bringe mir alles per trial and error bei...



    Folgendes: Ich möchte ein Grundgerüst für eine recht einfache Website entwickeln.
    Ich stelle mir z.B. eine horizontzale Einteilung von 10% Seitenrand (ohne Funktion), 10%Navigationsbar, 60% Inhalt, 10% interne Werbefläche und 10% Seitenrand vor.
    Den Rand links und rechts habe ich irgendwie hinbekommen.


    Mit den restlichen 80% habe ich jedoch meine Probleme, wie man im Bild sehen kann.
    Sobald ich die Größe mit Strg+Mausrad verändere, verschiebt sich alles.
    Da wo "test" steht, ist ein Div-Container, denn ich möchte, dass die 60% Inhalt eine andere Farbe bekommen; über den Body habe ich das nicht geschafft, ohne dass der Rand ebenfalls diese Farbe annimmt... Die gelbe Hinterlegung war eine andere Idee, die vielleicht ebenfalls praktikabel wäre....



    Problem 1: Die Buttons und das Logo sollen sich nciht vergrößern oder verkleinern lassen, damit diese nicht aus ihrem Rahmen springen.
    Problem 2: Ich verstehe schlichtweg nicht, wieso der Hintergrund der Navigationsbar schön brav statisch an seinem Platz bleibt; alle anderen Rahmen jedoch nicht......


  • Hallo


    Ohne den HTML-Quelltext können wir dir nicht konkret helfen.


    Zitat

    Ich bringe mir alles per trial and error bei...


    Das ist grundsätzlich schlecht. Das aktuelle HTML und CSS sind sehr komplex geworden und erfordern ein gewissen Grundwissen.


    Grade auch wenn es um unterschiedliche Fenstergrößen und Responsive Design geht.


    Zitat

    Problem 1: Die Buttons und das Logo sollen sich nciht vergrößern oder verkleinern lassen, damit diese nicht aus ihrem Rahmen springen.


    Das ist aber das ganz normale Verhalten und daran solltest du nichts ändern. Es ist besser in solchen Fällen die Anordnung der Elemente zu ändern.


    Zitat

    Problem 2: Ich verstehe schlichtweg nicht, wieso der Hintergrund der Navigationsbar schön brav statisch an seinem Platz bleibt; alle anderen Rahmen jedoch nicht......


    Das liegt an dem Zusammenspiel von HTML und CSS. Aber ohne das HTML - siehe weiter vorne im Text.


    Gruss


    MrMurphy

  • index.php

    HTML
    1. <body id="content"> <!-- Inhalt -->
    2. <div id="wrapper">test</div>
    3. <?php include ("header.php"); ?>
    4. <h1 class="title">dfsfsdf</h1>
    5. <p style="background-color:yellow"> Diese Website ist noch im Aufbau. Jegliche Bilder und Hintergründe sind Platzhalter und dienen nicht der kommerziellen Nutzung. Derzeit arbeiten wir noch am Grundgerüst der Homepage. Wenn du zufällig hierhergefunden hast, dann vergiss den Link einfach.</p>


    header.php


    Das dürfte der entscheidende Text sein.



    edit: ich hätte es lieber so wie bspw. auf dieser seite (wenn ich das jetzt mal so verlinken darf)
    http://www.ostland.de/wohnen-leben/immobiliensuche/


    da bleiben die verschiedenen elemente im verhältnis zueinander immer gleich und die verschiebung passiert beim reinzoomen nach außen hin. was machen die anders?

  • Hallo


    Der Quelltext passt aber nicht zum Bild.


    Der header soll also 10% Breite haben und links stehen. Ich finde aber weder einen div-Container für den Inhalt noch einen dritten Container für die Werbefläche.


    Zitat

    wenn ich das jetzt mal so verlinken darf


    Ja, Webseiten dürfen grundsätzlich verlinkt werden.


    Allerdings hat die verlinkte Webseite mit aktuellem HTML / CSS wenig zu tun. Sie ist zentriert und starr. Außerdem enthält sie keine nebeneinander liegenden Container und passt damit auch nicht zu deiner Seite.


    Zitat

    die verschiebung passiert beim reinzoomen nach außen hin


    Das ist schlechter Stil und sollte vermieden werden, da die Besucher beim Hineinzoomen oder schmaleren Fenstern seitlich scrollen müssen. Webseiten sollten aber so erstellt werden, dass die Besucher nur hoch- und runter scrollen müssen.


    Gruss


    MrMurphy

  • Der Quelltext passt sehr wohl zum Bild....?
    Der div-container enthält lediglich das Wort test. Stimmt, die Werbefläche habe ich noch nicht. Wieso sollte ich auch, wenn nichtmal navbar<<>>inhalt richtig zueinander passen.


    Okay, die aktuelle Webseite hat mit HTML und CSS nichts zu tun. womit dann? Der Mittelteil bei der Immobiliensuche gefällt mir nämlich sehr gut.
    Dann bringe ich eben ein anderes beispiel
    http://www.ssfbonn.de/sportabzeichen.html


    auch da kann man schön reinscrollen. wie erreiche ich das?

  • Hallo


    Zitat

    wie erreiche ich das?


    Der HTML-Quelltext für das Grundlayout entspricht



    Das dazu passende CSS kann so aussehen:



    Gruss


    MrMurphy