Sidebar rechts mit Hover

Zitat von ritchi3000

Wenn ich die Sidebar normal links habe und den CSS Code mit Hover zum ein-und ausblenden benutze funktioniert es einwandfrei.

Wenn ich dann die Sidebar auf rechts umschalte bleibt sie aber links.

Erst wenn ich in dem Code die Zeile mit Position lösche ist die Sidebar rechts und man kann sie auch mit der Maus ein- und ausblenden aber dann bleibt rechts eine graue Spalte und die Webseite ist schmaler

habt Ihr eine Idee wie nach dem ausblenden mit der Maus die Webseiten wieder normal breit werden und die graue Spalte verschwindet.

Die Sidebar rechts finde ich praktischer als links und das mit der Maus zum ein-und ausblenden ist auch praktisch

Das ist kein Wunder. Die Eigenschaft position hat den Wert fixed. Das heißt, dass das entsprechende Element (hier die Sidebar-Box) „festgenagelt“, sprich fixiert, wird, nämlich auf einen Punkt von 110px von oben und -5px von unten. Von links und rechts ist nicht die Rede. Du kannst position weiterhin auf fixed lassen, füge aber die Eigenschaft right hinzu, z. B.: right: 20px; Da sollte dann die Sidebar 20px vom rechten Rand sein.

Übrigens fehlt bei dir der Buchstabe p von position.

Schließlich: Setze bitte zukünftig Code in eine Code-Box (Symbol </> in der Editorsymbolleiste, sonst verliert man die Übersicht, wenn der Code mitten im Fließtext steht.

Also bei mir klappt es, wenn ich right auf 0px setze. Allerdings bleibt mir die Sidebar mit deinem Code leer, außer das Auswahlfeld oben. Aber du kannst deine Sidebar einfacher nach rechts verschieben. Klicke oben auf den kleinen Pfeil neben dem Auswahlfeld, du hast da wahscheinlich Leszeichen ausgewählt. Ein Fenster klappt auf und unten in diesem Fenster steht dann Sidebar nach rechts verschieben. Einfach drauf klicken und deine Sidebar ist am rechten Fensterrand. Auf die gleiche Weise kannst du die Sidebar wieder an den linken Rand verschieben, da steht dann nur Sidebar nach links verschieben.

Mit dem obigen Code bleibt die Sidebar hier auch leer.

Damit ist alles ok hier:

#menu_bookmarksSidebar {
     display:-moz-box !important;
     }

.sidebar-placesTreechildren::-moz-tree-separator {
     margin: 0px 500px !important;
     }

#sidebar-box {
    -moz-appearance: none !important; 
    display: -moz-box !important;    
    position: fixed !important;
    right: 0px !important;
    top: 140px;
    bottom: -35px;
    width: 0px !important;
    overflow-x: hidden !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

#sidebar-box:hover {

   width: 230px !important; 
   opacity: 1 !important;
   transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
   }

#sidebar-header {
   width: 100%;
   border: 0 !important;
   }

#sidebar {
   background: lightgrey;
   display: -moz-box !important;
   width: 100% !important;
   height: 95%;
   }

Die Werte dann noch anpassen.

Ufff,ich habe versucht den Code zusammenzubasteln,aber iwie funzt der nicht richtig.

Kann mir jemand bitte den ganzen Code quoten ?

Also für Sidebar links mit Hoovereffekt.

Danke !!!

Teste bitte:

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xul"),

url("chrome://browser/content/browser.xul") {

#menu_bookmarksSidebar {
     display: -moz-box !important;
     }

#bookmarks-view-children {
    margin-top: -120px !important;
    margin-left: -15px !important;
    }

sidebarheader {
    display: none !important;
    }

#sidebar-search-container {
    display: none !important;
    }

.sidebar-placesTreechildren::-moz-tree-separator {
    margin: 0px 500px !important;
    }

label[persist="value"][flex="1"][crop="end"][control="sidebar"][value="Lesezeichen"] {
    display: none !important;
    }

#sidebar-box {
    display: -moz-box !important;
    position: fixed!important;
    top: 116px;
    bottom: -35px;
    width: 0px !important;
    overflow-x: hidden !important;
    -moz-appearance: none !important;
    border: 1px solid transparent !important;
    border-left: 0 !important;
    opacity: 0 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

#sidebar-box:hover {
    width: 230px !important; 
    opacity: 1 !important;
    transition: width .2s ease-out .2s, opacity .2s ease-out .2s !important;
    }

#sidebar-splitter {
    display: none !important;
    }

#sidebar-header {
    width:100%;
    border: 0 !important;
    }

#sidebar {
    display: -moz-box !important;
    width: 100% !important;
    height: 95%;
    }
}

Ja, funzt ! Danke!

Verrätst Du mir noch,wie ich die Menüpunkte "Lesezeichen-Menü" & "Weitere Lesezeichen" wegbekomme und die Hintergrundfarbe ändern kann ?

In der Sidebar kann man die nicht entfernen, zumindest ist mir keine Möglichkeit bekannt.

Und die Hintergrundfarbe bzw. Ordnerfarbe ändern ?

Habe ausserdem noch das Problem,das ich in der Sidebar nicht mit dem Mausrad scrollen kann,oder ist das normal ?

Für die "weiteren Lesezeichen" gibt es eine Möglichkeit sie "unsichtbar" zu machen:

.sidebar-placesTree treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
list-style-image: none !important;}

.sidebar-placesTree treechildren::-moz-tree-cell-text(container, queryFolder_unfiled_____) {
color: transparent !important; 
font-size: 0 !important; }

Zitat von Sambatiger

nicht mit dem Mausrad scrollen kann,oder ist das normal ?

Funktioniert hier einwandfrei.

Zitat von grisu2099

gibt es eine Möglichkeit sie "unsichtbar" zu machen:

Ja, aber der Platz wird dann nicht freigegeben, d.h., es bleibt eine leeres Feld leider übrig

..und das Icon...

Teste für die Hintergrundfarbe der Sidebar:

/* Sidebar Hintergrundfarbe */

    #sidebar{
    background: #e4bca0 !important;
    opacity: 1 !important;
        }

Die Farbe nach Bedarf anpassen.

Zitat von Boersenfeger

..und das Icon...

Dann hast du was falsch gemacht...

Hier ist kein Icon mehr, nur noch das leere Feld, das sich in der Tat leider nicht wegrationalisieren läßt .