Kleurverloop

[GerardX]

Ik wil zowel het kop- als het voetdeel van een webstek in wording een kleurverloop geven. De kop bevat een horizontaal menu met klikbare afbeeldingen.
Voor de kop heb ik de stijl

#kop {
    background: linear-gradient (#f0ffff, #bfefff);
}

Dat bleek perfect te werken. Vervolgens heb ik deze stijl gekopieerd en daarna "kop" door "voet" vervangen en andere kleuren gekozen, maar helaas. Wat ik ook probeer ik krijg geen verlopende kleuren. Wat doe ik fout?

Oh ja, wanneer ik slechts de kleur 'grey' als waarde opgeef, krijg ik keurig die kleur.

[Aar]

Probeer het zo eens?

  background-image: linear-gradient(#f0ffff, #bfefff);

[GerardX]

Probeer het zo eens?

  background-image: linear-gradient(#f0ffff, #bfefff);

Helaas. Dit werkte ook niet.

[Aar]

Hier wel, dan moet je elders eens kijken naar je HTML-code

[GerardX]

[QUOTE=Aar;6330264]Hier wel,[quote]
Vreemd. Mijn "voet"deel is geen afbeelding (image). Vandaar dat ik jouw suggestie op zich niet zo logisch vond, maar niet geschoten ...

dan moet je elders eens kijken naar je HTML-code

Lijkt me ook niet logisch omdat er wel een grijze kleur getoond wordt wanneer ik als stijldeclaratie "background: grey;"" opgeef. Nietemin toch gekeken en daar staat simpel
<div id="voet">
Hier moet nog tekst komen.
</div>
Die tekst wordt gewoon in groen uitgevoerd omdat ik die kleur in de "#voet"-stijl heb opgegeven. Er is dus wel een relatie tussen de html en css maar de eerder genoemde "background: linear-gradient();"wordt niet uitgevoerd terwijl dat een kopie van elders is, die daar wel werkt (dus is het ook erg onwaarschijnlijk, dat er sprake is van een type-fout, toch?
Ik schrijf mijn html en css via Geany, dus vallen type-fouten en onvolkomenheden ook snel op. Maar ... niettemin, het werkt niet.

[Aar]

Hier werkt het perfect:
https://jsfiddle.net/ryspwtjb/

1
2
3
4
5
6
7
<div id="kop">
Dit is de kop.
</div>
 
<div id="voet">
Dit is de voet
</div>

div {
  font-size: 30px;
  padding: 5px;
  margin: 3px;
}

#kop {
 background-color: #f0ffff;
 background-image: linear-gradient(#f0ffff, #bfefff);
 }
 
 #voet {
 background-color: #f0ffff;
 background-image: linear-gradient(#f0ffff, #bfefff);
 }

[Aar]

Vreemd. Mijn "voet"deel is geen afbeelding (image). Vandaar dat ik jouw suggestie op zich niet zo logisch vond, maar niet geschoten ...

En een kleurverloop (gradient) is geen kleur. Dit wordt bij CSS gewoon gezien als een background-image.

[bron]

Oplossing van Aar zou moeten werken. Syntax

background-image: linear-gradient ( [direction,] color1, color2 [, colorN]  );

Belangrijk is dat de div een width en height heeft (of dat er tags in staan met een width en height)

[GerardX]

En een kleurverloop (gradient) is geen kleur. Dit wordt bij CSS gewoon gezien als een background-image.

Gesnapt.

[GerardX]

Belangrijk is dat de div een width en height heeft (of dat er tags in staan met een width en height)

Dat bleek ook het probleem niet. De hoogte staat op 5em en de breedte op 100%.

Maar raad eens? Nadat ik wat had zitten rommelen, werkte het ineens wel zoals gewenst. Ik heb een donkerbruin vermoeden, dat nadat ik de kop-stijl had gekopieerd en ik de kleurwaarden had veranderd, ik een punt i.p.v. een komma tussen die waarden heb getypt. Die toetsen zitten vlak naast elkaar en een misaanslag is dus zo gemaakt. Zolang iets niet correct is, blijft Geany het navolgende in gewone zwarte tekst tonen, maar dit blijkt niet wanneer je een punt i.p.v. een komma typt. Je kunt natuurlijk niet alles hebben en het is een les voor een volgende keer om juist die punten en komma's als eerste te controleren.

Bedankt voor je inzet.