[Html][DIV][MAJ] Problème d'alignement

[serik]

Salut, je cherche à minimiser la taille d'un conteneur contenant un FORM.

Pour l'instant quelques soient les réglages que j'ai fait, j'ai toujours mon formulaire prenant toute la largeur de la page.

Je ne veux pas mettre de taille fixe ou en pourcentage, car le contenu du formulaire est dynamique.

J'utilise bien sûr une feuille CSS.

Merci!

[serik]

Up!

[Quarky]

Si tu ne veux pas mettre de taille fixe ni de pourcentage, comment spécifier une taille ???

Désolé mais je cromprends rien !!!

[Nis]

Le contenu est dynamique en largeur ?

C'est vrai que c'est un peu bizarre ...

Si tu veux qu'il ait une taille x en fonction de la "dynamicité" de ton truc, tu devrais peut-être passer par Javascript dans ce cas ...

[serik]

En fait j'aimerais qu'il ai la taille la plus petit possible, mais il faut que chaque couple label/input soit sur la même ligne.

[windu.2b]

En fait j'aimerais qu'il ai la taille la plus petit possible, mais il faut que chaque couple label/input soit sur la même ligne.

avec width: auto; ca marcherait pas (désolé pas testé)?

[serik]

En fait j'aimerais qu'il ai la taille la plus petit possible, mais il faut que chaque couple label/input soit sur la même ligne.

avec width: auto; ca marcherait pas (désolé pas testé)?

Nen et c'est là le problème, ça me met la largeur maximale.

[Shinuza]

De quelle balise tu parles quand tu dis formulaire?

[Sentinel]

Mets le style suivant sur ton DIV qui contient le formulaire :

display:inline;

[serik]

si je met display: inline, j'ai mon cadre qui apparaît en haut à gauche de la div, taille minimale, le contenu de la div apparaît en dehors du cadre.

[serik]

En fait j'ai trouvé une solution partielle:

l'attribut min-width.

Sous firefox ok ça roule. Par contre sur cette bouze d'ie ça fait que dalle (mais bon on va pas les trucider non plus c'est pas dans la spec officielle).

Merci au logiciel Jext pour l'info

[serik]

Nouvelle question sur les DIV :

Je cherche à mettre un menu à gauche, et un contenu à droite.

Je crée donc une DIV pour le tout, la div du menu prend naturellement sa place à gauche, mais si je ne met pas "float: right" pour le contenu, il se retrouve en dessous.

Et si je le met, il voit sa taille au minimum.

Est-ce qu'il existe en CSS une wildcard pour dire "tailleMaxi" (style avant avec les frames on faisait "140,*", la frame de droite prenant le maximum de place.)

Merki

[Yangzebul]

Nouvelle question sur les DIV :

Je cherche à mettre un menu à gauche, et un contenu à droite.

Je crée donc une DIV pour le tout, la div du menu prend naturellement sa place à gauche, mais si je ne met pas "float: right" pour le contenu, il se retrouve en dessous.

Et si je le met, il voit sa taille au minimum.

Est-ce qu'il existe en CSS une wildcard pour dire "tailleMaxi" (style avant avec les frames on faisait "140,*", la frame de droite prenant le maximum de place.)

Merki

C'est le comprtement normal d'un div de prendre le maximum de place disponible en largeur et le minimum en hauteur.

Dans ton cas, le premier prends le maximum de place et "ettouffe" donc ton second div : il prends la place maximum et le div flottant se case dans l'espace restant. C'est normal puisque ton premier div arrive en premier dans la hierarchie de ton fichier et qu'il est le seul élément bloc à avoir une place "légitime" sur cette ligne, il est donc prioritaire.

Donc non, il n'a pas de wildcard taille maxi, puisque c'est déjà le comportement par défaut, pour que ton second div prennent plus de place il faut spécifier une largeur au premier (dans l'unitée de ton choix) comme ça le second prendra le reste.

Edit : en me relisant je me dis que j'ai vraiment un vocabulaire limité, je fais trop de répétitions . En tout cas j'espère que c'est compréhensible.

[serik]

Nouvelle question sur les DIV :

Je cherche à mettre un menu à gauche, et un contenu à droite.

Je crée donc une DIV pour le tout, la div du menu prend naturellement sa place à gauche, mais si je ne met pas "float: right" pour le contenu, il se retrouve en dessous.

Et si je le met, il voit sa taille au minimum.

Est-ce qu'il existe en CSS une wildcard pour dire "tailleMaxi" (style avant avec les frames on faisait "140,*", la frame de droite prenant le maximum de place.)

Merki

C'est le comprtement normal d'un div de prendre le maximum de place disponible en largeur et le minimum en hauteur.

Dans ton cas, le premier prends le maximum de place et "ettouffe" donc ton second div : il prends la place maximum et le div flottant se case dans l'espace restant. C'est normal puisque ton premier div arrive en premier dans la hierarchie de ton fichier et qu'il est le seul élément bloc à avoir une place "légitime" sur cette ligne, il est donc prioritaire.

Donc non, il n'a pas de wildcard taille maxi, puisque c'est déjà le comportement par défaut, pour que ton second div prennent plus de place il faut spécifier une largeur au premier (dans l'unitée de ton choix) comme ça le second prendra le reste.

Edit : en me relisant je me dis que j'ai vraiment un vocabulaire limité, je fais trop de répétitions . En tout cas j'espère que c'est compréhensible.

Mon premier a déjà une taille définie de 140pixels.

Le fait de mettre float fait que le conteneur prend une taille minimale. (Je viens de retester). Cependant c'est uniquement sous Firefox que ça bug, sur ie pas de problèmes.

Autre chose bizarre sous FF, soit :

<div>

<p>XXXX</p>

</div>

Si vous mettez la taille du div à 200 pixels, que vous mettez au P un margin: 0 20px 0 20px, et un width: 100%, sous FF ce sera 100% de 200pixels, sous ie 100% de 160 pixels, ce qui parait plus logique.

Maintenant si on met une bordure au P, la bordure sort à droite du DIV sous Firefox!!!!!!!

Tandis que sous IE elle reste à l'intérieur.

On dira ce qu'on veut, mais la gestion des DIV dans firefox est pitoyable!

Edit: Voilà le test:

TestCSS

Edit 2 : En fait IE augmente la taille du DIV à 240pixels. Alors qui a raison? Est-ce raisonnable d'accepter le fait qu'un paragraphe puisse sortie de sa box?

[Yangzebul]

Même si ça peut paraître bizzare que le paragraphe sorte de son bloc parent c'est le comportement normal. Ici c'est IE qui se trompe, pas Firefox (d'ailleurs Opera à le même rendu que FF ici).

C'est ce qu'on appelle le "modèle de boîte microsoft" ou comment faire chier le monde en incluant délibérement un comportement anormal sur quelque chose d'aussi basique que le calcul d'une largeur... plus d'infos ici : http://openweb.eu.org/articles/dimensions_boites_css/

En fait ta boîte sort parce que "margin" est considéré comme une dimension extérieur à ta boîte, donc les marges ne sont pas prises en compte dans le calcul de ta largueur totale, et vu que ta as spécifié une taille fixe à ton bloc parent, bah ca déborde...

La solution est d'utiliser un "padding" ou marge interne qui elle est calculée dans la largueur totale de ta boîte. Voila ce que ça donnerait :

div{
width: 160px;
height: 200px;
background-color: red;
padding: 0 20px;
}
p{
width: 100%;
border: 1px solid green;
}

Sinon pour ta première question, je n'y avais pas pensé tout de suite, mais l'explication est simple. Lorsque tu donnes "float" comme attribut à un bloc celui-ci est retiré du flux courant, il ne peut donc plus prendre la largeur maximale que lui offre son parent vu qu'il n'en as plus. C'est pourquoi il prends la latgeur de son contenu.

La solution est d'attribuer l'attribut float à ton menu qui lui as une taille fixe, essaye avec ça :

<body>
<div class="D">
<div class="E">div e</div>
<div class="F">div f</div>
</div>
</body>

.D{
border: 2px solid red;
padding: 2px;
}
.E,.F{
height: 50px;
border: 1px solid green;
}
.E{
width: 140px;
float: left;
}

Tu remarquera d'ailleurs le "bug", enfin bug c'est un grand mot vu que c'est une incompaptibilité volontaire, du modèle de boîte Microsoft qui nous sort un espace entre les deux blocs d'on ne sait où...

Sinon une dernière petite chose, que j'ai remarqué dans ton header, tu fais deux erreurs :

- ton Mime type est faux, tu déclare un doctype xhtml met ton Mime type déclare du html. plus d'info ici:

http://www.hixie.ch/advocacy/xhtml.fr/

http://www.pompage.net/pompe/doctypecontenttype/

- tu omet l'attribut média dans ta déclaration css, bon ce n'est pas indispensable mais vivement conseillé, surtout si tu pense faire une feuille de style print ou alternative dans l'avenir.

- ça ce n'est pas vraiment une erreur mais un conseil, arrête d'utiliser "iso-8859-1" comme codage de caractère. C'est une solution archaïque qui n'est pas adapté aux langues latines qui ont des caractères accentués, privilegie des codages de caractère comme l'utf-8 qui est aujourd'hui supporté par tout les navigateurs et t'évitera d'utiliser des entités html dès que tu veux mettre un accent ou autre.

Exemple de header :

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="macss.css" media="screen"/>

[serik]

Tu remarquera d'ailleurs le "bug", enfin bug c'est un grand mot vu que c'est une incompaptibilité volontaire, du modèle de boîte Microsoft qui nous sort un espace entre les deux blocs d'on ne sait où...

Sinon une dernière petite chose, que j'ai remarqué dans ton header, tu fais deux erreurs :

- ton Mime type est faux, tu déclare un doctype xhtml met ton Mime type déclare du html. plus d'info ici:

http://www.hixie.ch/advocacy/xhtml.fr/

http://www.pompage.net/pompe/doctypecontenttype/

- tu omet l'attribut média dans ta déclaration css, bon ce n'est pas indispensable mais vivement conseillé, surtout si tu pense faire une feuille de style print ou alternative dans l'avenir.

- ça ce n'est pas vraiment une erreur mais un conseil, arrête d'utiliser "iso-8859-1" comme codage de caractère. C'est une solution archaïque qui n'est pas adapté aux langues latines qui ont des caractères accentués, privilegie des codages de caractère comme l'utf-8 qui est aujourd'hui supporté par tout les navigateurs et t'évitera d'utiliser des entités html dès que tu veux mettre un accent ou autre.

Exemple de header :

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="macss.css" media="screen"/>

Pour l'espace entre les deux blocs, il vient de margin-left et margin-right. MS préfère agrandir la boite parente et respecter les attributs de marge que faire sortir le cadre de la boite. Il n'y a pas de recommandation dans la DOC CSS donc....(mais ce genre de chose ne devrait jamais arriver).

Pour le xhtml+xml ok merci je connaissais pas.

Par contre pour l'encodage, l'iso-8859-1 respecte parfaitement les accents (il est aussi appelé latin1) et je n'ai pas de problèmes pariculier pour faire passer les accents dans un form puis dans une BDD au format latin1 elle aussi. J'utilise les accents directement dans mes sources sans aucun problème aussi. (http://fr.wikipedia.org/wiki/ISO_8859-1) Le problème de l'utf-8 c'est la taille variable des caractères. Je ne sais pas si il existe un encodage UTF-8 de taille fixe adapté uniquement au latin (pas de caractères chinois donc).

[Yangzebul]

Pour l'espace entre les deux blocs, il vient de margin-left et margin-right. MS préfère agrandir la boite parente et respecter les attributs de marge que faire sortir le cadre de la boite. Il n'y a pas de recommandation dans la DOC CSS donc....(mais ce genre de chose ne devrait jamais arriver).

Pour le xhtml+xml ok merci je connaissais pas.

Non, je te parle du code que j'ai posté, dans lequel il n'y a aucune marge, simplement des bordures : IE affiche les bordures mais vu qu'il calcule la taille des cellules comme un porc il lui reste un espace entre les deux cellules E et F.

[serik]

Bon je vais reformuler la question : comment afficher deux boites l'une à côté de l'autre sans qu'elles sortent du flux?

Soit :

<div class="X">
<div class="L">a</div>
<div class="R">a</div>
</div>

Qu'attribuer comme css pour que :

-L fasse 100 pixels de large

-X fasse N pixels de large

-R fasse N-100 pixels de large et se trouve à droite de L

[astero-H]

Essaie -> float: left sur le div contenant ton menu ensuite tu pourras régler la taille avec width

et essaie ça -> http://www.google.fr/search?hl=fr&q=float+...he+Google&meta=

PS : <table> powaaaa lol

edit : oups j'avais pas tout bien lu

[Cubic-Design]

oui, il faut utiliser folat ( left pour le menu , right pour le contenu) avec position : absolute

[serik]

oui, il faut utiliser folat ( left pour le menu , right pour le contenu) avec position : absolute

Tu peux développer stp?

Parce que utiliser float fait sortir la div du flux, et donc la taille de la DIV ne sera pas calculée suivant l'espace disponible.

[Cubic-Design]

oui, il faut utiliser folat ( left pour le menu , right pour le contenu) avec position : absolute

Tu peux développer stp?

Parce que utiliser float fait sortir la div du flux, et donc la taille de la DIV ne sera pas calculée suivant l'espace disponible.

#contenu	{	width:70%;
			height:auto;
			float:right;
			margin-left:0px;
		}

#menu	{	position: relative;
		float: left;
		width:30%;
		height:auto;
	}

Voilà c'est le code que j'ai utilisé par exemple pour mettre un menu sur la gauche avec un contenu sur la droite les deux dimensionner en largeur par des poucentage (c'est ce que tu veux faire si j'ai bien compris)

[serik]

oui, il faut utiliser folat ( left pour le menu , right pour le contenu) avec position : absolute

Tu peux développer stp?

Parce que utiliser float fait sortir la div du flux, et donc la taille de la DIV ne sera pas calculée suivant l'espace disponible.

#contenu	{	width:70%;
			height:auto;
			float:right;
			margin-left:0px;
		}

#menu	{	position: relative;
		float: left;
		width:30%;
		height:auto;
	}

Voilà c'est le code que j'ai utilisé par exemple pour mettre un menu sur la gauche avec un contenu sur la droite les deux dimensionner en largeur par des poucentage (c'est ce que tu veux faire si j'ai bien compris)

Alors j'explique la finalité de mon projet :

-Un "chapeau" ; celui là ne me pose pas de problèmes

-Un menu à gauche, avec un arrière plan répété en y, taille fixe(en largeur)! doit être collé au chapeau

-Un contenu de largeur fixe (mais ce serait bien de ne pas devoir spécifier la largeur car c'est le bordel à calculer)

-Une bordure à droite, sous forme d'une image de 1pixel de hauteur (comme à gauche) répétée en y

-Un bas de page, et là ça devient chaud, car il faut que mes bordures gauches et droites vienne se coller au bas, donc que les div de gauche et de droite occupent la hauteur maximale, qui dépend du contenu central...

[Cubic-Design]

oui, il faut utiliser folat ( left pour le menu , right pour le contenu) avec position : absolute

Tu peux développer stp?

Parce que utiliser float fait sortir la div du flux, et donc la taille de la DIV ne sera pas calculée suivant l'espace disponible.

#contenu	{	width:70%;
			height:auto;
			float:right;
			margin-left:0px;
		}

#menu	{	position: relative;
		float: left;
		width:30%;
		height:auto;
	}

Voilà c'est le code que j'ai utilisé par exemple pour mettre un menu sur la gauche avec un contenu sur la droite les deux dimensionner en largeur par des poucentage (c'est ce que tu veux faire si j'ai bien compris)

Alors j'explique la finalité de mon projet :

-Un "chapeau" ; celui là ne me pose pas de problèmes

-Un menu à gauche, avec un arrière plan répété en y, taille fixe(en largeur)! doit être collé au chapeau

-Un contenu de largeur fixe (mais ce serait bien de ne pas devoir spécifier la largeur car c'est le bordel à calculer)

-Une bordure à droite, sous forme d'une image de 1pixel de hauteur (comme à gauche) répétée en y

-Un bas de page, et là ça devient chaud, car il faut que mes bordures gauches et droites vienne se coller au bas, donc que les div de gauche et de droite occupent la hauteur maximale, qui dépend du contenu central...

Tu pourrais faire un shéma (même paint si ça te saoule d'ouvrir photoshop pour ça) pour voir exactement parce que comme ça je vois pas trop dsl

[serik]

oui, il faut utiliser folat ( left pour le menu , right pour le contenu) avec position : absolute

Tu peux développer stp?

Parce que utiliser float fait sortir la div du flux, et donc la taille de la DIV ne sera pas calculée suivant l'espace disponible.

#contenu	{	width:70%;
			height:auto;
			float:right;
			margin-left:0px;
		}

#menu	{	position: relative;
		float: left;
		width:30%;
		height:auto;
	}

Voilà c'est le code que j'ai utilisé par exemple pour mettre un menu sur la gauche avec un contenu sur la droite les deux dimensionner en largeur par des poucentage (c'est ce que tu veux faire si j'ai bien compris)

Alors j'explique la finalité de mon projet :

-Un "chapeau" ; celui là ne me pose pas de problèmes

-Un menu à gauche, avec un arrière plan répété en y, taille fixe(en largeur)! doit être collé au chapeau

-Un contenu de largeur fixe (mais ce serait bien de ne pas devoir spécifier la largeur car c'est le bordel à calculer)

-Une bordure à droite, sous forme d'une image de 1pixel de hauteur (comme à gauche) répétée en y

-Un bas de page, et là ça devient chaud, car il faut que mes bordures gauches et droites vienne se coller au bas, donc que les div de gauche et de droite occupent la hauteur maximale, qui dépend du contenu central...

Tu pourrais faire un shéma (même paint si ça te saoule d'ouvrir photoshop pour ça) pour voir exactement parce que comme ça je vois pas trop dsl