WordPress pagination blijft zichtbaar

lerrie · 21 sep 2012

Bij mijn wordpress blog heb ik het aantal posts per pagina beperkt tot 5. Als er meer posts opstaan verschijnt er balk met "oudere berichten", als je naar de oudere berichten gaat komt er uiteraard een balk met "nieuwere berichten". Normaal gesproken is er maar 1 van de 2 balken per pagina zichtbaar maar bij mij blijft er een heel klein stukje van 1 van beide balken zichtbaar. Hoe kan ik dit oplossen? Hierbij de css

Code:

.ouder {
	zmargin-left: 100px;
	background-color: #a3122e;
	float: left;
	text-align: center;
	vertical-align: middle;
	margin-left: 100px;
	color: #000;
	font-family: Raavi;
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
	overflow: hidden;
}
.ouder a {
	color: #000;
}
.nieuwer {
	zmargin-left: 100px;
	background-color: #a3122e;
	float: right;
	text-align: center;
	vertical-align: middle;
	color: #000;
	font-family: Raavi;
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
	overflow: hidden;
	height: auto;
	width: auto;
}
.nieuwer a {
	color: #000;
}

Tha Devil · 21 sep 2012

Beste "lerrie",

Ik heb je vraag verplaatst van "Dreamweaver" naar "CMS".
Daarnaast helpt het vaak wanneer je de code ook ergens online hebt staan zodat mensen het probleem zelf kunnen zien.

Met vriendelijke groet,
Stefan (Tha Devil)
Moderator Helpmij.nl

carlotruck · 24 sep 2012

Hoi,

Kun je ook een plaatje uploaden van de pagina, of een linkje, dat werkt iets makkelijker.

Hier al een foutje:

Code:

.ouder {
	[COLOR="#FF0000"]zmargin-left: 100px;[/COLOR] < Hoort dit "zmargin" te zijn???
	background-color: #a3122e;
	float: left;
	text-align: center;
	vertical-align: middle;
[COLOR="#FF0000"]	margin-left: 100px;[/COLOR] < Deze staat er 2 keer (zie bovenste rode)
	color: #000;
	font-family: [COLOR="#FF0000"]Raavi; [/COLOR] < Dit is geen websafe font, dus gebruikers zonder dit font kunnen die niet zomaar zien in dit lettertype, tenzij je dit bijvoorbeeld hebt embedded in je site...je kunt dit beter aanpassen als dit niet het geval is.

	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
	overflow: hidden;
}
.ouder a {
	color: #000;
}
.nieuwer {
	zmargin-left: 100px;
	background-color: #a3122e;
	float: right;
	text-align: center;
	vertical-align: middle;
	color: #000;
	font-family: Raavi;
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
	overflow: hidden;
	height: auto;
	width: auto;
}
.nieuwer a {
	color: #000;
}

Als je ook even een linkje naar de site plaatst, kan ik er even naar kijken voor je.

Gr. Carlo

lerrie · 25 sep 2012

Beste Carlotruck,

De zmargin was een fout, deze heb ik er uit gehaald. Verder hou ik hetzelfde resultaat. Ik heb een een afbeelding toegevoegd.

De css:

Code:

.ouder {
	background-color: #a3122e;
	float: left;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #000;
	font-family: Raavi;
	overflow: hidden;
	margin-left: 100px;
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
}
.ouder a {
	color: #000;
}
.nieuwer {
	background-color: #a3122e;
	float: right;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	color: #000;
	font-family: Raavi;
	overflow: hidden;
	margin-right: 100px;
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
}
.nieuwer a {
	color: #000;
}

Oftopic: de font wordt uiteraard door een webfont vervangen.

carlotruck · 25 sep 2012

Hoi,

Heb je even een linkje naar je website? PM of mail mag ook. Werkt iets makkelijker : )

lerrie · 25 sep 2012

Website staat op een localhost. Dus helaas niet.

carlotruck · 25 sep 2012

Oke, zal even voor je kijken. Je hoort nog van me!

Kun je de andere code ook even plaatsen? En de volledige CSS?

Tha Devil · 25 sep 2012

@carlotruck: Contact houden we liever via het forum zodat iedereen bij kan dragen.

Daarnaast verzoek ik je jouw bericht in het vervolg aan te passen wanneer je een toevoeging hebt in plaats van een nieuwe reactie te plaatsen.

Ik heb deze keer je berichten samengevoegd.

Met vriendelijke groet,
Stefan (Tha Devil)
Moderator Helpmij.nl

carlotruck · 25 sep 2012

@Tha Devil

Is prima, wist ik niet dat dat de bedoeling was : )

Als @lerrie de codes even online kan zetten, kan ik er even naar kijken. Dat werkt wel zo gemakkelijk.

lerrie · 25 sep 2012

De gehele code online zetten wordt lastig omdat het om een wordpress website gaat. De pagination wordt dus aangeroepen door een php functie van wordpress. verder is de opbouw van de site vrij basic. De pagination staat in een content div en thats it!

carlotruck · 25 sep 2012

@lerrie

Als je de code van de desbetreffende div even wil plaatsen, kan ik even kijken of daar nog fouten in zitten. Dus alleen dat deel ervan : )

lerrie · 25 sep 2012

PHP:

<?php get_header(); ?>
  	<div id="outtop">
		<div id="top">
        	<div class="socmenu"><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/facebook.jpg" class="socialitem" width="32" height="32" /></a><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.jpg" width="32" height="32" class="socialitem" /></a><a href="http://www.fiatteger.nl/contact"><img src="<?php bloginfo('template_directory'); ?>/images/mail.jpg" width="32" height="32" class="socialitem" /></a></div>
            <div class="header"><img src="<?php bloginfo('template_directory'); ?>/images/fiatpagina2.jpg" width="840" height="190" /></div>
      	</div>
  	</div>
 	<div id="outmidden">
  		<div id="midden">
        	<div id="contentlarge">
           		<div class="kop">
               		<p class="koptitel">nieuws</p>
                  	<p>U bent hier: <a href="#">Home</a> / Nieuws</p>
				</div>
                <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
               		<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
                    <div id="newspost">
        				<div class="newsdate">
                			<p class="day"><?php the_time('j'); ?></p>
                			<p class="month"><?php the_time('M'); ?></p>
                		</div>
             			<div class="newscontent">
                			<p class="koptitel"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>                
                			<p><?php the_content('// Lees meer'); ?></p>
                            <p><?php edit_post_link('Bericht aanpassen', '<p>', '</p>'); ?></p>
                		</div>
           				<div class="newsinfo">
                			<?php the_post_thumbnail( 'news-thumbnail' ); ?>
                		</div>    
             		</div>                  
                    </div>
               	 	<?php endwhile; ?>
                	<div class="navigation">
                    	<p class="ouder"><?php next_posts_link('Oudere berichten') ?></p>
                    	<p class="nieuwer"><?php previous_posts_link('Nieuwere berichten') ?></p>
                    <div style="clear: both;"><!-- ! --></div>   
                </div>
                <?php else : ?>
					<p>Niet gevonden. Sorry, maar we hebben niks gevonden.</p>
             	<?php endif; ?>
            </div>
            <div style="clear: both;"><!-- ! --></div>
   		</div>
<?php get_footer(); ?>

csshunter · 25 sep 2012

Hoi lerrie,
Je screenshotje van post #4 in een tekenprogramma opmeten en vergelijken met de css-code uit de startvraag blijkt voldoende. Rest niet nodig!

Zo wel de .ouder als de .nieuwer heeft een padding:

Code:

.ouder {
	...
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
}
.nieuwer {
	...
	padding-top: 3px;
	padding-right: 30px;
	padding-bottom: 3px;
	padding-left: 30px;
}

Geef je geen invulling met tekst aan die containers, dan blijft de padding (met de background-color) over!

Boven+beneden = 6px
Links+rechts = 60px.
Precies de maten van het spookblokje in je screenshot. :d

Ergo: no padding, no trouble.

Wil je toch een padding, dan is dat waarschijnlijk op te lossen door 'm op de link binnen de <p> te zetten:

Code:

.ouder a,
.nieuwer a {
     padding: 3px 30px;
     }

Eventueel met de bijbehorende achtergrondkleur, en/of met extra margin-top/margin-bottom voor de <p>'s, via de margins van de twee classes.

Met vriendelijke groet,
CSShunter

lerrie · 25 sep 2012

Het is ook zo makkelijk! Wederom bedankt!

lerrie · 26 sep 2012

@csshunter: heb je een e-mail adres waarop ik je kan bereiken. Ik zit met een probleem welke ik niet graag als forum post zet.

WordPress pagination blijft zichtbaar

lerrie

Gebruiker

Tha Devil

Moderator

carlotruck

Gebruiker

lerrie

Gebruiker

carlotruck

Gebruiker

lerrie

Gebruiker

carlotruck

Gebruiker

Tha Devil

Moderator

carlotruck

Gebruiker

lerrie

Gebruiker

carlotruck

Gebruiker

lerrie

Gebruiker

csshunter

Meubilair

lerrie

Gebruiker

lerrie

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy