Problème de placement d'une <table>

Résolu

shno -
madmyke Messages postés 53100 Date d'inscription Statut Modérateur Dernière intervention - 27 févr. 2013 à 14:20

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 :

<?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();?>

Afficher la suite

A voir également:

Problème de placement d'une <table>
Table ascii - Guide
Table des matières word - Guide
Placer des points sur une carte - Guide
Table des caractères - Guide
Tableau croisé dynamique ou table de pilote - Guide

6 réponses

Réponse 1 / 6

Angelneonizz Messages postés 788 Date d'inscription Statut Membre Dernière intervention 137

Bonjour,

la solution est le CSS, je pense que tu ne pourras pas régler le problème avec une table

Réponse 2 / 6

shno

Ok merci, je vais voir comment je vais faire alors

Réponse 3 / 6

shno

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)

Réponse 4 / 6

shno

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 ?>

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

Angelneonizz Messages postés 788 Date d'inscription Statut Membre Dernière intervention 137

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;
}

Réponse 6 / 6

shno

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

Angelneonizz Messages postés 788 Date d'inscription Statut Membre Dernière intervention 137

essais ça :

#container { 
min-width: 220px; 
max-width: 850px; 
margin: auto; 
}

Change les valeurs en fonction de se que tu souhaites

shno

Tu es un dieux !!!!!!!!!! Merci beaucoup !

Angelneonizz Messages postés 788 Date d'inscription Statut Membre Dernière intervention 137

je n'irais pas jusque là mais de rien

madmyke Messages postés 53100 Date d'inscription Statut Modérateur Dernière intervention 12 241

si si un dieu même moi j'ai compris -)

Angelneonizz Messages postés 788 Date d'inscription Statut Membre Dernière intervention 137

pour que les images soient centré :

.manga img {
display:block;
margin: auto;
}

Discussions similaires

Table des matières dont les titres n'apparaissent pas..

Intégrer une table des annexes et des matières sur word

insérer une table d'illustration

Sommaire + Table des matières + Table des Annexes

WOrd 365 Liste des figures et annexes

Votre réponse

Discussions similaires