28172 sujets

CSS et mise en forme, CSS3

Petit probleme css

Bonjour,

je suis en train de mettre en page un site internet en css. Mais j'ai une petite question. Donc voila j'ai une liste de résultat en php qui arrive avec un nom, un commentaire et 3 photos et lien. Il faut que je mette en page tout ca donc nom, commentaire et photos et lien le tout en cascade plusieurs fois (correspondant au nombre de résultats).

J'ai donc pensé a la balise <li>, mais comment mettre en forme à l'intérieur de ces balises.

Merci pour vos réponses.
Peux-tu être un peu plus précis dans ta demande? À quel résultat graphique souhaites-tu arriver? Qu'est-ce qui te pose problème au juste? Le balisage HTML ou la mise en forme?

Bref, avec un peu plus de détails, ça ira mieux. Smiley cligne
Pour etre plus précis :

en fait je voudrai que s'affiche une liste de blocs dans lesquels il y aurai mes photos, liens textes etc..., eux meme mis en formes à l'intérieur de ces blocs.
bon je réessaie:

j'envoi une image de ce que je souhaite.



upload/18227-image.jpg


j'ai donc une liste (generée par une boucle php) et je souhaite faire une mise en forme comme sur l'image.
C'est déjà mieux! Smiley cligne

Est-ce que tu as déjà essayé quelque chose? As-tu un bout de code à nous montrer et sur lequel on pourrait discuter?
<div id="resultats">
while ($data = mysql_fetch_array($req)) {
// on affiches les résultats dans la <table>


echo '<table><tr><td>';
echo htmlentities(trim($data['nom'])) , '<br><br>';
echo htmlentities(trim($data['description'])) , '<br><br>';
echo '<div id="img"><img height=60px src="./membre/pic/' , $data['login'] , '/' , $data['photo'] , '"></div>';
echo '<a href = "#" OnClick = "affiche_overlay_window(\'./img/load.gif\',\'article.php?article=' , $data['id'] , '\');">voir le d&eacute;tail</a><br>';
echo '</tr></td></table>';



}
</div><
ca c'est la boucle php.

et pour le css :

#resultats {
position: absolute;
top: 260px;
left: 112px;
background-color:#ffffff;
margin-left: 0px;
margin-right: 0px;
width: 800px;
}


#img{
position: absolute;
top: 10px;
left: 80px;
}


en fait je souhaiterai ici placer l'image par rapport à la cellule du tableau, mais ca la place avec pour reference la page (<body>)
sinon j'ai toujours la possibilité de mettre un conteur en php et de creer des <ma div0> , <ma div1>..., jusqu'à 9 (oui j'ai 10 affichage maximum par page). Ensuite je positionne en css les 10 éléments x5 (photo+liens+textes+texte+texte)

mais je sais pas si c'est une bonne solution. je voudrai trouver la solution en css.
j'ai trouvé

php

while ($data = mysql_fetch_array($req)) {




echo '<ul><div>';
echo htmlentities(trim($data['nom'])) , '<br><br>';
echo htmlentities(trim($data['description'])) , '<br><br>';
echo '<div id="img"><img height=60px src="./membre/pic/' , $data['login'] , '/' , $data['photo'] , '"></div>';
echo '<a href = "#" OnClick = "affiche_overlay_window(\'./img/load.gif\',\'article.php?article=' , $data['id'] , '\');">voir le d&eacute;tail</a><br>';
echo '</div></ul>';







et css

ul {
position: relative;
}

#img {
position: absolute;
top: 10px;
left: 112px;
}




merci pour ta patience
Hello,

C'est pas terrible au niveau des sélecteurs. Tu devrais à priori avoir un identifiant ou une classe sur ton UL, pour ne pas passer tous les UL de la page et du site en positionnement relatif inutilement. Ensuite, tu utilises un identifiant "img" pour tes illustrations, alors que tu as plusieurs illustrations par pages... donc ce code n'est pas valide, un identifiant devant être unique dans la page. Une classe sera plus adaptée.
gaucyril a écrit :
quand je fais ce que tu me dis ca ne fonctionne plus

Je me suis contenté de donner des instructions généralistes, pas des directives précises. C'est donc à toi de les comprendre, et d'être en mesure de les appliquer. Smiley cligne

Pour rappel, si tu modifies tes sélecteurs CSS (ce que je t'encourageais à faire), il faut également que le code HTML suive.
Modifié par Florent V. (17 Oct 2008 - 15:18)
Modérateur
Salut et bienvenue sur le forum,

Logiquement le tag de retour à la ligne ne s'écrit pas comme ceci : <br> mais plutôt : <br /> (xhtml). D'ailleurs, je ne vois pas l'utilité dans ton code de placer autant de retour à la ligne. Je crois qu'il aurait mieux fallu faire ceci :


// ... code précedent (while)
$nom=$data['nom'];
$description=$data['description'];


echo htmlentities(trim("<span class=\"nom\">".$nom."</span>"));
echo htmlentities(trim("<span class=\"description\">".$description."</span>"));
// ... code suivant

Le CSS :

.nom{
 margin-bottom:30px;/*définition de la marge basse*/
}
.description{
 margin-bottom:30px;/*définition de la marge basse*/
}


J'ai vite lu ton code et j'ai vu des erreurs de syntaxe PHP.
Sur cette ligne : 

echo htmlentities(trim($data['nom'])) [b],[/b] '<br><br>';

Avant les retours à la ligne, ce n'est pas une virgule mais un point :

echo htmlentities(trim($data['nom'])) [b].[/b] '<br><br>';


Sur un tag de type ancre, il est préférable de placer l'attribut title. Il permet de rendre plus accessible le site si je ne m'abuse.

Je pourrais également te conseiller et te remercier par avance de rééditer tes messages afin d'utiliser le bouton code. Ainsi, ton script sera plus clair à lire et tu respecteras la règle 13 du forum

++
Modifié par Nolem (17 Oct 2008 - 16:56)
Nolem a écrit :
Salut et bienvenue sur le forum,

Logiquement le tag de retour à la ligne ne s'écrit pas comme ceci : <br> mais plutôt : <br /> (xhtml). D'ailleurs, je ne vois pas l'utilité dans ton code de placer autant de retour à la ligne. Je crois qu'il aurait mieux fallu faire ceci :


// ... code précedent (while)
$nom=$data['nom'];
$description=$data['description'];


echo htmlentities(trim("<span class=\"nom\">".$nom."</span>"));
echo htmlentities(trim("<span class=\"description\">".$description."</span>"));
// ... code suivant



Si je puis me permettre, voici une petite correction concernant le php dans un premier temps:

Ici, le trim ne sert STRICTEMENT a rien, puisque, ce que tu "trim" étant codé en dur, tu sais déjà qu'il n'y a pas d'espace au début ou à la fin.
Et ton htmlentities va également traduire tout ton code html.
En plus, tu utilise des guillemets doubles, mais tu les coupes pour afficher ta $var. L'avantage de ces derniers est que justement il interprète les variables qu'il englobe.
Une autre possibilité (que je préfère personnellement) est d'utiliser des guillemets simple, ce qui en plus, t'évitera de devoir échapper les doubles dans ta chaîne html.
Je mets un echo avec chaque solution, juste pour montrer, mais il est évident qu'il faut rester cohérent dans son code et utiliser toujours la même méthode:
// ... code précedent (while)

$nom = htmlentities(trim($data['nom']));
$description = htmlentities(trim($data['description']));

echo '<span class="nom">' . $nom . '</span>';
echo '<span class="description">' . $description . '</span>';

// ... code suivant

C'est quant même plus propre non? Smiley langue


De plus, comme l'a dit Nolem, le caractère de concaténation est le point ("."), pas la virgule.

Personnellement, j'aurais plutôt vu ton html comme ceci:

//... while
<dl class="member">
    <dt class="name">Nom</dt>
    <dd class="name"><?php echo htmlentities(trim($data['nom'])); ?></dd>
    <dt class="description">Description</dt>
    <dd class="description"><?php echo htmlentities(trim($data['description'])); ?></dd>
    <dt class="more">D&eacute;tail</dt>
    <dd class="more">... ce que tu veux ici</dd>    
</dl>

De plus, pense à l'accessibilité.
Il se passe quoi si les gens n'ont pas javascript?
Modérateur
Je me suis bien doutais qu'au départ si on fait un bon filtre pour le INSERT ou UPDATE, il n'y a pas besoin du trim. Mais j'étais pas sûr. Le problème est de savoir si dans la SGBDR, tout est bien filtré ? j'avais également un doute sur le hmtlentities. Si je ne dis pas de bêtise(ss) il va réencoder un texte déjà encodé, n'est ce pas ? Donc, il se peut qu'il transpire des bugs d'affichages ?

Pour info, je préfère utiliser les doubles quotes. C'est une question de choix.

Après ta correction, je vois en effet ma petite erreur. Sur le poste où je suis, je n'ai pas WAMP OU Easy PHP. Donc le code fait de tête.

++
Modifié par Nolem (17 Oct 2008 - 19:53)
Non Nolem, trim() supprime les espaces en début et fin de chaine, hors tu faisais un trim qui ressemblait à ça

trim(UNECHAINEFIXE quelque chose de variable UNECHAINEFIXE);

//ou bien, pour recopier ce que tu as mis:

echo trim("<span class=\"nom\">".$nom."</span>");


Tu sais qu'il n'y a pas d'espace avant le "<span class" ni après le "</span>" puisque c'est toi qui les écrit en dur dans le code Smiley cligne
Par contre, j'aurais été d'accord avec
echo '<span class="nom">' . trim($nom) . '</span>';[/code]

Et l'effet est le même pour htmlentities Smiley cligne

Et oui, htmlentities va traduire tout ce qui possède une équivalence en entité html ( > = &gt; , & = &amp; , ...)
Sujet clos
Aller à