Design "Overlay" ?

Manii

Moin moin,

ich mochte in meinen Header ein "overlay" einbauen, dass Ausserhalb des Bereiches des Headers geht.

z.B: wie hier KlickMich
Leider ein Joomla Template, sonst würd ichs mir abguggen :).

Wär nett wenn mir jmd helfen könnte so etwas zu realisieren. Sollte ja eigentlich keine große sache sein. :razz:

Mfg Mani

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

michaelstegh

Ich verstehe nicht. Welches Overlay? Meinst du die Grafik links, die Banderole?

gericoach

Zitat

Sollte ja eigentlich keine große sache sein. :razz:

Wo nimmst Du Deine Erkenntnis her...?
Probiere mal das:

style.css:

Zitat

#overlay {
position:relative;
margin-top??px;
background: url(images/link_zum_bild.png) no-repeat;
z-index: 10;
}

Alles anzeigen

Aufruf in der header.php:

Zitat

<div id="overlay"></div>

Manii

@michaelstegh
jip die banderole.

@gericoach

Ich hab zwar Kentnisse mit Joomla Templates, aber nicht so viele mit WP Templates,
und da es in Joomla keine Große sache ist, dachte ich mir in WP wird es kein größerer Aufwand sein.
Sry falls du das anderst siehst :).

Danke für den Tipp, ich werd's gleich teste.

Mfg mani

bgeissler

Die Banderole ist eine quadratische Grafik, sie wird im header mit dieser css-Klasse eingesetzt:

Zitat

.pic
{
position: absolute;
z-index: 55;
top: -10px;
left: -10px;
width: 176px;
height: 178px;
background-image: url("../images/pic.png");
background-repeat: no-repeat;
}

Alles anzeigen

Manii

Zitat von bgeissler

Die Banderole ist eine quadratische Grafik, sie wird im header mit dieser css-Klasse eingesetzt:

Kann man das einfach so in WP importieren?!

Mani

Manii

Sry für den Doppelpost, kanns net editieren.

Leider gehen keine der oben genannten möglichkeiten.. :(

Vllt. sonst noch jmd ne idee?

Mfg Mani

bgeissler

Zitat

Leider gehen keine der oben genannten möglichkeiten

Beide Möglichkeiten "gehen".

Zitat

Kann man das einfach so in WP importieren?!

Bei dieser Frage muss ich davon ausgehen, sorry es liegt an dir.

Du musst zunächst ein entsr. Bild erstellen und uploaden.
Dann kannst du diesen Link in die Header.php einfügen.

Zitat

Aufruf in der header.php:
<div id="pic"></div>

Um das BIld dann auf deinen HP auszurichten musst du eine der beiden o.gen. css-Klassen in deine style.css einfügen und anpassn.

Manii

Oh gott,

mein fehler...

Anstatt: <div id="layout"></div>
<div id="#layout"></div>
geschrieben...

Sorry, danke für die Hilfe :)

Mfg mani

Edit:

Das steht nun bei mir Drin.

PHP

#overlay{
   position: absolute;
   display:block;
   z-index:-2;
   top: 0;
   width:100%;
   height: 250px;
   background-image: url('images/overlay.png');
   background-repeat: no-repeat;
   background-position:top center;
}

Alles anzeigen

Wie bekomme ich die grafik auf die Oberste Ebene?

Mfg Mani

gericoach

wieso nimmst du einen z-index von minus 2? Ich hatte 10 geschrieben, bgeissler 55. Umsetzen bitte...

Manii

Zitat von gericoach

wieso nimmst du einen z-index von minus 2? Ich hatte 10 geschrieben, bgeissler 55. Umsetzen bitte...

Sorry, hatte ich aus testzwecke geändert.
code sieht nun so aus:

PHP

#overlay{
   position: absolute;
   display:block;
   z-index:55;
   top: 0;
   width:100%;
   height: 385px;
   margin-left: 30px;
   margin-top: 260px;
   background-image: url('images/overlay.png');
   background-repeat: no-repeat;
}

Alles anzeigen

Passt vom aussehen PERFEKT!
VIELEN DANK AN ALLE!

Ein problem hab ich nun aber noch.

Ich kann nichtsmehr auf meiner seite anklicken :(

Wenn ich das noch gelöst bekomme, nerv ich auch nicht weiter :D

Mfg Mani

gericoach

hast Du nen Link zum "Sorgenkind"?

Kenshex

link wär super. was sein kann ist das dein #overlay über elementen drüber liegt und daher links oder andere darunter liegende elemente "un"klickbar macht

bgeissler

Zitat

[COLOR=#000000][COLOR=#007700] [/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]100[/COLOR][COLOR=#007700]%;
[/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]385px[/COLOR][COLOR=#007700];
[/COLOR][/COLOR]

Wo nimmst du diese Maße her? Mach dein #overlay so groß wie dein png.

Manii

Zitat von bgeissler

Wo nimmst du diese Maße her? Mach dein #overlay so groß wie dein png.

Das png hat die höhe von 385px.
--
So code sieht nun so aus:

PHP

#overlay{
   position: absolute;
   display:block;
   z-index:10;
   top: 0;
   width:100%;
   height: 385px;
   margin-left: -40px;
   margin-top: 225px;
   background-image: url('images/overlay.png');
   background-repeat: no-repeat;
}

Alles anzeigen

So passt alles perfekt, kann auch wieder die bar anklicken.
Mitm link wirds schwierig. Ist momentan noch local gehostet.

Ich hab noch ein anderes Prob. undzwar mitm Backend..:(
Falls ihr weiterhin Interesse habt einem Unwissenden Wissen zu vermitteln
-> KlickMe

Vielen dank an Alle die geholfen haben! :lol:

Mfg,

Mani

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Design "Overlay" ?

Jetzt mitmachen!