kostenloser Webspace werbefrei: lima-city


In CSS eine Sidebar einstellen, die den Inhalt verschiebt

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mpsftp

    mpsftp hat kostenlosen Webspace.

    Hallo zusammen,

    ja ich weiß, es klingt ziemlich kompliziert was ich suche, aber das ist es eigentlich gar nicht. Ich habe zwei Divs auf meiner Webseite. Div 1 ist ein Button und div 2 soll eine Sidebar werden. Wenn ich den Button drücke, dann soll Div 1 verschwinden und Div 2 auftauchen. Das klappt auch alles via JS wunderbar und ohne Probleme.

    Nun würde ich jedoch gerne, dass der Content meiner Webseite (neben der Sidebar) nun zentriert wird (ist bereits der Fall), jedoch auch zentriert wird wenn die Sidebar eingeblendet wird. Also als ob man das Browser-Fenster verkleinert und dann die Sidebar anzeigt.

    Ich hoffe ihr habt verstanden was ich will und könnt mir eventuell helfen.

    Danke sehr!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. j*********r

    Vermutlich benutzt du in deinem JavaScript die Eigenschaft "display" und setzt diese auf "none", um das Element auszublenden. Dadurch wird die Seite formatiert, als wäre das Element garnicht auf der Seite vorhanden.

    Vielleicht ist für dich die Eigenschaft "visibility" allerdings nützlicher. Diese steuert auch, ob ein Element angezeigt wird, jedoch wird der Platz, den ein Element benötigt, auch dann freigehalten, wenn das Element ausgeblendet ist.
    Um ein Element auszublenden, setzt du "visibility" auf "hidden", ansonsten auf "visible".

    mfg
    Jonas
  4. @Jonas, so wäre der Platz der Sidebar aber permanent belegt, der Sinn diese Sidebar dann nicht mehr anzuzeigen wäre also völlig verschwunden.
  5. j*********r

    techfree schrieb:
    @Jonas, so wäre der Platz der Sidebar aber permanent belegt, der Sinn diese Sidebar dann nicht mehr anzuzeigen wäre also völlig verschwunden.


    Das kommt darauf, was er denn eigentlich mit diesem Design erzielen möchte. Wenn es nur darum geht, die Sidebar auszublenden, weil man dann bspw. ein Hintergrundbild besser sieht etc. spricht nichts gegen diese erste, einfache Lösung. Bessere Hilfe kann man halt nur geben, wenn man mehr und konkretere Informationen erhält.

    mfg
    Jonas
  6. Autor dieses Themas

    mpsftp

    mpsftp hat kostenlosen Webspace.

    Ich habe hier nochmal ein kleines Beispiel-Bild:

    epboard.lima-city.de/korrektes_div.jpg

    Da stimme ich @techfree zu.
  7. j*********r

    Danke für die genauere Beschreibung. Jetzt kann man dir auch besser helfen ;)

    Ich würde dir empfehlen, deine HTML-Struktur so anzupassen, dass du einen Container für die Seite an sich hast, der auf gleicher Ebene wie die Sidebar ist. Dem Inhalt gibst du standardmäßig 100% und der Sidebar 0px an width. Dann musst du mittels JavaScript die Breite des Inhalts-Containers einfach dann verringern, wenn die Sidebar eingeblendet wird:
    document.getElementById("main").style.width = "calc(100% - 300px)";
    // Für eine 300px breite Sidebar

    Die Sidebar kannst du dann mit
    position: fixed;
    right: 0px;
    top: 0px;
    width: 300px; /*Für die Breite 300px... */
    height: 100%;

    formatieren. Somit sollte dein Design in den groben Zügen klappen. Evtl. wäre es noch interessant die Scrollbar des Browsers in deinem Haupt-Container und nicht ganz rechts neben der Sidebar anzeigen zu lassen. Dazu müsstest du dem Container die Eigenschaft
    overflow-y: scroll;
    und dem Body die Eigenschaft
    overflow-y: hidden;
    geben. Schreib einfach, wenn etwas noch nicht funktioniert!

    mfg
    Jonas

    Beitrag zuletzt geändert: 2.10.2015 22:26:20 von jonas-bayer
  8. Autor dieses Themas

    mpsftp

    mpsftp hat kostenlosen Webspace.

    Ja klasse! Du hast mir sehr geholfen. Vielen Dank!
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!