Wordpress

Wordpress

Posts 1-6 of 6
  • Michael Tarnowski
    Michael Tarnowski    Premium Member
    The company name is only visible to registered members.
    18 Dec 2011, 01:23 am
    Layout-Problem: Aufzählungsliste links - Widget rechts
    Hallo,

    ich möchte am Ende meiner Post einen Abschnitt "Further Readings" einbauen. Das Layout soll zweigeteilt sein: eine Aufzählungsliste mit Weblinks links ausgerichtet und ein Amazon Such-Widget (WP Amazon Plugin) rechts ausgerichtet.

    * Internet-Link 1
    * Internet-Link 2
    * .....
    * .....

    Rechts von der Liste soll das Widget [amazon]....[/amazon] plaziert sein.

    Das ganze will ich ohne Tabelle realisieren; Ich hab's mit div & span versucht aber nicht geschafft; das Widget erscheint immer am Postende *nach* der Aufzählungsliste.

    Hat jemand eine Idee? - Vielen Dank
    Michael
  • Post visible to registered members
  • Martin Stehle
    Martin Stehle
    The company name is only visible to registered members.
    19 Dec 2011, 9:19 pm
    Re^2: Layout-Problem: Aufzählungsliste links - Widget rechts
    Grundsätzlich geht's so:
    HTML:
    <div class="linksrechts">
    <div class="links">hier kommt die Liste hin</div>
    <div class="rechts">hier kommt das Widget hin</div>
    </div>

    CSS:
    .linksrechts {overflow: hidden;}
    .links { float: left; width: 50%; margin: 0; padding: 0; }
    .rechts { float:right; width: 50%; margin: 0; padding: 0; }

    Das overflow:hidden "macht Höhe" des umgebenden Containers bei floatenden Elementen..

    Die zwei width's können beliebig anderen Zahlen sein, solange sie in der Summe genau 100% ergeben.

    Die Floats müssen margin und padding von 0 haben, damit die width's browserübergreifend ohne böse Überraschungen berechnet werden.

    Eventuell kann noch ein "text-align: right;" bei .right notwendig sein, wenn Du willst, dass das Widget rechtsbündig anliegt.
    This post was modified on 19 Dec 2011 at 09:20 pm.
  • Michael Tarnowski
    Michael Tarnowski    Premium Member
    The company name is only visible to registered members.
    20 Dec 2011, 06:26 am
    Re^3: Layout-Problem: Aufzählungsliste links - Widget rechts
    Thomas, Martin, vielen Dank für Eure Hilfe! Martin, Dein Code hat's gebracht;
    siehe http://goo.gl/WVfKl

    Kleiner Schönheitsfehler des Layouts: das Amazon-Widget ist nicht vollständig am re. Rand der Textfläche ausgerichtet, d.h. am Rand zur re. Sidebar.
    Aussdem wäre ein Leerraum zwischen der Liste und dem Widget schön.
    Ich habe die Größenverhältnisse der div-Bereich geändert auf 60:40

    .links { float: left; width: 60%; margin: 0; padding: 0; }
    .rechts { float: right; width: 40%; margin: 0; padding: 0; }

    Ansonsten - genau, das was ich mir vorstellte.
    Vielen Dank

    Michael
  • Martin Stehle
    Martin Stehle
    The company name is only visible to registered members.
    20 Dec 2011, 10:06 am
    Re^4: Layout-Problem: Aufzählungsliste links - Widget rechts
    In deinem Fall geht es so: CSS
    #amazon_widget_DE_8002_0 {
    float: right;
    width: 302px;
    }

    Bei float sollte immer eine width angegeben werden. Ich habe die Widget-Breite von 300px plus 1px jeweils für die linke und rechte Border eingesetzt.
  • Michael Tarnowski
    Michael Tarnowski    Premium Member
    The company name is only visible to registered members.
    20 Dec 2011, 7:13 pm
    Re^5: Layout-Problem: Aufzählungsliste links - Widget rechts
    Super, Martin! - Besten Dank.
    Frohe Weihnachten und einen guten Rutsch.
    Michael