HTML Hintergrund zu klein?

... komplette Frage anzeigen

6 Antworten

<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 bewerten Vielen Dank für Deine Bewertung

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 bewerten Vielen Dank für Deine Bewertung
  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 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von wsdwsdwsd
31.10.2016, 10:47

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

0
body {
font-size: 16px;
line-height: 1.5;
margin: 0 auto;
max-width: 1000px;
padding: 2em 2em 4em;
height: auto
}
Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von kuechentiger
31.10.2016, 12:25

oder besser so, das sollte in allen neueren Browsern funktionieren

html{height:100%}
body{height:initial; height:inherit}
0

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

Antwort bewerten Vielen Dank für Deine Bewertung

max-width weg... dann gehts :)

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von wsdwsdwsd
30.10.2016, 22:22

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

0

Was möchtest Du wissen?