[Barodscheff]

Hallo Leute,

ich bin gerade dabei eine neue Seite zu basteln. Im Hinblick auf maximale Kompatibilität und Barrierefreiheit, frage ich mich wie man am besten 3 div-boxen mit den margins positioniert. Ich hab den Code mal grob bei tinkerbin nachgebaut:

Tinkerbin

Ich hab den margin jetzt absichtlich erstmal überall mit 10px angesetzt. Mein Ziel ist es die linke div-box linksbndig zu positionieren, die rechte rechtsbündig und die mittlere halt in der Mitte. Dabei möchte ich keine id’s verwenden, sondern für alle div-boxen eine class – wenn möglich. Weiterhin soll die mittlere box immer in der Mitte bleiben auch wenn der Benutzer ran- oder rauszoomt.

Habt ihr da Ideen?

Viele Grüße

[Hook]

Hi,

ich habe deinen Link auf Grund der doch "seltsam" anmutenden Adresse nicht angeklickt. Trotzdem hier mal meine Meinung:

Zitat von Barodscheff

Mein Ziel ist es die linke div-box linksbndig zu positionieren, die rechte rechtsbündig und die mittlere halt in der Mitte.

Das bekommst du mit dem normalen html und zwei einfachen float-Anweisungen hin. Für weitere Tips sind die Infos zu spärlich. Sollen die Boxen eine feste Breite haben (fix oder relativ)? Wenn ja welche (alle, rechts und links, oder nur eine).

Zitat von Barodscheff

Dabei möchte ich keine id’s verwenden, sondern für alle div-boxen eine class – wenn möglich.

Das ist nur dann sinnvoll, wenn du noch andere Boxen hast, die die gleiche Eigenschaft bekommen sollen.

Zitat von Barodscheff

Weiterhin soll die mittlere box immer in der Mitte bleiben auch wenn der Benutzer ran- oder rauszoomt.

Das Zoomverhalten richtet sich nach dem Viewport-Ausschnitt, den der User gerade hat. Ausgehend von der linken oberen Ecke des Viewport wird dann alles vergrößert/verkleinert und der dann nicht mehr sichtbare Teil ist dann nur über die Scrollbars zu erreichen.

Was die eigentliche Seite betrifft bleibt die mittlere Box immer in der Mitte, wenn die äußeren Boxen eine feste Breite haben (fix oder relativ) und der mittleren keine Breite gegeben wird.
Ansonsten musst du der mittleren Box eine Breite geben und sie mit margin: 0 auto; zentrieren.

Peter

[Barodscheff]

Hallo Peter, danke für deine Antwort.

Was ist denn an dem Link seltsam anumtend? Ich denke Tinkerbin sollte bekannt sein, wenn man in einem XHTML-Forum unterwegs ist.
Hättest du auf den Link geklickt, hätten sich wohl auch einige deiner Unverständlichkeiten geklärt.

Dass ich mein Vorhaben mit 2 floats außen und einem div mit margin auto in der Mitte lösen kann, ist mir klar. Da das Ganze aber eigentlich schon ein richtiges 3 Spalten Layout ist, wollte ich wissen ob es auch einfacher geht. Wie du auch erwähnt hast, sollen es mal mehr Boxen werden, deshalb die eine Klasse.

Aufgrund der wenigen Antworten nehme ich jetzt aber an, dass es nicht so einfach geht und ich ein 3 Spalten Layout basteln muss.

Viele Grüße.

[Hook]

Hi,

ich kenne Tinkerbin (noch) nicht und ich bin immer vorsichtig, wenn auf einen Zusatz "/ZjCzqVk8" verlinkt wird. Was natürlich nicht heißen soll, das das immer "faule" Links sind.

Ich wüsste nicht, wie man ein 3-Spalten-Layout einfacher machen kann, als mit einfachem CSS.

Peter

Edit: ich habe mir deinen Link jetzt mal angesehen:
Dort werden ja alle Boxen links gefloatet, also ist nichts zentriert und je nach Viewportgröße ist rechts ein mehr oder weniger großer Freiraum. Was ich nicht für standardkonform halte ist die margin-Angabe. Da müßte beim mittleren div ein margin-left von 110px und beim rechten div von 220px rein.

Peter