theoretische Layoutfragen (an die css Experten)

  • Hallo

    Ich habe ein super Layout für meine Homepage Studi-Anzeigen im Kopf.
    http://www.studi-anzeigen.de
    Da die Werbung rechts floatend ist und das menü links floatet gibt es zwischen den Anzeigen und der Werbung rechts einen unschönen weißen Freibereich.
    Nun möcht ich diesen weißen Zwischenbereich, der bei vielen Bildschirmauflösungen auftritt, weghaben. Eine feste Breite für den div scheidet aus, da ich ab einer bestimmten Breite 2 Anzeigen nebeneinander angezeigt haben möchte, so wie dies momentan auch der Fall ist.
    Die Anzeigen haben eine feste Breite.
    Ist es möglich so ein Layout zu machen?
    Als weitere Schwierigkeit soll die Seite noch zentriert werden.

    Mir ist bisher leider keine Möglichkeit eingefallen sowas umszusetzen, werde aber bei Gelegenheit weiter versuchen.
    Hab mir gedacht, dass evtl. jemand auch schon die Idee hatte.

    Gruß NN

  • stimmt, das könnte ich, aber das macht keinen Sinn die Anzeigen ewig breit zu strecken. die sind so gemacht, dass der Titel immer in eine Zeile passt und auch sonst proportionsmäßig gut aussieht. Die sollen ihre feste Breite behalten.
    Ich möchte eben, dass ab einer bestimmten Bildschirm bzw. Fenstergröße 2 Anzeigen im mittleren bereich nebeneinander angezeigt wird.
    So wie es aussieht ist dies aber mit nur einem Stylesheet nicht möglich, oder?

    Habe schon in Firebug rumgespielt, bin aber zu keinem Ergebnis gekommen.

    Meiner Meinung leigt das Problem daran, dass sich ein div ohne Breitenangabe die ganze Seite einnimmt. Er sollte aber für meinen Fall nur so breit sein, wie es der Inhalt eben verlangt. Gibts da denn keine Möglichkeit?

  • Ich würde die Anzeigen floaten (http://www.white-tiger.ch/?uri=photos). So habe ich das an meiner Seite gemacht, um 3 Bilder nebeneinander zu kriegen.

    Dann natürlich den Anzeigen feste Breiten vergeben und das Div in dem sie stecken (Mitteldiv) keine Angaben zur Breite.
    Dann wenn du die Seite vergrösserst oder eine höhere Auflösung hast, schieben sich die Anzeigen dann nebeneinandern, sobald genug Platz da ist.

  • soweit ist mir alles klar.
    Bitte meine Beschreibung im ersten Post nochmals ganz genau lesen.
    Momentan floaten die Anzeigen ja. Ist auch alles kein Problem solange die seite entweder die gesamte Breite einnimmt oder eben ne feste Breite hat wie bei Firefox. Die Seite muss sich bei mir aber quasi in der Breite Stufenweise anpassen, da ich sonst eben jenen weißen Freibereich zwischen den Anzeigen und der Werbung bekomme.
    Es würde vermutlich auch gehen, wenn ich einfach alle Elemente links floaten lasse (inkl. Werbung), nur kann ich dann die seite eben nicht mehr zentrieren.
    Genau für dieses Dilemma suche ich eine Lösung.

  • Ich denke da an JavaScript, denn mit CSS wäre das glaube ich nicht oder nur sehr schwer machbar.
    So wie ich das verstehe suchst du nach einem Code, der dir die Anzeigen individuell vergrösstert, aber bei einer bestimmten Breite auf zwei Spalten verteilt.

    Eventuell ne Tabelle? Würde ich aber gar nicht empfehlen.

  • genau, so ist es
    bzw. die Anzeigen dürfen auch ruhig ne feste Breite haben.
    Die Seite soll sich halt "sprunghaft" verbreitern, also sobald 2 Anzeigen nebeneinander passen, da ich eben sonst zwischen Werbung und Anzeigen hässlichen weißen Freiraum bekomme.
    Die einzige Lösung die ich wüsste, ist mit javascript die Bildschirmauflösung auslesen und ein anderes stylesheet einbinden. Das ist aber meiner imho nicht praktikabel, da man nur die bildschirmauflösung nicht aber die Fensterbreite auslesen kann und evtl. ja jemand nicht mit maximiertem Browser surft.

    EDIT: Dein Ansatz ist gar nicht so blöd. Ich lass die Anzeigen sich mitvergrößern und geb ihnen ne min- und max-Breite, dann kann die werbung weiterhin am rechten Fensterrand floaten und alle sind glücklich. Das könnte hinhauen.

  • HALT!
    Hab ne Idee :)
    Du machst die Navigation am Rande in ein Div, dann die Anzeige in eins.
    Dem linken Div gibst du Prozente (ca. 20%), dem Div rechst (Werbung) gibst du auch ca. 20%.
    Das Div in der Mitte machst du mit Prozentangaben (ca. 60%) und dann vergrössert es sich ja sowieso dynamisch.
    Die Anzeigen haben dann ne feste Breite mit ca. 250px und floatest sie sogleich links.
    Wenn das Mittediv nun weniger als 250px hat, werden die Anzeigen untereinander gelistet.
    Falls es grösser ist, werden sie nebeneinander geordnet. Und ich würd den Anzeigen noch ein max-width und min-width geben, dann siehts auch besser aus.

    Habe ich dein Anliegen richtig verstanden oder sollte das Werbediv immer grad bei den Anzeigen sein, das heisst ohne Abstand?
    Dann gibts noch vielleicht die Möglichkeit per CSS das Werbediv mit CSS gleich neben der ersten Anzeige zu positionieren. (relative/absolute, etc.)..

  • werde das heut Abend mal austesten.
    So wie du es beschrieben hast ist es ja moemntan. Siehe Link.
    Ich finde es stört etwas, bzw. sieht nicht gut aus, wenn es bei bestimmten Bildschirmauflösungen eben so viel Platz (weißes Loch) zwischen den Anzeigen und der Werbung ist.
    Ich werd nachher mal n Bildchen malen, damit auch jeder Versteht, was ich will.

  • hier nun was ich genau möchte:
    So soll die Seite aussehen bei schmalem Bildschirm, bzw., niedrigen Auflösungen:
    [Blockierte Grafik: http://img5.imagebanana.com/img/4g4yfr2f/thumb/designschmal.png]

    So soll die Seite aussehen, sobald 2 Anzeigen nebeneinander passen:
    [Blockierte Grafik: http://img5.imagebanana.com/img/mlef7rlz/thumb/designbreit.png]

    das hier darf nicht vorkommen: Stattdessen soll die Seite zentriert werden (siehe auch die beiden oberen Bilder)
    [Blockierte Grafik: http://img5.imagebanana.com/img/hr8n8wq/thumb/designnicht.png]

    EDIT: Gantz vergessen: die Lösung mit min-width und max-width für die Anzeigen funktioniert nicht. Alle bisher getesteten browser ignorieren beide Attribute bei floatenden Elementen. Die Anzeigen breiter zu machen bis zu nem besitmmten Punkt und dann 2 nebeneinanderzusetzen scheidet also auch aus.

  • Menüdiv: feste Breite, im Code zuerst, floaten
    Anzeigendiv: variable Breite -> keine Angabe (eine Art Wrapper)
    Werbediv: feste Breite, floaten

    Anzeigen im Anzeigendiv: width: 250px; max-width: 100%, floaten

    So müsste es meiner Meinung nach etwa realisierbar sein, was denkst du?

  • Geht leider nicht, hab schon sicher 50 Sachen ausprobiert, aber will einfach nicht.
    Ich denke CSS ist für sowas gar nicht ausgelegt.

    Such mal mit Google nach einem möglichen JavaScript Code, der dir das erledigt.
    Gibt ja haufenweise solch kleiner Scripte.

    Oder schreibst schnell eins selber...

  • Zu der Erkenntnis bin ich inzwischen auch gelangt, habs noch mit display:inline und so versucht, verscheidene divs eingefügt, mal rechts mal links floaten lassen, ...

    Im Internet gäbs bestimmt schon so ein Design, wenn es möglich wäre. Bin ja sicher nicht der erste, der auf die Idee kam.

    Naja, vermutlich werd ich nun 2 css Layouts einbinden, eins defaultmäßig und der User kann dann umstellen.
    Nochmal Danke für deine Bemühungen.

  • Warum denn der User? Wenn du mir sagst ab welcher auflösung 2 nebeneinander passen kann ich dir das JS machen. Um JS kommt man bei nem style-switcher nicht rum.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!