Sujet Précédent Sujet Suivant

Problème de placement d'une <table>

Résolu/Fermé
shno - Modifié par shno le 27/02/2013 à 11:37
madmyke Messages postés 53080 Date d'inscription dimanche 20 janvier 2008 Statut Modérateur Dernière intervention 24 juillet 2024 - 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();?>





6 réponses

Réponse 1 / 6
Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
27 févr. 2013 à 11:41
Bonjour,

la solution est le CSS, je pense que tu ne pourras pas régler le problème avec une table
0
Réponse 2 / 6
shno
27 févr. 2013 à 11:53
Ok merci, je vais voir comment je vais faire alors
0
Réponse 3 / 6
shno
27 févr. 2013 à 12:10
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)
0
Réponse 4 / 6
shno
Modifié par shno le 27/02/2013 à 12:43
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 ?>
0

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 mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
27 févr. 2013 à 13:22
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;
}

0
Réponse 6 / 6
shno
27 févr. 2013 à 13:28
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
0
Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
Modifié par Angelneonizz le 27/02/2013 à 13:42
essais ça : 
#container { 
min-width: 220px; 
max-width: 850px; 
margin: auto; 
}

Change les valeurs en fonction de se que tu souhaites
0
shno
27 févr. 2013 à 13:45
Tu es un dieux !!!!!!!!!! Merci beaucoup !
0
Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
27 févr. 2013 à 13:46
je n'irais pas jusque là mais de rien
0
madmyke Messages postés 53080 Date d'inscription dimanche 20 janvier 2008 Statut Modérateur Dernière intervention 24 juillet 2024 12 181
27 févr. 2013 à 13:48
si si un dieu même moi j'ai compris -)
0
Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
27 févr. 2013 à 13:51
pour que les images soient centré :

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

Discussions similaires

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

20 réponses
Création du sommaire sous Word
Licorne rose -
C-Claire -

11 réponses
Les meilleurs places bercy / accor hotel arena
sisi -
baladur13 -

8 réponses
insérer une table d'illustration
wood15 -
Cloe -

8 réponses
Table des matières dont les titres n'apparaissent pas..
Synua -
ggg -

10 réponses