Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

overlapped navigation WordPress

  • SOLVED

hi! on this page:
http://fdmed.org/category/recetas/

<strong>the text to the right of the image is cut and overlapped navigation, How I can fix-it?
</strong>

there are a very similar coded archive and has not the same problem:
http://fdmed.org/category/noticias/


the Code:


<?php get_header(); ?>
<div class="authorbox"><h1><?php _e('ARXIU DE ','newsplus'); ?><?php single_cat_title(); ?></i></h1>
<?php echo category_description(); ?></div>
<?php get_sidebar(); ?>

<div class="archivebox">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div style="float:left;margin-bottom:10px;"><div class="thumblist"><?php if ( has_post_thumbnail()) : ?><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?> </a> <?php endif; ?></div><div style=""><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> (<?php the_time('d M y') ?>)</h1><span class="linetwo"><?php echo get_post_meta($post->ID, 'descripcion', $single=true) ?><br><?php if( get('elaboracion')) { echo "".__('Temps d´elaboració:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'elaboracion', $single=true) ?> - <?php if( get('tiempo_de_coccion')) { echo "".__('Temps de cocció:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'tiempo_de_coccion', $single=true) ?>- <?php if( get('total')) { echo "".__('Temps total:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'total', $single=true) ?><br><?php _e('Etiquetes:','newsplus'); ?><?php the_tags(' ', ', ' ); ?></span></div></div>

<?php endwhile; ?>

<div class="navigation">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>
<?php else : ?>
<h5><?php _e('Not Found','newsplus'); ?></h5>
<div class="line"></div>
<br style="clear:both;margin-bottom:5px;" />
</div>
<?php endif; ?>

<?php get_footer(); ?>


thanks!

Answers (5)

2011-05-10

Jens Filipsson answers:

Try this instead:

<?php get_header(); ?>

<div class="authorbox"><h1><?php _e('ARXIU DE ','newsplus'); ?><?php single_cat_title(); ?></i></h1>

<?php echo category_description(); ?></div>

<?php get_sidebar(); ?>



<div class="archivebox">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div style="float:left;margin-bottom:10px;"><div class="thumblist"><?php if ( has_post_thumbnail()) : ?><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?> </a> <?php endif; ?></div><div style=""><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> (<?php the_time('d M y') ?>)</h1><span class="linetwo"><?php echo get_post_meta($post->ID, 'descripcion', $single=true) ?><br><?php if( get('elaboracion')) { echo "".__('Temps d´elaboració:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'elaboracion', $single=true) ?> - <?php if( get('tiempo_de_coccion')) { echo "".__('Temps de cocció:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'tiempo_de_coccion', $single=true) ?>- <?php if( get('total')) { echo "".__('Temps total:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'total', $single=true) ?><br><?php _e('Etiquetes:','newsplus'); ?><?php the_tags(' ', ', ' ); ?></span></div></div>



<?php endwhile; ?>

<br style="clear:both;" />

<div class="navigation">

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

</div>

<?php else : ?>

<h5><?php _e('Not Found','newsplus'); ?></h5>

<div class="line"></div>

<br style="clear:both;margin-bottom:5px;" />

</div>

<?php endif; ?>



<?php get_footer(); ?>



Albert Ariza comments:

hi Jens!
thanks, the overlapping is ok
but the text at the right of the images is still cut.

2011-05-10

Christianto answers:

Open file style.css on your theme directory
for text cut add this to your style.css

.archivebox>div{
width: 100%
}

for the navigation
Add clear: both on .navigation on line 1169

.navigation {
clear: both;
color: #666;
float: left;
padding: 10px 0px 0px;
}

no extra markup needed


Christianto comments:

Hi Albert,

for the cut text right to the images, it because the container width of your text is not specified and the element is float.

Have you tried my suggestion?
Thanks


Christianto comments:

Hi Albert,

In case you miss it I posted it again..

Open file style.css on your theme directory
for text cut add this to your style.css

.archivebox>div{
width: 100%
}

for the navigation
Add <strong>clear:both</strong> on .navigation on line 1169

.navigation {
clear: both;
color: #666;
float: left;
padding: 10px 0px 0px;
}


Let me know if it works..
Thanks


Albert Ariza comments:

wow! sorry... i didn´t see it! gonna try!


Albert Ariza comments:

hi Cristianto!

it does not work... maybe my css file...

can i add it directly to the php?
something like...

div style="float:left;margin-bottom:10px;"><div class="thumblist"><?php if ( has_post_thumbnail()) : ?><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?> </a> <?php endif; ?></div><div style="<strong>width=100%</strong>"><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> (<?php the_time('d M y') ?>)</h1><span class="linetwo"><?php echo get_post_meta($post->ID, 'descripcion', $single=true) ?><br><?php if( get('elaboracion')) { echo "".__('Temps d´elaboració:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'elaboracion', $single=true) ?> - <?php if( get('tiempo_de_coccion')) { echo "".__('Temps de cocció:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'tiempo_de_coccion', $single=true) ?>- <?php if( get('total')) { echo "".__('Temps total:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'total', $single=true) ?><br><?php _e('Etiquetes:','newsplus'); ?><?php the_tags(' ', ', ' ); ?></span></div></div>


Christianto comments:

It's better if the style write in css file, but here if you want to style it inline..

<?php get_header(); ?>

<div class="authorbox"><h1><?php _e('ARXIU DE ','newsplus'); ?><?php single_cat_title(); ?></i></h1>

<?php echo category_description(); ?></div>

<?php get_sidebar(); ?>

<div class="archivebox">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div style="float:left;margin-bottom:10px;width:100%"><div class="thumblist"><?php if ( has_post_thumbnail()) : ?><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_post_thumbnail(); ?> </a> <?php endif; ?></div><div style=""><h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> (<?php the_time('d M y') ?>)</h1><span class="linetwo"><?php echo get_post_meta($post->ID, 'descripcion', $single=true) ?><br><?php if( get('elaboracion')) { echo "".__('Temps d´elaboració:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'elaboracion', $single=true) ?> - <?php if( get('tiempo_de_coccion')) { echo "".__('Temps de cocció:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'tiempo_de_coccion', $single=true) ?>- <?php if( get('total')) { echo "".__('Temps total:','newsplus').""; } ?> <?php echo get_post_meta($post->ID, 'total', $single=true) ?><br><?php _e('Etiquetes:','newsplus'); ?><?php the_tags(' ', ', ' ); ?></span></div></div>

<?php endwhile; ?>

<div class="navigation" style="clear:both;">

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

</div>

<?php else : ?>

<h5><?php _e('Not Found','newsplus'); ?></h5>

<div class="line"></div>

<br style="clear:both;margin-bottom:5px;" />

</div>

<?php endif; ?>

<?php get_footer(); ?>

Hope this help..


Albert Ariza comments:

GREAT! thanks Cristianto!


Albert Ariza comments:

sorry... one more question, :)
how can I assign you the money?
tutorial about that does not work...
and it´s my first time asking... :(
any other tutorial around here?

bytheway! lovely site! really usefull! thanks!

2011-05-10

Baki Goxhaj answers:

Add <em><strong>clear: both;</strong></em> to .navigation class.

2011-05-10

Vidyut Kale answers:

Working fine for me. What exactly is the problem?

2011-05-10

Pali Madra answers:

Seems like this has been fixed.

Please advise Albert.


Albert Ariza comments:

yes... sorry!
i think the problem is my english... :(

I have made the changes by Jens and the overlapped navigation is ok.
But the text at the right of the images is still cut...


Pali Madra comments:

Thanks Albert.


However, the problem is that I'm not able to see the problem you are facing (or I'm too stupid to understand the problem)

I feel it is not your language that is the problem but the fact we who do not know Spanish cannot see clearly what you mean.

May I request you to take a screenshot and point out what you mean. Sorry for bothering you but I think this way we will know exactly what you are saying.


Albert Ariza comments:

hi Pali,
yes... i send you an screenshot to show what i mean!
sorry... and thanks!