zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden scrollbalken zerstört mein layout

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.11.2005, 18:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2005
Beiträge: 42
tobydom befindet sich auf einem aufstrebenden Ast
Standard 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:
<div id="navi">
</div>
<div id="main">
</div>
Nun meine Problem:
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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.11.2005, 12:21
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard Re: scrollbalken zerstört mein layout

Zitat:
Zitat von tobydom
Wie kann ich verhindern, dass mein Layout durch den erscheinenden Scrollbalken zerstört wird?
Ich habe nicht verstanden, was du meinst. Was wird zerstört? Inwiefern stört der Scrollbalken, soll er nun da sein oder nicht?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.11.2005, 12:03
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2005
Beiträge: 42
tobydom befindet sich auf einem aufstrebenden Ast
Standard

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 13:25 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 28.11.2005, 13:38
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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%; }
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 28.11.2005, 14:07
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2005
Beiträge: 42
tobydom befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.11.2005, 14:11
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #7 (permalink)  
Alt 28.11.2005, 14:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2005
Beiträge: 42
tobydom befindet sich auf einem aufstrebenden Ast
Standard

In Opera 8.5 läufts prima.

Kannst Du evtl auch was zu meinem kleinen Navigationsproblemchen im IE sagen?
Mit Zitat antworten
  #8 (permalink)  
Alt 28.11.2005, 14:56
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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 */
  }
IE kennt min-width nicht, braucht aber m.E. eine Weitenangabe für absolut positionierte Boxen. IE interpretiert aber width sowieso als min-width (schert sich nicht um die gewünschte, sondern um die intrinsische Weite), also kommt hier noch ein width:540px; hinein, meine ich.

Wenn nun aber der Inhalt via float auf block-level steht:
Code:
    #navigation li ul li {  /* align subnavi */
    float:left;
    width:auto;
  }
dann würde jeder Listeneintrag 540px weit werden. IE braucht hier also eine bestimmte Weitenangabe oder gar keine. Da du aber nicht weißt, wie weit die Untermenüpunkte sind: lösche width:auto hier, damit nicht 100% angenommen wird.
Dazu noch ein white-space:nowrap für die Einträge mit Bindestrich.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (24.09.2006 um 21:25 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 28.11.2005, 18:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.11.2005
Beiträge: 42
tobydom befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 28.11.2005, 19:02
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von tobydom
wenn Du mir jetzt noch sagen kannst, wie ich die Buttons im IE richtig einfärbe (also das Gelb und das Blau)
Gelb? Blau?
Bitte bring die Seite unter der von dir angegebenen URL auf den neuesten Stand, damit man sehen kann, was du meinst.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
UTF-8 zerstört Layout?!? cons (X)HTML 5 04.03.2011 12:20
Layout hor. Scrollbalken geringere Auflösung/Hintergrund Mahasuka CSS 6 14.08.2009 12:13
Containerbasiertes Layout: Bei zu kleiner Auflösung Scrollbalken Ste CSS 3 16.03.2008 23:54
senkrechter scrollbalken verschiebt layout? celine@23 CSS 3 16.01.2007 16:44
mozilla zerstört layout komplett pospiech CSS 0 14.03.2004 19:29


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:10 Uhr.