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
A voir également:

16 réponses

Réponse 1 / 16
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
Réponse 2 / 16
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
Réponse 3 / 16
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
Réponse 4 / 16
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

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

Posez votre question
Réponse 5 / 16
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
Réponse 6 / 16
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
Réponse 7 / 16
prosthetiks Messages postés 1309 Statut Membre 431
 
Ca résoud ton problème ?
0
Réponse 8 / 16
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
Réponse 9 / 16
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
Réponse 10 / 16
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
Réponse 11 / 16
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
Réponse 12 / 16
rivka95 Messages postés 86 Statut Membre
 
c'est à dire ?
0
Réponse 13 / 16
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
Réponse 14 / 16
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
Réponse 15 / 16
rivka95 Messages postés 86 Statut Membre
 
Non je ne peux faire ça
0
Réponse 16 / 16
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 - absence de certaines données
crazyrider71 -
Hana -

4 réponses
Formule taux de marque
vcloclo1 -
vcloclo1 -

26 réponses
tableaux croisés dynamique
Martin -
Martin -

6 réponses