5568 sujets

Sémantique web et HTML

Mon div qui dois se repeter, boucle php

Bonjour à tous, j'ai mis en place ce code xhtml pour mon design wordpress,
comment dire a mon css pour l'élément mycatArchiveBloc, de faire un margin-left:10px;
lors de la création des suivant élément mycatArchiveBloc, a l'aide d'une boucle php ...

le code php de wordpress ça marche mais c'est au niveau de mon css que je comprends pas

le premier doit être sur 0px, le suivant sur10px, ainsi de suite

merci d'avance

<style type="text/css">
<!--
#mycatArchive {
    float:left;
    width:620px;
    
}
#mycatArchiveBloc {
    margin-left:10px;
    margin-top:10px;
    float:left;
    width:300px;
    height:90px;
    background-color:#000;
    
}
-->
</style>
<div id="mycatArchive" >
    <div id="mycatArchiveBloc"></div>
    <div id="mycatArchiveBloc"></div>
</div>
Salut,
Tu ne peux pas avoir plusieurs id identique, il faut mettre .mycatArchiveBloc dans une class.

Première solution:
mettre dans la css #mycatArchive :first-child{margin-left:0px;}

Deuxième solution:
Dans ta boucle php, tu lui demande de créer une variable qui s'incrémente. cette variable tu l'utilise comme attribut id de chaque div .mycatArchiveBloc

Il suffit de mettre "margin-left:0px; " à l'id qui correspond à ta div 0
Modifié par mng (08 Oct 2010 - 16:31)
Salut,

Premièrement, un id ne doit pas se repeter plusieurs fois dans une page HTML.
Un identifiant est unique. Ceci dit, ça ne change rien à ton problème...
Passe par une classe css

<style type="text/css"> 
<!-- 
#mycatArchive { 
    float:left; 
    width:620px; 
     
} 
.mycatArchiveBloc { 
    margin-left:10px; 
    margin-top:10px; 
    float:left; 
    width:300px; 
    height:90px; 
    background-color:#000; 
     
} 
--> 
</style> 
<div id="mycatArchive" > 
    <div class="mycatArchiveBloc"></div> 
    <div class="mycatArchiveBloc"></div> 
</div>


C'est possible de voir la page en ligne ? Parce que bon, ton problème est pas très clair... On comprend que t'as un souci, mais sans plus.
Dans le doute, essaye d'augmenter le width de ton mycatArchive pour tester.

A plus
Bonsoir, merci pour vos réponses ...

voici le code complet en php css ...

<style type="text/css">  
<!--  
#mycatArchive {  
    float:left;  
    width:620px;
    height:420px;
    background-color:#CCCCCC; 
      
}  
.mycatArchiveBloc {  
    margin-left:10px;   /* normalement c'est 20px; */
    margin-top:10px;   /* normalement c'est 20px; */
    float:left;  
    width:300px;  
    height:90px;  
    background-color:#000;  
      
}  
-->  
</style>  
<div id="mycatArchive" >  
<?php
$nombre_de_bloc = 1;

while ($nombre_de_bloc <= 8)
{
    echo '<div class="mycatArchiveBloc"></div>';
    $nombre_de_bloc++;
}
?>
</div>


ci joint se trouvre en image le rendu final que j'aimerai avoir, j'ai commenté le css au niveau des margin-left et margin-top: en principe je veux mettre 20px; mais quand j'exécute pour le code ça bug , un peux normal ....


http://uploads.imagup.com/15/1286577728.png

Merci d'avance
Bonjour,

Tu as un conteneur avec cette largeur: 620px.
Tu veux pouvoir mettre deux blocs dans cette largeur, chaque bloc faisant 300px, avec un écart de 20px entre les deux. Tu ajoutes aux blocs une marge à gauche de 20px et tu obtiens... des blocs les uns en dessous des autres et pas du tout sur deux colonnes.

En fait c'est simple: si tous tes blocs font 300px et ont une marge à gauche de 20px, la largeur totale occupée par deux blocs est: 20+300+20+300=640px. Soit 20px de trop, à cause de la marge de gauche du premier bloc. Toi tu veux: 300+20+300=620px.

En CSS uniquement ça se gère comme ça:
#mycatArchive {
  width: 620px;
}
#mycatArchive > div {
  float: left;
  width: 300px;
}
#mycatArchive > div:nth-child(even) {
  margin-left: 20px;
}
Ainsi, seuls les blocs pairs (deuxième, quatrième...) auront une marge à gauche de 20px.

Comme les navigateurs «anciens» (c'est-à-dire Internet Explorer avant la future version 9...) ne comprennent pas la pseudo-classe :nth-child(), il faudra sans doute rajouter des classes sur les bons éléments, par exemple:
<div id="mycatArchive">
  <div class="mycatArchiveBlock odd">...</div>
  <div class="mycatArchiveBlock even">...</div>
  <div class="mycatArchiveBlock odd">...</div>
  <div class="mycatArchiveBlock even">...</div>
</div>
Ça se gère très bien en PHP en utilisant une petite condition et l'opérateur modulo (si $nombre_de_bloc est divisible par 2, on sort tel code HTML, sinon tel autre code...).

Et le code CSS modifié peut donner:
#mycatArchive {
  width: 620px;
}
#mycatArchive .mycatArchiveBlock {
  float: left;
  width: 300px;
}
#mycatArchive .even {
  margin-left: 20px;
}
Sujet clos
Aller à