position:fixed und width:100%

[FrankaB]

moin,

bei diesem sonnenschein vor dem rechner zu sitzen ist fast schon gesundheitsschädlich. trotzdem muss ich gerade folgendes problem lösen:

eine navigationsleiste steht mit position:fixed am oberen rand der seite.

die seite (body) hat die breite von 90%, so dass rechts ein rand entsteht.

alle divs sind nun innerhalb der seite mit 100% definiert und halten sich auch dran.

nur das div mit position:fixed geht bei der angabe von width:100% über den rechten rand hinaus und überdeckt bei firebird sogar die scrollleiste mit schwarz. bei netscape 7 ist es auch so breit.

opera bindet dieses div aber in die breite von body und html (100%) ein und stellt es so breit dar, wie die anderen divs.

gibts dafür eine erklärung, eine lösung, hab ich was vergessen?

dazu etwas code (nur die wesentlichen bestandteile):

body { width:90%; }
nav { position:fixed; width:100% } (breite funktioniert nicht)
div { position:relative; width:100% } (breite funktioniert)+

vielen dank!

FrankaB

[Jeena Paradies]

Hallo,

eine navigationsleiste steht mit position:fixed am oberen rand der seite.
die seite (body) hat die breite von 90%, so dass rechts ein rand entsteht.

Also position: fixed nimmt deine Navigation aus dem normalen Fluss heraus. Gebe doch deine Navigationsleiste auch die Breite von 90% und dann müsste es doch gehen.

Grüße
Jeena Paradies

[FrankaB]

Hallo Jeena,

danke für deine antwort.

Also position: fixed nimmt deine Navigation aus dem normalen Fluss heraus.

laut selfhtml heißt es allerdings:
fixed = absolute Positionierung, gemessen am Rand des Elternelements.

und dass elternelement ist hier body und 90% breit.

Gebe doch deine Navigationsleiste auch die Breite von 90% und dann müsste es doch gehen.

gebe ich diesen wert dem fixen div, stimmt es in opera halt nicht mehr, da der das so interpretiert, als wäre es ein relativ positioniertes element :-(

werd ich entweder einfach ignorieren müssen oder eine weiche bauen. gefällt mir beides nicht besonders. gibts vielleicht noch eine andere lösung?

FrankaB

[Jeena Paradies]

Hallo,

Hast du mal einen Link, den ich mir angucken kann?

Grüße
Jeena Paradies

[FrankaB]

Hast du mal einen Link, den ich mir angucken kann?

leider nein, ist alles noch strengstens geheim ;-) .

bin aber gerade dabei, ein workaround für den ie zu basteln nach anleitungen von
http://www.fabrice-pascal.de/artikel/posfixedie6/ und http://devnull.tagsoup.com/fixed/.
vielleicht hilf mir das dann auch bei mozilla weiter.

FrankaB

[Jeena Paradies]

Hallo,

Hast du mal einen Link, den ich mir angucken kann?
leider nein, ist alles noch strengstens geheim ;-) .

Oder wenigstens ein paar Codeschnipsel, die du doch veröffentlichen kannst, damit ich mir ein Bild machen kann?

Grüße
Jeena Paradies

[FrankaB]

Hallo,

Hast du mal einen Link, den ich mir angucken kann?
leider nein, ist alles noch strengstens geheim ;-) .
Oder wenigstens ein paar Codeschnipsel, die du doch veröffentlichen kannst, damit ich mir ein Bild machen kann?

ok Jeena, auf deine verantwortung ;-) :

<code-css>

/* --- Allgemeines --- */
@media screen { body>#nav-box { position: fixed; } }
body { background:#CC9; color:#000; font-family:Arial, Helvetica, sans-serif; margin:-1px 10% 0 0; width:90%; }

/* --- Rahmen-Div Navigation --- ALTERNATIVE FUER MOZILLA:width:87.7%; */
#nav-box { background:#9FF; width:100%; display:block; color:#F60; border:none; margin:5px; }
* #nav-box { position:fixed; z-index:10; border:dashed #666 1px; }

/* --- linke Seite Navigation --- */
#nav-links { float:left; }
* #nav-links { position:relative; padding:14px; }

/* --- rechte Seite Navigation --- */
#nav-rechts { line-height:1.4em; margin-left:22px; padding:14px; }
* #nav-rechts { position:relative; margin-left:206px; line-height:1.7em; padding:10px; }

/* --- Rahmen-Div für Inhalte ganz oben --- */
#inhalt-box1 { clear:both; width:100%; border-style:solid; border-color:#fff; border-bottom-width:1px; }
* #inhalt-box1 { position:relative; padding:145px 0 0 20px; border:none; }

/* --- Rahmen-Div für Inhalte --- */
#inhalt-box { clear:both; width:100%; border-style:solid; border-color:#fff; border-bottom-width:1px; }
* #inhalt-box { position:relative; padding:3px 0 10px 20px; border:none; border-top:dashed #fff 1px; }

/* --- Inhalte linke Seite --- */
#inhalt-links { width:180px; font-size:.8em; text-align:right; }
* #inhalt-links { position:relative; float:left; padding:20px 0; }

/* --- Inhalte rechte Seite --- */
#inhalt-rechts { width:auto; top:-3px; }
* #inhalt-rechts { position:relative; margin-left:202px; padding:20px 20px 0 0; }

</code-css>

<code-html>
<div id="nav-box">
  <div id="nav-links"></div>
  <div id="nav-rechts"></div>
</div>
<div id="inhalt-box1">
  <div id="inhalt-links"></div>
  <div id="inhalt-rechts"></div>
</div>
<div id="inhalt-box">
  <div id="inhalt-links"></div>
  <div id="inhalt-rechts"></div>
</div>
</code-html>

so siehts mehr oder weniger aus, aber noch alles unter vorbehalt.
es gibt also ein div für die navigation, das 2 weitere (links und rechts) einschließt, darunter dann inhalt, ebenfalls links und rechts und die erste inhalt-box muss weiter runter, damit sie nicht unter der navigation verschwindet.

viel spass beim lesen

FrankaB

[Ingo]

Hi,
hast Du Dir schonmal überlegt, dem DIV keine Weite zu geben?
Weil... bei 100% dürften border und margin doch Probleme bereiten.
außerdem frage ich mich, was Du mit:
body>#nav-box { position: fixed; }
...
* #nav-box { position:fixed; ...
bezwecken willst.
Freundliche Grüße
Ingo

[FrankaB]

hallo Ingo,

hast Du Dir schonmal überlegt, dem DIV keine Weite zu geben?
Weil... bei 100% dürften border und margin doch Probleme bereiten.

das hängt mal wieder vom browser ab. jetzt hab ich's so, dass ie die 100% bekommt, alle anderen nicht. bin aber noch am basteln, da ich mich  mit dem workaround für den ie beschäftige.

außerdem frage ich mich, was Du mit:
body>#nav-box { position: fixed; }
...

das ist für ie unter mac (siehe auch http://devnull.tagsoup.com/fixed/

* #nav-box { position:fixed; ...
bezwecken willst.

und das versteckt das nachfolgende vor dem nc4.x

einen schönen abend

FrankaB

[Ingo]

Hi,

außerdem frage ich mich, was Du mit:
body>#nav-box { position: fixed; }
...
das ist für ie unter mac (siehe auch http://devnull.tagsoup.com/fixed/

hi,
diese Aussage mag vielleict für den MacIE5 zutreffen, jedoch nicht für den MacIE5.2 - dieser kann jedoch mit position:fixed im allgemeinen umgehen.

* #nav-box { position:fixed; ...
bezwecken willst.
und das versteckt das nachfolgende vor dem nc4.x

das hat die vorige anweisung doch auch getan - wieso also damit noch riskieren, daß andere browser die durch den child-selekor versteckte anweisung doch noch interpretieren?
oder anders gefragt: welche browser willst du mit dieser anweisung überhaupt erreichen? weil... etwas doppelt verstecken um des versteckens willen..?

freundliche Grüße
Ingo

[FrankaB]

hi

oder anders gefragt: welche browser willst du mit dieser anweisung überhaupt erreichen? weil... etwas doppelt verstecken um des versteckens willen..?

hier nochmal der code:

#nav-box { background:#9FF; width:100%; display:block; color:#F60; border:none; margin:5px; }
* #nav-box { position:fixed; z-index:10; border:dashed #666 1px; }

bei diesem beispiel ist es nicht so deutlich (hab hier auch nur relevantes reingepackt), bei der nächsten ist es wohl eher zu sehen, dass für den nc4 z.b. ein anderer abstand von links und ein anderes padding vorgesehen ist:

#nav-rechts { line-height:1.4em; margin-left:22px; padding:14px; }
* #nav-rechts { position:relative; margin-left:206px; line-height:1.7em; padding:10px; }

also was meinst Du mit

etwas doppelt verstecken um des versteckens willen..?

?

FrankaB

[Ingo]

Hi,

also was meinst Du mit

etwas doppelt verstecken um des versteckens willen..?
?

deinen ersten code, den ich auch zitiert hatte:

body>#nav-box { position: fixed; }
* #nav-box { position:fixed; ...

die erste definition wird nur von modernen browsern (nicht dem IE) interpretiert - also _auch_ vor dem nn4 versteckt;
die zweite definition wird von weiteren browsern (auch dem IE) interpretiert - und ebenfalls vor dem nn4 versteckt.

also was soll das dann? zumal die zweite definition dem IE position:fixed; präsentiert, mit der er nichts anfangen kann.

freundliche Grüße
Ingo

[molily]

Hallo,

Also position: fixed nimmt deine Navigation aus dem normalen Fluss heraus.

laut selfhtml heißt es allerdings:
fixed = absolute Positionierung, gemessen am Rand des Elternelements.

und dass elternelement ist hier body und 90% breit.

Da wirfst du zwei Sachen durcheinander:

Der Sinn der obigen Selfhtml-Aussage ist, dass sich die Werte der Eigenschaften top, bottom, left und right auf den Rand (den padding block) des Elternelements beziehen. Am W3C-CSS-Standard gemessen ist das zunächst einmal unwahr. Wahr ist, dass sie sich gemäß CSS auf den sogenannten Viewport beziehen, das ist faktisch die Breite des Bereichs, in dem die Webseite angezeigt wird.

Was den Prozentwert von width angeht: Der bezieht sich ebenfalls auf den Viewport. Width:100% heißt gemäß CSS also, dass die width-Breite des Elements der des Viewports entspricht. Damit nimmt das Element auf jeden Fall die komplette Fensterbreite ein. Die Gesamtbreite errechnet sich aus der width-Breite plus padding-left/padding-right, border-left-width/border-right-width und margin-left/margin-right. So kommt es, dass das Element inklusive Rahmen (links und rechts 1px) und Abstände (links und rechts je 5px) größer als der Viewport ist und dementsprechend unschön aus dem Fenster herausragt. Soweit zur Theorie - in der Praxis halten sich nur Mozilla und Opera 6 an den Standard, daher die scheinbar seltsame Darstellung. MSIE (6) bekommt das position:fixed nicht zu Gesicht und handelt nach den Regeln für position:static: width orientiert sich an der padding-Box des Elternelements. Opera 7 setzt das position:fixed zwar um, geht aber genauso vor wie bei position:static: width orientiert sich an der padding-Box des Elternelements.
Soviel zu den Hintergründen der verschiedenen Darstellungen. Wie es aussieht, ist es, zumindest was Mozilla und Opera 6 angeht, nicht möglich, sich in der Breite eines position:fixed-Bereiches auf die Breite von body zu beziehen.

Hinzu kommt, dass Opera den Randabstand von body über padding, nicht über margin realisiert. Dadurch kommt die zusätzliche Einrückung, welche sich durch padding:0 für body verhindern lässt. Somit ließe sich zumindest zwischen MSIE 6 und Opera 7 (und wahrscheinlich MSIE 5.x/Win) eine Gemeinsamkeit finden, vorausgesetzt, es ist derselbe Rendermodus im Spiel.

Wirklich weiterhelfen kann ich dir leider nicht, mir fällt auch kein eleganter und flexibler Workaround ein.

Mathias

[FrankaB]

moin Mathias,

vielen dank für die ausführliche erklärung.

leider fehlt dann die auflösung ;-)

ich hab mich daran gemacht, das ganze auch für den ie umzusetzen, vielleicht löst sich dann das problem von allein (vorher kommen bestimmt noch mehrere auf mich zu).

einen schönen sonnigen tag noch

FrankaB