Hallo,
ich habe mit Hilfe aus diesem Forum die Hintergrundfläche mit einem Link versehen, mit dem ich zur Vorseite zurückkehren kann. Aber entweder liegt der Link ganz unten und wird vom darüber liegenden Wrapper, der vertikal und horizontal zentriert ist, verdeckt, oder aber er liegt ganz oben und verdeckt alles andere.
Ich hatte auch schon versucht noch eine Box über den Wrapper einzusetzen, in dem die drei Positionen für die Inhalte liegen und diese mit z-index ganz nach oben zu heben, aber es klappt nicht ....
und hier die entsprechenden Ausschnitte von index.php
<body>
<div id="verlinkt"><jdoc:include type="modules" name="verlinkt" />
<div id="wrapper">
<div id="klammer">
<div id="block1">
<div id="position-601"><jdoc:include type="modules" name="position-601" /></div>
</div>
<div id="block2">
<div id="position-901"><jdoc:include type="modules" name="position-901" /></div>
</div>
<div id="block3">
<div id="position-501"><jdoc:include type="modules" name="position-501" /></div>
</div>
</div>
</div>
</div>
<jdoc:include type="modules" name="debug" />
</body>
und template.css
/**/
#verlinkt {
overflow: hidden;
background: none;
display: block;
width: 100%;
height: 100%;
}
#verlinkt a {
position: absolute;
height: 100%;
width: 100%;
z-index: 6;
}
/*wrapper*/
#wrapper {
height: 880px;
margin: 0 auto; /* !!! */
text-align: left; /* !!! */
background: #808080;
width: 100%; /*Start vertikale Zentrierung*/
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); /*Ende vertikale Zentrierung*/
z-index: 0;
}
#wrapper a {
position: static;
height: 100%;
width: 100%;
}
#klammer {
position: relative;
width: 100%;
height: 100%;
background: yellow;
display: block;
}
#block1 {
width: 810px;
height: 30px;
background: none;
margin: 0 auto;
padding: 0px;
}
#position-601 {
width: 130px;
height: 30px;
background: none;
margin: 0px 0px 0px 0px;
padding: 0px;
float: right;
z-index: 10;
}
#block2 {
clear: both;
width: 810px;
height: 810px;
background: none;
margin: 5px auto;
padding: 0px;
}
#position-901 {
width: 810px;
height: 810px;
background: none;
margin: 0px auto;
padding: 0px;
float: left;
z-index: 10;
}
#block3 {
width: 810px;
height: 30px;
background: none;
margin: 0 auto;
padding: 0px;
clear: both;
}
#position-501 {
width: 600px;
height: 30px;
background: none;
margin: 0px 0px 0px 0px;
padding: 0px;
z-index: 10;
}
Danke für eure Hilfe ...
Edit by in indigo66: Langen Code in den Spoler, siehe Foenregeln. Außerdem kann der Code auf der Live-Seite eingesehen werden und muss dann nicht extra gepostet werden.