Problème d'alignement CSS dans les balises

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème d'alignement CSS dans les balises

alx067

Bonsoir, je crée actuellement un site web avec une mise en page CSS.

Sous IE7 tout fonctionne à merveille, depuis quelques jours IE8 me mets un décalage de l'image... (pareil pour Firefox 3).

Je ne sais pas comment résoudre ce problème...

Voici l'image et les codes correspondants...

Fichier PHP :

Code :

(...)
<script type="text/javascript"></script>
<style type="text/css" title="currentStyle" media="screen">
@import "style/style.css";
</style>
<style type="text/css">body {
}
</style></head>
<body id="css-zen-garden">
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span></span></h1>
<h2><span></span></h2>
(...)
<div id="quickSummary">
<p class="p1"><span></span></p>
<p class="p2"><span></span></p>
</div>
<div id="preamble">
<p class="p3"><span>(...)</span></p>
<p class="p4">(...)</p>
<hr />
</div>
</div>
<div id="supportingText">
<div id="benefits">
(...)
</div>
</div>
</body>
</html>

Fichier CSS :

Code :

(...)
/*===================
body elements
===================*/
#container {
position:absolute;
width:790px;
left:50%;
margin-left:-395px;
}
#pageHeader {
background:url(banner.gif) no-repeat top center;
width:278px;
height:185px;
}
#pageHeader h1, #pageHeader h2 {
display:none;
}
#quickSummary {
background:url(bg_header.gif) repeat-y;
height:20px;
}
#quickSummary p{
display:none;
}
#preamble {
width:600px;
background:url(bg_repeater.gif) repeat-y;
padding:25px 45px 0px 35px;
voice-family: "\"}\"";
voice-family:inherit;
width:520px;
}
#preamble h3 {
display:none;
}
#preamble h3 span {
visibility:hidden;
}
#preamble p.p1 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:12pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
}
#preamble p.p2 {
/* background:url(preamble.gif) no-repeat top center; */
/* padding-top:150px; */
padding-top:15px;
}
#preamble p.p3 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:18pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
}
#preamble p.p4 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:14pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
}
#supportingText{
width:600px;
background:url(bg_repeater.gif) repeat-y;
}
#supportingText h3 {
text-align:center;
padding:0;
margin:0;
background:no-repeat center;
height:25px;
}
#supportingText h3 span {
visibility:hidden;
}
#benefits {
padding-left:35px;
padding-right:45px;
text-align: center;
}
#benefits h3 {
/* background-image:url(benefits.gif); */
(...)

Merci...

Message édité par alx067 le 27-06-2009 à 08:38:37

Publicité

alx067

J'oubliais...

Chose étrange, en passant par l'adresse de mon hébergeur (Free) et IE7, il n'y a pas de problème...
En passant par l'adresse de redirection (nom-domaine.fr) et IE7, il y a un décalage.

J'ai essayé un joignant la feuille de style CSS avec ce code:

Code :

<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />

Le problème reste identique...

Message édité par alx067 le 19-06-2009 à 19:02:53

alx067

Up !

phosphoreloaded

Bonjour,

le problème ça pourrait être la redirection plutôt que ton site:

Code :

<html><head>
</head><frameset cols="*" border="0" framespacing="0" frameborder="no">
<frame src="http://###.free.fr" name="page" marginwidth="0" marginheight="0" scrolling="auto">
</frameset>
</html>

S'il y avait un frameset, est-ce que ça fonctionnerait mieux? J'utilise jamais les frames donc je laisse la conclusion à d'autres mais une frame en mode standard dans une page en mode quirks ça me laisse un mauvais pressentiment ...

Message édité par phosphoreloaded le 23-06-2009 à 02:14:44

alx067

Bonsoir, j'ai réécris le code de A à Z est le problème est toujours le même.

Voici les codes

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></title>
<link href="style/restyle.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="contenant">
<div id="balise_gauche">
<img src="style/logo_inscrustation.gif" width="64" height="140" />
<img src="style/logo_reduit.gif" alt="<?php include("coordonnees/nom_de_l_entreprise.txt" ); ?>" width="150" height="140" />
</div>
<div id="haut_de_page">
</div>
<div id="titre">
<p class="p3"><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></p>
<p class="p4"><?php include("coordonnees/devise_de_l_entreprise.txt" ); ?></p>
</div>
<div id="corps_de_texte">
<p>Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte.</p>
</div>
</div>
</body>
</html>

Code :

@charset "utf-8";
/* CSS Document */
body {
font: 10.5pt Palatino, Georgia, Times New Roman, serif;
color:#554;
font-weight:500;
text-align:left;
margin:0;
padding:0;
background-image: url(fond.png);
background-repeat: no-repeat;
background-color: #fd5121;
}
a:link, a:visited, a:active {
font-style:italic;
color:black;
font-weight:300;
text-decoration:none;
}
a:hover {
font-style:italic;
color:#B8860B;
text-decoration:underline;
}
/* Body Element */
#contenant {
position:absolute;
left:50%;
width:800px;
margin-left:-400px;
}
div#balise_gauche {
background:url(etiquette.gif) no-repeat top center;
width:278px;
height:185px;
}
#balise_droite {
position:absolute;
width:235px;
height:199px;
}
div#haut_de_page {
background:url(haut_de_page.gif) repeat-y;
height:20px;
}
div#titre {
background:url(feuille.gif) repeat-y;
padding:25px 45px 0px 35px;
width:520px;
}
#titre p.p3 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:18pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
#titre p.p4 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:14pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
div#corps_de_texte {
position:absolute;
background:url(feuille.gif) repeat-y;
padding-left:35px;
padding-right:245px;
text-align: center;
width:520px;
}

Toujours ce décalage...

Message édité par alx067 le 25-06-2009 à 20:33:34

alx067

Ok problème résolu : Il fallait rajouter le ligne de code margin-top:0px;

Code :

@charset "utf-8";
/* CSS Document */
body {
font: 10.5pt Palatino, Georgia, Times New Roman, serif;
color:#554;
font-weight:500;
text-align:left;
margin:0;
padding:0;
background-image: url(fond.png);
background-repeat: no-repeat;
background-color: #fd5121;
}
a:link, a:visited, a:active {
font-style:italic;
color:black;
font-weight:300;
text-decoration:none;
}
a:hover {
font-style:italic;
color:#B8860B;
text-decoration:underline;
}
/* Body Element */
#contenant {
position:absolute;
left:50%;
width:800px;
margin-left:-400px;
}
div#balise_gauche {
background:url(etiquette.gif) no-repeat top center;
width:278px;
height:185px;
}
#balise_droite {
position:absolute;
width:235px;
height:199px;
}
div#haut_de_page {
background:url(haut_de_page.gif) repeat-y;
height:20px;
}
div#titre {
background:url(feuille.gif) repeat-y;
padding:25px 45px 0px 35px;
width:520px;
}
#titre p.p3 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:18pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
#titre p.p4 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:14pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
div#corps_de_texte {
margin-top:0px;
position:absolute;
background:url(feuille.gif) repeat-y;
padding-left:35px;
padding-right:245px;
padding-top:20px;
text-align: center;
width:520px;
}
div#bas_de_page {
position:relative;
background:url(feuille.gif) repeat-y;
padding-left:35px;
padding-right:245px;
text-align: center;
width:520px;
}

Message édité par alx067 le 25-06-2009 à 21:03:31

alx067

Il existe toujours une marge sous FF3...

:cry:

Message édité par alx067 le 25-06-2009 à 23:40:45

phosphoreloaded

Tu n'as pas donné l'URL ... même si on peut la trouver facilement.

Vire ce <hr /> qui a une marge. Si tu veux faire un trait, utilise border-top ou bottom ou bien un background positionné en bas ou en haut selon l'élément auquel tu l'appliques

alx067

le <hr /> n'y est pour rien, j'ai tenté de le virer dans aucun effet (la marge est encore plus grande (toujours sous FF3)...)
Adresse web : http://modelephp.free.fr/

Message cité 1 fois
Message édité par alx067 le 26-06-2009 à 11:25:12

David Boring

c'est le margin par défaut de #titre p.p4
tu dois donc mettre margin-bottom:0

Et du dois surtout remplacer ce p par un titre (hx)

Publicité

alx067

Merci ! C'est le margin-bottom:0; dans le titre qui posé problème...

Par contre j'ai pas compris l'histoire du hx ???

Même sur le http://www.siteduzero.com j'avais pas trouvé...

Merci David Borring :bounce:

Message édité par alx067 le 26-06-2009 à 12:27:10

David Boring

le x est là pour remplacer un chiffre de 1 à 6
artista devait être un h1 et C'est un peu l'âme du monde un h2

alx067

lol J'ai compris pour le hx.

En revanche j'ai ajouté le menu qui me pose à nouveau décalage sous IE8, j'ai à nouveau un décalage...

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<?php include("textes_et_mise_en_page/meta.txt" ); ?>
<title><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?> - Accueil</title>
<link href="style/restyle.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="contenant">
<div id="balise_gauche">
<img src="style/logo_inscrustation.gif" width="64" height="140" />
<img src="style/logo_reduit.gif" alt="<?php include("coordonnees/nom_de_l_entreprise.txt" ); ?>" width="150" height="140" />
</div>
<div id="haut_de_page">
</div>
<div id="menu">
<div id="menu_haut"></div>
<div id="menu_centre" class="menu">
<p><a href="index.php" target="_self" title="Retour en page principale">Accueil</a></p>
<p> </p>
<p><a href="nouveautes.php" target="_self" title="Voir les nouveautés">Nouveautés</a></p>
<p> </p>
<p><a href="catalogue/album/index.html" target="_blank" title="Visionner tous les produits">Catalogue</a></p>
<p> </p>
<p><a href="identification.php" target="_self" title="S'identifier">Identification</a></p>
<p><a href="modification.php" target="_self" title="Modifier ses coordonnées">Modification</a></p>
<p><a href="creation.php" target="_self" title="Créer votre compte">Nouveau un compte</a></p>
<p><a href="mot_de_passe_oublie.php" target="_self" title="Modifier ses coordonnées">Mot de passe oublié</a></p>
<p> </p>
<p><a href="#" target="_self" title="">Passer une commande</a></p>
<p><a href="#" target="_self" title="">Enregistrer un panier</a></p>
<p><a href="#" target="_self" title="">Visualiser mes paniers</a></p>
<p><a href="#" target="_self" title="">Suivi de commande</a></p>
<p> </p>
<p><a href="#" target="_self" title="">Contactez-nous</a></p>
<p><a href="#" target="_self" title="">Voyager en Inde</a></p>
<p> </p>
</div>
<div id="menu_bas"></div>
</div>
<div id="titre">
<p class="p3"><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></p>
<p class="p4"><?php include("coordonnees/devise_de_l_entreprise.txt" ); ?></p>
<br />
<hr />
</div>
<div id="corps_de_texte">
<p>Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte.</p>
</div>
</div>
</body>
</html>

Code :

/* CSS Document */
body {
font: 10.5pt Palatino, Georgia, Times New Roman, serif;
color:#554;
font-weight:500;
text-align:left;
margin:0;
padding:0;
background-image: url(fond.png);
background-repeat: no-repeat;
background-color: #fd5121;
}
a:link, a:visited, a:active {
font-style:italic;
color:black;
font-weight:300;
text-decoration:none;
}
a:hover {
font-style:italic;
color:#B8860B;
text-decoration:underline;
}
/* Body Element */
#contenant {
position:absolute;
left:50%;
width:800px;
margin-left:-400px;
}
div#balise_gauche {
background:url(etiquette.gif) no-repeat top center;
width:278px;
height:185px;
}
#balise_droite {
position:absolute;
width:235px;
height:199px;
}
div#haut_de_page {
background:url(haut_de_page.gif) repeat-y;
height:20px;
margin-bottom:0px;
}
div#titre {
background:url(feuille.gif) repeat-y;
padding:20px 45px 0px 35px;
width:520px;
height:130px;
}
#titre p.p3 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:18pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
#titre p.p4 {
padding-left:30px;
padding-right:30px;
line-height:1.2em;
font-style:italic;
font-size:14pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
margin-bottom:0;
}
div#corps_de_texte {
margin-top:0px;
position:absolute;
background:url(feuille.gif) repeat-y;
padding-left:35px;
padding-right:245px;
padding-top:5px;
padding-bottom:30px;
text-align: center;
width:520px;
min-height:500px;
}
div#bas_de_page {
position:relative;
background:url(feuille.gif) repeat-y;
padding-left:35px;
padding-right:245px;
text-align: center;
width:520px;
}
div#menu {
position:absolute;
margin-top:0px;
right:0;
padding-left:5px;
padding-right:5px;
text-align: center;
width:180px;
}
div#menu_haut {
position:relative;
background:url(menu_haut.gif) no-repeat;
width:180px;
height:47px;
}
div#menu_centre {
position:relative;
background:url(menu_centre.gif) repeat-y;
margin-bottom:0px;
padding-top:15px;
padding-bottom:15px;
padding-left:0px;
padding-right:5px;
text-align: center;
width:180px;
line-height:0em;
height:340px;
}
div#menu_bas {
position:relative;
background:url(menu_bas.gif) no-repeat;
margin-top:0px;
line-height:0em;
width:180px;
height:50px;
}
.menu {
font: 8pt Palatino, Georgia, Times New Roman, serif;
color:#554;
text-align:center;
}

Toujours à la même adresse : http://modelephp.free.fr/reindex.php

J'ai également un décalage au niveau des hyperliens du menu et ils ne sont plus "cliquables" aprés un certain nombre de lignes...
D'ailleurs le design est comme souhaité sous FF3

Au cas ou...

Message cité 1 fois
Message édité par alx067 le 27-06-2009 à 08:38:04

phosphoreloaded

alx067 a écrit :

le <hr /> n'y est pour rien, j'ai tenté de le virer dans aucun effet (la marge est encore plus grande (toujours sous FF3)...)
Adresse web : http://modelephp.free.fr/

Sur art*.fr c'est bien le <hr />

alx067 a écrit :

J'ai également un décalage au niveau des hyperliens du menu et ils ne sont plus "cliquables" aprés un certain nombre de lignes...

Et comme par hasard un bloc positionné en absolu commence pile là où les liens commencent à ne plus être cliquables

alx067

Il reste encore un petit détail.

Il reste un décalage dans le titre de la page, l'affichage est différent sous IE8 et sous FF3. J'espérais trouver une solution en cherchant mais sans succès...

Et le titre des images ne s'affichent pas sous FF3. ???

Je laisse le code :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<?php include("textes_et_mise_en_page/meta.txt" ); ?>
<title><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?> - Accueil</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="Shortcut Icon" type="image/x-icon" href="artisia.ico" />
</head>
<body>
<div id="contenant">
<div id="balise_gauche">
<img src="style/logo_inscrustation.gif" width="60" height="140" />
<img src="style/logo_reduit.jpg" alt="<?php include("coordonnees/nom_de_l_entreprise.txt" ); ?>" width="150" height="140" />
</div>
<div id="balise_droite">
<?php include("textes_et_mise_en_page/balise_droite.txt" ); ?>
</div>
<div id="haut_de_page"></div>
<div id="menu">
<div id="menu_haut"></div>
<div id="menu_centre" class="menu">
<p><?php include("textes_et_mise_en_page/menu.txt" ); ?></p>
</div>
<div id="menu_bas"></div>
</div>
<div id="titre">
<p class="p3"><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></p>
<p class="p4"><?php include("coordonnees/devise_de_l_entreprise.txt" ); ?></p>
</div>
<div id="corps_de_texte">
<h3>Bienvenue !</h3>
<p> </p>
</div>
<div id="bas_de_page">
<p><?php include("textes_et_mise_en_page/bas_de_page.txt" ); ?></p>
</div>
<div id="bas_de_feuille"></div>
</div>
</body>
</html>

Code :

/* CSS Document */
body {
font: 10.5pt Palatino, Georgia, Times New Roman, serif;
color:#554;
background-image: url(fond.jpg);
background-repeat: no-repeat;
background-color: #fd5121;
}
a:link, a:visited, a:active {
font-style:italic;
color:black;
font-weight:300;
text-decoration:none;
}
a:hover {
font-style:italic;
color:#B8860B;
text-decoration:underline;
}
/* Body Element */
#contenant {
position:absolute;
left:50%;
width:800px;
margin-left:-400px;
top:0px;
}
div#balise_gauche {
background:url(etiquette.gif) no-repeat;
width:278px;
height:185px;
margin:0px;
}
#balise_droite {
position:absolute;
width:235px;
height:199px;
right:0px;
top:0px;
}
div#haut_de_page {
position:relative;
background:url(page_haut.gif) no-repeat;
height:19px;
width:600px;
margin:0px;
}
div#titre {
background:url(page_titre.gif) repeat-y;
width:534px;
height:88px;
margin:0px;
padding-left:28px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
text-align: center;
}
#titre p.p3 {
padding-left:30px;
padding-right:30px;
padding-top:5px;
padding-bottom:5px;
line-height:10px;
font-style:italic;
font-size:18pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
#titre p.p4 {
padding-left:30px;
padding-right:30px;
padding-top:5px;
padding-bottom:5px;
line-height:10px;
font-style:italic;
font-size:14pt;
font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
font-weight: bold;
text-align: center;
}
div#corps_de_texte {
position:relative;
margin:0px;
background:url(page_centre.gif) repeat-y;
padding-left:28px;
padding-right:20px;
padding-top:30px;
padding-bottom:10px;
text-align: center;
width:534px;
min-height:752px;
}
div#bas_de_page {
position:relative;
margin:0px;
background:url(page_titre.gif) repeat-y;
padding-left:28px;
padding-right:20px;
padding-top:5px;
padding-bottom:5px;
text-align: center;
width:534px;
height:62px;
font-size:10px;
}
div#bas_de_feuille {
position:relative;
margin:0px;
background:url(page_bas.gif) no-repeat;
text-align: center;
width:600px;
height:23px;
}
div#menu {
position:absolute;
margin-top:50px;
right:0;
padding-left:5px;
padding-right:5px;
text-align: center;
width:180px;
}
div#menu_haut {
position:relative;
background:url(menu_haut.gif) no-repeat;
width:180px;
height:47px;
}
div#menu_centre {
position:relative;
background:url(menu_centre.gif) repeat-y;
padding-top:5px;
padding-bottom:5px;
padding-left:0px;
padding-right:5px;
text-align: center;
width:180px;
line-height:1em;
height:260px;
}
div#menu_bas {
position:relative;
background:url(menu_bas.gif) no-repeat;
margin-top:0px;
width:180px;
height:50px;
}
.menu {
font: 8pt Palatino, Georgia, Times New Roman, serif;
color:#554;
text-align:center;
}

Toujours la même page http://modelephp.free.fr/

J'ai regardé sur ce site http://browsershots.org/ est la majorité des navigateurs affiche le site.
:sarcastic:

Message édité par alx067 le 29-06-2009 à 13:51:05

David Boring

Firefox a bien raison de ne pas afficher le alt car l'image est présente
Toi, tu veux employer un title
http://www.webmasterworld.com/acce [...] 252877.htm

phosphoreloaded

De la lecture: http://forum.alsacreations.com/top [...] title.html

FORUM HardWare.fr

Programmation

HTML/CSS

Problème d'alignement CSS dans les balises

Sujets relatifs
Problème d'affichage d'image dans un Forum	Probleme définition librairie
Problème Doublons Onglet	probléme de numerotation des fichiers lors du download
probleme pour parser des dates [résolu]	Problème java.lang.NullPointerException
Problème d'importation PhpMyAdmin	Probleme menu déroulant
problème avec un update	[Resolu]Problème de compilation API MYSQL
Plus de sujets relatifs à : Problème d'alignement CSS dans les balises

Page générée en 0.200 secondes