Hallo Leute 
Ich soll ein Template erstellen, aber da dies mein erstes Joomla Template ist stoße ich auf mehrere Probleme…
Das Template ist auf kassaei.bplaced.net/ zu finden.
Am Ende soll das Template so aussehen: kassaei.bplaced.net/filemanager/end.png
Davon bin ich leider noch weit entfernt…
Mein Problem ist folgendes:
Ich versuche seit 2 Tagen die Navigation vom oberen Teil der Seite nach unten zu verschieben. Probiert habe ich es mit z-index, aber es will einfach nicht klappen.
–>Mein footer will auch nicht nach unten, sondern steht einfach im oberen Teil der Seite
Vermutlich habe ich irgendeinen Denkfehler in meinem Aufbau, aber ich komme einfach nicht dahinter…
Hoffentlich könnt ihr mir helfen
Beste Grüße
Talktothehand
Anbei meine CSS-Datei:
/* ************** ALLGEMEINE FORMATIERUNGEN *********************
*****************************************************************/
*{
margin: 0px;
padding: 0px;
}
html{
}
/* ************************** TYPO ****************************
*****************************************************************/
body{
font-family: Arial, sans-serif;
font-size: 10px;
color: #000;
vertical-align:top;
}
p{
}
code{
}
#artikeltext p:first-child{
margin-top: 0px;
}
h1 {
font-size: 0px;
}
h2 {
font-family: 'Oswald', Arial, sans-serif;
font-size: 24px;
font-weight: 700;
color: #FFF;
text-shadow: 1px 1px 0px #000000;
}
#artikeltext{
line-height: 18px;
}
/* ************************** LAYOUT ****************************
*****************************************************************/
#wrapper{
width: 1050px;
margin: 0 auto;
height:auto !important;
height:1050px;
overflow: hidden !important; /* FF Scroll-leiste */
z-index: 1;
}
#top-navigation{
width: 1050px;
height: 42px;
background-color: #FFFFFF;
position:absolute;
z-index: 5;
left:0px;
top: 300px;
}
#section-wrapper{
width: 1050px;
height: 702px;
background:url(../images/startseite.jpg);
background-size: 1050px 702px;
background-repeat: no-repeat;
background-position:center;
postion: relative;
z-index: -1;
}
#content{
z-index: 4;
positon: absolute;
left: 250px;
top: 350px;
float:left;
width: 250px;
height: 300px;
}
footer{
width: 1050px;
height: 42px;
background: #FFF;
float:left;
}
/* ************************** NAVIGATION ************************
*****************************************************************/
#main-navigation .menu{
height: 40px;
width: 1050px;
background: #FFF;
background: -webkit-linear-gradient(top, #FFF 0%,#FFF 100%);
background: -moz-linear-gradient(top, #FFF 0%,#FFF 100%);
background: -o-linear-gradient(top, #FFF 0%,#FFF 100%);
background: -ms-linear-gradient(top, #FFF 0%,#FFF 100%);
background: linear-gradient(top, #FFF 0%,#FFF 100%);
}
#main-navigation .menu li{
position: relative;
list-style: none;
float: right;
display: block;
height: 40px;
}
#main-navigation .menu li a{
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #999;
text-shadow: 0px 0px 0px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
#main-navigation .menu li:first-child a{
border-left: none;
}
#main-navigation .menu li:last-child a{
border-right: none;
}
#main-navigation .menu li a:hover{
color: #333;
}
#main-navigation .menu ul {
z-index: 6;
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #fff;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
#main-navigation .menu li:hover > ul { opacity: 1; }
#main-navigation .menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
#main-navigation .menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
#main-navigation .menu ul li a {
padding: -4px 0 0px 0px;
margin: 0;
border: none;
}
#main-navigation .menu ul li:last-child a { border: none; }
