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

3 Antworten

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.

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.

0
@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.

0

Irgendwie widersprechen sich die Details deiner Frage und der Fragetitel, oder irre ich mich?

Ich habe mal ein Bild als Antwort geschickt. Leider ist das etwas klein geworden, aber nochmal zur Verdeutlichung mit Beispiel-Breiten:

Internetbrowserfenster ist 1000px breit; der Content meiner Webseite immer 600px. Wenn die Sidebar nicht angezeigt wird (oberstes Bild), dann habe ich links und rechts vom Content je 200px übrig (leer wegen der Zentrierung).

Bild 2 zeigt die aktuelle Situation (Wenn eine Sidebar mit 200px breite eingeblendet wird, dann sind immernoch links 200px übrig und rechts 0px (sichtbar) übrig, weil sich die Sidebar über den Content legt.

Wie kriege ich das jedoch jetzt wie auf Bild 3 hin, dass dann links und rechts vom Content 100px übrig bleiben und rechts zusätzlich noch, unabhängig vom Content, die Sidebar mit 200px angezeigt wird. Also der Content beim Anzeigen der Sidebar zentriert wird.

0
@moinpstudios

Magst du das Bild nochmal auf imgur oder ähnlichem in hoher Auflösung (lesbar, gutefrage ist da immer etwas schwierig) hochladen?

0

JS overlay schließen?

ich habe eine Problem mit meiner schließungs-funktion.


$('#overlay-contact').on('click', function(ev) {
    console.log(ev.target)
    if (ev.Target = $('#overlay-wrapper-contact')) {
        $("#overlay-contact").removeClass('show-overlay');
    }
});

die Class 'show-overlay' wird durch einen Button hinzugefügt

$('#toggle-btn-contact').on('click', function(){
    var elem = $('#overlay-contact');
    elem.addClass("show-overlay");
});

<div id="overlay-contact" class="overlay">
  <div id="overlay-wrapper-contact" class="overlay-wrapper">
    <div class="o_contact-form">    
      <form action="index_submit" accept-charset="utf-8">
        <textarea placeholder="Name:" name="Name"></textarea>
        <textarea placeholder="E-Mail:" name="E-mail"></textarea>
        <textarea placeholder="Anliegen:"></textarea>
      </form>
    </div>  
  </div>
</div>
#overlay-contact.overlay
display: none
position: fixed
height: 100vh
width: 100vw
background: $bg-color
z-index: 999

.overlay-wrapper
display: flex
margin: auto
background: red
padding: 25px

#overlay-contact.show-overlay
display: flex

.overlay-wrapper
animation: slide-down 0.5s ease

das Problem ist das wenn ich außerhalb clicke geht das overlay weg (wie es ja soll), aber wenn ich innerhalb clicke geht es auch weg :/

hier noch als CodePen für (hoffentlich) bessere Übersicht

https://codepen.io/Ezio__/pen/JNevya

hoffe einer kann helfen :)

...zur Frage

Button - Photoslider (HTML, JS)?

Erkennt jmd. von euch den Fehler? Und warum funktioniert der "Next" Button nicht? Also er wird gar nicht als Button erkannt...

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
 <script >
	var i = 0;
	var cImages = [
    '1.jpg',
    '2.jpg',
    '3.jpg',
    '4.jpg'
];
 
function mySlide(param) {
   if (param === 'next') 
{
	i++;
    if (i === cImages.length) {
            i = cImages.length - 1; }
    } else {
		i--;
		if (i < 0) { i = 0; }
	}
		 
		   document.getElementById('slide').src = cImages[i];
		   
}
</script>
  </head>
 
  <body>
 
	
	<img   	id="slide" src="1.jpg"   style="width:40% </img>
	<img	id="slide" src="2.jpg"   style="width:40% </img> 
	<img	id="slide" src="3.jpg"   style="width:40% </img>
	<img	id="slide" src="4.jpg"   style="width:40% </img>

<button  type="button" onclick="mySlide('next')">Next</button>

<button  type="button" onclick="mySlide('prev');">Previous</button>
	
</body>
</html>

...zur Frage

Dropdown Menu Buttons nebeneinander?

Ich habe für meine Website ein Dropdown Menu gemacht,dass aus einem Button besteht,der,wenn man draufklickt eine neue Liste unterhalb des Buttons öffnet,die Links enthält.Um eine Navigtionsleiste zu erstellen,die übersichtlich ist,will ich mehrere Buttons nebeneinander positionieren.Das hat soweit auch geklappt und das erste Menü öffnet sich perfekt,wenn ich aber den anderen Button anklicke,öffnet sich nur das Menü des ersten Buttons.

Hier der Code,bestehend aus html,css und JavaScript (die entsprechende Stellen) :

HTML

<div class="dropdown">    <button onclick="myFunction()" class="dropbtn">Charaktere</button>    <div id="myDropdown" class="dropdown-content">      <a href="#">1</a>      <a href="#">2</a>      <a href="#">3</a>  </div> </div> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Charaktere</button> <div id="myDropdown" class="dropdown-content">  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> </div>   </div>

CSS

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

JavaScript

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

/* Dropdown Content */ .dropdown-content {    display: none;    position: absolute;    background-color: #f1f1f1;    min-width: 160px;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);    z-index: 1; }

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

...zur Frage

Was möchtest Du wissen?