Frage von wsdwsdwsd, 88

HTML Hintergrund zu klein?

Hallo zusammen, ich habe mir jetzt eine HTML Seite gemacht, aber irgendwie klappt das mit dem hintergrund nicht ganz. Der Hintergrund ist irgendwie zu klein. Also ich habe eine Farbe, kein Bild als background angegeben. Im Bield sieht man, was ich meine. Bitte helft mir. Ich bin verzweifelt. Bei dem transparenten steht ein Text. Auch in der schwarzen Box. Mein Body Code sieht wie folgt aus.

    html {
    background-color: beige
}

body {
    font-size: 16px;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1000;
    padding: 2em 2em 4em;
    margin-bottom: auto
}

body {
    background-color: aliceblue
}

LG Michael

Antwort
von medmonk, 4

HTML Markup: 

<body>
  <div class="page-wrapper"> <!--// page-content here! --> </div>
</body>

CSS:

/* minimal css-reset */
* {padding:0; margin:0; border:none; outline:none;}

body {background-color: #f5f5dc;}

.page-wrapper {
  max-width: 1000px;
  min-height: 100vh;
  background-color: #f0f8ff;
  margin: 0 auto;
}

Innerhalb der Division mit der Klasse page-wrapper all deine Inhalte packen. Mit der Eigenschaft min-height und dem Wert 100vh hat dieser immer die Höhe des Viewports. Das minimale CSS-Reset sollte jedoch durch ein besseres ersetzt werden, da ein Reset über den Universal-Selektor nur unnötig der Performance schadet.  

LG medmonk 

Antwort
von wsdwsdwsd, 11
<html>
<head><link rel="shortcut icon" type="image/x-icon" href=""><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>DAs ist der Title</title><meta name="Die Description"><link rel="stylesheet" href="style.css"></head><body bgcolor="#C9BEBE"><font color="#3E3838" face="indie_flowerregular"><center><h1>Das ist die H1</h1><h2>Die H2</h2></center></font><nav><a href="index.html"><li>Startseite</li></a><a href="archiv.html"><li>Archiv</li></a><a href="impressum.html"><li>Kontakt/Impressum</li></a></nav><font color="#3E3838" face="indie_flowerregular"><p> Das ist ein Text </p></font><font face="gloria_hallelujahregular"><center><h2>H2</h2></center><p>Wieder ein Text </p></article><article><h3>Eine h3</h3><p> Ein Text<br></p></article><center><h2>h2</h2></center><article><center><h3>h3</h3></center><p> ein Text </p></article><article><center><h3>eine h3</h3></center><p> Ein Text</p></article></section></font><aside><h3>Die h3</h3><p>Der Text</p><p>Ein TExt</p><h3>h3</h3><p>Text</p></aside></body></html>

Hier ist jetzt noch mein Quellcode.
Hab meine Texte ersetzt.
Hier noxh ein Bild, was ich meine. 
Die schwarzen kästen mit der Schrift, die ich verpixelt habe gehen weiter, aber das blau eben nicht.
Es soll aber weitergehen.
Danke

LG Michael

Antwort
von medmonk, 14
  1. Es fehlt hinter background-color und margin-bottom jeweils ein Semikolon
  2. Bei max-width fehlt die Maßeinheit
  3. Ohne Markup (Quellcode) können wir nichts mit deinem CSS anfangen. 

Bitte drück dich verständlicher aus und zeige deine bisherige Arbeit, damit mir es besser nachvollziehen können. Denn auf ein ewiges Frage und Ratespiel sicher keiner Lust hast. 

LG medmonk 

Kommentar von wsdwsdwsd ,

Hab das jetzt mit einem Bild, was ich meine (und dem Quellcode) in eine Antwort geschrieben. Waren nicht genug Zeichen in der Frage.
Danke schon mal.

LG Michael

Kommentar von medmonk ,

Bevor du dich um die Darstellung kümmerst, erst einmal deinen Quellcode überarbeiten solltest. Keine Inline-Styles verwenden sondern sämtliche Formatierungen in einem externen Stylesheet notieren. Ich schreibe dein Markup eben um und dir dann gleich in einer neuen Antwort posten werde. 

Kommentar von kuechentiger ,

Bei css muss am Ende nicht zwingend ein Semikolon, das ist ja kein Script.
https://de.wikipedia.org/wiki/Cascading_Style_Sheets#Syntax

Kommentar von medmonk ,

Ich weiß, trotzdem sollte man sich vor allem am Anfang eine einheitliche Schreibweise angewöhnen. Dazu gehört eben auch das setzen von Semikolons. Kurz um - nur weil man es kann, nicht auch so machen muss oder sollte. 

Antwort
von CSHH1978, 50

Die max-width: 1000 wird bei größeren Monitoren dafür sorgen, dass nicht alles in aliceblue ist, sondern nur bis 1000 px.

Antwort
von kuechentiger, 6
body {
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
max-width: 1000px;
padding: 2em 2em 4em;
height: auto
}
Kommentar von kuechentiger ,

oder besser so, das sollte in allen neueren Browsern funktionieren

html{height:100%}
body{height:initial; height:inherit}
Antwort
von yujieas, 68

max-width weg... dann gehts :)

Kommentar von wsdwsdwsd ,

ne.. Dann wird es nur breit. Übern ganzen Bildschirm. Aber der Hintergrund vom Body wird nich länger..
Michael

Antwort
von RakonDark, 29

also max-width 1000 ohne einheit ?? was wird das denn ?

Antwort
von triopasi, 52

Welcher Hintergrund ist zu klein? Vom Body oder vom HTML?

Kommentar von wsdwsdwsd ,

Oh sorry..

Vom Body

Danke

Kommentar von triopasi ,

Du hast n max-width und n margin - da fehlt nix, du hast es nur so eingestellt...

Kommentar von wsdwsdwsd ,

???

Kommentar von triopasi ,

Dein body hat 

max-width: 1000;

Selbstverständlich ist das nicht so breit wir dein Bildschirm - has DU so festgelegt!

Kommentar von wsdwsdwsd ,

es geht darum, dass das Aliceblue nicht bis zum ende der Seite geht.
Gruß

Kommentar von triopasi ,

Ja, weil dein body nicht so groß ist wie der Bildschirm - und das hast du in deinem CSS so festgelegt! Les doch mal deinen Code! Verstehst du was du da alles festgelegt hast?

Kommentar von wsdwsdwsd ,

eigentlich schon. Was muss ich dann ändern?

Kommentar von triopasi ,

Fang zB mal mit dem margin an?! oder der max-width???

Kommentar von wsdwsdwsd ,

Und was soll ich da machen?

Kommentar von triopasi ,

Max-width entfernen??? margin auf 0?

Und dann mal lernen, was dein CSS überhaupt macht?!

Kommentar von wsdwsdwsd ,

Wenn ich mein Margin wegmache, rutscht die Seite komplett nach links. Wenn ich max-width entferne wird die seite rechts und links bis zum rand gezogen. und das blau ändert sich auch nicht, bleibt immer auf der gleichen höhe.

Kommentar von triopasi ,

Dann hast evtl. das HTML n padding/margin, was weiß ich, musst du sehen.

Du willst doch ALLES blau, oder? Dann ist das doch schon mal n Anfang.

Kommentar von wsdwsdwsd ,

Das habe ich im html 

html {

background-color: beige
}

Oder meinste in der index.html?

Kommentar von triopasi ,

Der Browser hat auch Standardeinstellungen, die nicht im CSS stehen...

Kommentar von wsdwsdwsd ,

na klar. nur weil du die lösung nicht weißt, ist jetzt der Browser schuld.. 

Kommentar von triopasi ,

Setze doch mal bei HTML margin und padding auf 0.... Aber warum hat dann das HTML überhaupt ne background-color?

Kommentar von wsdwsdwsd ,

wenn ich die background-color wegmache, wird alles blau (also drum herum), aber ich will rechts und links einen beigen rand.

Kommentar von triopasi ,

Aber oben schreibst du, dass nicht alles blau ist? Was ist denn dann das konkrete Problem, wenn du gar nicht alles blau willst? links/rechts Rand, oben/unten nicht?

Kommentar von wsdwsdwsd ,

also am anfang war rechts und link beige und in der mitte das blau. aber das blau ging nur eine monitorseite weit und dann wurde es beige.

Kommentar von triopasi ,

Was heißt "geht nur eine Monitorseite weit"? Geht nicht wenn du scrollst oder was?

Kommentar von wsdwsdwsd ,

wenn ich es aufrufe ist man ja ganz oben und wenn man dann scrollt ist das blau beige. Wenn man wieder hoch geht ist der erste teil wieder blau

Kommentar von triopasi ,

Hast du Inhalt der über das blaue hinaus geht oder ist da kein Inhalt mehr?

Allgemein solltest du dem html keine Farbe geben sondern lieber innerhalb des body's ein div erstellen in dem der Inhalt dann drin ist.

Kommentar von wsdwsdwsd ,

der inhalt geht über das blau hinaus und ist dann im beige

Kommentar von triopasi ,

Dann mach das erstmal mit nem div, das könnte schon mal was fixen.. Den body Tag so zu nutzen ist sowieso nicht richtig...

Kommentar von wsdwsdwsd ,

welcher inhalt? Der Text?

Kommentar von triopasi ,

Ja welchen Inhalt denn sonst?

Kommentar von wsdwsdwsd ,

macht keinen unterschied

Kommentar von triopasi ,

Haste das alles in n div gepackt und das CSS auch auf das div angewendet, statt auf den body?

Kommentar von wsdwsdwsd ,

???

Kommentar von triopasi ,

Schau dir mal bitte an, wie man ne Website vom HTML her strukturiert... Dann solltest du eine Erleuchtung erleben :)

Kommentar von wsdwsdwsd ,

HAHAH ALLE HABEN GELACHT.. WILLST DU MIR JETZT HELFEN ODER NICHT?

Kommentar von triopasi ,

Schau mal, ich schick dir sogar nen Link...

https://www.ischool.utexas.edu/~fastrac/hristova/css-html.gif

Dir fehlen die elementarsten Grundlagen. Ich werde dir nicht deinen Code für dich schreiben, das musst du schon selbst, ich gebe aber gern Tipps... Aber wenn du die nicht verwerten kannst, weil die diverse Grundlagen fehlen, dann werde ich dir das nicht erklären, das steht schon millionenfach im Internet.

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten