28172 sujets

CSS et mise en forme, CSS3

Problème passage tableau > div

Arthur69 a écrit :
C'est ce que je fais, mais la seule-solution que j'ai trouvée, c'est le positionnement table-cell, incompatible IE...

Pas tout à fait, vu que ce mode de rendu (display: table-cell) est implémenté dans Internet Explorer 8.

Arthur69 a écrit :
Comment faire pour positionner 5 div à côté ?

En utilisant le positionnement flottant, par exemple.

Une remarque sur tes styles CSS: tu appliques sensiblement les mêmes styles à cinq éléments, en créant cinq classes différentes. Pourquoi ne pas avoir une classe commune, et appliquer les mêmes styles aux cinq éléments en ne déclarant qu'une seule classe dans le CSS? Si besoin, tu peux aussi utiliser un id unique pour chaque élément, voire une deuxième classe:
<div class="miniature" id="miniature_1">...</div>
Je met donc 5 div dans une div globale, avec un float:right et c'est bon ?


En disant que table-cell est incompatible IE, j'exclue IE 8, malheureusement pas encore assez utilisé par rapport à IE7...


Ah oui pour les class, c'était de bricolage qui ne marches pas super, je vais unifier tout ça. Smiley lol
Modifié par Arthur69 (14 Jun 2009 - 11:47)
Arthur69 a écrit :
Je met donc 5 div dans une div globale, avec un float:right et c'est bon ?

Avec une largeur fixe, plutôt un float:left qu'un float:right, et une gestion du dépassements des flottants au niveau du conteneur. Ce qui peut donner:
.vignettes {
    overflow: hidden; /* empêche le dépassement des flottants */
}
.vignettes > div {
    float: left;
    width: 150px;
}

PS: lire le Guide de survie du positionnement CSS et les articles qui y sont indiqués ne ferait pas de mal.
Modifié par Florent V. (14 Jun 2009 - 23:00)
Voilà ce que ça donne, et bizarrement, ça marche parfaitement sous IE, et mal sous Firefox...

La page : http://arthur.andre69.free.fr/photo/index2.html

Le Css : http://arthur.andre69.free.fr/photo/arthurphoto2.css


J'ai 3 problèmes :

- le div "pied_de_page" est par dessus mes autres div...
- mes miniatures ne sont pas centrées
- je n'arrive pas à aligner verticalement le texte de mes miniatures...


Le rendu proposé par IE7 est le bon. (IE6 fait presque tout bien, IE8 est comme FF...)


Bon, je penses que j'ai raté un truc énorme, mais je vois pas quoi, et puis là franchement, mon tableau était BIEN plus pratique et compatible... Smiley murf

Merci d'avance de votre aide.
Arthur69 a écrit :
Voilà ce que ça donne, et bizarrement, ça marche parfaitement sous IE, et mal sous Firefox...

C'est l'inverse: ça marche dans Firefox, Safari, Chrome, Opera, et IE8. Ça ne marche pas (même si le résultat visuel correspond à tes attentes) dans IE 6-7 car le résultat que tu obtiens est dû à un bug (un effet secondaire du HasLayout).

Arthur69 a écrit :
Bon, je penses que j'ai raté un truc énorme

Genre les trois premières lignes de mon code CSS ci-dessus?

Arthur69 a écrit :
franchement, mon tableau était BIEN plus pratique et compatible... Smiley murf

Bah rien ne t'empêche de l'utiliser.

Tu as trois solutions:
- utiliser un tableau de mise en page;
- utiliser une série de DIV et, en CSS, du display:table-cell (LA méthode prévue en CSS, mais pas compatible IE 6-7);
- utiliser une série de DIV et, en CSS, la propriété float (mieux supporté, mais demande la prise en compte d'une subtilité).

Personne ne t'oblige à opter pour l'une ou l'autre solution. Smiley cligne
J'avais honteusement ignoré cette ligne de code fondamentale...

Maintenant, ça fonctionne mieux, reste quelques problèmes :

- comment centrer mes div "ligne_1" et "ligne_2" ? (position relative ?)
- comment faire tenir ces div sur une seul ligne avec IE6 ?
- comment aligner verticalement le texte dans les div des miniatures ? (vertical-align ne fonctionne pas)


Merci d'avance, bonne soirée.
Arthur69 a écrit :
- comment centrer mes div "ligne_1" et "ligne_2" ? (position relative ?)

Avec les marges automatiques. Faire une recherche, sur ce site, sur les marges automatiques ou plus largement sur les techniques de centrage.

Arthur69 a écrit :
- comment faire tenir ces div sur une seul ligne avec IE6 ?

Ah, ça ne marche pas? Même lorsque les conteneurs ont une largeur fixe? On peut avoir un aperçu (capture d'écran)

Arthur69 a écrit :
- comment aligner verticalement le texte dans les div des miniatures ? (vertical-align ne fonctionne pas)

Avec un padding-top, par exemple.

En passant, la valeur d'un attribut id doit être unique dans la page. Si un identifiant (id) n'est pas unique, ce n'est pas un identifiant, n'est-ce pas? Tu écris donc: 
<div id="miniature_mur" class="miniature_mur1">...</div>
<div id="miniature_mur" class="miniature_mur2">...</div>
alors qu'il faudrait avoir: 
<div class="miniature_mur" id="miniature_mur1">...</div>
<div class="miniature_mur" id="miniature_mur2">...</div>
(et modifier le CSS en conséquence, bien sûr).
Modifié par Florent V. (17 Jun 2009 - 21:05)
Sujet clos
Aller à