In CSS eine Sidebar einstellen, die den Inhalt verschiebt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auftauchen
button
code
container
dank
design
eigenschaft
element
erzielen
genauere beschreibung
haupt
hintergrundbild
inhalt
kleines beispiel
platz
position
sinn
url
verschwinden
webseite
-
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! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
@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.
-
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
-
Ich habe hier nochmal ein kleines Beispiel-Bild:
epboard.lima-city.de/korrektes_div.jpg
Da stimme ich @techfree zu. -
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 Eigenschaftoverflow-y: scroll;
und dem Body die Eigenschaftoverflow-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 -
Ja klasse! Du hast mir sehr geholfen. Vielen Dank!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
