• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schriftfarbe wird online falsch angezeigt.

Christina94

Neues Mitglied
Hallo zusammen,

ich bearbeite derzeit eine Website und habe 6 Container, bestehend aus Bidler, in zwei Reihen designt und ein mouseover drüber gelegt. Beim mouseover über die Bild-Container erscheint ein Wort welches in weiß angezeigt werden soll. Online auf der Website kommt die Schrift in blau..kann mir jemand helfen und sagen an was das liegt? Bin nämlich langsam echt verzweifelt...

Hier meine html text:

.line {
position: relative;
width: 100%;
float: left;
display: inline;
}

.container1 {
position: relative;
width: 30%;
float: left;
margin-left: 0%;
margin-bottom: 0%;
box-shadow: silver 0px 0px 10px;
}

.container2 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}

.container3 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}
.image {
display: block;
width: 100%;
height: auto;
opacity: 1;
}

.overlay1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}

.container1:hover .overlay1 {
opacity: 0.5;
}


.overlay2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container2:hover .overlay2 {
opacity: 0.5;
}

.overlay3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}

.container3:hover .overlay3 {
opacity: 0.5;
}


.text {
color: black;
font-size: 2em;
position: absolute;
text-align: center;
bottom: 5%;
left: 5%;
right: 5%;
opacity: 1;
transition: 10.5s ease;
font-family: 'Bosch Office Sans';
font-weight: bold;
}

.text-overlay {
color: blueviolet;
font-size: 2.8em;
line-height: 2.9;
position: absolute;
top: 70%;
left: 5%;
right: 10%;
text-align: right;

opacity: 0;
transition: .5s ease;
font-family: 'Bosch Office Sans';
}

all-content.a {
text-decoration: none;
}

a:link {
color: white;
text-decoration: none;
}

a:visited {
color: white;
text-decoration: none;
}

a:hover {
color: white;
font-weight: lighter;
text-decoration: none;
}

.container1:hover .text-overlay{
opacity: 1;
}

.container2:hover .text-overlay {
opacity: 1;
}
.container3:hover .text-overlay {
opacity: 1;
}
}
</style>




Vielen Dank schon einmal für eure Hilfe!!

Liebe Grüße Christina
 
Zuletzt bearbeitet:
Werbung:
Habe die Farbe auf weiß geändert, blau-violett hatte ich zum testen drin sorry .. Aber trotz weiß wird es online blau angezeigt ....
 

Anhänge

  • Mouseover.pdf
    164 KB · Aufrufe: 4
Meinst du das?

.text-overlay {
color: white;
font-size: 2.8em;
line-height: 2.9;
position: absolute;
top: 70%;
left: 5%;
right: 10%;
text-align: right;

opacity: 0;
transition: .5s ease;
font-family: 'Bosch Office Sans';
}

einen Link zur Seite kann ich euch nicht schicken,da es eine Unternehmensinterne Website ist :/
 
Werbung:
Also das ganze was hier folgt habe ich bisher 1:1 auf der Webiste im Feld HTML-Quelltext reinkopiert . Ist das falsch?

<div class="line">
<div class="container1">
<img src="https://connect.bosch.com/files/for...e85506e0/media/Bild Überblick_geschnitten.jpg" alt="news" class="image" />

<div class="overlay1"></div>
<div class="text-overlay">
<a href="https://connect.bosch.com/wikis/hom...bdca0c7_41b7_a64a_b3806c7deb17/page/Überblick" target="_blank">Überblick<br />

</a>

</div>
</div>
<div class="container2">
<img src="https://connect.bosch.com/files/for...f2ddc6ad3/media/Bild Methoden_geschnitten.jpg" alt="news" class="image" />
<div class="overlay2"></div>
<div class="text-overlay">
<a href="https://connect.bosch.com/wikis/hom...8bdca0c7_41b7_a64a_b3806c7deb17/page/Methoden" target="_blank">Methoden<br /></a>

</div>


</div>
<div class="container3">
<img src="https://connect.bosch.com/files/for...11fa2e4/media/active-bicycle-bike-2830163.jpg" alt="news" class="image" />
<div class="overlay3"></div>
<div class="text-overlay">
<a href="https://connect.bosch.com/wikis/hom...dca0c7_41b7_a64a_b3806c7deb17/page/Starthilfe" target="_blank">Starthilfe<br /></a>

</div>

</div>
</div>
<div class="line">
<div class="container1"> <img src="https://connect.bosch.com/files/for...edia/Immenstadt_DSC1405 Panorama_2 - 16_9.jpg" alt="news" class="image" />
<div class="overlay1"></div>
<div class="text-overlay">
<a href="https://connect.bosch.com/wikis/hom...7_41b7_a64a_b3806c7deb17/page/Anwender im BhP" target="_blank">Anwender im BhP<br />
</a> </div>
</div>
<div class="container2"> <img src="https://connect.bosch.com/files/for...f63dd4de5b4/media/Bild Events_geschnitten.jpg" alt="news" class="image" />
<div class="overlay2"></div>
<div class="text-overlay">
<a href="https://connect.bosch.com/wikis/hom...658bdca0c7_41b7_a64a_b3806c7deb17/page/Events" target="_blank">Events<br />
</a> </div>
</div>
<div class="container3"> <img src="https://connect.bosch.com/files/for...e-6a478cfe7795/media/Workshop_geschnitten.jpg" alt="news" class="image" />
<div class="overlay3"></div>
<div class="text-overlay">
<a href="https://connect.bosch.com/wikis/hom...8bdca0c7_41b7_a64a_b3806c7deb17/page/Training" target="_blank">Training<br />
</a> </div>
</div>
</div>
<style>


.line {
position: relative;
width: 100%;
float: left;
display: inline;
}

.container1 {
position: relative;
width: 30%;
float: left;
margin-left: 0%;
margin-bottom: 0%;
box-shadow: silver 0px 0px 10px;
}

.container2 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}

.container3 {
position: relative;
width: 30%;
float: left;
margin-left: 1.5%;
margin-bottom: .5%;
box-shadow: silver 0px 0px 10px;
}
.image {
display: block;
width: 100%;
height: auto;
opacity: 1;
}

.overlay1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}

.container1:hover .overlay1 {
opacity: 0.5;
}


.overlay2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.container2:hover .overlay2 {
opacity: 0.5;
}

.overlay3 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}

.container3:hover .overlay3 {
opacity: 0.5;
}


.text {
color: black;
font-size: 2em;
position: absolute;
text-align: center;
bottom: 5%;
left: 5%;
right: 5%;
opacity: 1;
transition: 10.5s ease;
font-family: 'Bosch Office Sans';
font-weight: bold;
}

.text-overlay {
color: white;
font-size: 2.8em;
line-height: 2.9;
position: absolute;
top: 70%;
left: 5%;
right: 10%;
text-align: right;

opacity: 0;
transition: .5s ease;
font-family: 'Bosch Office Sans';
}

all-content.a {
text-decoration: none;
}

a:link {
color: white;
text-decoration: none;
}

a:visited {
color: white;
text-decoration: none;
}

a:hover {
color: white;
font-weight: lighter;
text-decoration: none;
}

.container1:hover .text-overlay{
opacity: 1;
}

.container2:hover .text-overlay {
opacity: 1;
}
.container3:hover .text-overlay {
opacity: 1;
}
}
</style>
 
ich kenn mich absolut nicht mit CSS und html aus ... das CSS von mir ist eine Vorlage welche ich einfach nur ausgefüllt habe mit meinen Inhalten... was kommt denn dann im Teil /*hier deine Formatierungen*/ rein?
 
Werbung:
:wink:... sorry... ich bin davon ausgegangen, dass du, da du dich um eine Webseite kümmerst, diese Grundlagen schon kennst.
Mache einfach folgendes..
suche in deinem jetzigen CSS nach dem Eintrag
CSS:
.text-overlay {
color: white;
font-size: 2.8em;
line-height: 2.9;
position: absolute;
top: 70%;
left: 5%;
right: 10%;
text-align: right;
opacity: 0;
transition: .5s ease;
font-family: 'Bosch Office Sans';
}
und dort in der ersten Zeile, wo jetzt nur .text-overlay steht, fügst du ein 'a' hinzu... also so .text-overlay a
 
Hmmm... ok... dann versuche folgendes...
Lösche das 'a' wieder aus der Zeile und füge direkt unterhalb dieses CSS Eintrages - also noch der schließenden geschweiften Klammer '}' folgendes ein...
CSS:
.text-overlay a {
color: white;
}
Du siehst schon, ohne einen direkten Zugriff auf deinen Quellcode ist eine Hilfe zu deinem Problem ziemlich spekulativ.
 
Werbung:
Vielen Dank für die Hilfe. :)

Das hat leider auch nichts gebracht. Ich hab eher die Vermutung, dass es am Browser liegt, kann das sein?
 
...dass es am Browser liegt, kann das sein?
Eher nicht - meine Vermutung ist, dass da ein Fehler in deinem CSS ist oder dass du eine nicht aktuelle Version deiner Seite siehst. Hast du den Browser Cache mal geleert und die Seite dann aktualisiert?
Poste doch bitte mal den jetzigen aktuellen Stand deines CSS und nutze hier im Forum zum einfügen die Einfügefunktion... die befindet sich in der Kopfzeile des Editorfensters da, wo die 3 Punkte (...) sind.
 
CSS:
<div class="line">
  <div class="container1">
<img src="https://connect.bosch.com/files/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/c48ff014-d0ae-4085-bba1-b8fae85506e0/media/Bild%20%C3%9Cberblick_geschnitten.jpg"  alt="news" class="image" />
          
        <div class="overlay1"></div> 
        <div class="text-overlay">
          <a href="https://connect.bosch.com/wikis/home?lang=de-de#!/wiki/W80658bdca0c7_41b7_a64a_b3806c7deb17/page/%C3%9Cberblick" target="_blank">Überblick<br />
            
            </a>
                
            </div>                         
    </div>
    <div class="container2">
            <img src="https://connect.bosch.com/files/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/6f75fd19-6432-4bb0-8a0a-b28f2ddc6ad3/media/Bild%20Methoden_geschnitten.jpg" alt="news" class="image" />
            <div class="overlay2"></div> 
            <div class="text-overlay">
                <a href="https://connect.bosch.com/wikis/home?lang=de-de#!/wiki/W80658bdca0c7_41b7_a64a_b3806c7deb17/page/Methoden" target="_blank">Methoden<br /></a>
                
            </div>                         
    
                
            </div>   
    <div class="container3">
            <img src="https://connect.bosch.com/files/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/b636aa19-ee86-40d9-bf14-9f39f11fa2e4/media/active-bicycle-bike-2830163.jpg" alt="news" class="image" />
            <div class="overlay3"></div> 
            <div class="text-overlay">
                <a href="https://connect.bosch.com/wikis/home?lang=de-de#!/wiki/W80658bdca0c7_41b7_a64a_b3806c7deb17/page/Starthilfe" target="_blank">Starthilfe<br /></a>
                
            </div>                         
                
      </div>                         
</div>
<div class="line">
  <div class="container1"> <img src="https://connect.bosch.com/files/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/5d2028d8-ea44-42c9-9a9a-d78377b1aa2f/media/Immenstadt_DSC1405%20Panorama_2%20-%2016_9.jpg" alt="news" class="image" />
    <div class="overlay1"></div>
    <div class="text-overlay">
        <a href="https://connect.bosch.com/wikis/home?lang=de-de#!/wiki/W80658bdca0c7_41b7_a64a_b3806c7deb17/page/Anwender%20im%20BhP" target="_blank">Anwender im BhP<br />
    </a> </div>
  </div>
  <div class="container2"> <img src="https://connect.bosch.com/files/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/a25b5e2f-b203-4260-a025-4f63dd4de5b4/media/Bild%20Events_geschnitten.jpg" alt="news" class="image" />
    <div class="overlay2"></div>
    <div class="text-overlay">
    <a href="https://connect.bosch.com/wikis/home?lang=de-de#!/wiki/W80658bdca0c7_41b7_a64a_b3806c7deb17/page/Events" target="_blank">Events<br />
    </a> </div>
  </div>
  <div class="container3"> <img src="https://connect.bosch.com/files/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/174494bc-39aa-45c1-acfe-6a478cfe7795/media/Workshop_geschnitten.jpg" alt="news" class="image" />
    <div class="overlay3"></div>
    <div class="text-overlay">
    <a href="https://connect.bosch.com/wikis/home?lang=de-de#!/wiki/W80658bdca0c7_41b7_a64a_b3806c7deb17/page/Training" target="_blank">Training<br />
    </a> </div>
  </div>
</div>
<style>
    

.line {
    position: relative;
    width: 100%;
    float: left;
    display: inline;
}

.container1 {
    position: relative;
    width: 30%;
    float: left;
    margin-left: 0%;
    margin-bottom: 0%;
    box-shadow: silver 0px 0px 10px;
  }

  .container2 {
    position: relative;
    width: 30%;
    float: left;
    margin-left: 1.5%;
    margin-bottom: .5%;
    box-shadow: silver 0px 0px 10px;
  }
 
.container3 {
    position: relative;
    width: 30%;
    float: left;
    margin-left: 1.5%;
    margin-bottom: .5%;
    box-shadow: silver 0px 0px 10px;
  }
  .image {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
  }

  .overlay1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: black;
  }

  .container1:hover .overlay1 {
    opacity: 0.5;
  }

 
  .overlay2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: black;
  }
.container2:hover .overlay2 {
    opacity: 0.5;
  }

.overlay3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: black;
  }
 
 .container3:hover .overlay3 {
    opacity: 0.5;
  }
 
 
  .text {
    color: black;
    font-size: 2em;
    position: absolute;
    text-align: center;
    bottom: 5%;
    left: 5%;
    right: 5%;
    opacity: 1;
    transition: 10.5s ease;
    font-family: 'Bosch Office Sans';
    font-weight: bold;
  }

  .text-overlay {
    color: white;
    font-size: 2.8em;
    line-height: 2.9;
    position: absolute;
    top: 70%;
    left: 5%;
    right: 10%;
    text-align: right;

    opacity: 0;
    transition: .5s ease;
    font-family: 'Bosch Office Sans';
  }
  .text-overlay a {
      color:white;
      }
  all-content.a {
    text-decoration: none;
  }
 
  a:link {
    color: white;
    text-decoration: none;
  }
 
  a:visited {
    color: white;
    text-decoration: none;
  }
 
  a:hover {
      color: white;
    font-weight: lighter;
    text-decoration: none;
  }

  .container1:hover .text-overlay{
    opacity: 1;
  }

  .container2:hover .text-overlay {
    opacity: 1;
  }
.container3:hover .text-overlay {
    opacity: 1;
  }
}
</style>


Den Cache meines Browsers habe ich gelöscht und die Seite aktualisiert, aber die Schrift ist nach wie vor blau und nicht weiß.
 
Werbung:
Dein Code funktioniert einwandfrei... hat er wahrscheinlich schon immer, wenn mein Verdacht richtig ist ;)!
Aber eins nach dem anderen... am Ende deiner Style-Definition hast du zweimal eine schließende geschweifte Klammer .. }}.. da darf nur eine Klammer sein.
Aber wichtiger - und das ist mein Verdacht - du hast die Reihenfolge der Elemete im HTML Grundgerüst nicht eingehalten... in dieser Struktur muss die <style>... </style> Deklaration innerhalb des <head>... </head> Bereiches positioniert sein. Bei dir sieht es so aus, als wäre der <style>... </style> irgendwo hinter deinem HTML Code im <body>.
Stimmt meine Vermutung?
 
Habe die geschweifte Klammer entfernt und meine Style-Definition in ein Head-Bereich positioniert und das ganze nochmal auf der Website eingegeben. Leider ist die Schrift immer noch blau. ABER mir ist aufgefallen, dass wenn ich auf der Website mir das Ganze nicht als HTML-Quelltext zeigen lasse, sonder im Rich text dann ist die Schriftfarbe in der Vorschau weiß. Nur sobald ich auf speichern gehe wird die Farbe in blau angezeigt.. ich bin langsam echt am verzweifeln...
 
Eigentlich ist es an mir, verzweifelt zu sein... denn ich habe keine Ahnung, was du machst?
Von welcher Vorschau sprichst du.. lokal in deinem Browser(?)... mit irgendeinem Editorprogramm(?)
Wie bekommst du eine Anzeige auf 'Rich Text' umgestellt ???
Außerdem... dein Code funktioniert tadellos! Schau mal hier:
https://jsfiddle.net/e9usqwLp/
Was ich hier nur gemacht habe, ist dem Body eine Hintergrundfarbe zu geben, damit man die weiße Schrift sieht (Zeile 8-10).
Dann kannst du den Code, den wir letztlich eingefügt haben (Zeile 133-135) wieder löschen, denn es hat ja vorher schon funktioniert.
Mit den Farbangaben in den Zeilen 142, 147 und 152 kannst du die Schriftfarbe deiner Links bestimmen.
 
Werbung:
Das hilft mir jetzt nicht wirklich weiter :(. Ich sehe, was du mir zeigen willst, aber ich weiß nicht, mit welchem Browser/Programm du das machst.
Und vor allem verstehe ich nicht, warum es bei dir offensichtlich trotz richtigem Code - siehe Fiddle - nicht so funktioniert, wie es soll?
Wie läuft denn der Fiddle bei dir? Wird da die Farbe richtig angezeigt oder sind da auch Probleme?
 
Ich mach das in Firefox und es ist ein Editor auf unserer Website der da integriert ist.
Im Fiddle wird bei mir die Farbe korrekt angezeigt. Ich kann mir nicht erklären wieso es nur nach dem "Speichern" in blau angezeigt wird... Hab auch schon unsere IT-ler gefragt und keiner kann mir sagen wieso die Schrift blau ist..
 
Werbung:
Ich kann es mir auch nicht erklären - ist vielleicht eine Macke dieses Editors, den du da nutzt.
Mir fallen dazu jetzt nur noch 2 Dinge ein, die man versuchen könnte.
1. Ergänze mal die Farbanweisungen im CSS durch '!important'.. also so..
CSS:
      a:link {
        color: white !important;
        text-decoration: none;
      }

      a:visited {
        color: white !important;
        text-decoration: none;
      }

      a:hover {
        color: white !important;
        font-weight: lighter;
        text-decoration: none;
      }
2. Lies mal den Quellcode der ausgelieferten Seite... also das, was tatsächlich nach dem Speichern beim Browser ankommt. Dazu einfach auf der fehlerhaften Seite im FireFox mit der rechten Maustaste klicken und 'Seitenquelltext anzeigen' auswählen. Diesen ganzen Quelltext dann mal kopieren und hier einfügen.
 
Mit dem Eintrag "!important! hat es endlich funktioniert!!! :D Tausend Dank!!!!
Der Seitenquelltext ist zu lang um ihn hier einzufügen :/
 
Zurück
Oben