HTML Hintergrund zu klein?

8 Antworten

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 

  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 

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
@wsdwsdwsd

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. 

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

Screenshot - (HTML, Hintergrund)

Warum funktioniert dieser Code nicht innerhalb eines Containers?

Dieser Code macht einen "frosted-glass-Effekt". Er funktioniert auch super, aber sobald ich den gestylten div container in einen anderen div-container oder zwischen <form>-Elemente lege, funktioniert er nicht mehr, sprich der Effekt geht verloren. An was liegt das?

#headlines {

width: 630px; 
margin-left: 5%; 
text-align: center;
padding-top: 20px; 
border: 0; 
background: inherit; 
position: relative; 
border-radius: 10px; 
float: left; 
overflow: hidden; 
font-family: 'Rajdhani', sans-serif; 
background-color: #DCDCDC; 
font-size: 60px; 
margin-top: 8%; 
height: 110px;    

}



headlines:after {

content: '';
width: 730px;
padding-top: 30px;
position: absolute;
font-family: Arial, Helvetica;
margin-top: 5%;
height: 140px;
background: inherit;
left: -100px;
 left position
 right: 0;
 top: -50px;  
 top position 
 bottom: 0;
box-shadow: inset 0 0 0 200px rgba(255,255,255,0.2);
 filter: blur(10px);
 
}
...zur Frage

hintergrundbild bei HTML einmal wiederholen, ohne CSS?

Ich habe ein Schulprojekt mit der Aufgabe: programmiere eine Internetseite nur mit HTML (ganz ohne CSS) aufbekommen.

Mein Problem: Ich möchte im Hintergrund eine Grafik anzeigen, diese soll aber nur einmal angezeigt werden und ich habe es 1 stunde ca. lang gegoogelt, aber ALLE Ergebnisse waren mit CSS. Ich freue mich über jede Rückmeldung.

...zur Frage

Wie kann ich meine Subnavigation in CSS zentrieren?

Moin! :)

Ich würde gerne meine Subnavigation, die sich am linken Bildrand befindet, zentrieren. Leider klappt das bei mir nicht so wirklich und hoffe, dass mir jemand helfen kann.

Vielen Dank im Vorraus! :)

Mein HTML-Code: https://pastebin.com/e2zyBvyy

body, html {
    background: #F4A460;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
}

div#subnavigation {
    background: #8A4B08;
    position: fixed;
    top: 0;
    width: 166px;
    text-align: center;
    transition: 200ms all;
    height: 100%;
}

div#subnavigation nav#sub {
    display: inline-block;
}

div#subnavigation nav#sub ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    vertical-align: middle;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    position: relative;
    transition: all 300ms;
}

div#subnavigation nav#sub ul li a {
    display: inline-block;
    padding: 2.17rem;
    float: left;
    min-width: 12rem;
    text-align: center;
    font-size: 2rem;
    color: #000000;
    margin: 0 1px 0 0;
    text-decoration: none;
    background: #deb887;
    font-weight: 300;
    transition: all 300ms;
    font-family: 'Source Sans Pro', sans-serif;
    border-bottom: 1px solid #8A4B08;
}

div#subnavigation nav#sub ul li:hover > a {
    background: #FFD39B;
}
...zur Frage

HTML / CSS Div-Container bzw. ganze Seite horizontal zentrieren

Hallo...

ich hab ein größeres Problem mit meiner Website. Ich bin noch am Anfang und hab direkt zu Beginn festgestellt, dass viele Websiten zenriert ausgerichtet sind. Sowas wollte ich auch machen, hab gegoogelt, gf durchgeblättert aber noch nichts Brauchbares gefunden.

Ich hab eine Seite aufgeteilt in body und dann einen Div-Container, der alles umschließt (heißt bei mir id="drumrum"). So. Dann wollte ich da weitere Div-Container einfügen, die da heißen sollen kopf, navi, inhalt und footer. Soweit OK, alle möglichen Formatierungsoptionen mit CSS klappen soweit, aber mit der horizontalen Zentrierung komm ich garnicht weiter.

Ich hab schon ausprobiert, margin auf 0px auto zu setzen, text-align:center usw. zu benutzen, aber nichts funktioniert. Damit ihr wisst, wie mein Doctype aussieht:

Hab schon irgendwo gelesen, dass man da vielleicht noch was dran ändern muss, weiß aber nicht genau, was ;)

Hier ist meine CSS-Datei, als Code eingefügt:

/*formate.css*/

drumrum {

width:1000px;
float:left;
margin:0 auto;
text-align:left;

}

kopf {

border-top-left-radius:10px;
border-top-right-radius:10px;
float:left;
width:980px;
height:150px;
border-width:1px;
margin-left:auto;
margin-right:auto;
background-image:url('img/banner.png');
font-weight:bold;
font-size:30pt;
padding-left:10px;
padding-right:10px;

}

navi {

float:left;
width:980px;
border-width:1px;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#00CC00;
font-size:14pt;

}

inhalt {

width:980px;
float:left;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#CCCCCC;
font-size:14pt;

}

footer {

width:980px;
border-width:1px;
float:left;
margin-left:auto;
margin-right:auto;
padding:10px;
background-color:#FFFFFF;
text-align:center;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;

} body { background-color:#008800; text-align:center; } * { font-family:Times New Roman; } a:hover { text-color:#00DD66; font-weight:bold; } a:visited { text-color:#FF00EE; } a { text-color:#0022FF; }

Das wäre dann mein momentanes CSS für meine Seite. Wenn mal jemand drübergucken könnte und eine Idee kennt, wie ich "alles" waagerecht in die Mitte krieg, danke schonmal.

Und bitte verlinkt nicht auf eine gf-Seite, leider hat bislang von all den genannten Antworten keine Möglichkeit funktioniert. Vielleicht liegt es ja auch wirklich am Doctype.

Liebe Grüße, HugaTV

...zur Frage

HMTL/CSS - Wie kann ich ein Img in einem Div zentrieren?

Moin,

hat jemand eine Idee, wie ich über meiner Navbar ein 100px Image mit CSS genau mittig positioniere? Die Ansätze, die ich bis jetzt im Internet gefunden habe, waren nicht besonders hilfreich, was meinen Fall angeht...

Das wäre der html-Ausschnitt...:

<html>
    <body>
        <header>
            <div class="navbar-body">
                <img class="navbar-logo" src="logo_navbar.png"></img>
            </div>
        </header>
    </body>
</html>

...und das der für CSS:

.navbar-body{
    color: FFFFFF;
    background-color: 1F1F1F;
    font-family: Arial Black;
    font-size: 20px;
    height: 80px;
    text-decoration: none;
    text-transform: uppercase;
}
.navbar-logo{
    height: 100px;
    margin: 30px auto 0;
}

Mein Problem ist, dass sich bei "margin: auto" und "display: block" zwar die Grafik mittig positioniert, aber dafür den Nav-Container mit verschiebt. Hat hier jmd eine Lösung parat?
LG

...zur Frage

Hintergrund bild kann einer helfen?

Ich suche jemand der sich mit Hintergrund Bilder und etwas Htlm aus kennt ich möchte für mein Online Shop ein anständiges Hintergrund leider sieht das momentan so aus https://mimsilver.com/index.php/produkt/gt001p441/

und das ist wirklich nicht schön

Grüße David

...zur Frage

Was möchtest Du wissen?