14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)
  • Q:
    Bijdrager
    vanWoods

    CSS lijn boven woord + kleur van lijn?!

    hallo, hierbij een css vraagje:

    Ik heb op een website allemaal koppen staat hierboven moet een lijn komen dit gaat wel lukken, hoe geef je aan dat de lijn precies zo lang als de lengte van je tekst moet worden?

    Kan deze lijn ook een andere kleur krijgen dan de tekst?!

    Dit is m’n code[code:1:3383b1e7cb]<style>
    h1{
    border-top: 6px solid #000;
    }
    </style>

    </head>

    <body>
    <h1>Item one</h1>
    </body>[/code:1:3383b1e7cb]

    Alvast bedankt! :)

    Bijdrager
    Sen

    [code:1:53f70f975d]h1
    {
    text-decoration: overline;
    }
    [/code:1:53f70f975d]
    Anders kleuren kan niet denk ik met text-decoration.

    Bijdrager
    roelboekel.nl

    Je kan ook eventueel de optie: overline gebruiken. Deze is meer bedoel om een streep boven tekst te zetten.
    [code:1:01f969f6a8]
    h1 {
    text-decoration: overline;
    }
    [/code:1:01f969f6a8]

    Roel

    //–

    Toch eens sneller leren typen…

    Bijdrager
    vanWoods

    juist die overline optie is natuurlijk veel beter!! Thnx :D

    Maar kan ik die lijn nu ook een andere kleur geven dan de tekst??

    Bijdrager
    tricksel

    Helaas, dat is niet mogelijk.

    Wat je dan evt. zou kunnen doen is een backgroundplaatje maken en die toewijzen aan de h1/span/div/whatever…

    Bijdrager
    vanWoods

    hmm jammer…. dan moet ik dat maar met een background image doen inderdaad!!

    bedankt voor de info!!

    Bijdrager
    tennapel

    Je kan ook dit doen:
    [code:1:826f23e32c]<h1><span>tekst</span></h1>[/code:1:826f23e32c]

    en je CSS
    [code:1:826f23e32c] h1 { text-decoration : overline; color : red; }
    h1 span { color : blue }[/code:1:826f23e32c]

    Nadeel is een extra semantisch lege <span>. Je kan ook op je H1 een border-top doen met een afwijkende kleur en dan de breedte van de div beperken door een position : relative aan je h1 toe te voegen

    Bijdrager
    OReason

    [code:1:e8de1d6a65]
    <html>
    <head>
    <title>lala</title>
    <style>
    h1 {
     border-top: 6px solid #000;
    display: inline;
    }
    </style>
    </head>
    <body>
        <h1>Item one</h1>
    </body>
    </html>
    [/code:1:e8de1d6a65]

    Bijdrager
    Remco Vermeer

    Als je em inline doet moet je volgens mij wel zelf voor de linebreak zorgen.

    Bijdrager
    OReason

    Klopt.

    Bijdrager
    vanWoods
    ”OReason”

    [code:1:a35857b18f]
    <html>
    <head>
    <title>lala</title>
    <style>
    h1 {
     border-top: 6px solid #000;
    display: inline;
    }
    </style>
    </head>
    <body>
        <h1>Item one</h1>
    </body>
    </html>
    [/code:1:a35857b18f]

    Als ik deze code gebruik dan zie ik alleen maar tekst!! hoe kan dat nou….?

    Bijdrager
    XXX

    heb je de code gecopied & paste ?
    dat werkt idd niet, even de code overtypen en het werkt gewoon.

    Bijdrager
    tennapel

    Heb je toevallig op de body een line-height gedefinieerd in pixels? Dan zie je de border niet omdat deze buiten het kader van de hoogte valt. Definieer line-heights daarom altijd als percentage of in ‘em’ waarde/

    Bijdrager
    vanWoods
    ”XXX”

    heb je de code gecopied & paste ?
    dat werkt idd niet, even de code overtypen en het werkt gewoon.

    Dat klopt inderdaad als je hem overtikt dan werkt ie wel!!

    Thnx voor jullie hulp!!

    :D

14 berichten aan het bekijken - 1 tot 14 (van in totaal 14)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.