28173 sujets

CSS et mise en forme, CSS3

Décallage d'1 px avec Explorer

Bonjour à tous,

Voici mon tout petit problème du jour.

Je débute en CSS (donc mon code risque de ne pas être très très propre mais j'apprends Smiley smile ) et j'ai débuté les fondations d'un site que je dois réaliser.

Tout se passait bien jusqu'à ce que je teste ma page sous Ie où j'ai un tout petit décallage d'un pixel vers la droite de mes div, problème que je ne rencontre pas avec Firefox.

En clair, voici l'url de test :

www.rhumantic.net/Gedimat/index/

Le problème vient avec explorer quand on resize la fenêtre (dans certaines résolutions, le problème n'apparait pas).

En gros voici le code CSS concerné :

* {
margin: 0;
padding: 0;
}

body {
text-align:center;
background:url(img/back_site.jpg) center repeat-y #22304E;
font:normal 11px Arial;
}
#colonneprincipale {
margin:0 auto;
width:760px;
background-color:#FFF;
}

#barre_top {
width:760px;
height:32px;
text-align:right;
margin:0 auto;
background:url(img/bandeau_top.jpg) repeat-x #22304E;
font-size:10px;
color:#FFF;
}

----------------------

Autre petite question, est-il possible d'étendre mon div "colonne principale" sur toute la hauteur de mon site ? et si oui comment ? Smiley sweatdrop

Merci d'avance pour vos réponses, j'espère avoir été assez clair, je suivrai mon post régulièrement si vous demandez des compléments d'information Smiley smile
J'ajoute le code html complet de ma page pour solliciter vos réponses pcq ça a pas l'air de vous inspirer lol :


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gedimat Ginion</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>

<body>
<div id="barre_top">
<div id="contact"></div>
<div id="acces_plan"></div>
</div>
<div id="colonneprincipale">
<div id="section-head-logo"></div>
</div>

</body>
</html>
Pas constaté de problème flagrant pour ma part. Peut-être un très léger décalage temporaire en cours de redimmensionnement, mais rien de catastrophique.

Par contre, je sais que l'on peut avoir des problèmes dans ce genre de configuration, qui viennent du fait que le contenu de page et l'image de fond ne sont pas liés :
- image de fond sur l'élément body, centrée via background-position ;
- contenu dans une div#global, centrée via la technique des marges automatiques.
La solution est alors d'utiliser une div englobante pour l'essentiel de ton contenu de page (voire pour l'intégralité), de centrer cette div englobante (marges automatiques), puis d'appliquer l'image de fond à cette div. Mais cette solution a ses limites, dans la mesure où ce bloc ne prendra pas automatiquement 100% de la hauteur (ce qui est réalisable en CSS, mais pas évident pour un débutant).


Au passage, tu as un problème de dépassement des flottants :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Merci pour ce premier élément de réponse je vais déjà voir avec ce que tu me dis pour voir si je peux arriver à faire qqchose de convenable.

En effet, l'effet visuel est léger quand on resize mais il est présent et il m'ennuie (sans doute mon côté graphiste qui ressort :'( ), je vais continuer à investiguer mais dans cette direction cette fois.

Merci
Rhumy a écrit :
En effet, l'effet visuel est léger quand on resize

C'est quoi, « resize » ?
Tu veux dire : « quand on redimmensionne (la fenêtre) » ?

Désolé, pas pu m'empêcher...
Oui "quand on redimensionne la fenêtre" en effet ... ou quand celle-ci est à une taille qui fait que ce décallage a lieu
Modifié par Rhumy (04 Oct 2006 - 14:38)
Sujet clos
Aller à