Div container volle weite (width: 100%)

[AshulS]

Hallo erstmal,

Die Frage ist eigentlich ganz simple und ich fühle mich ziemlich blöd, weil ich einfach nicht darauf komme:

Ich hab eine Seite erstellt mit einem div container, der die ganze weite des Bildschirms nutzen soll (bzw. vom Browserfenster). Eigentlich sollte ja "width: 100%" das Problem lösen, aber trotzdem hab ich da 1-5px links und rechts am Rand, die den Hintergrund zeigen, bzw die Hintergrundfarbe.

Hier die Codes:

HTML

`    <section id="Start">
      <div class="container">
        <div class="einleitung">
          <h1>Herzlich<br>Willkommen!</h1>
          <p>Ich bin Ashul Sharma und seit l&auml;ngeren Jahren Hobby-Webdesigner/<br>
            Mediengestalter, und dies ist meine Webseite.<br>
            <br>
            Mehr &Uuml;ber mich findest du hier:</p><br><a href="#ich" class="button">About Me</a>
        </div>
      </div>
    </section>`

Der div container soll die volle weite habe.

CSS

  .container {
    margin: 0 auto;
    width: 100%;
    height: 800px;
    background-image: url("../bg/background1.JPG");
    background-size: cover;
    background-attachment: fixed;
  }

Bild: Links und rechts die grauen Balken. (Der Hintergrund)

Würde mich sehr freuen, wenn mir jemand helfen könnte. 😀

[Matthias Apsel]

Hallo AshulS,

https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML_%26_CSS_mit_dem_Seiteninspektor_untersuchen

Bis demnächst
Matthias

[AshulS]

Merci, hab den body-Tag nicht bedacht.. Und an den Seiteninspektor hab ich auch nicht direkt gedacht.. Vielen Dank. 😀

[MrMurphy1]

Hallo

Das body-Element hat standardmäßig einen margin. Hast du den auf Null gesetzt?

Gruss

MrMurphy

[Robert B.]

Moin @@AshulS,

ein paar Frage und Anmerkungen zu deinem HTML-Code:

    <section id="Start">
      <div class="container">
        <div class="einleitung">
          <h1>Herzlich<br>Willkommen!</h1>
          <p>Ich bin Ashul Sharma und seit l&auml;ngeren Jahren Hobby-Webdesigner/<br>
            Mediengestalter, und dies ist meine Webseite.<br>
            <br>
            Mehr &Uuml;ber mich findest du hier:</p><br><a href="#ich" class="button">About Me</a>
        </div>
      </div>
    </section>

1. Ist vorgesehen, dass in die section noch weitere Container kommen?
2. Ist vorgesehen, dass in ein <div class="container"> noch weitere Unter-Container kommen?
3. Wenn du das Encoding deines Dokuments angibst und es nichts Exotisches ist, kannst du statt der Umlaut-Entitäten direkt die Umlaute notieren.
4. Mir scheint, dass dein p innerhalb der Einleitung statt <br> gerne eine Maximalbreite hätte.
5. Nach einem </p> brauchst du normalerweise kein <br> – suchst du stattdessen einen Außenabstand?
6. <br><br> ist oft ein starker Hinweis für einen neuen Absatz.
7. Wieso steht der Link eigentlich nicht in einem Absatz?
8. Dein Text ist auf deutsch, der Link auf englisch, das ist nicht konsistent. Wenn das wirklich englisch sein soll, kannst du es mit dem lang-Attribut auszeichnen: <a href="#ich" class="button" lang="en">About Me</a>

Falls die Antworten zu 1. und 2. Nein sind, kannst du deinen Code vereinfachen:

<section id="Start">
    <h1>Herzlich Willkommen</h1>
    <p>Ich bin Ashul Sharma und seit längeren Jahren Hobby-Webdesigner/Mediengestalter und dies ist meine Webseite.</p>
    <p>Mehr <a href="#ich" class="button">über mich</a> findest du hier.</p>
</section>

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

<section id="Start">
    <h1>Herzlich Willkommen</h1>
    <p>Ich bin Ashul Sharma und seit längeren Jahren Hobby-Webdesigner/Mediengestalter und dies ist meine Webseite.</p>
    <p>Mehr <a href="#ich" class="button">über mich</a> findest du hier.</p>
</section>

Der ganze Seiteninhalt ist kein Abschnitt, also nicht section. Und den Container braucht man nicht; es sind ja schon zwei da.

LLAP 🖖

[Robert B.]

Hallo Gunnar,

den seiteninternen Link zu einem Element mit der ID (oder einem Anker mit dem Namen) ich interpretiere ich so, dass es auf der Seite noch mehr Inhalte gibt als die Start-section. Aber die Frage kann uns nur @AshulS beantworten.

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

den seiteninternen Link zu einem Element mit der ID (oder einem Anker mit dem Namen) ich interpretiere ich so, dass es auf der Seite noch mehr Inhalte gibt als die Start-section.

Ich würde das, was mit h1 überschrieben ist, dennoch nicht als section auszeichnen.

So könnte der Hauptinhalt eines Dokuments strukturiert sein:

<h1>…</h1>
<p>…</p>
<section>
	<h2>…</h2>
	<p>…</p>
</section>
<section>
	<h2>…</h2>
	<p>…</p>
	<section>
		<h3>…</h3>
		<p>…</p>
	</section>
</section>
<section>
	<h2>…</h2>
	<p>…</p>
</section>

LLAP 🖖