28172 sujets

CSS et mise en forme, CSS3

Bloc alignement verticale

bonjour,

Après avoir chercher tester et perdu au moins deux litres de cola Smiley langue , rien n'y fait je ne trouve pas de code correct. Smiley decu

Sur mon site cheapmonkeys.free.fr qui ne marche que sous mozilla firefox...Il y a un probleme sous internet explorer aucun moyen de tout aligné correctement.

Mon autre souci mis à part internet explorer est que mon site est parfait pour un écran 19 pouces et plus mais ne rentre pas pour un 17 ou moins.

est-ce possible de donner les tailles en pourcentages ?

Voici le modèle de site que je voudrais :
clik ici
merci de vos réponses par avance ^^ Smiley lol
Modifié par greenjour (24 Jul 2008 - 13:11)
Juste au passage:
greenjour a écrit :
mon site est parfait pour un écran 19 pouces et plus mais ne rentre pas pour un 17 ou moins.

La taille de l'écran n'a aucune importance (ou presque), c'est la résolution de l'écran qui importe.
À l'heure actuelle, le 1024 x 768 reste la configuration la plus utilisée (un peu plus de 40% des utilisateurs) et peut donc être considérée comme résolution minimale à supporter.
Bonsoir,

il y a malheusement aucun CSS pouvant effectuer un centrage vertical entre 2 images (DIV imbriqué) dont la 2eme possède une hauteur inconnu


http://forum.alsacreations.com/faq/faq-3-Comment-centrer-verticalement-un-element-.html, porte une petit erreur, sous IE 7 le code: http://carte59.free.fr/photoworld/test_centrage.html
ne fonctionne pas ou alors je n'ai pas tous compris...

( test sur FF, Safari, Opera OK )
mais attention avec FF, l'utilisation de float est incompatible ....


j'ai passé mon âpres midi et début de soirée à différents tests... le meilleur moyen est d'utiliser les tableaux avec CSS ... Smiley ohwell

ou alors il faut se coltiné une fonction en JavaScript permettant de pallier au manquement de IE !!! ( chose que j'ai commencé... mais comme je ne suis pas expert.. dur dur ) Smiley eek

http://carte59.free.fr/photoworld/test_diapo.html


si quelqu'un peu revoir le JavaScript.. il reste a effectuer le décalage ...

ceux ci pourra ensuite être proposé pour le tutorial. Smiley langue


Cordialement
Thierry
Modifié par MastroCode (26 Jul 2008 - 23:50)
Bonjour et bienvenue sur Alsacréations Smiley smile ,

MastroCode a écrit :

ne fonctionne pas ou alors je n'ai pas tous compris...


C'est certain que réaliser des tests sur une structure html dépourvue de DOCTYPE est assez aléatoire Smiley cligne
MastroCode a écrit :
il y a malheusement aucun CSS pouvant effectuer un centrage vertical entre 2 images (DIV imbriqué) dont la 2eme possède une hauteur inconnu

Hmm... en fait si. Il suffit de jouer avec display: table-cell, ou éventuellement display: inline-block. Mais ça pose un petit problème de compatibilité avec certains navigateurs (IE 6 et 7, Firefox 2), tandis que d'autres s'en sortent bien (Firefox 3, Safari 2 et 3, Opera depuis belle lurette).

Donc ça existe en CSS, mais ça n'est pas encore vraiment utilisable.

MastroCode a écrit :
sous IE 7 le code: http://carte59.free.fr/photoworld/test_centrage.html
ne fonctionne pas ou alors je n'ai pas tous compris...

Il y avait effectivement une erreur, c'est sous IE inférieur à la version 8 (donc toutes les versions stables d'Internet Explorer, vu que l'on attend la beta2 d'IE8 pour le mois d'aout, et la version finale pas avant la fin de l'année).

Edit: +1 pour le Doctype. Vous direz trois Ave, deux Pater, et quinze «Je ne ferai plus de page sans Doctype en bonne et due forme.»
Modifié par Florent V. (27 Jul 2008 - 01:40)
Florent V. a écrit :
Hmm... en fait si. Il suffit de jouer avec display: table-cell, ou éventuellement display: inline-block. Mais ça pose un petit problème de compatibilité avec certains navigateurs (IE 6 et 7, Firefox 2), tandis que d'autres s'en sortent bien (Firefox 3, Safari 2 et 3, Opera depuis belle lurette).

Donc ça existe en CSS, mais ça n'est pas encore vraiment utilisable.
On va pas rouvrir le débat mais à mon avis le plus gros frein à cette technique est Firefox 2. Dès qu'il aura disparu il n'y aura plus de réel problème.
Changaco a écrit :
On va pas rouvrir le débat mais à mon avis le plus gros frein à cette technique est Firefox 2. Dès qu'il aura disparu il n'y aura plus de réel problème.

Pour display: inline-block, aussi bien Firefox 2 (aucun support) qu'Internet Explorer 6 et 7 (support partiel car pas de support pour les éléments de type bloc, même si on peut éventuellement hacker ça à coup de hasLayout) sont des freins considérables.
Pour display: table-cell, le frein à l'heure actuelle est Internet Explorer toutes versions confondues, et display: table-cell ne sera utilisable de manière compatible que quand IE6 sera mort, IE7 consigné à quelques dixièmes de points de parts de marché, et IE8 et IE9 largement répandus. Donc c'est pas pour demain matin. Smiley cligne
hé oui, je suis nouveau sur le forum.. mais lecteur de temps en temps des FAQ... Bravos pour le site. et bravos pour le Forum Smiley smile

Merci pour les précisions. et je vais voir pour le doctype Smiley smile


Ave Ave Ave

Pater Pater

j'ai dit 15 fois :
«Je ne ferai plus de page sans Doctype en bonne et due forme.»

Smiley ravi


PS: persone veux continuer le javascript que j'ai entrepris ?
Code sur :
http://carte59.free.fr/photoworld/test_centrage.html


A bientot
Florent V. a écrit :
Pour display: inline-block, aussi bien Firefox 2 (aucun support) qu'Internet Explorer 6 et 7 (support partiel car pas de support pour les éléments de type bloc, même si on peut éventuellement hacker ça à coup de hasLayout) sont des freins considérables.
<hs>Un commentaire conditionnel suffit largement à IE c'est Firefox 2 le vrai problème.</hs>
Salut,

à tout hasard, j'ai centré un de mes sites avec le code suivant:


#content {
position:absolute;
left: 50%;
top: 50%;
width: 800px;
height: 600px;
margin-top: -300px; /* moitié de height */
margin-left: -400px; /* moitié de width */
}


Smiley langue
Modifié par Battyboy (31 Jul 2008 - 17:12)
Sujet clos
Aller à