Problème de placement d'une <table>
Résolu
Bonjour,
Je vous expose mon problème : mon but premier était de "coller" deux images entre elles horizontalement avec une marge. J'ai donc voulu le faire par CSS mais c'est bien trop dur et chiant. Je me suis donc penché vers l'outil <table> et ça marche !
Voici la page : http://yakusoku-fansub.com/wp/?page_id=105
Le seul hic c'est que, si quelqu'un réduit la page, le tableau déborde de la div principale (http://puu.sh/29aa7). Et donc c'est très laid !
Connaîtriez-vous un moyen de régler ce problème ?
Et voici mon code :
Je vous expose mon problème : mon but premier était de "coller" deux images entre elles horizontalement avec une marge. J'ai donc voulu le faire par CSS mais c'est bien trop dur et chiant. Je me suis donc penché vers l'outil <table> et ça marche !
Voici la page : http://yakusoku-fansub.com/wp/?page_id=105
Le seul hic c'est que, si quelqu'un réduit la page, le tableau déborde de la div principale (http://puu.sh/29aa7). Et donc c'est très laid !
Connaîtriez-vous un moyen de régler ce problème ?
Et voici mon code :
<?php get_header(); ?>
<section id="omc-main-full-width" class="omc-full-width">
<article id="omc-full-article">
<?php $tours = 0; ?>
<table id="anime">
<?php $loop = new WP_Query( array( 'post_type' => 'anime', 'posts_per_page' => 10 ) );
while ( $loop->have_posts() ) : $loop->the_post();
$tours = $tours + 1;
$mykeys_valuess = get_post_custom_values('wpcf-lien');
foreach ( $mykeys_valuess as $keys => $values );
echo " ";
echo'<td><center><h2><a href="'.$values.'"> ';
the_title();
echo'</a></h2>';
$mykey_values = get_post_custom_values('wpcf-imagee');
foreach ( $mykey_values as $key => $value ) {
echo '<a href="'.$values.'"><img src="'.$value.'" width="140"/></a></center></td>';
if ($tours % 5 == 0) {
echo '<tr></tr>';} }
endwhile; ?>
</table>
</article><!-- /omc-full-article -->
</section><!-- /omc-main -->
<br class="clear" />
</div> <!-- end of #container -->
<?php get_footer();?>
6 réponses
-
Bonjour,
la solution est le CSS, je pense que tu ne pourras pas régler le problème avec une table
-
Ok merci, je vais voir comment je vais faire alors
-
J'ai essayer de faire ça :
<style> div.miniature { width: 100px; height: 100px; margin: 10px; float: left; } </style> <?php $loop = new WP_Query( array( 'post_type' => 'anime', 'posts_per_page' => 10 ) ); while ( $loop->have_posts() ) : $loop->the_post(); $mykeys_valuess = get_post_custom_values('wpcf-lien'); foreach ( $mykeys_valuess as $keys => $values ); echo'<div class="miniature"><h2><a href="'.$values.'"> '; the_title(); echo'</a></h2>'; $mykey_values = get_post_custom_values('wpcf-imagee'); foreach ( $mykey_values as $key => $value ) { echo '<a href="'.$values.'"><img src="'.$value.'" width="140"/></a></div>'; } endwhile; ?>
Mais les images ce retrouvent toutes empiler les unes sur les autres. (http://puu.sh/29aCy) -
J'ai finalement réussi à le faire en css de manière un peux bizarre. Mais je me retrouve encore avec le problème des images qui dépassent de la div principale : http://yakusoku-fansub.com/wp/?page_id=127
Quelqu'un aurait une idée ?<?php $tours = 0; ?> <?php $loop = new WP_Query( array( 'post_type' => 'anime', 'posts_per_page' => 10 ) ); while ( $loop->have_posts() ) : $loop->the_post(); $mykeys_valuess = get_post_custom_values('wpcf-lien'); foreach ( $mykeys_valuess as $keys => $values ); echo'<div style="position: absolute; margin-left:'.$tours.'px;"><h2><a href="'.$values.'">'; the_title(); echo'</a></h2>'; $tours = $tours + 240; $mykey_values = get_post_custom_values('wpcf-imagee'); foreach ( $mykey_values as $key => $value ) { echo '<a href="'.$values.'"><img src="'.$value.'" width="140"/></a></div>'; } endwhile; ?><?php echo $tours ?> -
ton CSS est vraiment zarb ;)
voila ce que je ferais :
le code html :<div id="container"> <div class="manga"> titre du manga<br> <img src="img1.jpg"> </div> <div class="manga"> titre du manga<br> <img src="img2.jpg"> </div> <div class="manga"> titre du manga<br> <img src="img3.jpg"> </div> <div class="manga"> titre du manga<br> <img src="img4.jpg"> </div> <div class="manga"> titre du manga<br> <img src="img5.jpg"> </div> <div class="manga"> titre du manga<br> <img src="img6.jpg"> </div> </div>
le css:#container { width: 850px; margin: auto; } .manga { width: 200px; height: 300px; float: left; background-color:#00CCCC; margin: 10px; }
-
Malheureusement même problème, dès qu'on reduit la page sur le coter les images débordent.
http://yakusoku-fansub.com/wp/?page_id=127
