Positionierung von DIV Elementen

[maggie]

Hallo,
ich möchte drei verschiedene Elemente (Navigationsreihen) vom Außenrand positionieren. Wie mache ich das am Besten?
Projekt siehe Bild
http://www.formfalt.net/div_position.gif
1. Iconreihe
2. Navigationsreihe mit 'Kontakt'
3. Navigationsreihe mit 'Veranstaltung'
so wie's im Moment aussieht habe ich die Icons in die gleiche Reihe wie 'Kontakt' gestellt, Position: margin-top: 45pt;
Reihe mit 'Veranstaltung' ist margin-top:-12pt;

Ich würde aber gerne die 3 Elemente extra(exakter)positionieren.

Danke für Eure Hilfe.
Gruß,
Maggie

[Christoph Schnauß]

hallo maggie,

Projekt siehe Bild
http://www.formfalt.net/div_position.gif

ähhhh ... das ist kein Bild, sondern eine Zeichenkette. Falls du aber http://www.formfalt.net/div_position.gif gemeint haben solltest, so informierst du dich bitte in der schönen neuen Forums-Hilfe, wie das geht. Ich gehe davon aus, daß du dich auf

beziehst, gelle?

so wie's im Moment aussieht habe ich die Icons in die gleiche Reihe wie 'Kontakt' gestellt

So sieht es aus, und gleichzeitig ist es absolut unsinnig, so ein Bildchen anzugeben, wenn es doch um deinen Quelltext geht. Bildschirmfotos dieser Art sind absolut nutzlos. Wenn du Hilfe haben möchtest, mußt du schon deinen Code angeben, Bildchen sind allenfalls eine nette spielerische Beigabe ohne jeden Aussagewert.

Grüße aus Berlin

Christoph S.

[Biesterfeld]

Hej,

ich möchte drei verschiedene Elemente (Navigationsreihen) vom Außenrand positionieren.

Wäre die Formulierung "drei verschiedene Navigations_listen_" auch korrekt?

Ich würde aber gerne die 3 Elemente extra(exakter)positionieren.

Zunächst möchtest du also diese 3 "Elemente" semantisch seperat definieren, dann kannst du diese wiederrum extra formatieren wie dir beliebt.

Wie du Listenelemente nebeneinander anstatt untereinander positionieren kannst verrät dir CSS-basierte Navigationsleisten. Wie du die Listen dann relativ zueinander positionierst, sollte für dich kein Problem darstellen.

Beste Grüße
Biesterfeld

[Maggie]

Hi,
die drei verschiedene Navigations_listen (ja, das ist besser verständlich ausgedrückt) habe ich nun wieder in drei div container gesetzt und spiele nun mit den margin-top Werten.

#infonav  
{  
margin-top: 45pt;  
margin-left: 221pt;  
}

Fragen (deren Antw. ich trotz Suche im Web noch nicht gefunden habe):
Wird bei margin-top der Abstand vom oberen Rand bis zur Grundline des img/der Schrift gerechnet?
Wie kann man bestimmen welches Navigations-liste (bei Überlappung) vorne steht(index Nummern?)?
Danke.
Gruß,
Maggie

[Biesterfeld]

Hej,

die drei verschiedene Navigations_listen (ja, das ist besser verständlich ausgedrückt) habe ich nun wieder in drei div container gesetzt

Ja warum denn das? Jede Liste (die du natürlich durch <ul> oder ähnliches ausgezeichnet hast) bilden doch bereits ein Blockelement. Wieso diese jetzt nochmal in einen Sinnleeren <div> stecken?

Fragen (deren Antw. ich trotz Suche im Web noch nicht gefunden habe):
Wird bei margin-top der Abstand vom oberen Rand bis zur Grundline des img/der Schrift gerechnet?

Diese Frage beantwortet dir das Box-Modell. Der Abstand besteht also bis zum äußeren Rand des oberen Rahmens.

Wie kann man bestimmen welches Navigations-liste (bei Überlappung) vorne steht(index Nummern?)?

Indem du es festlegst! Ansonsten stehen die Elemente in y-Richtung untereinander und liegen alle in der selben z-Ebene.

Beste Grüße
Biesterfeld

[Maggie]

Ja warum denn das? Jede Liste (die du natürlich durch <ul> oder ähnliches ausgezeichnet hast) bilden doch bereits ein Blockelement. Wieso diese jetzt nochmal in einen Sinnleeren <div> stecken?

wenn ich eine eine .css Datei habe, muss ich schon zwischen den ul
Listen unterscheiden.

Wie kann man bestimmen welches Navigations-liste (bei Überlappung) vorne steht(index Nummern?)?

Indem du es festlegst! Ansonsten stehen die Elemente in y-Richtung untereinander und liegen alle in der selben z-Ebene.

»»
Die Definition über z-index: 10; (höchste Zahl ist oben)hat nicht funktioniert.

Gruß,
Maggie

[wahsaga]

hi,

Ja warum denn das? Jede Liste (die du natürlich durch <ul> oder ähnliches ausgezeichnet hast) bilden doch bereits ein Blockelement. Wieso diese jetzt nochmal in einen Sinnleeren <div> stecken?

wenn ich eine eine .css Datei habe, muss ich schon zwischen den ul
Listen unterscheiden.

Wie "unterscheidest" du im CSS zwischen den verschiedenen Divs?
Was hindert dich daran, diese Divs wegzulassen - und zwischen den UL einfach auf die gleiche Weise zu "unterscheiden"?

gruß,
wahsaga

[maggie]

hi,

Ja warum denn das? Jede Liste (die du natürlich durch <ul> oder ähnliches ausgezeichnet hast) bilden doch bereits ein Blockelement. Wieso diese jetzt nochmal in einen Sinnleeren <div> stecken?

wenn ich eine eine .css Datei habe, muss ich schon zwischen den ul
Listen unterscheiden.

Wie "unterscheidest" du im CSS zwischen den verschiedenen Divs?
Was hindert dich daran, diese Divs wegzulassen - und zwischen den UL einfach auf die gleiche Weise zu "unterscheiden"?

»»
ich könnte #nav1 ul {}
auszeichnen und muss dann die Navigationsliste mit <div id="nav1"><ul></ul></div> einfügen.
Mach ich das richtig? oder zu kompliziert?

Wie siehts denn mit dem z-index aus?
Gruß,
Maggie

[wahsaga]

hi,

ich könnte #nav1 ul {}
auszeichnen und muss dann die Navigationsliste mit <div id="nav1"><ul></ul></div> einfügen.
Mach ich das richtig? oder zu kompliziert?

Kannst du plausibel erklären, warum du dafür nicht
<ul id="nav1"></ul>
und im CSS
ul#nav1 { ... }
oder auch nur
#nav1 { ... }
benutzt?

Wie siehts denn mit dem z-index aus?

Heiter bis wolkig.
(Wenn du irgendwas _genaueres_ zum Thema z-index wissen willst - dann könntest du vielleicht eine genauere Frage stellen.)

gruß,
wahsaga

[maggie]

Hi!

Mach ich das richtig? oder zu kompliziert?

Kannst du plausibel erklären, warum du dafür nicht
<ul id="nav1"></ul>
und im CSS
ul#nav1 { ... }
oder auch nur
#nav1 { ... }
benutzt?

Gut, danke!
Ich möchte meine, zu komplizierte Anweisung nicht verteidigen - deshalb frage ich, um es künftig besser zu machen.

Wie siehts denn mit dem z-index aus?
Heiter bis wolkig.
(Wenn du irgendwas _genaueres_ zum Thema z-index wissen willst - »» dann könntest du vielleicht eine genauere Frage stellen.)

Ich hatte eingangs gefragt:

Wie kann man bestimmen welches Navigations-liste (bei Überlappung) vorne steht(index Nummern?)?

Die Antwort hat mir leider nicht weitergeholfen.

Indem du es festlegst! Ansonsten stehen die Elemente in y-Richtung »» untereinander und liegen alle in der selben z-Ebene.

Mein Versuch in der CSS-Datei einen z-index anzugeben hat nicht funktioniert, wie ich mitteilte.
»»
Die Definition über z-index: 10; (höchste Zahl ist oben)hat nicht funktioniert.

Ich würde mich freuen, hierzu die richtige Lösungsantwort zu erhalten. Danke.
Gruß,
Maggie

[Biesterfeld]

Hej,

Ich möchte meine, zu komplizierte Anweisung nicht verteidigen - deshalb frage ich, um es künftig besser zu machen.

Deswegen geben wir ja hir auch gerne Auskunft wie es besser geht. Ein nachfragen á la "Warum tust du XY?" ist nicht rethorisch-abwertend gemeint, sondern nur, damit du dir selber klar wirst, warum es eine ungünstige Lösung ist. :)

Mein Versuch in der CSS-Datei einen z-index anzugeben hat nicht funktioniert, wie ich mitteilte.

Was hat wie, wo nicht funktioniert?

Die Definition über z-index: 10; (höchste Zahl ist oben)hat nicht funktioniert.

Wo ist oben? Was ist die z-Richtung?

Ich würde mich freuen, hierzu die richtige Lösungsantwort zu erhalten. Danke.

Es wird nicht klar, wofür du den z-Index brauchst. Wieso hast du Elemente die in z-Richtung überlappen? Zeig bitte etwas mehr Code oder noch besser einen Link, wo man begutachten kann, was du meinst.

Beste Grüße
Biesterfeld