Woher kommt dieser weiße Rand ganz oben?

Ich verstehe es nicht. Wo habe ich ihm denn gesagt, dass er da Platz lassen soll...?!

Bild zum Beitrag

5 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

30.07.2021, 17:09

Normalerweise entfernt man einfach standardmäßig alle Einrückungen, dann hat man solche Probleme nicht.

Das ginge so:

* {
  margin: 0;
  padding: 0;
}

Hab das mal mit deinem Code ausprobiert, funktioniert, der weiße Balken ist weg. Dann musst du auch nicht auf irgendwelche komischen Display-Eigenschaften zurückgreifen.

EnderL3y

Beitragsersteller

30.07.2021, 17:14

Funktioniert bei mir auch einwandfrei. Ist wohl die beste Möglichkeit. Danke dir!

Eutervogel

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

30.07.2021, 16:33

mach mal bei html, body noch ein *

Also:

html, body, *{
     margin: 0;
     ...
}

EnderL3y

Beitragsersteller

30.07.2021, 16:36

Hab * hinzugefügt, aber von html und body getrennt, da sonst die Text auch 100% Höhe hätten.

* {
  margin: 0;
  padding: 0;
}

html,body {
  height: 100%;
}

Eutervogel

30.07.2021, 16:39

@EnderL3y

Ja, das ist richtig. Du kannst aber auch das html mit zum Stern schreiben, sodass dein body alleine ist. Ist eigentlich egal, aber irgendwie eleganter.

EnderL3y

Beitragsersteller

30.07.2021, 16:43

@Eutervogel

Wenn ich das HTML zum Stern schreibe, kommt das raus:

http://i.prntscr.com/YPu06DWpSe65wJj8vCFDfw.png

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

body {
  height: 100%;
}

Eutervogel

30.07.2021, 16:44

@EnderL3y

Kannste den ganzen Code mal grade bei https://jsfiddle.net/ einfügen und en Link posten?

EnderL3y

Beitragsersteller

30.07.2021, 16:46

@Eutervogel

https://jsfiddle.net/o5f9u7x3/1/

MrAmazing2

30.07.2021, 17:03

@Eutervogel

Das 'html' mit dazu zu schreiben ist komplett unnötig.

Stern bedeutet alles, da ist auch html sowieso miteinbezogen.

MrAmazing2

30.07.2021, 17:06

@EnderL3y

Du hast vergessen dem html 100% Height zu geben.

body, html {
 height: 100%;
}

Dann passt's.

https://jsfiddle.net/nhxLw9y0/

Bei mir ist dann oben auch kein weißer Rand.

Eutervogel

30.07.2021, 17:25

@MrAmazing2

Danke. Hab grade Besuch bekommen und konnte mich nicht mehr kümmern.

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

30.07.2021, 16:44

Woher kommt dieser weiße Rand ganz oben?

bekommst Du weg durch

section { display:flow-root}

Alex

EnderL3y

Beitragsersteller

30.07.2021, 16:49

Hat tatsächlich geklappt. ^^ Danke dir!

VanLorry

30.07.2021, 16:33

background-position: center

wird damit nicht horizontal und vertikal zentriert?

dvar69

30.07.2021, 16:37

Der Margin-top müsste auf 0 sein

EnderL3y

Beitragsersteller

30.07.2021, 16:48

Ist er ja. Ich setze ganz oben den margin von body und html auf 0 (in jede Richtung)

Ähnliche Beiträge

CSS. Navbar ganz oben und volle breite?

Hi. Ich wollte fragen, wie ich in CSS mit einer Navbar die volle Breite nutzen kann,da am Rand noch kleine Ränder sind. Außerdem soll die Navbar ganz oben sein Vielen Dank

...zum Beitrag

Bild in CSS formatieren?

Hallo,

ich habe ein kleines Problem:

Auf meiner Webseite gibt es ganz oben ein Bild, welches mit

background-image:

gesetzt wird. Doch es wird nicht der obere leere Linke Rand angezeigt. Kann ich das Bild irgentwie kleiner machen damit alles angezeigt wird? Z. B.:

background-image: 200px 200px url(“../img/image.jpeg”)

...zum Beitrag

Warum ist da noch Rand um der Navbar?

Hallo, bin Anfänger und will ne HTML/CSS Seite erstellen. Als erstes Element habe ich eine Navbar eingefügt, aber darum ist noch ein schmaler Rand vom Hintergrund. Wie bekomme ich den weg?

...zum Beitrag

Weißer Rand rechts von meiner Website?

Ich bin gerade dabei meine Website zu erstellen. Ich habe den Header und Footer jetzt fertig jedoch einen weißen Rand rechts. Kann jemand mir sagen, was ich falsch gemacht habe?

view-source:https://www.dzenanjupic.de/

...zum Beitrag

Html/Css Navigationleiste weiter nach links verschieben

Moin :-);

folgendes Problem: Ich habe eine Navigationsleiste erstellt und diese in den Header gepackt. Nun will ich diese mit Hilfe des Befehls float: left, nach lins an den Rand drücken, doch dort bleiben immer ca 20px Platz.. Nach rechts ist es kein Problem. Dort geht die Leiste bis zum Rand.

Ich muss dazu sagen, dass ich ein Neuling in diesem Gebiet bin und bitte daher es soweit wie es geht einfach "für dumme" zu erklären :D

Danke schon mal im Vorraus :-)

...zum Beitrag

Rand beim footer loswerden?

Hallo, ich habe einen footer auf meiner Website programmiert, aber das Problem ist das er sowohl an den Seiten als auch unten einen Rand hat, den ich nicht haben will.

Wie löse ich das?

PS:Der footer ist der schwarze balken

...zum Beitrag

CSS Animation von Oben nach Unten durchlaufen lassen?

Hallo liebe Forumleser :)

Ich würde gerne einen Text von Oben nach Unten durchlaufen lassen :), am besten mit CSS - da Marquee nicht mehr Aktuell ist.

Ich bin noch Anfänger was CSS angeht :)

Ich habe es bisher geschafft den Text vom gewünschten Platz von Oben nach Unten laufen zu lassen, jedoch läuft der Text nicht DURCH sondern setzt sich (wenn das erste Wort den Endpunkt erreicht hat) wieder auf den Startpunkt zurück. Wie verhindere ich das zurücksetzen und mache ein Durchlaufen daraus?

Dankeschön an alle.

Schöne Woche noch!

.object {
    animation: MoveUpDown 5s linear infinite;
    position: absolute;
    left: 0;
    bottom: 0;
}
@keyframes MoveUpDown { 0% { bottom: 70%; } 100% { bottom: 20%; }

...zum Beitrag

css Rand entfernen

hey leute, ich beschäftige mich seit kurzem mit dem designen von webseiten und habe immer das problem dass ich wenn ich meine ganze seite mit css formatieren will so wie hier:

<body>
<div id="default">
<h1>Inhalt</h1>
</div>
</body>

dann bleibt immer ein weißer rand oben, unten, rechts und links von meinen in css definiertten hintergrundbild

bitte nicht die methode mit 'margin' vorschlagen die funktoniert nicht...

danke für hilfreiche antworten ;)

...zum Beitrag

Frage zu CSS background-image?

Hallo Gutefrage,

links mein Code, rechts wie es aussehen soll:

Der Bildschirm soll an den Bild-Rand abgeschnitten werden.

Ich habe es versucht, indem ich die with verkleinert habe, dann wird das Bilder aber nur rechts abgeschnitten.

So sieht das Bild bei mir aus:

Also es wir rechts abgeschnitten, wenn ich die width verkleinere. Kann ich das irgendwie umdrehen, dass es links abgeschnitten wird und trotzdem links ab Bild-Rand bleibt?

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...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 mit css , html oder php bildgröße einstellen?

ich habe ne webseite auf der andere leute bilder hochladen können, diese bilder müssen letztenendes immer genau gleich groß sein, wie mach ich das mit einer der folgenden möglichkeiten?

Bild direkt nach upload mit php irgenwie beschneiden und quadratisch machen
mit css quadratisch machen sodass ein stück links und rechts fehlt
mit css quadratisch machen ohne dass links und rechts was fehlt sondern oben und unten ein weißer rand ist

aber das bild darf auf keinen fall verzogen sein oder so

...zum Beitrag

Weisser Rand rechts auf Website?

Hallo Leute!

ich habe auf meiner website tastenwichser24.de irgendwoher in der mobile ansicht einen weissen rand rechts.

Sieht fast so aus als wäre es ein passing, oder margin. Ich finde das Problem aber leider nicht. Bin auch noch Anfänger was Webdevelopment/design angeht :)

Vielleicht könntet ihr mir helfen? :)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen