28173 sujets

CSS et mise en forme, CSS3

[Résolu] Cherche solution Mise en page IE = OK Pas FF

Je cherche un résultat précis,

Voici un exemple de résultat qui "marche" sous IE ( grâce a ces bug )

http://www.hysatech.com/test.html

(Réduire la largeur de la fenêtre pour voir l’effet rechercher)

Comment faire (si possible) pour un fonctionnement tous navigateurs

Voici le code de l’exemple ( pas très conventionnelle je sais)


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
     margin: auto; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }
#global {
	background-color:#339999;
	height: auto;
	width: 100%;
}

#global div {
	width: 300px;
	height: 200px;
	margin: 30px;
	display: inline;
	background-color: #FFFF99;
}

#global div div {
	float: right;
	height: 200px;
	width: 200px;
	background-color: #FFCC66;
	margin: 0px;
}

</style>
</head>
<body>

<div id="global">
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
</div>

</body>
</html>


Idée ?

Merci d’avance
Modifié par gege71 (05 Apr 2006 - 23:50)
Sous IE
(Réduire la largeur de la fenêtre pour voir l’effet rechercher)

Regarde le deplacement des conteneurs en jaune
Modifié par gege71 (24 Mar 2006 - 23:36)
clb56 a écrit :
Je n'ai pas envie d'ouvrir IE ce soir...

... Désolé.


Utilise Firfox avec IETab
Modifié par gege71 (24 Mar 2006 - 23:42)
Bon, tu veux dire que lorsqu'on reduit sérieusement la taille en largeur de la fenetre sous IE, les blocs se placent l'un en dessous de l'autre automatiquement ? c'est cela l'effet?

a+
Modifié par Vajra (25 Mar 2006 - 00:56)
Vajra a écrit :
Bon, tu veux dire que lorsqu'on reduit sérieusement la taille en largeur de la fenetre sous IE, les blocs se placent l'un en dessous de l'autre automatiquement ? c'est cela l'effet?


gagner

et en plus de facon centré Smiley cligne

Je ne vois pas comment je pourrais faire vu que ça correspond a du traitement en ligne mais que les conteneur inline ne peuvent contenir de bloc !... Smiley decu

Pourtant je trouve l’effet : esthétique
gege71 a écrit :

Je ne vois pas comment je pourrais faire


En faisant pas conventionnel, sans doctype, en ne faisant que pour IE, peut etre que....? Smiley cligne
Cette page web n'est là que pour le test si j'ai bien compris (impossible d'aller à la page index du site) Smiley cligne

a+
body {text-align: center; background: burlywood;}
div.conteneur {overflow: hidden; display: inline-block; background: orangered; width: 320px; height: 200px; margin: 30px;}
div.conteneur div {float: right; width: 200px; height: 100%; background: #fed;}
div.conteneur p {margin: 0 200px 0 0; height: 100%; background: royalblue;}

Bon résultat avec Konqueror, presque ça avec Opera, ne passe pas avec Firefox ni avec IE.

Il va falloir attendre un meilleur support de la propriété display: inline-block.
Vajra a écrit :


En faisant pas conventionnel, sans doctype, en ne faisant que pour IE, peut etre que....? Smiley cligne
Cette page web n'est là que pour le test si j'ai bien compris (impossible d'aller à la page index du site) Smiley cligne


Je sais que IE représente la plus grande partie des navigateur mais je ne veux pas léser les défenseur de solution alternative (dont je fait partie )

mpop a écrit :
body {text-align: center; background: burlywood;}
div.conteneur {overflow: hidden; display: inline-block; background: orangered; width: 320px; height: 200px; margin: 30px;}

div.conteneur div {float: right; width: 200px; height: 100%; background: #fed;}
div.conteneur p {margin: 0 200px 0 0; height: 100%; background: royalblue;}

Bon résultat avec Konqueror, presque ça avec Opera, ne passe pas avec Firefox ni avec IE.

Il va falloir attendre un meilleur support de la propriété display: inline-block.


display: inline-block, Je ne connaissais pas mais ça me semble prometteur quand ça sera reconnu sur tout les navigateur, surtout les alternatifs vu que sous IE ça marche ( il sufira de mettre un conditionnel )

A+
Bonjour gege71,

Il y a un exemple de gallerie photo, tiré du livre d'Eric Meyer "More Eric Meyer on CSS" qui ressemble, à peu près, à ce que tu cherches.

Les photos et leurs légendes s'adaptent à la fenêtre du navigateur comme sur ton exemple. Mais là, ça marche aussi sous FF.

Pour voir le code tu peux télécharger les fichiers à cette adresse.

Il y a 22 fichiers html qui donnent les étapes pour monter cette gallerie photo avec des variantes de présentation. (Bien sûr c'est encore mieux si tu as le livre pour avoir les commentaires sur la démarche d'Eric Meyer.)

Les pages "ch02b2.html" et "ch0210.html" correspondent presque à ce que tu cherches. Sauf que le texte n'est pas à gauche de l'image.

A toi de voir en modifiant le code CSS.

A+ Smiley cligne
Administrateur
Bonjour,

merci d'éditer le titre du sujet pour qu'il reflète le problème rencontré, celui qu'il a fallu 4 ou 5 posts avant de le connaître, comme demandé dans l'Aide. "J'ai un problème", "J'ai une question" ou "Cherche solution" ne sont pas pertinents et pourraient constituer 95% des titres des différents Salons d'Alsacréations Smiley eek

Felipe
Modérateur
bonjour,
effectivement pas tres explicite le titre Smiley smile

Sans centré tes boites et en proposant 2 css en usnat des proprité display:table et compagnie associer a un float, il est possible de retrouvé un aspect acceptable dans firefoxe (sur mon site , 57% des utilisateur sous sous IE (6 , 5.5 a 2%), 37% sous firefoxe/mozilla , opera, IE 5 et IE 7 entre 0.2 0.3 % , les autres navigateurs sont dans les 0.1 % ...) .

voici donc un essai que tu peut creuser si tu veut baser sur ta page, sans toucher au html :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
     margin:0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
	display:table;/* pour ff */
	width:100%;
	height:100%;
     }
#global {
	background-color:#339999;
	_height:100%;/* pour  IE */ 
	width: 100%;
	display:table-cell;/* pour ff */	
}

#global div {
	_display: inline;/* pour  IE */
	float:left;/* pour ff */
	_float:none;/* pour  IE */
	width: 300px;
	height: 200px;
	margin: 30px auto 30px 30px;
	background-color: #FFFF99;
}

#global div div {
	float: right;
	height: 200px;
	width: 200px;
	background-color: #FFCC66;
	margin:0 ;
}

</style>
</head>
<body>

<div id="global"> 
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
  <div>
    <div class"photo">Photo</div>
	texte texte texte texte texte texte texte texte texte texte texte texte texte
  </div>
</div>

</body>
</html>


++
Ca progresse mais dommage ont perd toujours le centrage Smiley ohwell

Il faudrait un float : center !... Smiley lol

Merci A+

PS : toujours preneur si quel qu’un a une idée
Salut,

J'arrive à quelque chose d'équivalent sur cette PAGE

Avec ce code : 
<style type="text/css">
ul, li, body {
	margin: 0;
	padding: 0;
}
ul  {
	text-align: center;
}
li {
	display: inline;
}
span.cadre {
	display: table-cell;
	display: inline-block;
	padding: 30px;
}
span.photo {
	float: right;
	height: 200px;
	width: 100px;
	background-color: orange;
}
span.texte {
	height: 200px;
	width: 150px;
	display: block;
	margin-right: 100px;
	background-color: yellow;
}
</style>
<!--[if IE]>
<style type="text/css">
span.cadre {
	height: 200px;
	width: 250px;
	background-color: yellow;
	padding: 0;
	margin: 30px;	
}

span.texte {
	height: auto;
	width: auto;
}
</style>
<![endif ]-->
<ul>
	<li>
	<span class="cadre">
		<span class="photo">Image</span>
		<span class="texte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </span>
	</span>
	</li>	
	<li> etc...

Testé avec Firefox, IE (5.0 à 6) et Opera.
A mon avis ce n'est pas à utiliser : c'est bien coûteux et fragile pour un simple effet de centrage, alors que sans ça un float:left est tellement simple !

Bonne soirée
Modifié par Alan (05 Apr 2006 - 22:26)
Pour Alan :

Chapeau bas, il fallais le trouver, grand bravo

En plus ça s’intègre très facilement dans une page dynamique php Smiley biggrin

Vu la date du dernier post, ça a du te trotter dans la tête ! ? Smiley rolleyes

Merci A+
Modifié par gege71 (05 Apr 2006 - 22:46)
Administrateur
Hello,

Peux-tu éditer ton titre et le marquer d'un [Résolu] comme le demandent les Règles que tu as approuvées en t'inscrivant ? Smiley cligne

Merci d'avance.
Sujet clos
Aller à