Images dans tableau

rivka95 Messages postés 86 Statut Membre -  
rivka95 Messages postés 86 Statut Membre -
Bonjour,
J'sais pas si je suis au bon endroit pour poster mon problème.
Alors, sur dreamweaver, je dois créer un tableau de 2 colonnes et 6 lignes.
Dans la chaque cellule à gauche il doit y avoir une image et à gauche 1 titre + du texte sous forme de liste à puces (sais pas si j'ai été claire).
Mon souci est que je n'arrive pas à positionner les éléments dans les cellules.
J'ai l'impression que le placement des éléments est totalement indépendant du tableau.
Je devrais donc avoir une image à gauche et à droite un titre et en dessous une liste à puce.
Quelqu'un saurait-il m'aider ?
Merci

16 réponses

  1.
    prosthetiks Messages postés 1309 Statut Membre 431
     
    Hello,

    Colle ce code dans ta source pour avoir une base de travail correcte dans ton wysiwyg 

    <html>
<head>
</head>
<body>
	<table>
		<tr>
			<td><img src="http://www.ratemydui.com/felony_dui_conviction_arrest_charge_pictures/albums/userpics/10001/normal_ashanti_new_york_dui_mugshot.jpg"/></td>
			<td>
				<h2>Titre</h2>
				<ul>
					<li>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</li>
					<li>
						Cras faucibus erat at magna porttitor hendrerit.
					</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td><img src="http://www.ratemydui.com/felony_dui_conviction_arrest_charge_pictures/albums/userpics/10001/normal_ashanti_new_york_dui_mugshot.jpg"/></td>
			<td>
				<h2>Titre</h2>
				<ul>
					<li>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</li>
					<li>
						Cras faucibus erat at magna porttitor hendrerit.
					</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td><img src="http://www.ratemydui.com/felony_dui_conviction_arrest_charge_pictures/albums/userpics/10001/normal_ashanti_new_york_dui_mugshot.jpg"/></td>
			<td>
				<h2>Titre</h2>
				<ul>
					<li>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</li>
					<li>
						Cras faucibus erat at magna porttitor hendrerit.
					</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td><img src="http://www.ratemydui.com/felony_dui_conviction_arrest_charge_pictures/albums/userpics/10001/normal_ashanti_new_york_dui_mugshot.jpg"/></td>
			<td>
				<h2>Titre</h2>
				<ul>
					<li>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</li>
					<li>
						Cras faucibus erat at magna porttitor hendrerit.
					</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td><img src="http://www.ratemydui.com/felony_dui_conviction_arrest_charge_pictures/albums/userpics/10001/normal_ashanti_new_york_dui_mugshot.jpg"/></td>
			<td>
				<h2>Titre</h2>
				<ul>
					<li>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</li>
					<li>
						Cras faucibus erat at magna porttitor hendrerit.
					</li>
				</ul>
			</td>
		</tr>
		<tr>
			<td><img src="http://www.ratemydui.com/felony_dui_conviction_arrest_charge_pictures/albums/userpics/10001/normal_ashanti_new_york_dui_mugshot.jpg"/></td>
			<td>
				<h2>Titre</h2>
				<ul>
					<li>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit.
					</li>
					<li>
						Cras faucibus erat at magna porttitor hendrerit.
					</li>
				</ul>
			</td>
		</tr>
	</table>
</body>
</html>
    0
  2. rivka95 Messages postés 86 Statut Membre
     
    Merci beaucoup pour ta réponse.
    ça semble mieux marcher mais ce n'est pas encore ça.
    Toujours des problèmes de positionnement.
    Comment gères-tu le css pour le titre et la liste à puces ?
    Cela m'échappe totalement.
    Merciii
    0
  3. prosthetiks Messages postés 1309 Statut Membre 431
     
    il faut pointer les éléments en CSS à partir du nom de la balise (tagname), de l'id que tu leur à spécifié ou de leur classe.

    Quelques exemples en partant d'une div:

    Spécifier un id: <div id="maDiv">contenu</div>
    Dans ta feuille de style tu y accède avec :
    #maDiv{background-color:#f00} <-- la couleur de fond de ta div sera rouge.

    Spécifier une classe: <div class="maDiv">contenu</div>
    Dans ta feuille de style tu y accède avec :
    .maDiv{background-color:#f00} <-- la couleur de fond de ta div sera rouge.

    ou simplement en Css:
    div{background-color:#f00} <-- Tous tes div auront le fond rouge

    Pour la liste à puce c'est pareil.

    En l'occurence:

    tu peut y accéder par:
    ul{tes styles}
    li{tes styles}

    De même que pour tes titres:

    h2{tes styles}

    Il y a un super tuto css sur le site du zéro, je te conseille d'aller y faire un tour.
    0
  4. rivka95 Messages postés 86 Statut Membre
     
    En fait, j'ai une plutôt bonne maîtrise du html / css. Mais souvent quelques trucs m'échappent. J'ai très peu utilisé les tableaux dans mes travaux, donc j'ai un peu de mal.
    Je pense qu'en mettant une image dans une cellule, le texte que tu mettras à côté se positionnera en fonction de cette image.
    J'ai encore tellement de choses à apprendre.
    Site du zero : Je connais, très bon site.
    Merci beaucoup pour ton aide.
    Rivka
    0

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

    Posez votre question
  6. prosthetiks Messages postés 1309 Statut Membre 431
     
    Premier point, une cellule d'un tableau centre verticalement son contenu à la base.

    Pour remédier à ca en CSS: table tr td{vertical-align:top}
    0
  7. rivka95 Messages postés 86 Statut Membre
     
    En effet c'est le résultat que j'obtiens au départ.
    Je vais modifier ce point.
    Merci
    0
  8. prosthetiks Messages postés 1309 Statut Membre 431
     
    Ca résoud ton problème ?
    0
  9. rivka95 Messages postés 86 Statut Membre
     
    Non ça ne semble pas fonctionner avec vertical-align sur dreamweaver. Faut-il bidouiller ? Don j'ai toujours mes éléments qui se placent au milieu de ma cellule.
    J'essaye encore...
    0
  10. prosthetiks Messages postés 1309 Statut Membre 431
     
    Tu peux mettre le code html de ta page ici stp ?

    ainsi que le css si il y en a un...

    Merci !
    0
  11. rivka95 Messages postés 86 Statut Membre
     
    <table>
    <tr>
    <td><img src="fr/img_contenu/départements/structure.jpg" width="384" height="252" alt="structure" /></td>
    <td>
    <h4>Titre</h4>
    <div class="liste_departements">
    <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Cras faucibus erat at magna porttitor hendrerit.</li>
    </ul>
    </div>
    </td>
    </tr>
    </table>

    Voila, j'ai collé le bout de code qui m'intéresse.
    Pour le css j'ai tout supprimé.
    Merci
    0
  12. prosthetiks Messages postés 1309 Statut Membre 431
     
    Merci d'utiliser les balises code quand vous postez du ... code.... ;) 

    <table>
	<tr>
		<td>
			<img src="fr/img_contenu/départements/structure.jpg" width="384" height="252" alt="structure" />
		</td>
		<td style="vertical-align:top">
			<h4>Titre</h4>
			<div class="liste_departements">
				<ul>
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
					<li>Cras faucibus erat at magna porttitor hendrerit.</li>
				</ul>
			</div>
		</td>
	</tr>
</table>
    0
  13. rivka95 Messages postés 86 Statut Membre
     
    c'est à dire ?
    0
  14. rivka95 Messages postés 86 Statut Membre
     
    Alors d'après ce que je remarque, ça remonte un peu le tout, mais ça n'arrive pas tout en haut de la cellule...
    0
  15. prosthetiks Messages postés 1309 Statut Membre 431
     
    Tu n'arrive pas a mettre ton site en ligne pour qu'on puisse regarder ça à partir de la même base ?
    0
  16. rivka95 Messages postés 86 Statut Membre
     
    Non je ne peux faire ça
    0
  17. rivka95 Messages postés 86 Statut Membre
     
    J'ai pas totalement résolu mon souci, mais j'approche, grâce à tes conseils, du résultat voulu.
    Merci beaucoup !
    Rivka
    0

Discussions similaires

Tableau (croisé dynamique?) à 3 entrées
ClementH3o -
ClementH3o -

10 réponses