Hallo.
Ich habe seit heute ein neues Design.
www.jens-hp-service.de.tl
Wenn ihr die Homepage aufruft, seht ihr, dass der "Home" Button mit einem schicken, grünen Hintergrund Bild hinterlegt ist.
Rufe ich jetzt allerdings die anderen Menüs auf, also klicke ich auf einen anderen Menüpunkt, bleibt dieser grüne Button leider weiterhin auf "Home".
Wie bekomme ich es hin, dass sich der Hintergrund des Menüpunktes ändert, das ich soeben angeklickt habe ?
Ich schreibe mal meinen Code hier mit rein.
CSS-Code ohne Style Tags:
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#nav{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
* { padding:0; margin:0;
}
.clear {clear:both;}
a {
color: #5B920A;
}
body {background:#fff url(http://www.loaditup.de/files/405485.jpg) repeat-x; font: 11px
Verdana, Arial, Helvetica, sans-serif; color:#333;}
#wrap {width:954px; margin:25px auto;}
#header {background:url(http://www.loaditup.de/files/405514.png) no-repeat;
height:207px; }
#logo #sitename {
font-size: 36px;
color: #000000;
display: block;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #C6C6C6;
}
#headercontent h2 {
font-size: 18px;
color: #5B920A;
}
#wrap #header #logo .description {
display: block;
text-align: center;
font-size: 16px;
padding-top: 10px;
}
#wrap #header #headercontent p {
color: #666666;
}
#wrap #header #sitecption {
margin-right: 380px;
margin-left: 380px;
padding-top: 85px;
color: #FFFFFF;
font: bold 16px "Trebuchet MS", halvetica, Verdana, sans-serif;
}
.bigger {
font: 18px "Trebuchet MS", halvetica, Verdana, sans-serif;
color: #C0EC15;
}
#wrap #header #logo {
width: 260px;
padding-top: 50px;
padding-left: 50px;
height: 150px;
float: left;
}
#wrap #header #headercontent {
width: 300px;
float: right;
padding-right: 55px;
padding-top: 60px;
height: 125px;
}
#main {background:url(http://www.loaditup.de/files/405489.png) repeat-y; height:900px; padding:2px
9px 0 9px; margin:0;}
#menus {background:url(http://www.loaditup.de/files/405520.jpg) no-repeat;
width:936px; margin:0 auto 10px auto; height:88px;}#submenu ul {
list-style: none;
}
#submenu li {
display: inline;
}
#submenu a {
background: url() no-repeat left;
display: block;
float: left;
height: 16px;
padding-top: 2px;
padding-right: 15px;
padding-left: 15px;
color: #666666;
text-decoration: none;
}
#mainmenu {
height: 55px;
font: bold 14px "Trebuchet MS", halvetica, Verdana, sans-serif;
text-decoration: none;
text-transform: uppercase;
padding-top: 10px;
padding-right: 22px;
padding-left: 22px;
}
#mainmenu a {
display: block;
height: 40px;
padding-right: 25px;
padding-left: 25px;
float: left;
text-decoration: none;
padding-top: 15px;
background: url(http://www.loaditup.de/files/405492.png) no-repeat 0px 3px;
color: #5B920A;
}
#mainmenu .first a {
background: none;
}
#mainmenu li {
display: inline;
}
#mainmenu a:visited, #mainmenu a:active {text-decoration:none; color: #5B920A;}
#mainmenu #active a {background:url(http://www.loaditup.de/files/405493.gif)
no-repeat center top; color:#fff;}
#wrap #main #content {
padding: 10px;
}
#mainmenu a:hover {color:#fff; background: url(http://www.loaditup.de/files/405493.gif);}
#homeleft {width:480px; float:left;}
#homeright { margin-left:500px; }
h1, h2, h3, h4 { font-family:"Trebuchet MS", halvetica, Verdana, sans-serif;}
h1 {font-size:22px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
h4 {font-size:14px;}
#main h2 {color:#333; display:block; padding:3px 0 8px 0;}
.green {
color: #5B920A;
}
#homeright h3 {
color: #5B920A;
font-weight: normal;
font-size: 14px;
margin-top: 5px;
margin-bottom: 8px;
}
#main p {
line-height: 16px;
margin-bottom: 18px;
}
#homeright .column1 {
width: 31%;
float: left;
padding-right: 5px;
}
#homeright .column3 {
float: left;
width: 32%;
padding-left: 8px;
}
#homeright .column2 {
float: left;
width: 33%;
}
a:visited, a:active {
color: #5B920A;
}
a:hover {
color: #BDEB16;
text-decoration: none;
}
#wrap #footer {
background: url(http://www.loaditup.de/files/405494.png) no-repeat;
height: 70px;
padding-top: 15px;
text-align: center;
color: #666666;
}
#mainmenu ul {list-style:none;}
#submenu a:visited, #submenu a:active {
background: url(background: url(); no-repeat left;
display: block;
float: left;
height: 16px;
padding-top: 2px;
padding-right: 15px;
padding-left: 15px;
color: #666666;
text-decoration: none;
}
#submenu a:hover {
background: url() no-repeat left;
display: block;
float: left;
height: 16px;
padding-top: 2px;
padding-right: 15px;
padding-left: 15px;
color: #000000;
text-decoration: none;
}
#mainmenu .first a:visited, #mainmenu .first a:active {
background: url(http://www.loaditup.de/files/405493.gif);
}
#productlist {
list-style: none;
}
#productlist li {
display: block;
padding: 3px;
border-bottom: 1px solid #eee;
}
.productimage {
float: left;
}
.post .date {
font-size: 10px;
}
.post h3 {
font-size: 14px;
text-transform: uppercase;
display: block;
margin-bottom: 15px;
}
.post {
padding: 5px;
margin-bottom: 15px;
}
#sidebar1 {
float: left;
width: 49%;
}
#sidebar2 {
float: right;
width: 49%;
}
#homeright ul {
list-style: none;
}
#homeright li {
display: block;
border-bottom: 1px solid #eee;
height: 18px;
}
#homeright li a {
display: block;
height: 15px;
padding-top: 2px;
color: #999999;
text-decoration: none;
background: url(http://www.loaditup.de/files/405497.png) no-repeat 0px 3px;
padding-left: 15px;
}
.form {margin:10px 25px 10px 50px;}
.form .text {
display:block;
border:1px solid #666666;
background: #efefef;
width:250px;
padding:5px;
font-size:14px;
color:#000000;
}
.form label {display:block; margin-bottom:3px; margin-top:10px;}
.form .text:hover{background:#FFFFFF; border: solid 1px #000000;}
.form .text:focus {
background:#efefef;
border: 1px solid #669900;
}
.form .button {
display:block;
border:1px solid #666666;
background:#efefef;
padding:5px 10px 5px 10px;
margin:10px 0px 10px 0px;
}
.form .button:hover {
display:block;
border:1px solid #666666;
background: #ffffff;
padding:5px 10px 5px 10px;
margin:10px 0px 10px 0px;
}
#content {
position: absolute;
left: 50%;
top:440px;
margin-left:-440px;
width: 600px;
height: 760px;
padding:10px;
color: #000000;
font-size: 14px;
font-family: Arial;
background-color:#transparent;
background-image:url();
border: 0px solid #C1F3C3;
overflow:auto;
}
Gruß,
jens
Achja, bevor ich´s vergesse. Ich habe im Forum lange gesucht, und hier und da was gefunden, aber das hat nie geklappt. Aber das, was ich jetzt mit BLAU hinterlegt habe, das sollte dafür doch eigentlich zuständig sein, oder ?
______________