position: absolute Problem!

[Bionicman]

Hallo,

Versuche gerade mein erstes CSS/div Design hinzubekommen, aber habe da ein paar Probleme.

1. Seite hat eine feste Breite, soll aber im Browserfenster zentriert sein.
2. Mein Content Bereich soll über der Navi liegen, weil sie einen Verlauf hat der sich unter den Content erstreckt.
3a. Muss diese Elemente also irgendwie, teilweise übereinander positionieren.

Meine Seite zentriere ich so:

width: 1068px;  
margin: 0 auto;

Mein html sieht so aus:

<div id="site">  
  <div id="navi">navi</div>  
  <div id="content">navi</div>  
</div>

Dann orientiert sich position: absolute von navi und content aber an der oberen linken Fensterecke und nicht am parent: site.

Damit das position: absolute klappt müsste ich die site auch absolute machen, so:

position:absolute;  
left:50%;  
margin-left:-125px;

Aber dann bleibt die Seite nicht am Linken Browserrand stehen, wenn das Fenster kleiner ist als der Inhalt. Also die Navi könnte links aus dem Fenster rutschen.

Gibt es dafür eine Lösung?

Danke und Gruß,
Olli

[Bionicman]

Ich nochmal^^

sorry, hab etwas voreilig gepostet.

Lösung:
das parent muss ein position: relative aufweisen. Bislang hatte ich im parent gar kein position.

Bye

[Gunnar Bittersmann]

@@Bionicman:

2. Mein Content Bereich soll über der Navi liegen, weil sie einen Verlauf hat der sich unter den Content erstreckt.

?? Ich verstehe nicht, warum der Teil mit „weil“ irgendwie eine Begründung für den Teil mit „soll“ sein sollte.

Warum ist der Verlauf nicht im Hintergrund des Content-Containers?

Meine Seite zentriere ich so:
width: 1068px;

Dass du damit nichtnutzerfreundliches horizontales Scrollen erforderlich machst, ist dir bewusst?

Live long and prosper,
Gunnar

[Bionicman]

Hallo Gunnar

danke für deine Antwort.

?? Ich verstehe nicht, warum der Teil mit „weil“ irgendwie eine Begründung für den Teil mit „soll“ sein sollte.
Warum ist der Verlauf nicht im Hintergrund des Content-Containers?

Vermutlich gibt es für jedes Problem mindestens eine Handvoll Lösungen. Sollte nicht heißen, dass es so gemacht werden muss, nur hätte ich es gern so gelöst. Das ist schwer zu erklären, ohne es zu sehen^^

Ich habe eine variable Anzahl an Buttons in meiner Navi. Die Navi selbst hat einen BG der immer nur die Buttons hinterlegt. Also variabel hoch sein muss.

Dieser BG reicht in den Content Bereich hinein und ist natürlich auch dort immer unterschiedlich hoch. Da der Content nie die selbe Höhe besitzt wie die Navi, kann ich schlecht einen Teil des BG dort hinein legen, da dann Navi und Content BG nicht mehr zusammenpassen würden.

Deshalb war mein Lösungsansatz, den BG einfach in den Navi div zu legen und den Content "absolut" darüber zu positionieren.

Hoffe das war jetzt mehr oder weniger verständlich^^

Dass du damit nichtnutzerfreundliches horizontales Scrollen erforderlich machst, ist dir bewusst?

Das ist mir durchaus bewusst. Aber das Design habe ich nicht gemacht und ich habe den Kunden auch auf genau diesen Punkt hingewiesen. Aber wenn er es so haben will, dann bitte!

Gruß,
Olli

[suit]

Vermutlich gibt es für jedes Problem mindestens eine Handvoll Lösungen.

ja, eine falscher als die andere ;)

nur hätte ich es gern so gelöst.

auch wenn dir jemand begründen kann, dass es unnötig arbeit ist, falsch und noch dazu andere schwächen aufweist? :)

Das ist schwer zu erklären, ohne es zu sehen^^

was hindert dich daran, es herzuzeigen?

Ich habe eine variable Anzahl an Buttons in meiner Navi. Die Navi selbst hat einen BG der immer nur die Buttons hinterlegt. Also variabel hoch sein muss.

warum hat nicht jeder "button" selbst einen hintergrund? ich nehme an, du hast vernünftigen code mit einer unsortieten liste (ul, allgemeiner hintergrund) sowie jeder menüpunkt hat zumindest ein li- und ein a-element zur verfügung (wieder 2 mögliche hintergründe)

Dieser BG reicht in den Content Bereich hinein und ist natürlich auch dort immer unterschiedlich hoch. Da der Content nie die selbe Höhe besitzt wie die Navi, kann ich schlecht einen Teil des BG dort hinein legen, da dann Navi und Content BG nicht mehr zusammenpassen würden.

ich kann mir immer noch nichts drunter vorstellen ;) - ein visuelles beispiel wäre fein

Deshalb war mein Lösungsansatz, den BG einfach in den Navi div zu legen und den Content "absolut" darüber zu positionieren.

navi-div? bislang hatte ich angenommen, du hast vernünftigen code - mit herzeigen des codes müsste ich grade nicht spekulieren

Hoffe das war jetzt mehr oder weniger verständlich^^

nicht ganz :)

Das ist mir durchaus bewusst. Aber das Design habe ich nicht gemacht und ich habe den Kunden auch auf genau diesen Punkt hingewiesen. Aber wenn er es so haben will, dann bitte!

ja das ist das leid in dieser branche - in jeder anderen branche lässt der kunde machen, weil er keine ahnung hat - in dieser branche will er aber immer selbt mitentscheiden, obwohl weniger ahnung hat, als in jeder anderen branche :)

[Bionicman]

Hallo,

auch wenn dir jemand begründen kann, dass es unnötig arbeit ist, falsch und noch dazu andere schwächen aufweist? :)

So war das nicht gemeint, natürlich lasse ich mich gerne eines besseren belehren. Ich wollte nur gerne wissen ob mein theoretischer Ansatz auch technisch realisierbar ist. Da er es ist, bin ich damit zufrieden und würde auch eine Andere Lösung nehmen, wenn sie denn besser ist.

was hindert dich daran, es herzuzeigen?

Kundenaufträge zeige ich grundsätzlich nicht in der Welt herum, so lange sie nicht, zumindest, fertig sind. Natürlich auch dann nicht^^ Ausser vielleicht als Referenz.

warum hat nicht jeder "button" selbst einen hintergrund? ich nehme an, du hast vernünftigen code mit einer unsortieten liste (ul, allgemeiner hintergrund) sowie jeder menüpunkt hat zumindest ein li- und ein a-element zur verfügung (wieder 2 mögliche hintergründe)

I know, aber der hintergrund ist eine große Grafik. Deshalb hätte ich ihn gern im ganzen drin. Ansonsten müsste jeder Button einen Teilausschnitt des BG haben.

ich kann mir immer noch nichts drunter vorstellen ;) - ein visuelles beispiel wäre fein

ImageShack - Ist ein Screenshot, keine Vorlage
Ich weiss, ich weiss - der Verlauf ist so unscheinbar, man könnte ihn auch ganz rausnehmen. Ich sag' nur KUNDE^^

navi-div? bislang hatte ich angenommen, du hast vernünftigen code - mit herzeigen des codes müsste ich grade nicht spekulieren

Ich benutze ul li a - ich hoffe doch und denke eigentlich, dass es nicht unvernünftig ist meine navi zu Designzwecken in einen div zu stecken. Ganz ohne div's kann man schlecht designen^^

Hoffe das war jetzt mehr oder weniger verständlich^^
nicht ganz :)

Sorry, ist halt mit Worten schwer zu erklären :)

Und wie gesagt, es funktioniert wie ich es jetzt habe. Aber ich lassen mich gerne eines besseren belehren.

Gruß,
Olli

[suit]

Sorry, ist halt mit Worten schwer zu erklären :)

dafür is ja jetzt das bild da

Und wie gesagt, es funktioniert wie ich es jetzt habe. Aber ich lassen mich gerne eines besseren belehren.

für mich sieht das unschlüssig aus - die navigation bzw der "schatten" links/rechts einfach abgehackt - sieht komisch aus

ggf helfen dir faux columns um die seite herum und ein padding-bottom im äussersten element deines menüs um unten herum einen "abschluss" hinzubekommen

aber wenn der screenshot 1:1 so umgesetzt werden sollte, wäre das keine grosse übung mit css ;)

[Gunnar Bittersmann]

@@Bionicman:

Das ist mir durchaus bewusst. Aber das Design habe ich nicht gemacht und ich habe den Kunden auch auf genau diesen Punkt hingewiesen. Aber wenn er es so haben will, dann bitte!

[ZITAT1194]

Live long and prosper,
Gunnar