Wie in CSS eine Sidebar erstellen, die den Content meiner Webseite verschiebt?

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!

1 Antwort

maximilianus7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

01.10.2015, 21:06

da du js im griff hast:

das was du via "neuem" css den divs mitteilen könntest, kannst du auch mit js machen, z.b: getElementById('divid').style.width="600px" etc.

moinpstudios

Beitragsersteller

01.10.2015, 21:17

Das Problem ist nur, dass ich in JS gar nicht fit bin (war ein Script aus dem Netz) und außerdem ist die Breite des Browser-Fensters ja immer unterschiedlich, weshalb ich nicht mit festen Pixel-Werten rechnen darf/sollte.

maximilianus7

01.10.2015, 21:25

@moinpstudios

dann nützen dir hinweise auch nix. poste doch mal den html code, aber nicht hier, sondern z.b. auf patie.org

vielleicht hat ein kollege lust, dir das einzubauen.

Ähnliche Beiträge

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zum Beitrag

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zum Beitrag

Wie kann ich einen Button vertikal zentrieren?

Ich habe auf meiner Webseite einen Button, der ganz allein auf der Startseite stehen soll. Er ist schon horizontal zentriert mit diesem Code:

"div align= center"

Wie kann ich den Button nun noch vertikal zentrieren?

DANKE!

...zum Beitrag

Sidebar alternative für mobile?

Hey, ich betreibe eine Wordpress-Webseite und zwischen 50-60% meiner Nutzer sind mobile unterwegs. Ich finde das Theme was ich benutze (baskerville) macht seinen Job schon ganz gut im responsive sein, aber die Sidebar ist halt einfach komplett weg und da sind zum Teil sachen wie "Beiträge nach Kategorie", und ein Text für erstbesucher drin.

Ich könnte die Sidebar vielleicht mit ein bisschen rumfrickeln unter dem content platzieren, aber ob das so die perfekte Lösung ist... Was macht man denn im Normalfall? Ich kann ja nicht die einzige Person mit dem Problem sein, aber google sagt mir genau das.

...zum Beitrag

HTML / CSS: Mein div wird oben abgeschnitten?

https://jsfiddle.net/qkw45jne/1/

Wenn der Bildschirm zu klein wird (in der Höhe), wird das rote div oben teilweise abgeschnitten. Scrollbars kommen aber trotzdem, da die teile drunter vollständig zu sehen bleiben.

Was muss ich ändern, dass auch das rote div immer vollständig da bleibt?

In dem jsfiddle könnt ihr das recht einfach nachstellen, indem ihr die mittlere grenze hoch schiebt. Dann wird irgendwann auch der text im roten div sichtbar:

...zum Beitrag

Div Button über andere Div Container legen?

Ich habe eine Webseite erstellt, welche mehrere Div-Container beinhaltet. Nun habe ich einen Button mittels Div erstellt. Jedoch ist der Button nicht sichtbar wenn ich andere Div-Container "aktiviert" habe. Mir ist bewusst das sich dies mit dem z-index regeln lässt, jedoch bei allen Div-Containern, außer bei dem mit dem Button.

Ohne andere Div-Objekte funktioniert er problemlos.

Danke im Vorraus!:)

...zum Beitrag

Div ohne Position im Vordergrund?

Hallo. Ich versuche gerade auf einer Webseite ein div in den Vordergrund zu verschieben. Das Problem bei der ganzen Sache ist:

Es hat keine Position. Über den normalen weg des z-index ist also erstmal nichts zu machen.
Es liegt etwa folgende Struktur vor:
Soll oben Liegen Ist eine Js Animation welche über allem liegt aber von manchen Objekten überlappt werden soll

Gibt es dafür eine schon bestehende Lösung?

Danke!

...zum Beitrag

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zum Beitrag

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zum Beitrag

Button im Div responsiv machen?

https://jsfiddle.net/z7ew09ru/

Hallo,

hat jemand eine Idee, wie ich den "JETZT BESTELLEN" Button responsiv mache (von den Drei Divs ganz abgesehen)?

Die Handy Version ist zwar noch nicht fertig und die Seite ist noch ein ganzer Müll, aber jetzt schießt der grüne Bestellbutton schon über sein Div hinaus und ich habe wirklich keine Ahnung, was geändert werden muss.

Vielen Dank

Stefan

...zum Beitrag

Javascript geht nicht in einem von XMLHttpRequest geladenen Div?

Hallo ich versuche gerade mit XMLHttpRequest einen Div auf meiner Webseite zu aktuallisieren soweit geht das auch nur wenn ich versuche in der datei die geladen werden soll etwas mit Javascript auszuführen wird dies nicht getan. Ich habe aber überprüft das die datei geladen wird. Das was ich in JS geschrieben habe wird auch in den Div geladen nur nicht ausgeführt..
Hier meine Datei die den Div läd:

  <script language="javascript" type="text/javascript">
    function getData() {
      var xhr = new XMLHttpRequest();                 // Create XMLHttpRequest object
    
      xhr.onload = function() {                       // When response has loaded
        // The following conditional check will not work locally - only on a server
        if(xhr.status === 200) {                       // If server status was ok
          document.getElementById('load').innerHTML = xhr.responseText; // Update
        }
      };
      
      xhr.open('GET', 'sql/load.php', true);        // Prepare the request
      xhr.send();                                 // Send the request
    }
    
    setInterval(getData, 1000);
</script>

<div id='load'></div>

Hier meine Load.php

<?php
session_start();
require_once "config.php";
require_once "link_user.php";
        //Check new messages
        $test = "false";
        $sql = "SELECT * FROM msg WHERE touser='$user_name' AND readmsg='$test' LIMIT 1";
        $query = mysqli_query($db_link, $sql) or die (mysqli_error());
        $num = mysqli_num_rows($query);
        while ($row = mysqli_fetch_array($query)) {
            $chat_id = $row["chat_id"];

        }
        if($num == 1){
            
echo "<script>
var notification = new Notification('Notification title', {
    icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    body: 'Hey there! You\'ve been notified!',
   });</script>
";
        }
?>

...zum Beitrag

HTML FLEX: Wie bekomme ich ein Label in einem Radiobutton zentriert?

https://jsfiddle.net/dtqjp3zr/

Die Labels sind Teil der Divs und haben 50% Breite. Für das Div klappt das auch, nur der Label-Text selbst will einfach nicht in die Mitte.
Wo ist da mein Denkfehler?

...zum Beitrag

CSS transition mit JavaScript onclick ausfuehren?

Ich wuerde gerne in einer NavBar (oben fixiert), links einen Button erstellen, der mit onclick eine CSS ausfuehrt, die eine SideBar (von links) drauflegt.

Also, sobald links oben das Onclick geklickt wird -> Sidebar wird von links aus reingeschoben, indem eine CSS ausgefuehrt wird.

Das einzige was Ich nicht wuesste ist wie Ich das JS onclick dazu bringe, entweder eine CSS auszufuehren, oder gar zu erstellen/auszuwechseln (zu replacen). Bzw. alternativ, was mir noch in den Sinn kaeme, koennte das CSS in default ja in einem Kommentar stehen, und bei Ausfuehrung wird zwischen zwei CSS gewechselt (das eine wird in Kommentar gesetzt (default) und das andere, was normal in Kommentar steht, steht nun ohne Kommentar, und bei wegklicken wird das wieder zurueckgesetzt) - aber wie wuerde das gehen, Ich habe naemlich keinerlei Idee dazu..

...zum Beitrag

Mehrere Divs nebeneinander ohne Überlappen (HTML)

Hallo Zusammen

Ich würde gerne in meiner Webseite ein Div mit einem Inhalt links der Seite, sowie der Hauptinhalt in einem anderen Div rechts der Seite anzeigen lassen.

Das habe ich soweit auch hingekriegt. Jetzt kommt das Problem:

Bei Verkleinerung des Browserfensters überlappen sich die einzelnen Divs und ich möchte fragen wie man diese dazu zwingt sich nebeneinander einzureihen...

Freue mich auf Ratschläge,

Liebe Grüsse

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen