Frage Die Box ist links nicht richtig "ausgefüllt"

[Trabuhot]

Hallo,

ich habe gerade mit CSS begonnen und habe ein Problem.

Hier ist ein Screen meines Problems:




Oben links sieht man dass die Box nicht richtig ausgefüllt ist, wie fülle ich die richtig aus?

Gruß

 

[MrMurphy]

Hallo

Indem du padding, margin und width sowie, falls erforderlich, das Box-Modell entsprechend anpasst.

Für genauere Informationen benötigen wir den Link zu der Seite.

Gruss

MrMurphy

 

[Trabuhot]

Hi,
danke für die Antwort.
Hier ist der Link zu der Seite: http://37.114.59.20/
Und mein derzeitiger CSS-Code:

.userBar {
  height: 40px;
  background: #00f5b4;
  background-image: -webkit-linear-gradient(top, #00f5b4, #4975fa);
  background-image: -moz-linear-gradient(top, #00f5b4, #4975fa);
  background-image: -ms-linear-gradient(top, #00f5b4, #4975fa);
  background-image: -o-linear-gradient(top, #00f5b4, #4975fa);
  background-image: linear-gradient(to bottom, #00f5b4, #4975fa);
  font-family: Arial;
  position: relative;
  margin-right: 12px;
  top: 0px;
  padding-right: 1316px;
  padding-left: -30px;
  position: fixed;
  border-right: 100px;

}

 

[NetAktiv]

Meist ist es so, dass der Browser Voreinstellungen mitbringt und wenn du die nicht überschreibst, dann hast halt dessen Standards. Man kann das leicht sehen, wenn man mal die Seite in den in den meisten Browsern integrierten Entwicklertools ansieht. Da siehst für jedes Element die CSS Attribute und deren Ursprung, und kannst die verändern und siehst sofort die Wirkung.

Nachtrag: Bitte verwende bei Code die Einfüge-Option im Editor-Fenster

 

[SpiceLab]

html,body {margin:0;padding:0}

 

[MrMurphy]

Hallo

Der body benötigt ein "margin: 0;"

Gruss

MrMurphy

 

[Trabuhot]

Links ist es jetzt ausfüllt, aber nun ist es rechts nicht ausgefüllt.

 

[MrMurphy]

Hallo

Dazu musst du der .userBar eine Breite von 100% geben: "width: 100%;"

Gruss

MrMurphy

 

[SpiceLab]

Links ist es jetzt ausfüllt, aber nun ist es rechts nicht ausgefüllt.

Kann ich zwar nicht bestätigen, aber diese Regel könnte die Ursache sein:

.userBar {
...
margin-right: 12px;
...
}

 

[Trabuhot]

Kann ich zwar nicht bestätigen, aber diese Regel könnte die Ursache sein:

Hat leider nicht geholfen.

 

[SpiceLab]

Hat leider nicht geholfen.

Ich kann in keinem gängigen Browser eine Lücke am rechten Fensterrand entdecken.

Vielleicht mal den Browsercache leeren, und die Seite neu laden.

 

[Trabuhot]

Ich kann in keinem gängigen Browser eine Lücke am rechten Fensterrand entdecken.

Vielleicht mal den Browsercache leeren, und die Seite neu laden.

Cache leeren hat geholfen, danke euch allen. :)

 

[MrMurphy]

Hallo

Kann ich zwar nicht bestätigen

Doch, dazu musst du das Fenster breit genug ziehen oder den Zoom-Faktor verringern.

Das Problem ist

padding-right: 1316px;

Insgesamt gibt es noch viele andere Problemfelder.

Gruss

MrMurphy

 

[SpiceLab]

.userBar {
...
/*position: relative;*/ /* auskommentiert, da position:fixed gelten soll */
...
box-sizing: border-box /* Ergänzung, um Boxmodell-Konflikt zu lösen */
}

Aus padding-right:1315px ist zwischenzeitlich padding-left:30px geworden.

 

[Trabuhot]

Geändert. :)

 

[SpiceLab]

Doch, dazu musst du das Fenster breit genug ziehen oder den Zoom-Faktor verringern.

Ist gefixt :)