28220 sujets

CSS et mise en forme, CSS3

Bonjour,
je planche sur un problême de CSS depuis quelques jours maintenant, et je pense avoir essayé toutes les possibiltiés, je veins donc sur le forum de la dernières chance Smiley lol .

Puisqu'un schéma explique mieux que toutes les phrases du monde, voiçi grosso modo mon problême :
http://www.connaistoitoimeme.com/divredim.png

Voilà comment son agencés les DIV dans le code Html :

<div id="smil_corps">
<div id="smileys">
<h2>Smileys</h2>
<p>Bla bla bla</p>
</div>
<div id="corps" >
<textarea name="art_corps" cols="58" rows="17"></textarea>
</div>
</div>


Et dans le code CSS :


#smil_corps {
	position:relative;
	height:330px;
	width:100%;
}

#smileys {
	position:absolute;
	top:0px;
	left:0px;
	height:300px;
	width:15%;
	margin-right:18px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #73a2bd;
	background-color: #D0D9E1;
	text-align:center;
	text-indent:0px;
	vertical-align:baseline;
	overflow:auto;
}

#corps {
	position:absolute;
	top:0px;
	right:0px;
	width:500px;	
	height:300px;
	padding: 10px 10px 10px 10px;
	border: 1px solid #73a2bd;
	text-align:center;
	vertical-align:middle;
	background-color: #D0D9E1;
	overflow:auto;
	z-index:50;
}


Dinc en résumé, comment faire en sorte que le DIV de gauche s'adapte à la place prise par le DIV de droite et se réduise où s'étire, pour conserver 18px de marge avec ce dernier ?

@+ merci d'avance
SuprazZz a écrit :

Dinc en résumé, comment faire en sorte que le DIV de gauche s'adapte à la place prise par le DIV de droite et se réduise où s'étire, pour conserver 18px de marge avec ce dernier ?


En oubliant les positions absolues pas du tout faites pour ça, et en refaisant en flottant et en flux :
- ordre HTML : div de droite, puis div de gauche
- CSS div de droite: float right et marge gauche
- CSS div de gauche: pas de float, la laisser en flux. Elle remplira l'espace disponible en respectant la marge ci-dessus.

(Pourquoi les positions absolues ne sont-elles pas faites pour ça ? Parce que la base du positionnement absolu est d'ignorer tout autre élément éventuellement voisin ou à la même place, et de se poser là tranquillement en toute liberté Smiley cligne )
Modifié par Laurent Denis (10 Jul 2005 - 12:36)
Mon sauveur Smiley biggrin

Merci, merci beaucoup ! Smiley lol

J'avais déjà essayer d'utiliser float, mais je n'avait aps pensé à inverser les deux DIV dans le code HTML...
Modifié par SuprazZz (10 Jul 2005 - 13:38)
SuprazZz a écrit :
Mon sauveur Smiley biggrin


Meuh non, meuh non Smiley confused

allô ? Un point à ajouter dans la FAQ de ce forum sur le fait qu'un élément flottant ne flotte que s'il précède l'élément qui est supposé venir se mettre à côté de lui, pas s'il le suit ? Smiley cligne

(<edit>certes, il flotte dans tous les cas. Mais dans le deuxième, le bidule part à la baille Smiley lol )
Modifié par Laurent Denis (10 Jul 2005 - 13:50)
Administrateur
Laurent Denis a écrit :
allô ? Un point à ajouter dans la FAQ de ce forum sur le fait qu'un élément flottant ne flotte que s'il précède l'élément qui est supposé venir se mettre à côté de lui, pas s'il le suit ? Smiley cligne

La FAQ n'est peut-être pas le meilleur endroit, mais si j'ai bien compris la question, il me semble que c'est déjà expliqué dans le tuto sur le positionnement :
tuto a écrit :
Récapitulatif. Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.


Ensuite, je ne suis pas responsable si les tutoriels ne sont pas lus et si les gens font des tests aveugles puis se plaignent Smiley cligne
Modifié par Raphael (10 Jul 2005 - 14:14)
Salut tous,

Je pense que cela serait plus parlant si tu inversais le float de l'exemple.

La on s'apercevrais bien que même si l'on veux que l'element flotte à droite il doit quand même etre situé devant.

Ou mettre la syntaxe de 2 exemples un flottant droit et un flottant gauche

Une lecture possible de l'exemple est que le flottant est à gauche je le mets avant et j'en deduis que pour la droite il faut le mettre après, c'est vrai comme tu le dit si je ne vais pas plus loin et que je m'arrette à cela
hé bien je suis sur de passer à coté de la nuance et de l'information.

Si dans ton exemple tu fait l'inverse la nuance serait de suite visible le flottant à droite mais quand même devant l'élément supposé venir se mettre à côté de lui.
Raphael a écrit :

La FAQ n'est peut-être pas le meilleur endroit, mais si j'ai bien compris la question, il me semble que c'est déjà expliqué dans le tuto sur le positionnement :


D'une clarté fantastique, Raphaël . D'où cet appel à faire plus simple (On n'est exigeant qu'avec les bons Smiley cligne )

Raphael a écrit :

Ensuite, je ne suis pas responsable si les tutoriels ne sont pas lus et si les gens font des tests aveugles puis se plaignent Smiley cligne


Bienvenu au monde inconfortable de ceux qui écrivent des choses que les gens lisent de travers Smiley biggol
Raphael a écrit :
Ensuite, je ne suis pas responsable si les tutoriels ne sont pas lus et si les gens font des tests aveugles puis se plaignent Smiley cligne


Je me plains pas (si c'est de moi qu'on parle) Smiley biggrin
La qualité des tutoriels de ce site est déjà remarquable et exceptionel.
Je viens de constater que le forum compte des gens de qualité qui aident et savent expliquer.

Je n'ai vraiment aucune raison de me plaindre, au contraire Smiley biggrin
SuprazZz a écrit :


Je me plains pas (si c'est de moi qu'on parle) Smiley biggrin
La qualité des tutoriels de ce site est déjà remarquable et exceptionel.
Je viens de constater que le forum compte des gens de qualité qui aident et savent expliquer.

Je n'ai vraiment aucune raison de me plaindre, au contraire Smiley biggrin


C'est, AHMA, le complément indispensable de tout bouquin ou tutoriel de ce type. Faut avouer que sur ce coup-là, le Raphaël assume très bien, à la satisfaction générale. Il est pas mauvais, finalement, ce gars Smiley lol
Je reviens sur la question initiale, ayant utilisé le même principe général (avec un conteneur fixe mais je pense que le problème est le même avec une largeur fluide), j'avais eu la mauvaise surpise de voir qu'avec IE Mac (merci Stephan Smiley cligne ) cette méthode ne faisait pas glisser l'élément en flux à côté de l'élément flottant malgré la marge.

Je n'ai pas le souvenir exact du code HTML et CSS employé mais c'était le même genre, donc à vérifier sous IE Mac au cas où.

Nota : la mise en page fonctionnait parfaitement sous Firefox ou IE6 Win
Modifié par Olivier (10 Jul 2005 - 17:10)