Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Links willen niet gestijld worden

playermijp
8 antwoorden
  • Hallo,

    Ik ben weer een pak verder met mijn thema voor Wordpress en na mijn vorige probleem (zie mijn vorige topic) loop ik weer tegen een stom probleem. Als ik bv de link naar de volgende post (in Single.PHP) probeer te stijlen dan maak ik de nodige wijzigingen in het css bestand, maar de link blijft er steeds hetzelfde uitzien. Het 'id' van de links is "fast-nav". Als ik nu in mijn css bestand volgende regels toevoeg verandert er niks aan de links.
    [code:1:7dca2342ce]
    #fast-nav {
    a:link {color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 15px;}
    a:hover {color: #4B4949;
    font-family: 'Happy Monkey', serif;
    font-size: 15px;}
    a:visited {color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 15px;}
    [/code:1:7dca2342ce]

    Wat doe ik fout? Dit probleem treedt op bij vele links

    PS: Het font dat ik gebruik komt van Google Web Fonts, kan dit er iets mee te maken hebben?
  • Je kunt CSS niet nesten zoals je nu doet. Als je de "buitenste" declaratie herschrijft moet het lukken.[code:1:d237897f24]
    a#fast-nav:link {
    color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 15px;
    } [/code:1:d237897f24]

    - Bas
  • Ok, erg bedankt. Het is de eerste keer dat ik een thema voor Wordpress probeer te maken en ik ben nog nooit zo intensief met CSS en PHP bezig geweest.

    EDIT: Ik heb het getest maar er verandert nog steeds niks aan de volgende/vorige links. Ook heb ik dan later a#fast-nav:link { vervangen door [b:6eaf956149]nav[/b:6eaf956149]#fast-nav:link { omdat ik als openingstag nav gebruik.
  • Hier is de volledige code van bv mijn index.php

    [code:1:153b97af97]
    <?php get_header(); ?>

    <div id="main">
    <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="posttitle" <?php post_class();?>>
    <h1 id="posttitle"><a href="<?php the_permalink (); ?>"><?php the_title(); ?></a></h1>
    <p id="inhoud"><?php the_content(''); ?></p>
    <div class="post-info">
    <ul>
    <li class="date"><?php the_time('jS F Y'); ?></li>
    <li class="category">Posted in <?php the_category (', '); ?></li>
    <li class="read_more"><a href="<?php the_permalink (); ?>">Read More</a></li>
    </ul>
    </div>
    </div>
    <hr>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, maar er kon niets gevonden worden wat aan je criteria voldoet.'); ?></p>
    <?php endif; ?>
    </div>

    <?php get_sidebar(); ?>


    </div>

    <div id="delimiter"></div>

    <?php get_footer(); ?>
    [/code:1:153b97af97]

    en dit is mijn css:
    [code:1:153b97af97]
    body {
    text-align: center;
    background: #f5f5f5 url(source/background.png);;
    }

    h1 {
    font-family: 'Happy Monkey', cursive;
    color: #787878;
    font-size: 30px;
    }
    #main {
    border: 1px solid #e6e6e6;
    overflow: hidden;
    box-shadow: 0px 0px 5px #d8d8d8;
    -moz-box-shadow: 0px 0px 5px #d8d8d8;
    -webkit-box-shadow: 0px 0px 5px #d8d8d8;
    }
    #inhoud {
    font-family: 'Merriweather', serif;
    font-size: 16px;
    color: #000000;
    }
    .sidebartitle{
    font-family: 'Happy Monkey', cursive;
    color: #787878;
    font-size: 30px;
    }
    ul {
    font-family: 'Happy Monkey', cursive;
    color: #787878;
    font-size: 15px;
    text-align: left;
    }
    li.date {
    list-style: none;
    }
    li.category {
    list-style: none;
    }
    li.read_more {
    list-style: none;
    }
    #post-info {
    font-family: 'Happy Monkey', cursive;
    color: #000000;
    font-size: 15px;
    text-align: left;
    }
    #posttitle {
    text-align: center;
    font-family: 'Happy Monkey', serif;
    color: #787878;
    font-size: 20px;
    }
    div#posttitle:link {
    color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 20px;
    }
    div#posttitle:hover {
    color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 20px;
    }
    div#posttitle:visited {
    color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 20px;
    }
    a#fast-nav:link {
    color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 15px;
    }
    #wrapper {
    display: block;
    width:90%;
    margin:0px auto;
    background-color: #FFFFFF;
    }

    #header {
    background-color: #FFFFFF;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    box-shadow: 0px 0px 5px #d8d8d8;
    -moz-box-shadow: 0px 0px 5px #d8d8d8;
    -webkit-box-shadow: 0px 0px 5px #d8d8d8;
    }

    #content {
    width: 75%;
    float: left;
    background-color: #FFFFFF;
    font-family: 'Merriweather', serif;
    text-align: left;
    }

    #sidebar {
    width: 23%;
    float: right;
    background-color: #FFFFFF;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    box-shadow: 0px 0px 5px #d8d8d8;
    -moz-box-shadow: 0px 0px 5px #d8d8d8;
    -webkit-box-shadow: 0px 0px 5px #d8d8d8;
    }

    #delimiter {
    clear: both;
    background-color: #FFFFFF;
    }

    #footer {
    background-color: #FFFFFF;
    font-family:'Happy Monkey', cursive;
    color: #787878;
    font-size: 16px;
    a:link {color: #787878;}
    a:hover {color: #4B4949;}
    a:visited {color: #787878;}
    }
    #credit {
    font-family:'Happy Monkey', cursive;
    font-size: 16px;
    }
    #sitetitle {
    font-family: 'Happy Monkey', cursive;
    font-size: 40px;
    color: #4B4949;
    a:link {color: #787878; text-decoration:none;}
    a:hover {color: #4B4949; text-decoration:none;}
    a:visited {color: #787878; text-decoration:none;}
    }
    #sitedescription {
    font-family: 'Happy Monkey', cursive;
    font-size: 20px;
    color: #4B4949;
    }
    a {
    font-family: 'Happy Monkey', cursive;
    font-size: 15px;
    }

    .title {
    font-size: 11pt;
    font-family: verdana;
    font-weight: bold;
    }
    [/code:1:153b97af97]

    Zie je wat ik verkeerd doe? Want ik krijg het niet werkend. Ik zou bijvoorbeeld de stijl van de div met id=posttitle willen veranderen.
  • De PHP-code is niet interessant, het gaat om het resulterende HTML en CSS. Ik zie in je PHP-code bijvoorbeeld nergens een nav-element staan. Dus graag even de relevante code plaatsen, dat helpt wat makkelijker.

    - Bas
  • Dit is de code met mijn nav:
    [code:1:6e4e22bb92]
    <?php get_header(); ?>
    <div id="main">
    <div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="post">
    <h1 id="posttitle"><?php the_title(); ?></h1>
    <p id="inhoud"><?php the_content(''); ?></p>
    <div id="post_nav">

    </div>
    <div class="post-info">
    <ul>
    <li class="date"><?php the_time('jS F Y'); ?></li>
    <li class="category">Posted in <?php the_category (', '); ?></li>
    <li class="read_more"><a href="<?php the_permalink (); ?>">Read More</a></li>
    </ul>

    </div>
    <nav id='fast-nav'>
    <span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Vorige', 'Too Simple' ) ); ?></span>
    <span class="nav-next"><?php next_post_link( '%link', __( '<span class="meta-nav">&rarr;</span> Volgende', 'Too Simple' ) ); ?></span>
    </nav>
    </div>
    <?php comments_template (); ?>
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, maar er kon niets gevonden worden wat aan je criteria voldoet.'); ?></p>
    <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
    <div id="delimiter"></div>
    <?php get_footer(); ?>
    [/code:1:6e4e22bb92]

    Ik heb wel al ontdekt dat jouw methode wel werkt met gewone links, maar als ik links gebruik die wordpress dynamisch moet aanmaken (zoals bv [b:6e4e22bb92] <?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Vorige', 'Too Simple' ) ); ?>[/b:6e4e22bb92]) dan werkt het niet. Toch al erg bedankt voor je hulp tot hier toe.
  • Waarom doe je het dan niet zo?
    [code:1:5080d53084]nav a:link {
    color: #787878;
    font-family: 'Happy Monkey', serif;
    font-size: 15px;
    }[/code:1:5080d53084]

    - Bas
  • Wat me ook opvalt, is dat in je CSS dit staat:
    [code:1:afad4a5afb]a#fast-nav:link { [/code:1:afad4a5afb]
    En de HTML doet dit:
    [code:1:afad4a5afb]<nav id='fast-nav'> …. <a>[/code:1:afad4a5afb]
    M.a.w. De selector in je CSS wijst naar een <a> die de ID "fast-nav" heeft meegekregen. (Hij gaat dus op zoek naar: <a id="fast-nav">

    En in je HTML heb je een omvattend element <nav> met ID "fast-nav" waarin een <a> voorkomt.

    M.a.w. de selector van je CSS klopt niet.
    Dat zou dan iets moeten zijn als wat Bas zegt, of
    [code:1:afad4a5afb]nav#fast-nav a:link {[/code:1:afad4a5afb]of iets dergelijks

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.