Ubuntu-fr

Bzh

Un tableau d'une ligne avec deux colonnes en DIV + CSS

Bonjours !

Je me galère depuis un bout de temps sur un truc basique !

Créer un tableau d'une ligne contenant deux colonnes.
Mon code fonctionne parfaitement sous firefox mais plante sous internet explorer :

/*Division de la page en deux colonnes					*/
div.deux_colonnes {
	margin : 0px;
	margin-left : 2px;
	margin-right : 2px;
	width : auto;
	overflow : auto;	
}
div.deux_colonnes div.gauche {
	margin : 0px;
	float : left;
	overflow : auto;
	height : 100%;
}
div.deux_colonnes div.droit {
	margin : 0px;
	overflow : auto;
	height : 100%;
}

					<div class="deux_colonnes">
						<div class="gauche" style="width:50%;">
							
						</div>
						<div class="droit">
							
						</div>
					</div>

Savez-vous pourquoi ? Merci...

lunique

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

et en rajoutant : "&nbsp"dans les balises des cellules ?
Et pourquoi pour faire un tableau, tu utilise des div et pas un tableau ?

Bzh

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

Un tableau est a proscrire lors de la mise en page du design ! De longs tutoriaux sont facilement trouvable sur internet pour t'en convaincre !

Oui, bien évidement, il y a du contenu à l'interieur des divs, par exemple :

					<div class="deux_colonnes" style="background-color:#F1F1F1;border : dotted 1px #8E8E8E;margin-top:2px;">
						<div class="gauche" style="width : 152px;">
							<img src="./tmp/white.png" style="margin:10px;border:1px solid #8E8E8E;" alt="news" />
						</div>
						<div class="droit">
							<p>Ange le jour, Diable la nuit...<br />[...] C'est parce que vous etes la jeunesse la plus élégante et la plus diabolique de Montpellier que nous vous invitons à venir celebrer cette soirée placée sous le signe de la purification [...] DRESS CODE : White (conseillé mais non obligatoire).</p>
						</div>
					</div>

Dernière modification par Bzh (Le 01/01/2007, à 19:16)

lunique

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

Arf, je pensais que tu voulais un vrai tableau, pas faire une mise en page
Comme je ne peux pas utiliser IE, c'est quoi le symptome sous IE, les boites son l'une sous l'autre?
http://openweb.eu.org/articles/initiation_display/
Je testerai en rajoutant le style : display : in-line aux div droit et gauche

Bzh

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

Non !

Voici sous firefox, le résultat correct :

et maintenant sous internet explorer :

Pffff... je désespère !

geekieornotgeekie

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

J'ai pas IE donc j'ai pas pu essayer, mais essaie avec ça:

/*Division de la page en deux colonnes                    */
div.deux_colonnes {
    margin : 0px;
    margin-left : 2px;
    margin-right : 2px;
    width : auto;
    overflow : auto;    
}
div.deux_colonnes div.gauche {
    margin : 0px;
    	float: left;
    height : 100%;
}
div.deux_colonnes div.droit {
    margin : 0px;
position: relative;
    height : 100%;
}

Frz

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

Moi j'essaierais en ajoutant

clear: both;

au style de ta div.deux_colonnes

Et sinon je pense qu'utiliser des

<dl>
<dt><img src="..." alt="..." /></dt>
<dd><img /></dd>
</dl>

pourrait être plus juste et certainement plus simple à mettre en forme

naholyr

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

Vouloir aveuglément ne pas utiliser de tableau, et les remplacer systématiquement et complètement par des balises vides de sens (div) n'est pas plus conseillé qu'utiliser du table-layout... Sauf qu'en plus tu te fais chier des heures à gérer ta mise en page.

Je te conseille de visiter le site d'alsacreations, et de ne pas t'arrêter à appliquer aveuglément les conseils que tu as pu lire ici et là. Discernement et mesure sont les clés de la réussite

Dernière modification par naholyr (Le 12/01/2007, à 11:56)

---

Messagerie instantanée : naholyr@jabber.fr
Envoyer vos images sur le web d'un clic !
Choix du système à rebooter (graphique)

pcamut

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

va faire un tour sur ce site,
tous les pages utilise le meme code html, seule la css differe.
www.csszengarden.com

---

Ubuntu 7.04 - Debian Lenny Amd64
Core2Duo E6320@2.8GHz - 2 Go Ram - 7300Gt PCIe - Asus P5B-e plus - 160 Go et 500 Go - Dual Screen

pled

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

et si ajoutes un

<div style="clear:both"

entre chaque tableau d'une ligne dans le code html de ta page  ??

ça devrait fonctionner...

Vive la Bretagne !! ;-)

Aelor

Re : Un tableau d'une ligne avec deux colonnes en DIV + CSS

Vouloir aveuglément ne pas utiliser de tableau, et les remplacer systématiquement et complètement par des balises vides de sens (div) n'est pas plus conseillé qu'utiliser du table-layout... Sauf qu'en plus tu te fais chier des heures à gérer ta mise en page.

Je te conseille de visiter le site d'alsacreations, et de ne pas t'arrêter à appliquer aveuglément les conseils que tu as pu lire ici et là. Discernement et mesure sont les clés de la réussite

Il faut utiliser l'xhtml sémantiquement.

Il fait une liste de news, donc il faut que ca soit une liste dans le code xhtml. Pas un div.

Un truc du genre de frz devrait etre parfait.

Mais bon, faites comme vous voulez, hein.

---

Ex Roane.

Ruby, le langage qui tue : http://rubyfr.org