28173 sujets

CSS et mise en forme, CSS3

[Résolu] Images centrées se déplacent lors d'un redimenssionement.

Bonjour,

J'ai un petit problèmes d'images qui se déplacent lorsque la fenêtre du browser est redimenssioner de façon minimal. Voici un ''screenshot'' qui démontre clairement ce problème. http://www.socam.net/screenshot/

Pour une page acceuil je trouve que ce n'est pas un très gros problème étant donné que même avec une résolution à 800x600 le visiteur n'aura probablement aucun problème à visioner la page. Il doit être assez rare que quelqun visite une page web en dimenssionant ça fenêtre de cette façon (voir screenshot) mais le fait est que ça ma dérenge quand même. Smiley confus

J'aimerais savoir si il y a une façon de corriger ce petit problème qui me chatouille légèrement.

Voici mon code html:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Société de communication Atikamekw-Montagnais</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="site.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="logo"><img src="left_banner_top.gif" width="124" height="250" /><img src="logo.jpg" width="250" height="250" /><img src="right_banner_top.gif" width="117" height="250" /></div>  
</body>
</html>


Voici mon code CSS:

body{
    padding : 0;
    margin : 0;
    background-image : url(background.gif);
    background-position: 50% 50%;
    background-repeat : repeat-y;}
	body

#logo{
    text-align:center;
    margin-left: auto; 
    margin-right: auto; 
	
}


Le lien: http://socam.net/center2/

Merci,

Alec
Modifié par Alec Effeil (07 Jun 2007 - 06:42)
Bonsoir,

Le fait de réaliser une mise en page « fluide » ne signifie pas que l'on doit veiller à obtenir un affichage correct sur une fenêtre de 300px de large. Typiquement, il est nécessaire et utile pour l'utilisateur de fixer une largeur minimale pour la page (typiquement, une largeur comprise entre 500 et 750px).

Le seul cas d'utilisation raisonnable où le visiteur aura un écran aussi réduit, c'est s'il utilise un périphérique particulier.

Alec Effeil a écrit :
J'aimerais savoir si il y a une façon de corriger ce petit problème qui me chatouille légèrement.

1. Donner une largeur minimale (par exemple 600px) avec min-width.
2. Pour les périphériques à petit écran (smartphone, PDA, etc.), faire une feuille de style pour le média "handheld".
connecté
Modérateur
Salut,

Je viens juste pour demander une petite précision.

Florent V. a écrit :

Donner une largeur minimale (par exemple 600px) avec min-width.


De mon côté, j'aurai mis 

#logo{
width:600 px
}

Qu'elle est la différence entre min-width et width ? Est ce que tous les navigateurs comprennent cette instruction ?

++

Attention Alec Effeil : n'oublie pas de mettre l'attibut alt pour tes images Smiley cligne .
Modifié par Nolem (05 Jun 2007 - 02:04)
Salut,

Le min-width me convient seulement, sous internet explorer mon background reste centré avec mes images alors que sous firefox et Opera, le background continue d'aller vers la gauche de la fenêtre.

Merci,

Alec
connecté
Modérateur
Salut Alec,

Bizarre ton soucis. Chez moi sous IE, ff et opera, rien de particulier.

++
Nolem a écrit :
Qu'elle est la différence entre min-width et width ?

À part le fait que ça soit pas la même propriété ? Smiley sweatdrop

Pour un élément en affichage de type bloc (display: block), width définit la largeur tandis que min-width définit la largeur minimale.

On peut ainsi combiner width: 80% et min-width: 600px, par exemple.

Alec Effeil a écrit :
Le min-width me convient seulement, sous internet explorer mon background reste centré avec mes images alors que sous firefox et Opera, le background continue d'aller vers la gauche de la fenêtre.

Tu n'as pas de min-width dans ta page en ligne, donc difficile d'en dire plus. Par contre : pourquoi diable ton image d'en-tête est-elle découpée en trois images ? Je ne suis pas sûr que ça ait un intérêt, à part le fait de te créer des problèmes.
connecté
Modérateur
Florent V. a écrit :

On peut ainsi combiner width: 80% et min-width: 600px, par exemple.


Pas mal cette technique Smiley smile . Merci de cette petite précision utile Smiley smile

++
Bonjour,

http://socam.net/center2/

Voilà j'ai apporté le changement avec le min-width sur ma page. Donc le problème à propos duquel j'écrivais lors de mon dernier message c'est que sous firefox et Opera, le background continue d'aller vers la gauche de la fenêtre lorsque cette dernière est diminué. Sous internet explorer le background reste bien en place avec mes images, ce qui je trouve, est idéal.

Pour répondre à ta question Florent V. si l'image est divisé en trois partie c'est que les parties gauche et droite (où il ya des feuilles) n'ont pas de couleur unie derrières eux. J'aurais bien pu faire qu'une seule image (.jpg) en ayant un background lignés identique à celui sur ma page derrière les feuilles, mais ça n'aurait pas été très avantageux côté optimisation. Il y a surment d'autres façons dont j'aurais pu m'y prendre si jamais tu as ton idée la dessu n'hésite pas à m'en faire part surtout. Smiley smile

Pour voir la page complète de ce que je veux voici http://www.socam.net/

Merci encore pour tout l'aide qui m'est apporté ici,

Alec
Bonjour,

Pour obtenir ce que tu cherches pour firefox, essaye de donner aussi à html le min-width: 500px;

body{
    padding : 0;
    margin : 0;
    background-image : url(background.gif);
	background-position: center;
    background-repeat : repeat-y;
}

html{
    min-width:500px;/* pour FF */
}

#logo{
    text-align:center;
    min-width:500px;/* pour IE*/
}
Sujet clos
Aller à