Schriftfarbe wird online falsch angezeigt.

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

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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:

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Offensichtlich ist dies das fragliche CSS:
Code:
.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';
}
und dort hast Du die Farbe auf blau-violett gesetzt. Möglicher Weise ein Fehler nur in der Vorschau?
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
Hast Du vielleicht auch das HTML dazu? Oder, da Du es ja online hast, der Link zu der Seite?
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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 :/
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.508
297
83
66
OK, dann kannst Du natürlich keinen Link posten.
Mit HTML meinte ich so etwas wie dieses (z. B.):
<img src="dein-pfad/dein-bild.jpg">
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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/form/anonymous/api/library/018bbc8c-af9f-4d15-a24b-152c63eb013b/document/c48ff014-d0ae-4085-bba1-b8fae85506e0/media/Bild Überblick_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/Überblick" 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 Methoden_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 Panorama_2 - 16_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 im BhP" 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 Events_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';
}

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>
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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?
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
: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
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
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.
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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?
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
...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.
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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ß.
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
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?
 

Christina94

Neues Mitglied
12 November 2019
12
0
1
25
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...
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
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.
 

Sailor

Aktives Mitglied
14 Juli 2017
442
53
28
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?
 
Werbung: