Design "springt"

    Ich bin am Verzweifeln!

    Bin gerad dabei meine etwas eingestaubten HTML und CSS Kenntnisse aufzufrischen. Ich vermute ja, dass mein "Problem" was mit dem floatenden Menü zu tun hat, aber ich komm beim besten Willen nicht drauf was das sein könnte.

    Problem: Alles klappt ohne Probleme bis der Inhalt eine gewisse Länge überschreitet, dann springt das Design. Dem normalen User würds vielleicht nicht auffallen, aber mich regt's jetzt schon seit ein paar Stunden auf:

    Guckt ihr hier http://idadi.id.ohost.de/index.php

    Wenn ich jetzt auf Item 1 und dann auf 3 klicke - alles gut!

    Geh ich jetzt aber auf 2 (Unterschied nur durch Textlänge) springt alles nach links :twisted:

    Please, forum-hilfe, pimp my page :cry:

    oh, klingt logisch - da hätte ich ja evtl selber drauf kommen können :roll:

    Gibt es eine Möglichkeit, das ganze zu fixieren? Also sobald der Scrollbalken erscheint, ist es dann halt nicht mehr genau mittig, aber es springt auch nicht - das wär mit fast lieber...

    Danke

    hm da gäbe es bestimmt eine möglichkeit über margin das problem ist die browserbalken sind verschieden dick je nach browser

    Zitat von Macrosdesign

    hm da gäbe es bestimmt eine möglichkeit über margin das problem ist die browserbalken sind verschieden dick je nach browser


    sry macros aber des is humbug..
    die breite des scrollbalken is eigentlich vollkommen egal, da es um die höhe des body geht!

    mach mal das hier in dein stylesheet:

    HTML
    *{
magin:0;
padding:0;
}
body{
height:103%;
}

    bei dem ding mit der height musste mal etwas herumexperimentieren.. (auch bei anderen auflösungen) ergebnis ist, dass du deine page immer ein mini-stückchen scrollen könntest, ziel ist es das so gering zu halten wie möglich. du hast drei möglichkeiten:
    1) du hast immer nen scrollbalken und die page springt nich
    2) du hast mal nen balken und mal nich, inhalt springt hässlich hin und her (momentaner zustand)
    3) du machst deinen body so, dass kein scrollbalken ensteht, gibst aber den text in der contenbox in einen eigenen container, der ne feste höhe bekommt und nen overflow: auto; so bleibt der inhalt scrollbar, aber der eigentliche scrollbalken an der seite entfällt

    Noch was Kleines:

    Dein #navi a ist ja ein Block Element (display: block) und das hat eine Breite von 160 px.. Das is aber zu breit hab ich gesehen. Wenn also ein längerer Link dort erscheint, dann überschneidet der sich mit dem Inhalt.

    Schraub das width: 160px; auf ca. width: 125px;

    ;)

    Zitat von synaptic

    mach mal das hier in dein stylesheet:

    HTML
    *{
magin:0;
padding:0;
}
body{
height:103%;
}

    hab das jetzt mal probiert und mich lagsam auf 150% vorgearbeitet, aber es tut sich nix :mad: Gibt es noch eine andere Möglichkeit einen Scrollbalken permanent zu erzwingen?

    Danke

    @firefox: display:block bedeutet nicht, dass ein Inline-Element plötzlich ein Block-Element wird ;)

    Questionmark: Ich kann nicht sehen, dass du Synaptics Vorschlag umgesetzt hast. Da steht bei body immer noch height: 100%;

    Gruß,
    jojo


    Einmal editiert, zuletzt von jojo87 (2. Dezember 2008 um 02:13)

    Zitat von jojo87

    @firefox: display:block bedeutet nicht, dass ein Inline-Element plötzlich ein Block-Element wird ;)

    Zitat von css4you


    block
    Das Element wird als Block-Element dargestellt.

    Zitat von jojo87


    Questionmark: Ich kann nicht sehen, dass du Synaptics Vorschlag umgesetzt hast. Da steht bei body immer noch height: 100%;

    Er muss es ja nicht hochgeladen haben um es zu testen.

    Gruß
    Lukas

    Maybe this world is another planet's hell

    es liegt doch am scrollbalken synaptic ??? wie kommste nu auf die height???

    es verschiebt sich doch n stück nach links weil der scrollbalken bei großem inhalt auftaucht .-..

    Zitat von Macrosdesign

    es liegt doch am scrollbalken synaptic ??? wie kommste nu auf die height???

    Wenn der Inhalt so hoch ist, dass der Scrollbalken immer da ist, dann kann es nicht springen, weil es dann keine Seite gibt, wo er nicht da ist.

    Zitat von Macrosdesign


    es verschiebt sich doch n stück nach links weil der scrollbalken bei großem inhalt auftaucht .-..

    Oder es verschiebt sich ein Stück nach rechts, wenn der Scrollbalken bei kleinen Inhalten verschwindet ;)

    Gruß
    Lukas

    Maybe this world is another planet's hell

    Zitat von wernerdeluxe

    Er muss es ja nicht hochgeladen haben um es zu testen.

    Gruß
    Lukas

    So war es - XAMPP sei dank ;) Hab es jetzt aber extra nochmal hochgeladen mit 120%. Tut sich aber auch nix bei mit mim FF.

    Die Logik dahinter versteh ich schon, aber es funktionier bei mir halt irgendwie nicht :(

    naja, so schlimm ist wohl Definitionssache. Also ich bin natürlich froh, dass bem Besuchen meiner Site der Browser nicht abstürzt, das wär schlimm.

    Es stört nur etwas mein ästhetisches Empfinden - kurzum ich hätts halt gern perfekt oder zumindest so gut wie machbar. Brauchst dir jetzt aber nicht nächtelang den Kopf darüber zu zerbrechen sofern dir spontan nichts einfällt :D

    Hatte das gleiche Problem:

    Mögliche Lösung:

    scrollbars=yes


    Dann wird die Scrollbar immer angezeigt, auch wenn man nicht scrollen kann.

    Kein Gespringe, aber prüfe die Lösung in ein paar Browser hatte damals dann Probleme mit dem Firefox.

    mfg

    erledigt, ändert aber auch nichts.

    Das Thema ist jetzt für mich aber auch durch, hab ja einen Weg gefunden wie es klappt, auch wenn es vielleicht nicht ganz lege artis ist :D

    Auch wenn das Thema bereits erledigt ist, krame ich es doch nochmla aus:
    Mir ist jetzt im Zusammenhang mit einem ähnlichen Problem folgende Lösung eingefallen:
    FF bietet keinen Scrollbalken an, solange der Inhalt auf die Seite geht und man eben auch nicht scrollen braucht.
    Also könnte man den Balken künstlich erzeugen.

    Damit hat es bei mir geklappt:

    Gib html als height 100% und dem body einen Wert darpber, z.B. 101%.
    Dann passt body nicht in html und der Scrollbalken wird generiert.
    Der Ansatz von synaptic war insofern schon richtig, nur fehlte der Bezug zu 100% height von html.