Structure tableau

petite aide svp

11 août 2006 à 21:12:18

Bonjour à tout les zéros,

J'aurais beosin de votre aide pour un truc logiquement simple, mais je dois chercher trop compliqué donc je n'y arrive pas.
Pour afficher toutes les annonces qui sont stockés dans ma BDD j'aimerias quels apparaissent de la façon suivante.

Image utilisateur

Si vous pouviez me donner la structure de base je vous serais très reconnaissant.
Je ne sais pas non plus ce qui serait le plus simple. Utiliser les <tr> <td> comme pour un tableau. Ou utiliser des blocks.

D'avance merci et bonne soirée

Snipy

Philias

11 août 2006 à 21:20:29

Oublie le tableau pour cela :/
Si tu essayais avec des listes et des titre ?

<div class="fenetre premier">
<ol class="entete">
<li>Texte 1</li>
<li>Texte 2</li>
<li>Texte 3</li>
</ol>
<div class="textefenetre">
<p>Texte 3</p>
</div>
</div>

Snipy11

12 août 2006 à 19:08:14

Je ne pense pas pas (a moin que l'on me le démondre

) que les listes soit se qu'il y a de plus approprié.
Une petite aide svp

strucky

12 août 2006 à 19:32:58

Non, pas de listes pour faire ça.

1 div global

2 divs secondaires

et dans le 1er div secondaire, 2 div, un en float right, et l'autre en float left.

Snipy11

12 août 2006 à 19:42:39

c'est un peu près ce que j'avais fait, mais ça foirait un peu. Je te montre le bout de CSS

#corps_annonce
{
width:90%;
margin-left: 200px;
margin-top: 50px;
margin-bottom: 20px;
background-position:top center;

}

#annonce
{
   height:50px;
   background-repeat: no-repeat;
   background-position:top center;
   width:550px;
   background-color:#FFCC00;

}

#contenu
{
   height:100px;
   background-repeat: no-repeat;
   background-position:top center;
   width:546px;
   padding: 2px;
   margin-bottom: 5px;
   background-color:#FFFFCC;

}

corps annonce regroupe les 2 autres blocks

Philias

12 août 2006 à 20:01:53

Comment ça foire ? Je n'ai pas d'image devant moi, comment veux-tu qu'on t'aide ?

Mais pourquoi veux-tu avoir du texte placé à trois endroits différents (haut gauche, centre, bas droit) ?
Qu'est-ce qu'il va y avoir à la place du texte ?

Candygirl

12 août 2006 à 20:23:30

Je suis de l'avis de Phileas. Difficile de donner la structure appropriée sans plus de détails:
1 ou tes 3 textes en haut sont-ils aparentés à des titres ? De quels genres d'infos s'agit-il ?

Perso à première vue j'aurais vu qqch du genre:

<div class="annonces">
<h4>blablabla</h4>
<h4>blablabla</h4>
<h4>blablabla</h4>
<p>blablabla</p>
</div>

Le h4 étant à voir selon le contenu et choisir les balises appropriées.

Après je vois dans ton exemple des background-repeat un peu partout, quelles sont donc tes contraintes graphiques? As-tu une image du résultat que tu souhaites obtenir, graphisme compris?

Philias

12 août 2006 à 21:11:20

Hum, d'avoir 3 titres pour une seul et même chose brise la sémantique

Si c'est juste un texte séparé en trois partie différente, dont celle du centre est l'élément le plus important, tu pourrais faire quelque chose comme ça.

<div class="annonces">
<h4 class="haut_de_annonce">
<span>Texte1</span>
<strong>Texte2</strong>
<em>Texte3</em>
</h4>
<div class="contenu">
<p>Blabla...</p>
<p>Blabla...</p>
</div>
</div>

Le <h4 /> donnant le font orange du titre.
Les différents éléments du titre (span,strong et em) seront mis en display:block; et auront chacun une valeur d'alignement différent.

Pourquoi span-strong-em ? Parce que c'est souvent la forme qu'ont les titres :
Bienvenue chez Mcdonald's, là où les burgeurs sont les plus gras. L'élément le plus important étant celui du centre (le nom de la marque, de l'entité), le deuxième plus important étant à droite (une valeur de l'entité, une représentation), et le moins important à gauche (l'introduction au produit, à l'entité).

Candygirl

12 août 2006 à 22:41:36

Citation : Philias

Hum, d'avoir 3 titres pour une seul et même chose brise la sémantique

Vrai, c'est pas beau, merci

Snipy11

13 août 2006 à 3:20:13

JE remercie déja tout ceux qui ont répondu.

Je comprend que aider sans voir le rendu que j'aimerais doit etre difficile.

Donc je vous fournit une image, j'aimerais que mon annonce ressemble à celle ci

Image utilisateur

Vous voyez donc pourquoi 3 texte différends, 1 pour le type/la ville un autre (au milieu) qui sera un lien et le troisieme a droite qui sera le prix

Merci d'avance

Snipy11

13 août 2006 à 15:21:42

plus personne pour m'aider?

strucky

13 août 2006 à 15:24:21

Qu'est ce que tu veux de plus ?

Je te l'ai donnée la solution.

Snipy11

13 août 2006 à 18:11:06

J4ai donc suivie les conseils
Voici mes 2 morceaux de codes

<div id="annonce">

<div class="left"><strong>Appartement <?php echo $donnees['nombre_de_piece']; ?> pièces </strong><?php echo $donnees['surface_habitable'] ; ?> m<sup>2</sup><br /><strong><?php echo $donnees['code_postal'] ; echo $donnees['ville']; ?></strong></div>

<div class="right"><strong><br /><?php echo $donnees['prix']; ?>€</strong></div>
</div>

<div id="contenu">

<?php
// On enlève les éventuels antislash PUIS on crée les entrées en HTML (<br />)
$contenu = nl2br(stripslashes($donnees['description']));
echo $contenu;
?>
<div class="right"><em>MAJ <?php echo date('d/m/Y', $donnees['timestamp']);?><br />REF: <?php echo $donnees['mandat']; ?></em></div>
</div>

<?php
} // Fin de la boucle des news
?>
</div>

#corps_annonce
{
width:90%;
margin-left: 200px;
margin-top: 50px;
margin-bottom: 20px;
background-position:top center;

}

#annonce
{
height:50px;
width:542px;
background-color:#FF9900;
margin: auto;
padding: 4px;
padding-top: 2px;
padding-bottom: 2px;
border: 2px groove grey;
color:white;

}

#contenu
{
height:100px;
width:546px;
padding: 2px;
margin-bottom: 5px;
background-color:#FFFFCC;
margin: auto;
border: 2px groove grey;

}

.left

{
float:left;
}

.right

{
float:right;
}

Et voici ma page page ici

J'aimerais savoir 2 choses,

1/ Comment mettre dans la partie Annonce un texte (lien) entre la vilel et le prix de façon a se qu'il soit centré.

2/ Je n'arrive pas à séparé chaque groupe de block convenablement.

MErci d'avance pour vos réponses

(ce qui est affiché sur la page sert seulement pour les tests)

strucky

13 août 2006 à 18:22:34

Ben dans ce cas, met 3 bloc au lieu de 2.

Ajoute une hauteur et une largeur sur chacun des blocs, positionne les tous les 3 en float left.

Sur celui du centre tu ajoutes un tex-align: center.

Enfin, y'a plusieurs façons de procéder.

Snipy11

13 août 2006 à 18:25:38

JE vais abandonner l'idée de mettre quelque chose au milieu

Et pour la marge entre chaque annonce?
Car avec un margin-bottom aucun effet

Philias

13 août 2006 à 19:41:23

<div id="annonce">
<div class="left"><strong>Appartement 3 pièces </strong>31 m<sup>2</sup><br /><strong>91700Yerres</strong></div>
<div class="right"><strong><br />45340€</strong></div>
</div>

Pourrait être écrit

<h3 id="annonce">
<span class="left">
<b>Appartement 3 pièces </b>31 m<sup>2</sup><br />
<b>91700Yerres</b>
</span>
<span class="right">
<em><br />45340€</em>
</span>
<span class="center">
<strong>Texte au centre</strong>
</span>
</h3>

#corps_annonce{
width:90%;
margin:50px 200px 20px 0;
background-position:top center;
}
#annonce{
height:50px;width:542px;
margin:auto;padding:2px 4px 2px;
border: 2px groove grey;
background-color:#FF9900;
color:white;
}
#contenu{
height:100px;width:546px;
padding:2px;margin-bottom:0 auto 5px;
background-color:#FFFFCC;
border: 2px groove grey;
}

.left{float:left;}
.right{float:right;}
.center{text-align:center;}

Snipy11

13 août 2006 à 20:26:59

Ok mais pour séparer chaque annonce que dois je utiliser?

Philias

13 août 2006 à 21:22:28

Hum... Dans ton code, je vois
«
margin-bottom: 5px;
background-color:#FFFFCC;
margin: auto;
»
Le problème, c'Est que margin:auto; efface la propriété margin-bottom, car margin:auto; revient à dire
margin-top:auto;
margin-left:auto;
margin-bottom:auto;
margin-right:auto;

Donc, je te conseille plutôt d'écrire le tout en une ligne, soit
margin:0 auto 5px;
Mais je vois à ton code que tu ne connais pas la liste de définition, qui serait approprié au contexte, je trouve.
Celle ci permet de lier un ensemble de données selon un rapport mot/définition, endroit/description et autres.
En plus, j'ai enlever beaucoup de div-span-strong superflus, tu fera ce que tu veux après

<dl id="corps_annonce">

<dt id="annonce">
<span class="left">
<b>Appartement 3 pièces </b>12 m<sup>2</sup><br />
</span>
<em class="right">123000€</em>
<strong class="center">13350SAint denis</strong>
</dt>
<dd id="contenu">
Ecrire ici la description du bien proposé.
<em class="left">
MAJ 05/07/2006<br />
REF: 12
</em>
<a class="left lien_contact" href="http://votreemplacement.com/contacter.php">
Prendre contact
</a>
<img class="right" src="annonce.png" />
</dd>
<dt id="annonce">
<span class="left">
<strong>Appartement 3 pièces </strong>31 m<sup>2</sup><br />
<strong>91700Yerres</strong>
</span>
<em class="right prix">45340€</em>
</dt>
<dd id="contenu">
Hum, d'avoir 3 titres pour une seul et même chose brise la sémantique

<em class="left">MAJ 07/07/2006<br />
REF: 12
</em>
<a class="lien_contact left" href="http://votreemplacement.com/contacter.php">
Prendre contact
</a>
<img class="right" src="annonce.png" />
</dd>

</dl>

Snipy11

13 août 2006 à 21:45:21

Merci pour les marges mainteannt ça marche

POur ton code que tu m'a refais je te remercie aussi et le travaillerias plus en détail a mon retour de vacances (je aprs demain matin) car il faut que ce soir je finisse tout

Donc 3 petits problèmes encores qui surviennent sous IE

1/ Il n'ya plus de bordures, mais j'imagine que c'ets parce que IE ne connait pas la bordure que j'ai mis :-°

2/ Mes annonce sont tout en bas de ma page (placé apres le menu. Ce qui pose un sacré gros problème !

3/ Comme tu peux le voir sur la 2eme annonce, le texte passe au dessus de l'image. J'aimerais que cela ne soit pas possible

JE sais que je t'en ai demandé beaucoup, et je te remercie encore.

Snipy11

14 août 2006 à 10:36:05

un petit up

De plus pour le 1/ j'ai essayé d'autre bordures, mais aucune ne marche sous IE :euh:

Candygirl

14 août 2006 à 11:38:27

1) gris s'écrit gray avec un a

2) c'est un problème d'interprêtation différent entre IE et FF notament sur les % vu que ton site est de largeur fixe, tu devrais mettre une largeur fixe à tes annonces, ça simplifierait ton problème
3) Il faut mettre ton image avant ton texte dans ton html

Philias

14 août 2006 à 16:40:12

les bordures doivent être au format suivant
border:1px solid #bed404;
ou
border-width:1px;
border-color:#bed404;
border-style:solid;