hintergrundbilder must du in der css als background-image:url(); eingeben.
So wie du es hast geht es nicht .Bzw schon mit z-index aber das ist ja nicht die Aufgabe.
Lies der mal den Link durch den dir Sempervivum schickte,da ist das beschrieben wie man das macht
In deinem Link wirds ja in den Head Bereich geschrieben aber wenn ich es in die Div Box tun soll, dann muss es doch in den Body?
Ja, die Beschreibung in dem Link ist etwas dürftig. Als Einstieg ist vielleicht dieses besser geeignet:
Ich denke, dieser Link trifft genau dein Problem...
Versuche es mal so...
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<style>
body {
background-color: darkgrey;
margin: 50px;
}
div.Hmm {
width: 90%;
height: 80vh;
margin: 5px auto;
border-style: solid;
border-width: 2px;
border-color: black;
background-image: url(03_bilder/kreis.png), url(03_bilder/polygon.png), url(03_bilder/quadrat.png);
background-repeat:no-repeat, no-repeat, no-repeat;
background-position: bottom center, top right, top left;
}
</style>
</head>
<body>
<div class="Hmm"></div>
</body>
</html>Geht nicht aber trz. danke für eure Hilfe. Ich gibs auf
Geht nicht
Geht nicht gibt's nicht!
Nur seltsam, dass der Code auf meinem Rechner funktioniert - also machst du irgendwas verkehrt!
Natürlich mach ich irgendwas verkehrt, sonst würds ja bei mir gehen. Was heißt für dich "Er funktioniert auf meinem Rechner"? An sich funktioniert er auf meinem auch aber die Bilder werden wie gesagt nicht angezeigt. Hintegrundfarbe, Border etc. seh ich
ist der link zum Bild richtig ??
Zeig nochmal dein Aktuellen Code
Hintegrundfarbe, Border etc. seh ich
Dann funktioniert es bei dir auch... es kann dann nur an einer fehlerhaften url(...) liegen.
Prüfe ganz genau, ob das, was du da eingetragen hast auch wirklich zu den Bildern führt!
...Ich bin einfach nur dumm. Ich hab das Dokument geschlossen und habs dann als Website geöffnet und auf einmal wurden die Bilder angezeigt :'D
Ich wollte mal fragen, wie es weiter ging?!
mach dein </div von den <div class="container"> </div>
mal hinter den </aside>
dann kommst du der sache schon näher.
Ist zwar noch nicht reponsive und so ,aber ich denke das bekommst du hin
Hab jetzt beides also aside und article in den div reingetan, jetzt ist beides an der richtigen Stelle, danke
Und ja, obs reponsive ist war mir jetzt noch nicht wichtig.
Kann ich den die unteren beiden Boxen anzeigen lassen, ohne dass ich da einen Text reinschreibe? Sobald ich die Texte lösche, sind die Boxen weg
Das mit dem 'float' ist nur die zweitbeste Idee.
Versuche es mal mit 'Flex-Box'.
Die Größe eines Element wird durch den Inhalt bestimmt, es sei denn, du machst Größenvorgaben mit CSS. Damit deine Boxen auch ohne Inhalt sichtbar sind, müsstest du zusätzlich ein 'min-height' angeben.
Etwa so:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>
<style>
body {
margin:0;
}
header {
width: 100%;
height: 384px;
margin-bottom: 50px;
background: #33ccaa;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1040px;
margin:0 auto 50px auto;
}
article {
background:#d6e1de;
width: 65.86538461538461%;
min-height: 100px;
}
aside {
background:#a7b6b3;
width:29.326923076923077%;
min-height: 100px;
}
</style>
</head>
<body>
<header></header>
<div class="container">
<article>
</article>
<aside>
</aside>
</div>
</body>
</html>Wenn ich der rechten und linken box zwei versch. min-heights gebe, dann wurde die rechte box, da sie einen kleineren Wert hatte, nicht auf die gleiche höhe gesetzt wie die linke. Deshalb hab ichs jetzt wieder mit float versucht und so gehts dann:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<style>
body {
margin:0;
}
header {
width: 100%;
height: 384px;
margin-bottom: 50px;
background: #33ccaa;
}
.container {
width: 100%;
max-width: 1040px;
margin:0 auto 50px auto;
}
article {
background:#d6e1de;
width: 65.86538461538461%;
min-height: 470px;
float: left;
}
aside {
background:#a7b6b3;
width:29.326923076923077%;
min-height: 403px;
float: right;
}
</style>
</head>
<body>
<header></header>
<div class="container">
<article>
</article>
<aside>
</aside>
</div>
</body>
</html>Das liegt daran, dass die inneren Container mit 'align-items: center;' sich vertikal zentriert anordnen - es sind aber auch andere Ausrichtungen möglich:
Siehe hier:
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.