D
daggel
New member
- Beiträge
- 3
- Punkte Reaktionen
- 0
Hallo,
ich bin hier neu und habe noch nicht soviel Ahnung mit HTML und CSS.
Dort, wo der Pfeil hinzeigt möchte ich eine horizontale Trennung mit <hr/> einbinden und es soll mittels eigenen Bildchen entstehen, das mittels css dann dort erscheinen soll.
Im bestem Fall erhalte ich nur diesen sletsamen Rahmen und keine "Background-Image". Das kleine Bildchen liegt in meinem Bilder-Ordner und wird mit
<img src="..\Bilder\TrennungTranparentQuer.jpeg"> in html aufgerufen (Wenn nur so, dann wird es angezeigt
mit <hr id="hr1"> und
#hr1
{
background-image: url("..\Bilder\TrennungTranparentQuer.png");
display: block;
background-repeat: repeat-x;
height: 15px;
} wir mir der Rahmen oben angezeigt. Das Gleiche, wenn ich <hr id="hr1" <img src="..\Bilder\TrennungTranparentQuer.jpeg"> in html schreibe. Hab viele Dinge aus Büchern und von Webseiten ausprobiert, aber ohne Erfolg.
Auf der Seite Mediaevent auf css ist dieser Code, der funktioniert .demo { background-image: url(echse.png); background-repeat: repeat-x; } aber nicht bei mir.
Auf der Seite w3docs sieht der html-code so aus:
<body>
<h1>Horizontale Linien mit Bildern</h1>
<hr class="hr1" />
<br />
<hr class="hr2" />
<br />
<hr class="hr3" />
<br />
<hr class="hr4" />
<br />
<hr class="hr5" />
<hr class="hr6" />
</body>
</html>
und in CSS so:
<style>
.hr1 {
height: 25px;
background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center;
border: none;
}
.hr2 {
height: 25px;
background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center;
border: none;
}
.hr3 {
height: 25px;
background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center;
border: none;
}
.hr4 {
height: 20px;
background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center;
border: none;
}
.hr5 {
height: 50px;
background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center;
border: none;
}
.hr6 {
height: 70px;
background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center;
border: none;
}
</style>
Auch auch das klappt nich. Es wir mt "border: none" nichts angezeigt und wenn es auskommentiert ist erscheint wieder der Rahmen. Auf der Seite aber kann man sehen, das es funktioniert. Der schein die Bilder aber irgendwo aus dem Netz zu holen.
Auf meinen Rechner muss ich den Back-Slash nutzen und nicht den einfachen Slash.
Kann mir jemand weiterhelfen?
Lieben Dank
daggel
ich bin hier neu und habe noch nicht soviel Ahnung mit HTML und CSS.
Dort, wo der Pfeil hinzeigt möchte ich eine horizontale Trennung mit <hr/> einbinden und es soll mittels eigenen Bildchen entstehen, das mittels css dann dort erscheinen soll.
Im bestem Fall erhalte ich nur diesen sletsamen Rahmen und keine "Background-Image". Das kleine Bildchen liegt in meinem Bilder-Ordner und wird mit
<img src="..\Bilder\TrennungTranparentQuer.jpeg"> in html aufgerufen (Wenn nur so, dann wird es angezeigt
mit <hr id="hr1"> und
#hr1
{
background-image: url("..\Bilder\TrennungTranparentQuer.png");
display: block;
background-repeat: repeat-x;
height: 15px;
} wir mir der Rahmen oben angezeigt. Das Gleiche, wenn ich <hr id="hr1" <img src="..\Bilder\TrennungTranparentQuer.jpeg"> in html schreibe. Hab viele Dinge aus Büchern und von Webseiten ausprobiert, aber ohne Erfolg.
Auf der Seite Mediaevent auf css ist dieser Code, der funktioniert .demo { background-image: url(echse.png); background-repeat: repeat-x; } aber nicht bei mir.
Auf der Seite w3docs sieht der html-code so aus:
<body>
<h1>Horizontale Linien mit Bildern</h1>
<hr class="hr1" />
<br />
<hr class="hr2" />
<br />
<hr class="hr3" />
<br />
<hr class="hr4" />
<br />
<hr class="hr5" />
<hr class="hr6" />
</body>
</html>
und in CSS so:
<style>
.hr1 {
height: 25px;
background: url(/uploads/media/default/0001/01/e7a97bd9b2d25886cc7b9115de83b6b28b73b90b.jpeg) no-repeat center;
border: none;
}
.hr2 {
height: 25px;
background: url(/uploads/media/default/0001/01/295e26d0bdf4d635c8887a6b0f37b61d7c69c5fc.png) no-repeat center;
border: none;
}
.hr3 {
height: 25px;
background: url(/uploads/media/default/0001/01/09a69b0ad1525926a508356955843cf84306fd85.png) no-repeat center;
border: none;
}
.hr4 {
height: 20px;
background: url(/uploads/media/default/0001/01/12fbe0b5b3d06c7e379d646068faa12f70452638.png) no-repeat center;
border: none;
}
.hr5 {
height: 50px;
background: url(/uploads/media/default/0001/01/7d5f2a204567da4df1c1d7e5017d7b510ef56619.jpeg) no-repeat center;
border: none;
}
.hr6 {
height: 70px;
background: url(/uploads/media/default/0001/01/fb69fe21cc880d96b3267efaa88cd72288a77fef.png) no-repeat center;
border: none;
}
</style>
Auch auch das klappt nich. Es wir mt "border: none" nichts angezeigt und wenn es auskommentiert ist erscheint wieder der Rahmen. Auf der Seite aber kann man sehen, das es funktioniert. Der schein die Bilder aber irgendwo aus dem Netz zu holen.
Auf meinen Rechner muss ich den Back-Slash nutzen und nicht den einfachen Slash.
Kann mir jemand weiterhelfen?
Lieben Dank
daggel
