Anordnung von DIV-Containern für Webseite - Hilfe benötigt

  • Hallo Zusammen,


    nachdem ich schon einige Zeit im Web und auch hier verbracht habe, habe ich mich nun doch mal angemeldet um Euch um Hilfe für mein Problem zu bitten.


    Ich habe eine Webseite, die derzeit noch ganz altmodisch, wenn nicht sogar veraltet, mit Tabellenlayout arbeitet. Dieses soll nun, auch im Hinblick auf mobile Geräte, auf aktuellen Stand gebracht werden.
    Folgende Situation: Ich benötige eine Seite, welche aus optischen Gründen nur die rechte Hälfte des Bildschirms einnehmen soll, diese besteht aus Header - Navigation - links eine Box mit dem Hauptinhalt - rechts daneben zwei Boxen mit zusätzlichem Inhalt, untereinander angeordnet - Footer. Die Elemente sollen zueinander und zum Rand den gleichen Abstand haben. Ich scheitere als erstes schon an der Positionierung der zwei kleinen Boxen neben der Großen.
    Da das Ganze auch noch responsive funktionieren soll, ist die gewünschte Reihenfolgen bei entsprechenden kleinen Bildschirmen wie folgt: Header - Navigation - Hauptinhalt - Box 2 (die untere!) - Box 1 - Footer
    Ich habe das Ganze mit Flexbox versucht, aber wie gesagt, das haut nicht hin. Daher wäre ich für Hilfestellungen sehr dankbar, vielleicht mag mir auch jemand das passende Gerüst zur Verfügung stellen?


    Vielen Dank im Voraus!


    Gruß, Marco

  • Hallo,


    ich hatte im Netz eine Vorlage mit Felxbox gefunden und versucht diese anzupassen...


    html:


    css:


    Danke schonmal im Voraus...

  • vertigo Das ist ja hochinteressant. Du verwendest veraltete Technologie wie Tables fürs Design, aber gleichzeitig auch Flexbox.


    Das muss man auch erstmal schaffen... :D



    Ich kann dir nur empfehlen, komplett auf HTML5 und CSS3 zu setzen.


    Für den Fall, dass du mit Flexbox arbeiten möchtest, ist hier ein Beispiel für einen möglichen Grundaufbau deiner Seite.


    Ansonsten wäre es für Hilfestellungen einfacher, wenn du konkrete Fragen/Probleme vorlegen würdest. Mehr als Beispiele können wir sonst nämlich nicht posten.

  • Hallo Zusammen!


    Erstmal Danke für die Antworten.


    @Lupo: Danke für das Angebot. Deine Seite entspricht ja in etwa meinen Vorstellungen. Nur Deine beiden Boxen rechts werden beim Verkleinern gar nicht mehr angezeigt?


    DIe Tabellen sind nur als Platzhalter zum Füllen. Ok, dann machen wir das mal konkret...


    Diese Webseite hier soll auf aktuellen Stand hinsichtlich Coding gebracht werden. Wie Ihr sehen könnt, ist sie noch mit Tabellen layoutet worden, was für Desktops noch funktionieren mag, für mobile Devices aber nicht. Die Grundstruktur soll erhalten bleiben, nur dass bei kleineren Bildschirmen die beiden Boxen rechts dann unter dem Hauptinhalt verschoben werden. wobei dann erst die untere (Tourdaten) angezeigt werden soll dann die obere.
    Das Ganze soll dann aus Designgründen dann nicht zentriert, sondern rechts angeordnet werden (hängt mit dem neuen Hintergrundbild zusammen).


    Hilft das evtl. ersteinmal weiter?


    Die nächste Frage wäre dann, wie ich die Tourdaten-Box ohne Tabellen so hinbekomme, aber dazu dann später... :rolleyes:


    Danke und Gruß,


    Marco

  • Achso, ne. Die Tabelle kannst du für Daten ruhig nutzen. Das musst du sogar.


    Aber für Designzwecke nutzt man eben keine Tabellen.


    Wenn du stattdessen Flexbox nutzt, bist du auf alle Fälle gut dabei.


    Edit: Am besten wäre es, wenn du auf einem Testserver deinen aktuellen Stand hochladen würdest. Dann könnte man sich das näher anschauen...

  • @Lupo: Danke für das Angebot. Deine Seite entspricht ja in etwa meinen Vorstellungen. Nur Deine beiden Boxen rechts werden beim Verkleinern gar nicht mehr angezeigt?

    Das hast du richtig erkannt und das ist in meinem Fall auch so gewollt und in der CSS-Datei so gesteuert. Natürlich kann man die Sidebar in der verkleinerten Version für Smartphone und Tablet-PC's entweder vor oder nach dem Hauptcontainer erscheinen lassen. Das ist ja der Vorteil der CSS-Steuerung. Ich halte übrigens auch die Flexbox-Version für zielführender und moderner. Du solltest dich zu diesen Themen mal gründlich einlesen. Literaturvorschlag: http://little-boxes.de/ von Peter Müller

  • Hallo Zusammen,


    ich habe mich mal ein wenig mit Flexbox auseinandergesetzt, und bin bis hierhin gekommen:


    Testseite


    Das Ganze funktioniert auch soweit recht gut, auch das Umschalten auf mobile Ansichten. Soweit so gut. Nun habe ich natürlich wieder ein paar Ideen, wo ich Euch mal fragen wollte, ob das machbar ist:
    1. In der Desktopansicht soll der Container maximal die Bildschirmhöhe annehmen. Das klappt ja auch. Gibt es eine Möglichkeit, hier einen sticky footer einzubauen, so dass nur der Bereich zwischen Header und Footer scrollt, wenn dieser größer ist?
    2. Wie bekomme ich den schmalen Abstand zwischen dem Header-Image und dem Content weg?
    3. Im Content soll u.a. auch das Facebook Seiten-Plug-In implementiert werden. Dieses ist ja nicht wirklich responsive. Ich habe mir zwar diverse Seiten angeschaut, wo workarounds benannt sind, aber die verstehe ich irgendwie nicht.


    Fragen über Fragen, ich hoffe, der Eine oder Andere mag mir auf die Sprünge helfen.


    Gruß, Marco

  • Schon mal zur 2:


    Ein einfaches display: block bei dem Bild sollte helfen.



    Edit:


    Bei Nr. 3 kann ich dir leider nicht helfen und bei 2 ist mir nicht ganz klar, was du damit meinst.


    Soll der Footer immer den gleichen Abstand zum Bildschirmrand haben, wie oben das Menü, und für den Content-Bereich gibt's dann einen extra Scrollbalken?


    Oder wie soll man das verstehen?

  • Joa, werde dir das nachher vielleicht mal zukommen lassen.


    Wirklich benutzerfreundlich ist das allerdings nicht. Aber gut, musst du wissen, ob dir das gefällt.



    Edit: Hier ist es...


    Habe im Prinzip nur sehr wenig dafür verändern müssen. Schau es dir einfach mal an.





    Deinen Code könntest du übrigens auch ein wenig besser formatieren und z.B. den CSS-Code auslagern.


    Habe diesbezüglich einfach mal meine Finger von gelassen und lediglich die nötigen Änderungen vollzogen. :P

  • Hi,


    Danke für die Hilfe, werde das gleich mal austesten. Das ist übrigens nicht meine Idee, ich bin nur ausführendes Organ. Aber Blaze hat inzwischen auch noch andere Ideen rausgehauen, ich muss mal sehen, was das nun schlussendlich werden soll. Ich muss den wohl mal ausbremsen... ;)


    Der CSS-Code ist aktuell nur drin, da sich dann leichter arbeiten lässt. Der wird nachher dann ausgelagert, da ja die anderen Seiten auch drauf zugreifen werden.

  • @JR Cologne: ich habe den Code mal ausprobiert. Du hast Recht, das sieht mal ziemlich unschön aus. Ich habe mich nunmehr entschieden, das Ganze doch wie ursprünglich vorzusehen.


    Ich habe hierzu mal etwas vorbereitet... Testseite und würde gern folgende Dinge umsetzen:
    1. Der mittlere Bereich, wo hier das iFrame mit Facebook drinsitzt soll immer eine Breite von 520 px haben (500px iFrame + je 10px Padding). Das muss ich so machen, da das Plugin (noch) nicht responsive arbeitet. Beide Sidebars sollen dann die Restbreite vom Container übernehmen.
    2. Die linke Sidebar (Tourdaten) soll ggf. rechts unter Sidebar 2 angeordnet werden.


    Lässt sich sich das realisieren? Und wenn ja wie?


    Schonmal vielen Dank im Voraus...


    Gruß, Marco

  • Selbstverständlich ist das möglich.


    Ich gehe mal davon aus, dass du mit Punkt 2 meinst, dass in der Desktop-Ansicht die beiden Sidebars rechts und untereinander platziert werden und dann links dementsprechend der aktuell noch mittlere Container.


    In der mobilen Ansicht wird dann alles untereinander dargestellt.


    Stimmt das so?

  • Hier ist wieder der Code:




    Mehr als die beiden Sidebars in einen extra Container zu packen und ein wenig die order sowie die Breite des main-Containers zu begrenzen, habe ich nicht gemacht...



    Edit: Deine Tabelle ist weiterhin veraltet. Kann dir nur dazu raten, deine Tabelle mit CSS3 und HTML5 zu gestalten bzw. dich daran zu halten.


    Wundert mich, dass das bisher noch nicht für Konflikte/Probleme gesorgt hat. In Verbindung mit Flexbox kann das eigentlich nicht gut gehen. :D

  • Danke! das ist es... :thumbsup:


    Aber schon ein bisschen peinlich, wenn man den Wald vor lauter Bäumen nicht sieht. Das mit dem eigenen Container für die beiden Sidebar-Boxen hätte mir auch selbst einfallen können... :whistling:
    Was mich nur wundert, das mit der Breite hatte ich genauso getestet, hat aber nicht geklappt. Egal, nun kann ich das Ganze jetzt fertig machen.
    Wegen der Tabellen: Die sind ja nur für den Inhalt. Werde mich aber später noch einmal schlau machen, woe man das Layout ohne Tabellen hinbekommt.


    Nochmal Danke für die viele Hilfe. Ich war bestimmt nicht das letzte Mal hier... :rolleyes:


    Cheers, Marco