Weißer Rand um Homepage - wie kann man diesen entfernen (Programmierung mit html5 und CSS)?

Ich habe im Chrome-Browser immer einen Rand um den body. Weiß jemand wie ich den weg bekomme?

Ich kann im Bereich die border beeinflussen, diese sind dann auch über ganzen Bildschirm. Im normalen body bei einer 100%-Angabe bleibt ein kleiner Rand.

Danke für die Antwort.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

userfromberlin

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

06.11.2015, 07:35

Ja Deine Antwort ist super. Noch besser/sauberer:

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

im <style>-Tag

Alphaly

06.11.2015, 00:20

Habs selbst raus bekommen ;)

<body style="margin: 0px;">

das wars.

Ähnliche Beiträge

Weissen Rand auf html Webseite entfernen?

Ich bin gerade dabei eine Webseite zu programmieren.

Wenn ich den body bei css anspreche und dann baclground image: url (bild); dann erscheint um die navleiste einen Rand was ich nicht möchte

Füge ich aber das bild im body teil ein und setze padding, border, margin auf 0 und height und width auf 100% dann habe ich auf der weissen Seite einen Rand.

Wie kann ich diesen Rand loswerden?

...zum Beitrag

Wie diesen Rand html, css entfernen?

Hey, wie ihr im Bild sehen könnt ist da ein Rand, der nicht da sein sollte. Kann jemand helfen?

body {

overflow-x:hidden;

background-image:linear-gradient(45deg,grey, rgb(66, 66, 66), blue, green, red, black,yellow, rgb(44, 129, 232));

width: 100%;

}

...zum Beitrag

Unterschied von html und body im CSS?

Hey, wo liegt denn der Unterschied, wenn man CSS für Body { ... } und HTML { ... } angibt? I.d.R. schreibt man dort ja Angaben zur Breite, Schriftart ect.

...zum Beitrag

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

Kann man html5 ausschalten? Vorzugsweise Chrome.

Seit ein paar Tagen spinnen meine ganzen Browser. Wenn ich ein Stream schauen möchte, was unter html5 komischer weise nur bei chrome funktioniert, ploppen die..ich sag mal "Steuerelemente" (Lautstärkeregler, Minutenanzeige..etc.) die gaaanze Zeit auf, das geht mir so dermaßen auf die Nerven, dass ich jetzt fragen musste. Wenn html5 unter manchen Streamingseiten nicht auszuschalten ist(bei Streamcloud kann man ja den Player wechseln..), gibt es dafür auch eine andere Möglichkeit das Problem zu beheben? Weil so kann ich keine einzige Folge meiner Serien genießen. Ist ja ätzend.

...zum Beitrag

Warum kann ich meinen Tabellenrahmen mit CSS nicht entfernen?

Moin,

ich habe mir in HTML eine Tabelle zurechtgebastelt und mit CSS designed. Da das Projekt recht umfangreich und unübersichtlich ist, ist es schwierig, den Code hier zu zeigen. Jedenfalls funktioniert in CSS die Funktion border-collapse sowie background-color, aber bezüglich des Rahmens funktioniert ansonsten nichts. Ich kann die Farbe, den Style und die Width nicht anpassen. Ziel ist den Rahmen zu entfernen, das funktioniert aber weder mit border-width: 0px; noch mit border: 0;.

Ich habe absolut keine Vorstellung woran es liegen kann, das CSS teilweise funktioniert. Cache habe ich immer gelöscht.
Außerdem habe ich es über table als Selektor sowie über die id mit # versucht, bei beiden ist das Ergebnis gleich,

Hat jemand eine Idee, was der Fehler sein könnte?

LG und vielen Dank

Tim

...zum Beitrag

Css wurde nicht aktualisiert?

Das Problem ist schon behoben aber mich interessiert woran es liegt.
hatte eine index.php in der hatte ich die style.css verlinkt

sagen wir mal der body background war auf rot aber ich hab ihn auf blau geändert.

Und es hat sich nichts getan bis ich es über den vs code debugger gestartet habe, dann ist mir die idee gekommen mal alle browser daten zu löschen.

und dann ging es wieder.

hatte keine Rechtschreibfehler oder sonst was,

wenn ich die style.css aus dem Php doc. Entfernt habe dann wurde der body auch weiss statt rot.
Hätte stunden damit verbracht irgendwelche fehler zu suchen, wenn mir das nicht schnell eingefallen wäre…

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

CSS Problem mit Firefox?

Ich will gerade ein kleines CSS-only Dropdown-Menü mittels der Pseudoklasse :focus realisieren. Das funktioniert in Chrome, Edge und Safari super, nur Firefox schießt hier quer und die Links lassen sich nicht anklicken. Meine Vermutung ist, dass es bei Firefox ein Timing-Problem gibt und – vereinfacht gesagt – blur vor click kommt und click ins leere läuft, da der Link dann unsichtbar ist.

Hier ein ganz einfacher Testcase:

HTML

<nav>
 <span class="menu" tabindex="-1">
  Menü aufrufen
  <ul>
   <li><a href="https://www.gutefrage.net/" target="_blank">Gutefrage</a></li>
   <li><a href="https://www.google.com/" target="_blank">Google</a></li>
  </ul>
 </span>
</nav>

CSS

.menu {
 position: relative;
 border: 1px solid silver;
 border-radius: 5px;
 padding: 4px 8px;
}

.menu:focus {
 background-color: coral;
}

.menu ul {
 display: none;
}

.menu:focus ul {
 position: absolute;
 display: block;
}

Link

https://jsfiddle.net/Babelfisch/bck65qeo/6/

Hat jemand eine Idee, wie ich Firefox hier dazu bringen kann, sich wie alle anderen Browser zu verhalten? Ich bin hier gerade mit meinem Latein am Ende, will das ganze aber ungern begraben oder unnötig Javascript dafür nutzen.

...zum Beitrag

DIV-Abstand entfernen (HTML/CSS)

Wenn ich meine Datei in DIV-Elemente aufteile, wird im Browser automatisch ein Abstand zwischen diesen eingefügt. Dabei spielt es keine Rolle, ob ich als Browser Chrome oder Firefox verwende. Gibt es eine Möglichkeit das zu unterbinden?

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

CSS > Zoomen deaktivieren?

Hey. Bei Browsern gibt es ja die Möglichkeit zu zoomen.

Und seit paar Jahren sind die Browser sogar so schlau und zommen die Hintergrundbilder und normale Bilder mit. (Also nicht wie anfangs nur den Text).

Kann man dieses Verhalten per CSS deaktivieren? Hab nen großen Background im Body der bei Browser-Zoomen nicht mit gezoomt werden soll, sondern nur der Inhalt..

Ist das möglich?

(Restliche Inhalte sind in Wrapper als Header, Menü und Content zusammengefasst)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen