28173 sujets

CSS et mise en forme, CSS3

[New Question] Mise en page CSS... gros problème !

Bonjour à tous...

Voilà, je me lance depuis quelques jours à pieds joints dans le 100% DIV & CSS... enfin du moins j'essaye. Me voilà bloqué...

Ce que je voudrais faire est le shéma suivant :

http://www.wantow.be/tmp/shema_div_css.gif

Voici le code utilisé :

.cadreInfo100 {
	margin:5px;
	padding:5px;
	background-color:#CCCCCC;
	border:1px dotted #000000;
	overflow:auto;
}
.cadreInfo100 .cadreInfo50G, .cadreInfo100 .cadreInfo50D {
	margin:5px;
	width:350px;
	background-color:#CCCCCC;
	border:none;
}
.cadreInfo100 .cadreInfo50G {
	float:left;
}
.cadreInfo100 .cadreInfo50D {
	float:right;
}


>>> Sous Firefox : Aucun problème, mon shéma s'affiche exactement comme je veux

http://www.wantow.be/tmp/div_css_fire.gif

>>> Sous IE (6) : Problème

http://www.wantow.be/tmp/div_css_ie.gif


Qui a une solution ? Je ne voudrais pas avoir recours au <table>...

Je voudrais, que peut importe le navigateur, le DIV A, suive en longueur la hauteur des deux div flottant gauche et droite "dynamiquement"... s'ils deviennt plus haut, ben le DIV A se rallonge, comme ca le fait bien sous Firefox...

J'espère m'être bien fait comprendre...

A savoir, que le DIV A et B se trouvent eux-même dans un DIV conteneur principal...

Merci d'avance,

PS j'ai déjà essayé pas mal de choses... mais sans résultats.
Smiley bawling
Modifié par DaMonkey (03 May 2006 - 19:21)
Salut

Tu as une petite erreur dans tes styles cadreInfo100 devrais être une classe et tu as deux endroit ou tu la met en ID

#cadreInfo100 .cadreInfo50G {
	float:left;
}
#cadreInfo100 .cadreInfo50D {
	float:right;
}


essaie ceci


.cadreInfo100 {
	margin:5px;
	padding:5px;
	background-color:#CCCCCC;
	border:1px dotted #000000;
	overflow:auto;
}

.cadreInfo100 .cadreInfo50G, .cadreInfo100 .cadreInfo50D {
	margin:5px;
	width:350px;
	background-color:#CCCCCC;
	border:none;
}
.cadreInfo100 .cadreInfo50G {
	float:left;
}
.cadreInfo100 .cadreInfo50D {
	float:right;
}


A+
c'est une erreur de ma page dans la retranscription sur le forum... j'ai réglé le code par un edit de mon post... tout est sous forme de classe. C'est le but, puisque je voudrais utiliser ce type de mise en page plusieurs fois dans la même page... donc pas de ID, mais class

Merci comeme pour la remarque... Smiley cligne
Avancement :

Voici le code légèrement modifié :

.cadreInfo100 {
	margin:5px;
	padding:5px;
	_height:100px; /* petit truc pour IE pour qu'il englobe les floats */
	background-color:#CCCCCC;
	border:1px dotted #000000;
	overflow:auto;
	clear:both;
}
.cadreInfo100 .cadreInfo50G, #cadreInfo100 .cadreInfo50D {
	margin:5px;
	width:350px;
	background-color:#CCCCCC;
	border:none;
}
.cadreInfo100 .cadreInfo50G {
	float:left;
}
#cadreInfo100 .cadreInfo50D {
	float:right;
}


Sous firefox :

http://www.wantow.be/tmp/div_css_fire2.gif

Sous IE :

http://www.wantow.be/tmp/div_css_ie2.gif


Voilà, je me rapproche de ce que je veux, mais je ne veux pas ces scrollbars que IE affiche, mais bien un suivi en longueur du DIV A à la place des scrolls...

Merci d'avance,
Fred
Modifié par DaMonkey (01 May 2006 - 22:15)
essai 


.cadreInfo100 {
	margin:5px;
	padding:5px;
	background-color:#CCCCCC;
	border:1px dotted #000000;
	overflow:auto;
}
.cadreInfo100 .cadreInfo50G, .cadreInfo100 .cadreInfo50D {
	margin:5px;
	width:350px;
	background-color:#CCCCCC;
	border:none;
}
.cadreInfo100 .cadreInfo50G {
	float:left;
}
.cadreInfo100 .cadreInfo50D {
	float:right;
}
.cadreInfo100 span {
	clear: both;
}

et tu rajoute 

 <span> </span>

a la fin du div A
http://213.189.166.180/wantow2/css/test.php


Je te remercie pour ton aide...

Je suis sur qu'il doit y avoir une sacrée bete astuce, mais faut la trouver... Smiley lol
Modifié par DaMonkey (01 May 2006 - 22:39)
voila

Attention il y avais encore des erreur de confution entre Class et ID


.cadreInfo100 .cadreInfo50G, [#red]#cadreInfo100[/#] .cadreInfo50D {}
.cadreInfo100 .cadreInfo50G {}
[#red]#cadreInfo100[/#] .cadreInfo50D {}



New CSS 

.cadreInfo100 {
	margin:5px;
	padding:5px;
	background-color:#CCCCCC;
	border:1px dotted #000000;

}
.cadreInfo100 .cadreInfo50G, .cadreInfo100 .cadreInfo50D {
	margin:5px;
	width:350px;
	background-color:#CCCCCC;
	border:none;
}
.cadreInfo100 .cadreInfo50G {
	float:left;
}
.cadreInfo100 .cadreInfo50D {
	float:right;
}
[#blue]
.spacer {
	clear: both;
}[/#]


Ex: HTML


		<div class="cadreInfo100"> <!--DIV A-->
			<div class="cadreInfo50G">
				<p>essai</p>
			</div>
			<div class="cadreInfo50D"> DIV B
				<p>essai2</p>
			</div>
			
		    [#blue]<div class="spacer"> </div> <!-- Ne pas oublier -->[/#]
		</div>
		<div class="cadreInfo100">
		  <p>ijnlnjnjkl</p>
		</div>

Modifié par gege71 (01 May 2006 - 23:41)
OK c'est bon !!!!

J'ai enlevé la ligne _height:100px; que j'avais mis pour IE, now ca fonctionne nikel !

Enfin !!!

Un grand merci gege71 Smiley smile
Nouvelle question :

En reprenant le shéma tout au début de mon poste comme référence, est-il possible de faire en sorte que le div C et D s'aligne l'un à l'autre au niveau de la hauteur... et se dynamiquement.

Par exemple :

il y a plus de texte dans la boite C, et moins dans la boite D Au lieu que la boite D soit plus petite que la C, elle s'ajuste automatiquement à la hauteur de la C, et ce vice-versa bien sur...

Smiley biggol
Sujet clos
Aller à