Helpmij.nl
Helpmij.nl
Helpmij.nl

Quote

Weergeven resultaten 1 tot 10 van 10

Onderwerp: Kleurverloop

  1. #1
    Junior Member
    Geregistreerd
    25 januari 2022
    Locatie
    Waar m'n schip ligt.
    Vraag is opgelost

    Kleurverloop

    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
    Code:
    #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.
    Laatst aangepast door bron : 24 juni 2022 om 16:21

  2. #2
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Probeer het zo eens?
    Code:
      background-image: linear-gradient(#f0ffff, #bfefff);
    Was voorheen: PHP4U

  3. #3
    Junior Member
    Geregistreerd
    25 januari 2022
    Locatie
    Waar m'n schip ligt.
    Quote Origineel gepost door Aar Bekijk Bericht
    Probeer het zo eens?
    Code:
      background-image: linear-gradient(#f0ffff, #bfefff);
    Helaas. Dit werkte ook niet.

  4. #4
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Hier wel, dan moet je elders eens kijken naar je HTML-code
    Was voorheen: PHP4U

  5. #5
    Junior Member
    Geregistreerd
    25 januari 2022
    Locatie
    Waar m'n schip ligt.
    [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.

  6. #6
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Hier werkt het perfect:
    https://jsfiddle.net/ryspwtjb/

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

    Code:
    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);
     }
    Laatst aangepast door Aar : 24 juni 2022 om 16:18
    Was voorheen: PHP4U

  7. #7
    Mega Honourable Senior Member Aar's avatar
    Geregistreerd
    3 augustus 2014
    Quote Origineel gepost door GerardX Bekijk Bericht
    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.
    Was voorheen: PHP4U

  8. #8
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Nederland
    Oplossing van Aar zou moeten werken. Syntax
    Code:
    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)
    Laatst aangepast door bron : 24 juni 2022 om 16:30
    Bestaande- en nieuwe websites op smartphone, tablet en pc.

  9. #9
    Junior Member
    Geregistreerd
    25 januari 2022
    Locatie
    Waar m'n schip ligt.
    Quote Origineel gepost door Aar Bekijk Bericht
    En een kleurverloop (gradient) is geen kleur. Dit wordt bij CSS gewoon gezien als een background-image.
    Gesnapt.

  10. #10
    Junior Member
    Geregistreerd
    25 januari 2022
    Locatie
    Waar m'n schip ligt.
    Quote Origineel gepost door bron Bekijk Bericht
    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.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren