|
|||
scrollbalken zerstört mein layout
Hallo
Ich habe mal wieder ein Problem, das in der Lösung des letzten begründet liegt... Also: Ich habe einen div-bereich der mit overflow:auto bei Bedarf einen Scrollbalken bekommt. Ein im code außerhalb dieses div-Bereiches, am bildschirm darüber liegender div-bereich (die Navigation) bleibt beim scrollen also unberührt. Sieht also etwa so aus: Zitat:
Durch den Scrollbalken der für den main-div erscheint, wenn der Inhalt größer als der Bilschirm wird, wird der main-div mitsamt seinen Inhalten entsprechend in der Breite kleiner. Meine Navigation aber nicht, da sie außerhalb des main-divs liegt, um zu verhindern, dass sie mitscrollt. Wie kann ich verhindern, dass mein Layout durch den erscheinenden Scrollbalken zerstört wird? (Ein immer-bleibender Scrollbalken bringt nichts, da ich die Breite meiner Navigation in % angeben muss und somit keine Scrollbalkenbreite (in px) von der div-breite (in %) abziehen kann.) in hoffnung auf eure hilfe, toby |
Sponsored Links |
|
|||
Re: scrollbalken zerstört mein layout
Zitat:
|
Sponsored Links |
|
|||
moin
ja sorry. war etwas umständlich erklärt fürchte ich. Hier kann man sich das ganze einfach mal anschaun. (FF und Opera erprobt, IE und NS funzen bis auf Navi auch): ... (Fenster kleiner machen, bis Scrollbalken erscheint) Sobald er (der Scrollbalken) da ist, verschiebt sich das Layout. Im IE funktioniert zu dem Scrollbalkenproblem auch meine Navigation noch nicht (mit JS gebaut). Vielleicht hast Du oder sonstwer ja noch ne Idee, wie ich die Navigation im IE so hinbekomme, wie sie im FF und Opera funktioniert. Ich weiß leider nicht weiter. Über Hilfe würde ich mich sehr freuen. toby Hier noch mein CSS für FF, Opera & Co (Der IE hat sein eigenes): Code:
/*colors--------------------------------------------------------------------- Hellgrau = #ECECEC Mittelgrau = #D3D2D7 Dunkelgrau = #6A6A72 Hellgelb = #FCFEF0 --END colors----------------------------------------------------------------*/ /*layout -------------------------------------------------------------------*/ div, p, h1, h2, h3, h4, ul, ol, span, a, table, td, form, img, li { margin: 0; padding:0; border:0; color: #6A6A72; font: normal 100.01% Arial, Verdana, Geneva, Helvetica, sans-serif; } h1 {font-size:1.4em; } h2 {font-size:1.2em; } h3 {font-size:1.0em; } h4 {font-size:0.8em; } h1:first-letter {font-size:120%; } p {font-size:0.8em; } a:link { font-size:0.8em; color:#6A6A72; text-decoration:none; } a:visited { font-size:0.8em; color:#6A6A72; text-decoration:none; } a:hover { font-size:0.8em; color:#000000; text-decoration:none; } a:active { font-size:0.8em; color:#000000; text-decoration:none; } a:focus { font-size:0.8em; color:#000000; text-decoration:none; } html, body { background-color:#FCFEF0; border:0px; margin: 0; padding:0; border:0; height:100%; width:100%; color: #6A6A72; overflow:hidden; } #logo { z-index:5; background: url(../images/bg_logo.jpg) 0px 0px repeat-y; margin:0px; padding:0px; border:0px; position:absolute; left:0px; top:0px; width:126px; height:100%; cursor:crosshair; } #naview { z-index:3; background-color:#D3D2D7; margin:0px; padding:0.5em 0em; border-bottom:2px solid #6A6A72; position:absolute; left:0px; top:96px; width:100%; height:1.6em; } #impressum { z-index:3; background-color:#D3D2D7; margin:0px; padding:0.4em 0em; border-top:1px solid #6A6A72; border-bottom:1px solid #6A6A72; position:absolute; left:0px; bottom:0px; width:100%; min-height:1em; text-align:center; } #main { margin:0px; padding:0px; border:0px width:100%; height:100%; overflow:auto; } #frame { z-index:0; background-color:#ECECEC; margin:0px; padding:0px; border-left:2px solid #6A6A72; border-right:2px solid #6A6A72; position:relative; left:145px; top:0px; width:80%; min-height:100% } #content { z-index:2; margin:0px; padding:14px; padding-top:134px; padding-bottom:50px; border:0; position:relative; width:95%; height:auto; } /*END layout----------------------------------------------------------------*/ /*navigation----------------------------------------------------------------*/ #naviframe { /*background for navigation*/ z-index:3; background:url(../images/bg_navi.jpg) 0px 0px repeat-x; background-color:#D3D2D7; margin:0px; padding:0px; border-bottom:2px solid #6A6A72; border-left:2px solid #6A6A72; border-right:2px solid #6A6A72; position: absolute; left:145px; top:0px; width:80%; height:98px; } #naviframe div { clear: left; } #navigation { /*main navigation*/ margin-top:14px; margin-left:10px; padding:0px; width:550px; text-align:center; } #navigation li { /*positioning navigation elements*/ padding:0px; margin: 0px 4px; color: #6A6A72 ; height:30px; width:82px; list-style:none; float:left; } #navigation li ul { /*positioning and size subnavi*/ margin:0px; padding:0px; position:absolute; top:44px; left:10px; min-width:540px; display:none; /* fade out subnavi */ } #navigation li:hover ul { display:block; /* fade in subnavi in modern browsers */ color:#6A6A72 ; } #navigation li ul li { /* align subnavi */ float:left; width:auto; } #navigation a, #navigation span { /* appearance - touched elements */ display:block; background-color:#ECECEC; border:1px solid #6A6A72; height:14px; padding:0.4em 0.6em; text-decoration:none; font:bolder 0.7em Arial,Verdana; color: #6A6A72 ; } #navigation li a:hover, #navigation li:hover a, #navigation li.over a { color: #000000; background-color:#FCFEF0; } #navigation a:hover, #navigation span, #navigation li a:hover { color:#FCFEF0; background-color:#858BB8; } /*END navigation------------------------------------------------------------*/ Geändert von tobydom (27.07.2006 um 14:25 Uhr) |
|
|||
Ah. Nun, diese Framenachbastelei scheint so ihre Tücken zu haben. Mir fällt dazu nur ein, den Scrollbalken zu verschieben, sodass er bündig mit der Navigation abschließt. Dazu müsste #main die gleichen offsets erhalten wie die Navigation:
Code:
#main { margin: 0; left: 145px; position: relative; padding: 0; height: 100%; overflow: auto; width: 80%;border-left: 2px solid rgb(106, 106, 114); border-right: 2px solid rgb(106, 106, 114);} #frame { margin: 0px; padding: 0px; z-index: 0; background-color: rgb(236, 236, 236); position: relative; top: 0px; width: 100%;min-height: 100%; } |
|
|||
hey ingo
vielen dank für die schnelle antwort. Die Idee hatte ich auch schon mal, hat mich aber nicht wirklich glücklich gemacht. Wie auch immer. Es scheint, dass das die sinnvollste (und einzige?) Lösung ist. Sollte jemand hier nochmal vorbei kommen und eine bessere Idee haben: Immer raus damit. Ich danke Dir auf jeden Fall herzlich für Deine Hilfe, die insofern schonmal sehr gut war, als dass meine Umsetzung dieser Idee vor kurzem noch an irgendwas gekränkelt hatte und Deine scheint zu funktionieren. Also: thanx und tschüss. tobi |
|
|||
Diese kränkelt auch in Opera8, aber das scheint daran zu liegen, dass du ein inkomplettes Doctype verwendest und die Browser in den Quirksmode schickst.
|
|
|||
Eventuell. Wo hast du das denn her?
Per conditional comment zeigst du dem IE ein Style sheet, dass aber styles enthält, die dem IE nicht gefallen. Code:
#navigation li ul { /*positioning and size subnavi*/ margin:0px; padding:0px; position:absolute; top:44px; left:10px; min-width:540px; display:none; /* fade out subnavi */ } Wenn nun aber der Inhalt via float auf block-level steht: Code:
#navigation li ul li { /* align subnavi */ float:left; width:auto; } Dazu noch ein white-space:nowrap für die Einträge mit Bindestrich. Geändert von IChao (24.09.2006 um 22:25 Uhr) |
|
|||
hey wahnsinn.
Du bist mein persönlicher Held.... es hat geklappt und ich hüpf aufm schreibtisch vor freude.... wenn Du mir jetzt noch sagen kannst, wie ich die Buttons im IE richtig einfärbe (also das Gelb und das Blau), dann schwöre ich hier und jetzt, dass ich solange CSS lernen werde, bis ich auch clever genug bin anderen zu helfen. Meine JS Kenntnisse tendieren leider gen Null, deshalb meine Fragen hier. Ansonsten, um auf Deine Frage zu antworten, basiert die Navi auf einem Beispiel in SelfHTML von S.Münz. gruß und nochmals tausendfachen überschwänglichen Dank, toby |
Sponsored Links |
|
|||
Zitat:
Bitte bring die Seite unter der von dir angegebenen URL auf den neuesten Stand, damit man sehen kann, was du meinst. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
UTF-8 zerstört Layout?!? | cons | (X)HTML | 5 | 04.03.2011 13:20 |
Layout hor. Scrollbalken geringere Auflösung/Hintergrund | Mahasuka | CSS | 6 | 14.08.2009 13:13 |
php bolgallery zerstört mein layout? | benzrecordings | Serveradministration und serverseitige Scripte | 3 | 12.07.2007 19:24 |
senkrechter scrollbalken verschiebt layout? | celine@23 | CSS | 3 | 16.01.2007 17:44 |
mozilla zerstört layout komplett | pospiech | CSS | 0 | 14.03.2004 20:29 |