• Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Thema: Liste zentrieren und Texte positionieren

Hi.

Ich hänge bei der Umsetzung des folgenden Entwurfs:

http://wendepunkt-tanzundtherapie.de/layout.html

Die Position und Breite der mittleren "Spalte" (also quasi das weiße Blatt) ist statisch (px-Angaben). Das Hauptmenü (eine <ul>-Liste) bekomme ich nicht in diese Spalte zentriert und, soweit ich das überblicke gibt es hierfür auch keine Chance. Dann das Breadcrumb-Menü darunter. Ich schaffe es, entweder den Text links auf die Grundlinie runterzuziehen, oder aber das Wort rechts an den rechten Rand zu setzen, aber nicht beides zusammen. Sobald ich für 'Inhalt' float: right definiere, funkt das vertical-align für den Pfad links nicht mehr. Wenn ich das float weglasse, dann klatscht mir das 'Inhalt' nach links an den Pfad dran, anstatt am rechten Rand zu bleiben.

Habt ihr mir da ein paar Ideen (abgesehen von Tabellen natürlich)?

Basti

  • Herkunft: Wolfenbüttel & Garching b. M.
  • Registrierungsdatum: 07-11-2000
  • Beiträge: 1.971

Re: Liste zentrieren und Texte positionieren

Hi!

Macht es vielleicht Sinn, das ganze absolut zu positionieren? Also einfach mehrere Container an der gleichen Position. Der Container mit der Überschrift kann text-align:right; haben, der für die Brotkrumen ...:left etc.

Mamphil

The laws of physics are the canvas God laid down on which to paint his masterpiece. “Leonardo Vetra” in Dan Brown’s “Angels & Demons”

Mamphil's Webseite

3 Antwort von Basti

  • Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Re: Liste zentrieren und Texte positionieren

Hi Mamphil.

Ja stimmt, das hab ich für das Hauptmenü oben auch schon eingesetzt gehabt (dort allerdings ohne Erfolg), aber für den Part darunter würd das schon Sinn machen, denn eigentlich hab ich genug Platz nach unten, wenn das Hauptmenü in eine zweite Zeile vergrößert wird.

Dann bleibt letztlich nurnoch eben dieses Problem mit dem Hauptmenü. Aber das dürfte die gleiche Geschichte sein, mit meiner Frage vor einigen Monaten hier im Forum, ob ich eine horizontale Liste rechtsbündig ausrichten kann. Es sieht hald echt beschissen aus, wenn das Menü nicht zentriert ist. Vielleicht sollte ich hier auch mit absoluter positionierung arbeiten? Allerdings sollte das Menü natürlich schon skalierbar bleiben ... am Besten sogar nach rechts ins Blaue hinein (mit weißem Hintergrund für diese Zeile oder auch nur die Menüpunkte natürlich...)

Habt ihr mir da noch einen Tipp, vielleicht?

Basti

4 Antwort von Basti

  • Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Re: Liste zentrieren und Texte positionieren

Das ist echt ätzend:
Nichtmal in absolut positionierten Containern mit Höhenangabe funktioniert das vertical-align: bottom! Habs jetzt so gelöst:

<div style="position: absolute; top: 5em; left: 239px; width: 418px; height: 3em;">
    <div style="position: absolute; bottom: 0;                font-size: 1em;">Startseite > Angebot > Fortbildung > </div>
    <div style="position: absolute; bottom: -0.1em; right: 0; font-size: 2em;">Inhalt</div>
</div>

Also einen alsolut positionierten Container mit fester Höhe und Breite und darin wiederum absolut gesetzte Container, der eine im linken unteren Eck, der andere im rechten unteren Eck, wobei ich diesen ein wenig tiefer gesetzt habe (-0.1em), damit beide Texte trotz ihrer unterschiedlichen Größe etwa auf die selbe Grundlinie kommen. Dooofes Gefriemel!

Basti

5 Antwort von Basti

  • Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Re: Liste zentrieren und Texte positionieren

Hi.

Könnt ihr bitte mal folgende Seite begutachten:

http://wendepunkt-tanzundtherapie.de/test2.html

Das Ganze sollte etwa so aussehen:

http://wendepunkt-tanzundtherapie.de/screenshot.jpeg

(Wobei der dunkle Grund hinter "Seminarhaus" vom Überfahren der Maus kommt, die selbst beim Screenshot ausgeblendet wurde).

Der Konqueror bricht nach den ersten drei Menüpunkten die Zeile um, keine Ahnung wiso. Könnt ihr mir kurzes Feedback geben, wie die Seite bei euch aussieht und womit ihr sie betrachtet?

Basti

  • Herkunft: Wolfenbüttel & Garching b. M.
  • Registrierungsdatum: 07-11-2000
  • Beiträge: 1.971

Re: Liste zentrieren und Texte positionieren

Hi!

Bei mir (Firefox 0.9.3) sieht es wie auf deinem Screenshot aus (upps, ist ja auch Firefox wink )

Hast du mal probiert, dem div die CSS-Eigenschaft white-space:nowrap zuzuweisen? Vielleicht geht's, wenn man dem Browser das Umbrechen einfach verbietet.

Mamphil

The laws of physics are the canvas God laid down on which to paint his masterpiece. “Leonardo Vetra” in Dan Brown’s “Angels & Demons”

Mamphil's Webseite

7 Antwort von Basti

  • Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Re: Liste zentrieren und Texte positionieren

Das hat nichts gebracht. Er bricht auch nicht innert "Unter uns" oder so um, sondern scheint irgendwelche falschen Zahlen für die Breite der Listenelemente zugrunde zu legen und kammt dann wohl drauf, dass "Seminarhaus" schon nicht mehr hinpasst.

Im MSIE siehts auch übel aus, daher hats eh keinen Wert. Könnt ihr daher bitte nochmal die div-Lösung testen:

http://wendepunkt-tanzundtherapie.de/test3.html

Danke,
Basti

  • Herkunft: Wolfenbüttel & Garching b. M.
  • Registrierungsdatum: 07-11-2000
  • Beiträge: 1.971

Re: Liste zentrieren und Texte positionieren

Hey!

Könnt ihr daher bitte nochmal die div-Lösung testen:

http://wendepunkt-tanzundtherapie.de/test3.html

Im aktuellen IE und im oben genannten Firebird gibt es bei mir keine Probleme.

Mamphil

The laws of physics are the canvas God laid down on which to paint his masterpiece. “Leonardo Vetra” in Dan Brown’s “Angels & Demons”

Mamphil's Webseite

9 Antwort von Basti

  • Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Re: Liste zentrieren und Texte positionieren

Das hört sich doch klasse an!

Hat jemand nen älteren MSIE, oder Opera, Safari, iCab?

Danke,
Basti

10 Antwort von theTJ

  • Herkunft: Zusmarshausen bei Augsburg
  • Registrierungsdatum: 31-08-2003
  • Beiträge: 178

Re: Liste zentrieren und Texte positionieren

hat jemand nen älteren MSIE, oder Opera, Safari, iCab?

Im Opera7 fehlen Inhalte und das Menü links... (hab den thread nur überflogen...) :oops:

das sieht dann so aus:
http://www.tj.ostseiten.de/opera.jpg

theTJ

Der PC kann alles, wenn der der davor sitzt erklären kann was er will!
http://tjmusic.eu/ http://hp-ff.eu/ http://tj.tjmusic.eu/

theTJ's Webseite

11 Antwort von Mamphil

  • Herkunft: Wolfenbüttel & Garching b. M.
  • Registrierungsdatum: 07-11-2000
  • Beiträge: 1.971

Re: Liste zentrieren und Texte positionieren

Im Opera7 fehlen Inhalte und das Menü links... (hab den thread nur überflogen...) :oops:

das sieht dann so aus:
http://www.tj.ostseiten.de/opera.jpg

Also sieht es so aus, wie es aussehen soll :mrgreen:

Mamphil

The laws of physics are the canvas God laid down on which to paint his masterpiece. “Leonardo Vetra” in Dan Brown’s “Angels & Demons”

Mamphil's Webseite

12 Antwort von Basti

  • Basti
  • Ehrenmitglied
  • Offline
  • Registrierungsdatum: 27-09-2001
  • Beiträge: 2.126

Re: Liste zentrieren und Texte positionieren

Ja, so soll es aussehen - ich hatte das Hauptmenü erstmal isoliert, weil der Rest noch garnicht stand.

Danke.

Ich habs jetzt doch nochmal umgestellt, es wieder in eine Liste gepackt (mit relativer Positionierung) und auch den Rest umgesetzt (zumindest die groben Elemente). Könnt ihr bitte nochmal schauen:

http://wendepunkt-tanzundtherapie.de/test6.html

Der ebenfalls rot gefärbte und nicht verlinkte Hauptmenüpunkt "Seminarhaus" ist nur so gesetzt, um auch diesen Status zum Test zu stellen. Später wird es natürlich nur einen roten Eintrag in diesem Menü geben, der dann eben entweder mit einem Link hinterlegt ist, oder nicht, falls die Seite hinter dem Link bereits angezeigt wird.

Die Wiederholung im Bild ist quasi Absicht. Ich hatte die Spalte erst kleiner und hab das Bild noch nicht neu erstellt. Auch die Pfeile zwischen den Links im Breadcrumb-Menü sind nur vorläufige Pics.

Wie es aussehen sollte, verdeutlicht folgender Screenshot:

http://wendepunkt-tanzundtherapie.de/screenshot2.jpeg

Die Farben sind durch die Komprimierung etwas verschoben...

Basti