28173 sujets

CSS et mise en forme, CSS3

Position des blocs div en haut à droite d'un tableau HTML [RESOLU]

Bonjour, je suis débutant en CSS ; jusqu'à présent je faisais évidemment mes mises en page avec des tableaux.

Ce que je veux faire est simple a priori : à l'intérieur d'une cellule TD remplie de texte, je veux afficher des textes encadrés en haut à droite de la cellule avec un DIV, empilés les uns sur les autres (donc une colonne de textes encadrés).

J'ai déclaré un conteneur :
#conteneur {
position:relative;
width: 100%;
margin: 0 auto;
}

et voici par exemple le premier bloc :
#doc {
position:absolute;
right:0;
width: 150px;
margin-bottom:8px;
margin-left:4px;
margin-top:8px;
padding-left: 15px;
border: 2px solid #ff6600;
width: 120px;
}

dans le BODY je mets ça :
<TD vAlign=top>texte texte texte texte texte<div id="conteneur">
  <div id="doc"> ici le texte du 1er bloc</div>etc


mais mon bloc se mélange à mon texte, et je ne sais pas du tout comment en empiler plusieurs proprement...

Help ! Smiley cligne
Modifié par weuw (03 Oct 2006 - 12:14)
Heu en fait pour apprendre les CSS, je pensais que c'était un bon exercice... Smiley confused
Modifié par weuw (02 Oct 2006 - 20:09)
Ca reviens un peu à construire une maison sur une base pourrie pour faire une comparaison foireuse.
Si tu veux apprendre, il y a tout ce qu'il faut ici, autant partir du début, entraîne toi à faire une page entière, sans tableaux.
Construire-un-site-sans-tableaux

et ici, une bibliothèque d'infos précieuses :
La FAQ

Que du bonheur pour s'exercer. Smiley cligne
J'ai du mal à comprendre ce que tu veux en fait.

Tu souhaites faire flotter une portion de texte en haut à droite dans une <td> qui contient du texte c'est ça ?

peut être avec un élément (lequel? qu'est ce qu'on à le droit de mettre dans un <td>...? le <td> accepte t'il les blocs comme <p> ou <div> ? )avec l'attribut :

td.classe [i]élément[/i] {float:right; border: 1px solid gray; /*pour l'encadré*/}


J'en sais pas plus, renseigne toi sur ce qu'on peut utiliser dans une cellule et teste le float, sachant que ton élément floattant à droite visuellement, doit être inséré à gauche dans le code html.

A essayer avec un span peut etre....
Modifié par Hum (02 Oct 2006 - 20:37)
Hum a écrit :
J'en sais pas plus, renseigne toi sur ce qu'on peut utiliser dans une cellule...
À peu près tout. Pas de restriction à ma connaissance (sauf peut-être pour les frames).
Hum a écrit :
...et teste le float, sachant que ton élément floattant à droite visuellement, doit être inséré à gauche dans le code html.

Correction : l'élément flottant (à droite ou à gauche, peu importe) doit être placé en premier dans le code par rapport au contenu qui doit venir se loger à côté du flottant. Si le flottant est en deuxième, il sera toujours flottant mais partira de plus bas (il ne « remonte » pas magiquement).
weuw a écrit :
Ok je comprends que ce n'est donc pas possible ?

Il est probable que ça soit possible. Encore faudrait-il savoir précisément ce qu'on veut faire... et sur ce point ton paragraphe de description était un peu vague. En particulier le passage qui dit « empilés les uns sur les autres (donc une colonne de textes encadrés) ». Smiley sweatdrop

Une fois que l'on saura de quoi il retourne (un petit schéma, par exemple ?), il sera toujours temps de dire si c'est possible et facile à faire, possible et raisonnablement réalisable, possible mais difficile à réaliser à ton niveau de compétence, possible mais dommageable pour l'accessibilité ou l'ergonomie, ou enfin impossible.
Hum a écrit :

Tu souhaites faire flotter une portion de texte en haut à droite dans une <td> qui contient du texte c'est ça ?


Oui c'est cela ; et je ne veux pas que les textes se chevauchent...
Ok ça marche effectivement j'ai bien une box positionnée à droite ;

maintenant si j'en mets une deuxième, ça donne ça :
upload/8772-box.jpg

Or j'aimerais qu'elles s'empilent (voir le schéma)...

Comment faire ?

Le code CSS actuel des 2 boîtes :

#doc {
	float: right;
	width: 150px;
	margin-bottom:8px;
	margin-left:4px;
	margin-top:8px;
	padding:5px;
	border: 2px solid #ff6600;
	width: 120px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	}
	
#contact {
	float: right;	
	width: 150px;
	margin-bottom:8px;
	margin-left:4px;
	margin-top:8px;
	padding:5px;
	border: 2px solid green;
	width: 120px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
	}


Merci de votre aide !
Modifié par weuw (03 Oct 2006 - 11:04)
Solution compliquée : utiliser la propriété CSS clear (ici un clear: right; sur la deuxième boîte.

Solution simple : mettre les deux blocs dans une div, et c'est cette div que l'on fera flotter à droite.
Sujet clos
Aller à