Wieso kann man nach rechts scrollen, obwohl ich es unterbinde?

Ich bin am responsiven Design einer Webseite dran, und habe overflow-x: hidden; . da stehen. Trotzdem kann man am Handy nach rechts scrollen? Wieso? Auch die anderen Sachen von overflow: gehen nicht. Kann wer helfen? .-.

3 Antworten

MooKuh

06.08.2017, 22:09

Dann kann es sein, dass ein Element zu breit (bzw. Breiter als 100%) ist, sodass man nach rechts scrollen kann.

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, programmieren, CSS

06.08.2017, 22:13

Es kommt auch auf die Breite an. Wenn die Breite größer als der Bildschirm ist, erscheinen Scrollbalken. Overflow: hidden bedeutet in dem Fall, dass du nur bis zur vollen Breite scrollen kannst, aber nicht weiter.

Zum besseren Verständnis habe ich dir hier ein Beispiel erstellt:

https://jsfiddle.net/1aam4x6m/1/

Dort siehst du, dass trotz overflow-x: hidden Scrollbalken erscheinen, weil die Breite mehr als 100% beträgt. So ähnlich könnte es auch bei dir sein, doch ohne Code können wir leider nur raten.

MonkeyKing

06.08.2017, 22:06

Ohne den Code kann man das nicht so beantworten. Grundsätzlich ist overflow-x:hidden ja schon richtig, aber es kommt darauf an wo genau die Direktive angewendet wird.

Woher ich das weiß:Berufserfahrung – 20 Jahre Berufserfahrung

Ähnliche Fragen

HTML/CSS/JS Scrollen verhindern?

Hi Leute,

Ich habe eine Website bei der das Scrollen komplett (sowohl manuell als auch per JS) verhindert werden soll. Mir ist klar das folgende Möglichkeit geht:

overflow: hidden;

Das Problem ist, dass man dann immer noch mit dem Mausrad scrollen kann (siehe hier: http://hoohaadesign.co.uk/#/intro1)

Lässt sich das auch irgendwie verhindern?

Danke im voraus, Marvin

...zur Frage

HTML Seitliches scrollen verbieten?

Hallo, ich möchte gerne bei meiner Website das seitliche scrollen verhindern. Mein Inhalt befindet sich in der mitte. In css habe ich nun overflow-x: hidden. Nun kann man nicht mehr per Scrollbar nach rechts scrollen. Wenn ich jetzt aber auf das Scrollrad klicke (mittlere Maustaste) und meine Maus nach links bewege, scrolle ich trotzdem nach rechts. Genau so auf dem Ipad. Ich kann einfach per touch nach recht scrollen. Nun möchte ich das verhindern. Kann mir jemand helfen?

...zur Frage

HTML/CSS Button erstellen, der unten rechts fixiert ist?

Ich brauch einen Cookies-Hinweis, der soll als Button unten rechts angezeigt werden, ohne, dass sich dieser beim scrollen mitbewegt. Hab schon gegooglet, bin wohl zu dumm, würd mich über einen responsiven Code freuen (<button>)

...zur Frage

Overflow von unten nach oben Scrollen?

Ist dies möglich?

...zur Frage

HTML Img responsive overflow?

Hallo Liebe Community,

ich habe eine kurze Frage. Ich habe in meinem

HTML Code ein img eingefügt und es mittig zentriert und die breite auf 100% gesetzt. Zudem ist dieses Bild 100vh hoch. Sobald ich die Seite kleiner mache vergrößert sich das Bild, da die 100vh ja gefüllt werden müssen. Soweit so gut. Nun wenn ich auf Safari oder Chrome auf das responsive tool gehe, öffne ich zb die Ansicht eines iPhones und kann immer bei dem img ein Stückchen nach rechts scrollen. Scroll ich aber 100vh runter, richtet sich die Seite wieder mittig aus also springt wieder zurück. Ich hab’s versucht mit overflow hidden und max width 100% im html Bzw Body css aber nichts von beiden hat funktioniert. Wie behebe ich das?

vielen Dank im Voraus

...zur Frage

Menü, welches beim klicken "ausfährt" in Javascript, CSS oder irgendwie anders programmieren?

Hey ich habe letztens ein bestimmtes ganz cooles Menü auf einer Webseite endeckt, indem man nur rechts am Seitenrand einzelne zeichen wie zum Beispiel eine Lupe für Suche und noch andere Sachen untereinander standen. Wenn man dann dort mit der Maus drüber bzw draufgewischt(Weiß nicht wie ich das nennen soll :D) dann ist es quasi ausgefahren und dann stand dort Suche, wo man draufklicken kann. Wisst ihr vielleicht was ich meine :D und wenn ja wie nennt man solche menüs und womit programmiert bzw erstellt man sie ? Also javascript, CSS ... ? Wäre ganz nice wenn ihr mir mal einen Link schicken könntet wo sowas erklärt wird :)

PS Ich habe das Menü in dem Quellcode der Webseite selber einfach nicht gefunden(wegen viel Code etc.) deswegen die Frage LG

...zur Frage

CSS/ HTML Text ist unsichtbar?

Hallo,

ich bin gerade dabei, eine Webseite zu programmieren und bin dabei auf folgendes Problem gestoßen: Ich arbeite derzeit mit 2 Dateien, einer .html (Webseite) und einer .css(Design der Webseite) und auf einmal seh ich meinen Text nicht mehr. Ich habe ein paar Änderungen am Code getroffen und suche nun vergeblich nach dem Fehler. Hier ein Screenshot des Codes:

links HTML/ rechts CSS

Es wäre cool, wenn mir jemand helfen könnte.

Danke schonmal im Vorraus :D

...zur Frage

Webseite Problem mobile ansicht?

hallo ich habe eine webseite mit wordpress erstellt

nun ist in der mobilen version das so das ich die webseite nach links verschieben kann obwohl sie dort schon endet so das rechts ein weißer streifen ist der nicht dazu gehört

wie kann ich den weißen streifen (rechts) entfernen?

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zur Frage

Wie schalte ich diese Funktion ab WP Elementor?

Hi, auf meiner Webseite habe ich ein Bild reingestellt das vom rechten Rand bis in die Mitte raus ragt, allerdings wenn ich das Fenster kleiner mache kann man nach rechts scrollen da das Bild außerhalb des Sicht Feldes ist, das darf gar nicht sein, gibt es dafür vielleicht ein Plugin oder wie bekomme ich das weg?

Hier noch mal ein Video um es genauer zu erklären...

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

...zur Frage

HTML Tabelle im Handy/Tabletmodus zu breit?

Hallo,

ich habe eine Tabelle in meiner HTML-Webseite gemacht. Leider wenn ich das Fenster kleiner mache bzw. Handy/Tabletmodus öffne, ist die Tabelle zu weit, damit ich immer nach rechts scrollen muss. Bootstrap ist importiert, aber was muss ich noch im Code anderd schreiben? Die Tabelle hat vier Spalten und eine Reihe. Danke im Voraus!

...zur Frage

Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen