Zu breite Website

[Gandohart]

Hallo!

Ich habe ein kleines Problem mit meiner CSS-Datei. Und zwar ist auf der Website die breiter größer als 100%. Sprich, man kann zur Seite scrollen und das sollte nicht möglich sein. Hoffe ihr könnt mir da helfen.

#nav{
  list-style: none;
  left: 35%;
  height: 38px;
  position: relative;
  z-index: 500;
  font-family: arial, verdana, sans-serif;
}

#nav li.top{
  display: block;
  float: left;
  height: 38px;
}

#nav li a.top_link {
  display: block;
  float: left;
  height: 35px;
  line-height: 33px;
  text-decoration: none;
  padding: 0 0 0 12px;
  cursor: pointer;
}

#nav li a.top_link span {
  float: left;
  display: block;
  padding: 0 24px 0 12px;
  height: 35px;
}

#nav li:hover a.top_link {
  color: #ff0031;
}

#nav li:hover {
  position: relative;
  z-index: 200;
}

#nav li:hover ul.sub{
  left: 1px;
  top: 38px;
  background: #ffffff;
  padding: 3px;
  border: 1px solid #3e3e3e;
  white-space: nowrap;
  width: 108px;
  height: auto;
  z-index: 300;
}

#nav li:hover ul.sub li{
  display: block;
  height: 20px;
  position: relative;
  float: left;
  width: 90px;
  font-weight: normal;
}

#nav li:hover ul.sub li a{
  display: block;
  font-size: 11px;
  height: 18px;
  width: 88px;
  line-height: 18px;
  text-indent: 5px;
  color: #000;
  text-decoration: none;
  border: 1px solid #ffffff;
}

#nav li:hover ul.sub li a:hover{
  background: #bababa;
  color: #ff0031;
  border-color: #fff;
}

#nav li:hover ul.sub li a.fly:hover{
  color:#fff;
}

#nav li:hover li:hover ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{
  left: 90px;
  top: -4px;
  background: #ffffff;
  padding: 3px;
  border: 1px solid #3e3e3e;
  white-space: nowrap;
  width: 90px;
  z-index: 400;
  height: auto;
}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly{
  color: #fff;
  border-color: #fff;
}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly{
  color: #000;
  border-color: #ffffff;
}

a:link{
  color: black;
  text-decoration: none;
  margin-left: 2%;
}

a:visited{
  color: black;
}

a:hover{
  color: red;
}

a.mail{
  color: blue;
  text-decoration: underline;
}

[klawischnigg]

Hi there,

Ich habe ein kleines Problem mit meiner CSS-Datei. Und zwar ist auf der Website die breiter größer als 100%. Sprich, man kann zur Seite scrollen und das sollte nicht möglich sein. Hoffe ihr könnt mir da helfen.

Schön, daß Du das als "kleines Problem" siehst. Aus den von Dir Geposteten Stylesheet-Angabgen geht das jedenfalls nicht hervor, da fehlen die Angaben zu den Elementen, die Dein "nav" beinhalten.

Ausserdem, ohne es jetzt im Detail durchgehen zu wollen, aber eine absolut-Positionierung mit hohen negativen Werten kann nur dazu dienen, irgendetwas verstecken zu wollen. Dafür gibts eigentlich bessere Anweisungen, zB "display:none" oder "visibility:hidden" (wenn Du ein Element zwar nicht anzeigen aber den Platz dafür reservieren möchtest - was hier aber vermutlich nicht der Fall sein dürfte)…

[beatovich]

hallo

Hallo!

Ich habe ein kleines Problem mit meiner CSS-Datei. Und zwar ist auf der Website die breiter größer als 100%. Sprich, man kann zur Seite scrollen und das sollte nicht möglich sein. Hoffe ihr könnt mir da helfen.

#nav{
  list-style: none;
  left: 35%;
  height: 38px;
  position: relative;
  z-index: 500;
  font-family: arial, verdana, sans-serif;
}

Deine #nav ist ein Block-Element, dessen Breite (100% des parent-Elements) wird um 35% verschoben, ohne aber um diese 35% schmaler zu werden.

Wahrscheinlich willst du nur links Platz schaffen. Das kannst mit margin oder padding.

[Rolf B]

Hallo Gandohart,

die Probleme deiner Seite sind vermutlich noch viel größer als du glaubst.

Test 1: kommst du ohne die Maus an alle Menüpunkte?

Test 2: Funktioniert die Seite auf einem Tablet oder Smartphone? Wie sieht sie da aus?

Rolf

[Gandohart]

Machte die Seite noch nicht responsiv, das ist mir klar. Aber das hatte ich erst später vor. Wollte nur die Grunddinge aufbauen und dann alles responsiv. Und wie meinst du ob ich ohne die Maus an alle Menüpunkte komme?

[Rolf B]

Hallo Gandohart,

Responsiv ist einfacher wenn man es von Anfang an macht. Und es ist auch einfacher zu machen, wenn man Flexbox oder Grid statt floats verwendet.

Mit Tastatur meinte ich: Du öffnest deine Submenüs offenbar per Maus-Hover. Das gibt's aber nicht ohne Maus. Und auf einem Tablet/Smartphone auch nicht. In dem Moment ist deine Seite unbedienbar. Aber vielleicht übersehe ich auch was, das HTML/JS ist ja unbekannt.

Rolf

[Gunnar Bittersmann]

@@Gandohart

Wollte nur die Grunddinge aufbauen und dann alles responsiv.

Responsiv ist ein Grundding.

Und wie meinst du ob ich ohne die Maus an alle Menüpunkte komme?

Per Tastatur, per Touch. Nicht alle Nutzer können eine Maus bedienen. Tastaturbedienbarkeit ist ein Grundding.

Um ein Aufklappmenü bedienbar hinzubekommen, braucht man JavaScript.

LLAP 🖖

[marctrix]

Hej Gandohart,

Machte die Seite noch nicht responsiv, das ist mir klar. Aber das hatte ich erst später vor. Wollte nur die Grunddinge aufbauen und dann alles responsiv.

Noch ein Tipp: du machst dir die Arbeit viel einfacher, wenn du mit der kleinsten Darstellung beginnst. Man nennt das mobile first: erst Aussehen und Bedienung für das Smartphone umsetzen. Das ist viel leichter (meist hat man nur eine Spalte, keine mouseover-Effekte usw), dann Dinge für Bildschirme, die mehr Platz bieten, andere Eingabegeräte haben.

Nicht vergessen: inzwischen werden die meisten Webseiten mehrheitlich mit mobilen Endgeräten besucht!

Marc

[marctrix]

Hej Rolf,

die Probleme deiner Seite sind vermutlich noch viel größer als du glaubst.

Vielleicht zuerst einfach mal den Validator ausprobieren?

Übrigens, Gandohart, mit dem ganzen floaten machst du dir das Leben nur unnötig schwer. Es gibt sicher noch viele Anleitungen dafür im Netz, aber die sind aus einer Zeit, als man die wesentlich bequemeren Möglichkeiten mit flexbox und grid noch nicht hatte.

Float benötigst du eigentlich nur wenn etwas von Text umflossen werden soll…

Marc