Footer Änderung - Problem

[Neuling_1977]

Guten Abend,

ich habe, bzw. ich versuche gerade, mir ein Style für meine Page anzupassen. Dabei handelt es sich um 4poziomSEO_blue.
Ich möchte, das der Footer der unten die Infos anzeigt, komplett Transparent ist.
Die Befehle dafür habe ich auch gefunden allerdings nach dem ändern des Farbcodes in transparent schaut das ganze so aus:

[ externes Bild ]

Einige Zeilen überschneiden sich.

Original schaut es so aus:

[ externes Bild ]

Also alles was weiß ist soll Transparent werden.

In der menu2.css ist der besagt Befehl.

Hier mal der gesamte Original Inhalt der Datei:

Code: Alles auswählen

#hoverpage {font-family: "Lucida Grande", arial, verdana, sans-serif; font-size:76%;}

#hoverpage ul#menu li div p {font-size: 11px; line-height:16px; margin:5px 0 15px 0;}
#hoverpage ul#menu li div h2 {line-height:1em; color:#000; font-size:1.5em; font-weight:normal; margin-top:0;}
#hoverpage ul#menu li div h3 {line-height:1em; color:#666; font-size:1.2em; font-weight:normal; margin-top:0;}
#hoverpage ul#menu li div h3.clear {clear:left;}

#hoverpage {width:814px; height:240px; border:1px solid #E5E4DB;  background-color: #FBFAF6; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; position:relative; z-index:200; overflow:hidden; text-align:left;}

#hoverpage ul#menu {background:transparent; padding:0; margin:0;list-style:none;}

#hoverpage ul#menu li.page {display:inline;} /* needed for IE to function correctly */

#hoverpage ul#menu li.page a.menuitem {text-decoration:none;}

#hoverpage ul#menu li.page i {position:absolute; font-size:1.5em; display:block; height:25px; line-height:25px; padding-right:10px; right:650px; background-color: #F6F5F0; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; cursor:default; z-index:500; text-align:right; text-decoration:none; color:#666; font-style:normal; cursor:pointer; width:120px; border:1px solid #E5E4DB;}

#hoverpage ul#menu li.p1 i {top:30px;}
#hoverpage ul#menu li.p2 i {top:55px;}
#hoverpage ul#menu li.p3 i {top:80px;}
#hoverpage ul#menu li.p4 i {top:105px;}
#hoverpage ul#menu li.p5 i {top:130px;}

#hoverpage ul#menu li.page div {display:block; width:814px; height:250px; padding:25px; font-weight:normal; color:#444;  background-color: #FBFAF6; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; }

#hoverpage ul#menu li div img {border:0px solid #E5E4DB; float:right; margin:0 60px 5px 0;}
#hoverpage ul#menu li div p.big {line-height:1em; color:#687532; font-size:1.3em;  text-decoration:none; }
#hoverpage ul#menu li div a, #hoverpage ul#menu li div a:visited {color:#267DD6; text-decoration:none;}
#hoverpage ul#menu li div em {display:block; width:200px; height:230px; float:left;}

#hoverpage ul#menu li.page div a:hover {  color: #ABC43B; text-decoration:bold;}
#hoverpage ul#menu li.page a.menuitem:hover { color: #ABC43B; white-space:bold;} /* for IE6 */

#hoverpage ul#menu li.click div {position:absolute; left:0; top:0;}
#hoverpage ul#menu li.click a i,
#hoverpage ul#menu li.click a:visited i
{color:#267DD6; font-weight:bold;}

#hoverpage ul#menu div ul li {line-height:20px; color:#256; list-style-type:disc;}
#hoverpage ul#menu div ul li a,
#hoverpage ul#menu div ul li a:visited
{line-height:20px; color:#c00;}

#hoverpage ul#menu div dl dd {line-height:20px; font-size:1.1em; color:#448;}
#hoverpage ul#menu div dl dt {line-height:30px; color:#333;}

Ich ändere folgenen Code:

Code: Alles auswählen

#hoverpage {width:814px; height:240px; border:1px solid #E5E4DB;  background-color: #FBFAF6; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; position:relative; z-index:200; overflow:hidden; text-align:left;}

In:

Code: Alles auswählen

#hoverpage {width:814px; height:240px; border:1px solid #E5E4DB;  background-color: #transparent; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; position:relative; z-index:200; overflow:hidden; text-align:left;}

sowie:

Code: Alles auswählen

#hoverpage ul#menu li.page div {display:block; width:814px; height:250px; padding:25px; font-weight:normal; color:#444;  background-color: #FBFAF6; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; }

In:

Code: Alles auswählen

#hoverpage ul#menu li.page div {display:block; width:814px; height:280px; padding:25px; font-weight:normal; color:#444;  background-color: #transparent; border-top: 1px #ffffff solid; border-left: 1px #ffffff solid; }

Danach sieht es wie auf Bild 1 aus.
Übersehe ich einen Befehl oder mache ich was falsch?
Auch die .pngs für Wer ist Online, Statistik und Geburtstage liegen dann alle übereinander. Also sie Überschneiden sich.


Hoffe, Ihr habt tips für mich!


MFG und besten Dank

[PatrickS3]

Versuche zuerst mal folgendes:

background-color: #transparent;

ersetzen durch

background-color: transparent;

Die Angabe mit dem #-Zeichen gilt nur für Farben, nicht für das Attribut transparent.

[schattenblind]

Ich weiß ja nicht, ob sich das in allen Styles so unterscheidet, aber definiter nicht none eine tranzparente Farbe?

[Neuling_1977]

Erstmal Danke für eure zwei Antworten.

Leider hat keines der beiden etwas geändert. Das Problem besteht weiterhin......

[PatrickS3]

Dann ersetze die Farbe des Feldes (standardmässig ja #FFFFFF) durch die Farbe des Hintergrundes, dann schaut es aus wie transparent.


Ein Link zum Forum wäre bei solchen Anfragen immer extrem hilfreich, da man als Helfender so probieren könnte, was funktioniert und was nicht (mit Firebug).

[Talk19zehn]

Hi, es käme auf einen Versuch an:

Code: Alles auswählen

#hoverpage ul#menu li.click div {
    left: 0;
    position: absolute;
    top: 0;
}

menu2.css

Code: Alles auswählen

#hoverpage ul#menu li.page div {
    background-color: transparent;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    color: #444444;
    display: block;
    font-weight: normal;
    height: 250px;
    padding: 25px;
    width: 814px;
}

Die Notation "postition: absolute" könnte sozusagen im Verdachtsmoment "absolut falsch" positioniert sein? Wirklich nur so ein Verdacht....

Code: Alles auswählen

#hoverpage ul#menu li.click div {
    left: 0;
    top: 0;
}

Löst die Löschung, das Auskommentieren der Zeile dein Problem im Zusammenhang der Notation:

Code: Alles auswählen

#hoverpage {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: transparent;
    border-color: #FFFFFF #E5E4DB #E5E4DB #FFFFFF;
    border-right: 1px solid #E5E4DB;
    border-style: solid;
    border-width: 1px;
    height: 240px;
    overflow: hidden;
    position: relative;
    text-align: left;
    width: 814px;
    z-index: 200;
}

in jeglicher Darstellung?

Beste Grüße - und doch ohne Gewähr -