28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis en train de faire un site Internet en CSS. Sur Internet Explorer pas de soucis.
Par contre, sur Mozilla, le cadre bleu de la page
http://www.ctgimmobilier.fr/acheter.php se met sous la photo alors que je voudrais qu'il soit aligner sur la droite.

Voici ma feuille de style :
body{
background-color:#FFF9E6;
margin-top:10px;
padding:0px;
text-align:center;
font-family:verdana;
font-size:10px;
}

#global{
background:url(images/fond.gif) no-repeat;
background-position:center top;
position:fixed !important;
position:absolute;
width:855px;
height:596px;
left:50%;
margin-left:-427.5px;
text-align:center;
}

#haut{
width:855px;
height:110px;
}

#menu{
background:url(images/fond_menu.gif) no-repeat;
border:solid 1px #0079C1;
width:848px;
height:20px;
margin:3px 0px 5px 2px;
text-align:center;
line-height:20px;
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
}

#conteneur{
width:100%;
height:400px;
margin-top:5px;
padding-top:15px;
}

#gauche{
float:left;
width:35%;
height:320px;
margin:0px 20px 10px 10px;
text-align:left;
}

#droite{
height:320px;
margin-right:20px;
text-align:left;
}

#bas{
background:url(images/fond_bas.gif) no-repeat;
border:solid 1px #0079C1;
width:848px;
margin-left:2px;
}

#menu_bas{
width:848px;
height:15px;
margin:0px auto 0px auto;
text-align:center;
color:#0079C1;
font-size:11px;
}

#photo_gauche{
height:225px;
margin-bottom:20px;
border:0;
}

.header{
margin-bottom:15px;
}

.texte{
width:240px;
height:65px;
margin:10px auto 2px 15px;
text-align:left;
font-size:10px;
}

.texte_photo{
float:left;
height:74px;
margin-top:3px;
padding-left:5px;
font-size:10px;
}

.texte_bas{
padding-top:1px;
padding-bottom:1px;
text-align:center;
color:#0079C1;
font-size:11px;
font-weight:bold;
}

table{
background-color:#E8EFF4;
width:230px;
margin-top:20px;
margin-left:20px;
color:#0079C1;
font-police:verdana;
font-size:11px;
font-weight:bold;
}

td{
border:solid 1px #0079C1;
}

img{
margin-top:3px;
border:0;
}

h2{
font-size:10px;
font-weight:normal;
}

a:link{
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a:visited{
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a:hover{
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a:active{
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a.menu:link{
text-align:center;
line-height:20px;
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a.menu:visited{
text-align:center;
line-height:20px;
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a.menu:hover{
text-align:center;
line-height:20px;
color:#0079C1;
font:11px/20px bold;
font-family:verdana;
font-weight:bold;
text-decoration:none;
}

a.menu:active{
text-align:center;
line-height:20px;
color:#0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a.lien:link{
color:##0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a.lien:visited{
color:##0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}

a.lien:hover{
color:##0079C1;
font:11px/20px normal;
font-family:verdana;
font-weight:bold;
text-decoration:none;
}

a.lien:active{
color:##0079C1;
font:11px/20px normal;
font-family:verdana;
text-decoration:none;
}


J'espère que l'on pourra m'aider.

Merci beaucoup.

Vinix
Plop,

Aucune différence entre FX et IE chez moi. Faudrait illustrer ton problème par un screen je pense.

Un petit formatage de ton code exposé dans ton message avec le bouton (cf règles du forum) serait aussi plus lisible : >
Seul problème constaté : l'agrandissement du texte fait se chevaucher pas mal de chose (et le fond du pied de page est trop court).

Note : avec Firefox, faire deux ou trois fois <ctrl><+>, pour voir…
mpop a écrit :
Seul problème constaté : l'agrandissement du texte fait se chevaucher pas mal de chose (et le fond du pied de page est trop court).

Note : avec Firefox, faire deux ou trois fois <ctrl><+>, pour voir…


ca on y peut pas grand chose, ont peut détruire un site en fesant <ctrl><+> ... ah moins de bloquer le texte par le css.

Je ne vois aucun probleme sinon entre IE et Firefox au niveau de l'affichage
s_har_k a écrit :
ca on y peut pas grand chose, ont peut détruire un site en fesant <ctrl><+>

Si on se préoccupe un minimum non seulement de l'accessibilité du contenu aux malvoyants (vue faible), mais aussi aux plus de quarante ans (vue souvent plus faible que les djeuns) et aux personnes qui ont un écran de plus de 1024px de large (soit un quart des utilisateurs tout de même)… si on se préoccupe de tout ça, on veillera à ce que l'agrandissement du texte de 1 ou deux niveaux ne détruise pas la lisibilité du site, justement !

Il y a des moyens pour ça, c'est juste une habitude à prendre. Et franchement, si on veut miser sur l'avenir, il va falloir s'y mettre : avec la multiplication et la diversification des terminaux (nos futurs écrans qui auront tous une résolution de 2000+ px de large, et à l'opposé les écrans de tous les appareils portables connectés qui auront une résolution bien inférieure à ça), ça risque de devenir un enjeu majeur. À moins de faire un site différent par groupe de résolutions. Smiley sweatdrop

s_har_k a écrit :
à moins de bloquer le texte par le css

Euh… tu ferais ça comment ?
Modifié par mpop (12 May 2006 - 17:57)
mpop a écrit :

Si on se préoccupe un minimum non seulement de l'accessibilité du contenu aux malvoyants (vue faible), mais aussi aux plus de quarante ans (vue souvent plus faible que les djeuns) et aux personnes qui ont un écran de plus de 1024px de large (soit un quart des utilisateurs tout de même)… si on se préoccupe de tout ça, on veillera à ce que l'agrandissement du texte de 1 ou deux niveaux ne détruise pas la lisibilité du site, justement !

Il y a des moyens pour ça, c'est juste une habitude à prendre. Et franchement, si on veut miser sur l'avenir, il va falloir s'y mettre : avec la multiplication et la diversification des terminaux (nos futurs écrans qui auront tous une résolution de 2000+ px de large, et à l'opposé les écrans de tous les appareils portables connectés qui auront une résolution bien inférieure à ça), ça risque de devenir un enjeu majeur. À moins de faire un site différent par groupe de résolutions. Smiley sweatdrop


Euh… tu ferais ça comment ?



Lorsque tu définis la grosseur de ton texte dans ton css, si tu bloque ta police en pixel, au lieu de la mettre en point ou en pourcentage meme si tu change la grosseur de ton texte avec <ctrl><+>, la police n'est pas sensé grossir ou raptisser. Donc avec ca, l'utilisateur ne devrait pas brisé le design du site.

Exemple:
font-size:10px;


Au lieu de:
font-size:8pt;


Cependant, comme tu disais, si on se préoccupe des malvoyants et ceux qui ont un problème de vu, cela reste un probleme, car la font ne peut pas se grossir.

*Edit: Cette exemple est valide pour IE
Modifié par s_har_k (17 May 2006 - 17:37)
ouais c'est bien tenté mais non :

EDIT par un modérateur : merci de ne pas afficher d'images énormes sur le forum afin de ne pas le déformer. Il y'a un bouton "créer une vignette" pour cela lorsque vous téléchargez les images.
Modifié par Raphael (17 May 2006 - 17:28)
c'est vrai, j'avais oublié pour FF... sa fonctionne sous IE. C'est un probleme auquel on doit faire face. Smiley cligne
DirtyF, tu devrais supprimer ton image trop large pour le forum (elle détruit sa charte graphique), et utiliser un lien ou une une miniature plus un lien. Smiley ohwell
Modifié par Smiley neko (17 May 2006 - 17:11)
Administrateur
Bonjour Vinix Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Modifié par Raphael (17 May 2006 - 18:54)
s_har_k a écrit :
c'est vrai, j'avais oublié pour FF... sa fonctionne sous IE. C'est un probleme auquel on doit faire face. Smiley cligne

Les développeurs de Firefox se sont retrouvés dans la situation suivante :
CONTEXTE :
– la majorité des sites utilise des polices en taille fixe (pixels ou points) ;
– pour cette raison, l'accessibilité de ces sites est mauvaise.

ALTERNATIVE :
– faire plaisir aux webdesigners, et ne jamais faire varier une police dont la taille a été donnée en unité absolue (pixels ou points) ;
– privilégier l'accessibilité, et considérer la taille donnée en unité absolue comme une référence de départ, pas comme une référence statique… donc permettre le redimmensionnement du texte ainsi fixé par le webdesigner.

Pour ma part, je félicite les développeurs de Firefox d'avoir privilégié la deuxième solution. Et il me semble qu'ils ne sont pas les seuls.

Au passage, ce choix était indispensable pour fournir un rendu correct sur les écrans à grande résolution (1280px de largeur et plus).