Mouseovereffect en email link.

[marian]

Ik heb via CSS het mouseovereffect voor mijn links ingevoerd. Alles werkt perfect alleen bij email wordt het vakje wel wit maar de tekst ontbreekt. Bij de gewone links koppel je het betreffende html bestand aan de tekst die je wil linken maar hoe gaat dat met het emailadres?? Daar voer je het emailadres in en klikt op vakje dit is een emailadres...
Het emailvlakje verandert wel van kleur net als de rest maar het woord email staat er zo niet in. Hoe kan ik dit veranderen??

groeten Marian

[ByteWarrior]

Ik snap je vraag niet helemaal denk ik. Een e-maillink krijgt net dezelfde opmaak in CSS als andere links (standaard). Je moet natuurlijk wel zien dat de tekstkleur ook verandert, anders kan het zijn dat de tekst zelf onzichtbaar wordt als je met de muis over de link gaat.

Kan je misschien een voorbeeldpagina online zetten? Dat zou helpen...

[marian]

Hoi Ben,
Ik heb de 2 pagina's van de site on-line gezet de url is: http://www.mcccoolcare.nl
De links lichtten allemaal wit op toen hij on-line was (behalve de tekst van de email link dus maar nadat ik de link droogijsreiniging had aangeklikt kwam het witte vlak bij de mouseover niet meer?? Heb de andere links nog niet geactiveerd door te publiceren dus kun je zien wat ik bedoel (hoop ik)
Ben ook maar beginnelingetje dus .....
Groet Marian

[ByteWarrior]

Code: Selecteer alles

<a href="mailto:info@mcccoolcare.nl"><span style="color: rgb(255, 255, 255);">E-mail</span></a><br>

Hierboven de code die betrekking heeft op de e-mail link.
Je zegt hier het volgende tegen de browser:
- het is een link ( < a > tag)
- die link maak je wit met het hover effect in CSS dmv a:hover
- dan zeg je: maak de tekst altijd wit:

Code: Selecteer alles

<span style="color: rgb(255, 255, 255);"

Dus wat je ook zegt in de CSS: je overschrijft het met wat er in de HTML staat. Vandaar dat de tekst wit blijft.

Het is al niet slecht, maar je zou eigenlijk helemaal geen opmaak in de HTML mogen steken als je met CSS werkt. De bedoeling is:
- tekst => HTML
- opmaak => CSS

Al de rgb(... etc) kan dus vervangen worden door CSS. Dit houdt in dat je webpagina's maar half zo groot gaan zijn en dat de broncode beter leesbaar is.

Bekijk de broncode eens van deze pagina en vergelijk: http://www.csszengarden.com/ . Rechts kun je verschillende stijlen kiezen. De HTML blijft hetzelfde, enkel de CSS wijzigt.

[nirwana]

Ik denk dat er een heel subtiel verschil zit tussen bijvoorbeeld de link naar impressie en de email-link. Vergelijk de codes maar eens goed met elkaar:

Impressie:

Code: Selecteer alles

<a href="impressie.html">Impressie</a><span style="color: rgb(255, 255, 255);"></span>

Email:

Code: Selecteer alles

<a href="mailto:info@mcccoolcare.nl"><span style="color: rgb(255, 255, 255);">E-mail</span></a>

De Impressie-link is nog een gewone link. Bij de email-link staat binnen in de link nog een span met een witte kleuraanduiding (zoals Bytewarrior al aangaf). Daardoor krijgt de ene link dus nog wel de CSS-regels mee, maar de laatste link wordt altijd wit gekleurd. Het krijgt nog wel het hover-effect mee, maar de tekst erin moet wit-gekleurd blijven, want dat heb je nu eenmaal nadrukkelijk aan de browser verteld. Nou ja, je hebt het vast niet zo bedoeld, maar zo staat het nu wel in de HTML-code.

Daarom sluit ik me bij Bytewarrior aan: zoveel mogelijk opmaakregels in het CSS-bestand. Dan hoef je enkel die klassen te gebruiken in je webpagina en zo blijft je code veel netter en voorkom je dit soort fouten.

[marian]

Pffff, hoe meer informatie ik krijg hoe meer de moed me in de schoenen zakt verder te gaan
Ik heb de opmaak van de lay-out opgezet met tabellen dus staat alles in HTML... Daarna wilde ik die bepaalde effecten en heb ik die in de pagina ingevoerd door css 'bewerken' te hanteren maar dat gaat dus blijkbaar niet samen begrijp ik??
De volgende vraag is misschien een hele domme maar moet ik die standaard layout zoals ik deze heb gemaakt in css maken en hoe doe je dat dan in de NVU editor? Moet ik blok voor blok invoeren (in HTML) en dan in de bron de HTML veranderen in CSS? Ik wil de layout namelijk graag zo houden....
Groet Marian

[rebil]

Tabellen dienen in principe niet voor opmaak, dus daar had je beter met lagen gewerkt. Maar dat is je probleem nu niet.

Ik ken Nvu niet zo goed, dus ik kan je niet zeggen hoe het daar precies in zijn werk gaat. Als je in de HTML kijkt zie je daar een style element waar je CSS in zit. Dat moet je knippen en plakken in een apart bestand, bv. stijl.css. Vervolgens zet je in de headsectie:

Code: Selecteer alles

<link rel="stylesheet" title="normaal" href="stijl.css" type="text/css" />

In de andere pagina's vervang je dan gewoon het style element door die link.

Daarna moet je de stijlinformatie uit alle tags halen en vervangen door classes met bijhorend blok in je CSS-bestand. Een voorbeeld:

Code: Selecteer alles

      <h3 style="margin-left: 40px; color: rgb(255, 255, 255);"><small><span style="font-weight: bold;">Het principe van CO&sup2;
reinigen:</span><span style="font-weight: bold;"></span><br>

      </small></h3>

      <small> </small>
      <div style="margin-left: 40px; color: rgb(255, 255, 255);"><small><span style="font-weight: bold;"> </span>Zoals in
onderstaand voorbeeld aangegeven, zitten vuil<br>

en water diep in de pori&euml;n van het oppervlak. Met
chemicali&euml;n<br>

is men in staat een deel van de pori&euml;n te reinigen.<span style="font-weight: bold;"></span><br>

      <span style="font-weight: bold;"> </span><br>

      <span style="font-weight: bold;">&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img style="width: 250px; height: 95px;" alt="doorsnee porie" src="Watervuil.jpg"></span><br>

      <span style="font-weight: bold;"> </span><br>

      <span style="font-weight: bold;"> </span>Daar
het van essentieel belang is om, ongeacht welke vorm<br>

van conservering er wordt toegepast, de pori&euml;n geheel te
reinigen,<br>

geeft CO&sup2; (droogijs) reiniging 'de oplossing' daar deze het<br>

betreffende oppervlak tot in het diepst reinigt.<span style="font-weight: bold;"></span><span style="font-weight: bold;"></span><br>

      <span style="font-weight: bold;"> </span></small></div>

      <small> </small>

wordt dan

Code: Selecteer alles

<h3 class="titel">Het principe van CO&sup2; reinigen:</h3>

<p>
      Zoals in onderstaand voorbeeld aangegeven, zitten vuil
      en water diep in de pori&euml;n van het oppervlak. Met chemicali&euml;n
      is men in staat een deel van de pori&euml;n te reinigen.

      <div class="afbeelding">
         <img width="250px" height="95px" alt="doorsnee porie" src="Watervuil.jpg">
      </div>

      Daar het van essentieel belang is om, ongeacht welke vorm
      van conservering er wordt toegepast, de pori&euml;n geheel te reinigen,
      geeft CO&sup2; (droogijs) reiniging 'de oplossing' daar deze het
      betreffende oppervlak tot in het diepst reinigt.
</p>

en in je CSS:

Code: Selecteer alles

.titel
{
margin-left: 40px;
font-weight: bold;
font-size: larger;
}

.afbeelding
{
text-align: center;
}

Let op: dit gaat er niet helemaal hetzelfde uitzien als wat je nu hebt omdat ik er maar een stukje heb uitgenomen. Dit kan je dus best uitproberen met een kopie van je website. Als je verder hulp nodig hebt, vraag je het maar.