Sujet Précédent Sujet Suivant

Mise en forme 3 Div dans TD

Fermé
alexia - 26 oct. 2013 à 14:30
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 27 oct. 2013 à 02:56
Bonjour,

J'ai un petit problème que j'arrive pas à résoudre et j'aimerais si possible avoir une aide.
Je développe un gros tableaux ( de données pour afficher des stats)

et j'aimerais dans mes TD d'en tête faire apparaitre 3 div , en haut à gauche de la td le logo.png du service, en haut à droite un voyant de couleur.png , au centre en bas le nom du service
un truc comme cela : 

<td>
<table>
   <tr>
         <td><div> logo.png</div></td>
         <td><div> voyant de couleur.png</div></td>
    </tr>
    <tr>       
         <td><div> nom du service</div></td>
     </tr>
</td>

Raison de ce choix ?
Pour être sur que ces 3 infos soit toujours aux même endroits sans risques qu'elles changent de place dans la td suivant le contenu . Qu'en pensez vous ? Ou une autre méthode pour placer mes values (image.png et nom du service) ?

J'espere avoir des réponses,
Merci





A voir également:

9 réponses

Réponse 1 / 9
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 26/10/2013 à 14:38
Tu peux nous faire un petit schema pour qu'on soit sûrs de visualiser le résultat attendu correctement stp ?
1
Réponse 2 / 9
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
26 oct. 2013 à 17:27
Ah bah avec toutes les informations, c'est plus simple d'aborder le problème...

Je te refais une solution responsive donc...
1
Réponse 3 / 9
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
26 oct. 2013 à 17:45
Et voila: 


<html>
	<head>
		<title></title>
		<style type="text/css">
			table{
				border-collapse: collapse;	
			}
			td, th{
				width: 20%;
				border:#333 solid 1px;
			}
			h4{
				text-align: center;
				margin:0;
				padding:0;
			}
			.clear{
				clear: both;
			}
			.left{
				float: left;
			}
			.right{
				float: right;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>
					<img class="left" src="http://placehold.it/75x30">
					<img class="right" src="http://placehold.it/75x30">
					<div class="clear"></div>
					<h4>Business</h4>
				</th>
				<th>
					<img class="left" src="http://placehold.it/75x30">
					<img class="right" src="http://placehold.it/75x30">
					<div class="clear"></div>
					<h4>Compta</h4>
				</th>
				<th>
					<img class="left" src="http://placehold.it/75x30">
					<img class="right" src="http://placehold.it/75x30">
					<div class="clear"></div>
					<h4>Lorem ipsum</h4>
				</th>
			</tr>
			<tr>
				<td>Content</td>
				<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
				<td>Bla bla bla</td>
			</tr>
			<tr>
				<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</td>
				<td></td>
				<td></td>
			</tr>
		</table>
	</body>
</html>
1
Réponse 4 / 9
alexia
Modifié par alexia le 26/10/2013 à 15:58
Oui, voici un mini croquis
http://www.hostingpics.net/viewer.php?id=66815685td.png
Désolée si les petit carrés sont pas aligné mais je gere moyen paint :(

Pour expliquer :
Dans le .png a gauche sera un mini logo spécifique au service
le .png de droite sera un voyant d'état (si tout se passe bien une couleur sera donné vert rouge noir)
et en bas au milieu le nom du service .

et ensuite en dessous ce sont les TD habituels. avec chacune un voyant de couleur d'etat de leur activités.
0

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

Posez votre question
Réponse 5 / 9
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
26 oct. 2013 à 16:19
Est-ce que ça te convient? 


<html>
	<head>
		<title></title>
		<style type="text/css">
			table{
				border-collapse: collapse;	
			}
			.dep td{
				border:#333 solid 1px;
			}
			h4{
				text-align: center;
				margin:0;
				padding:0;
			}
			td.dep{
				background-color: #eee;
			}
			td:not(.dep){
				height: 100px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<table class="dep compta">
						<tr>
							<td class="dep">
								<img src="http://placehold.it/75x30">
								<img src="http://placehold.it/75x30">
								<h4>Compta</h4>
							</td>
						</tr>
						<tr>
							<td></td>
						</tr>
						<tr>
							<td></td>
						</tr>
					</table>
				</td>
				<td>
					<table class="dep fo">
						<tr>
							<td class="dep">
								<img src="http://placehold.it/75x30">
								<img src="http://placehold.it/75x30">
								<h4>Front-office</h4>
							</td>
						</tr>
						<tr>
							<td></td>
						</tr>
						<tr>
							<td></td>
						</tr>
					</table>
				</td>
				<td>
					<table class="dep business">
						<tr>
							<td class="dep">
								<img src="http://placehold.it/75x30">
								<img src="http://placehold.it/75x30">
								<h4>Business</h4>
							</td>
						</tr>
						<tr>
							<td></td>
						</tr>
						<tr>
							<td></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
0
Réponse 6 / 9
alexia
26 oct. 2013 à 17:22
Merci pour ta réponse :-)

Tout d'abord un probleme,
td:not n'existe pas dans l'entreprise où je fais mon stage ( On a que ie8 )


Ensuite Deuxieme chose, mes Div,TD ne sont pas en pixel , dans mes specs on me demande que des pourcentages (pour être responsive), je fais donc à l'image de gauche un float:left, et à l'image de droite un float:right avec un max-width , mais ça casse un peu mon tableau cette histoire de float.

Mais je n'ai pas d'autre solution, il faut absolument que les 2 images qui sont toute petites se mettent à l'extreme gauche et droite de la cellule,
et dans ton cas, elles se mettent juste côte à côte d'après mes tests.
0
Réponse 7 / 9
alexia
27 oct. 2013 à 00:36
Ouahhhh jte remercieee prosthetiks c'est tout à fait ça, la clef se trouve pour moi dans le fait de faire le clear:both juste apres mon enchainement des 2 float.

Merciiii beaucoup en tout cas.

Petite question comme ça, comment tu force une hauteur max dans une td ?
Je m'explique avec les width on peut faire 20% par exemple ou 40px pour chaque cellulle pas de probleme .
en hauteur, tout dépend du contenu donc comment forcer cela (dans le but d'avoir toujours le nom du service toujours en bas au milieu (avec un ipad, ou meme quand ça zoom enormement) .
0
Réponse 8 / 9
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
27 oct. 2013 à 01:01
"toujours le nom du service toujours en bas au milieu", j'ai pas compris cette partie.

Si tu veux fixer une hauteur à un td, il suffit de le faire comme avec la largeur, mais en spécifiant un "overflow: visible" histoire d'avoir un scroll dans ta cellule.

J'espère avoir répondu à ta question, sinon je te demanderais de préciser ;)

++
0
Réponse 9 / 9
alexia
Modifié par alexia le 27/10/2013 à 01:24
Je voulais dire avoir donc toujours le nom du service en bas des 2 images,
Car si l'utilisateur scroll ou essaie de voir l'interface avec son ipad, les images + le texte cela va agrandir la taille de la cellule ... donc des TD auront une taille plus grande que d'autres suivant le contenu... d'où mon idée d'encadrer la hauteur ( en largeur j'utilise deja le min-width et max-width).

Sauf qu'avec un overflow:hidden et un scroll dans les celulle c'est pas beau esthetiquement :( ... ce sont des toutes petites cellules.
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 27/10/2013 à 01:28
Soit j'ai trop bu.... soit je suis stupide... ou alors les deux....

Je comprends toujours pas... :( un screenshot pour m'aider ?

PS: J'ai pas de tablette, j'aurais essayé sinon... Personne veut m'en offrir une ? :D
0
alexia
27 oct. 2013 à 01:40
Loool mais nan tu n'as pas bu, je suis peut être aussi pas tres explicite.

Je fais un schema et jte l'envois.
0
alexia
Modifié par alexia le 27/10/2013 à 02:18
J'ai fait un screen shot http://hpics.li/858162a
On voit bien:
- 1) le probleme de hauteur de la TH , le .png de droite passe en dessous de celle de gauche or je voudrais plus qu'il prenne un pourcentage de la largeur ( 50% pour celui de droite et 50% pour l'image de droite) meme pour un ecran 368x480 par exemple et que le nom des services soit toujours au milieu en bas entre ces 2 images.
En résumé : que cela ne bouge pas suivant les ecrans, ou le zoom. de l'utilisateur.


- 2) la hauteur de la TD s'est aggrandit toute seule pour afficher tout le texte (avec un affichage tablette), comment résoudre cela ? :-(
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
27 oct. 2013 à 02:25
1: Ajouter une règle CSS: 


img{
	max-width: 50%;
}

2: Il faut trouver une compris... soit réduire la taille de la polie sur les tablettes, soit mettre un scroll... dans le cas #1, si le texte est vraiment plus long que les autres, ça va quand même déranger visuellement....
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
27 oct. 2013 à 02:26
Pour les tablettes, on peut aussi afficher une hauteur définie, et agrandir la cellule lors du click...
0

Discussions similaires

Que signifie cet emoji :3
Moi -
AssassinTourist -

2 réponses
Signification de " :3 "
blanchecanelle -
Pistounette -

5 réponses
Que peut faire 3fois/j un homme, mais qu'1fois/j une femme
Soter -
Raymond PENTIER -

1 réponse
présentation d'une diapositive
ouzin -
michel_m -

2 réponses
decouper dans une forme (Illustrator)
simonabel27 -
Metatron 42 -

7 réponses