Probleme de mise en page

Fermé
sav1984 - 20 juil. 2009 à 22:04
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012 - 21 juil. 2009 à 15:10
Bonjour,a tous,

voila, je viens de terminer un site, il ne me reste plus qu'a le mettre en ligne, je lai verifier, il est aux normes
w3c, mais je ne comprend pas pourquoi lorsque je regarde mon site a partir d'un autre ordinateur il est completement different, les menus et les photos ne sont plus du tt a la meme place, (jutilise IE et firefox)
jai verifie la compatibilite avec les 2 , alors je ne comprend pas pourquoi il me fait ca alors quil est aux normes....
estceque cest parcequ'il n'est pas encore heberge?


merci d'avance
A voir également:

18 réponses

Salut,

Valide W3C ok mais en quoi ? html 4.1 XHTML 1.0 Strict etc ?????

Cordialement

Auloni
0
valide en XHTML 1.0


je l'ai fait sur ce site www.validator.w3.org/
0
Re,

Valide W3C ne veut pas forcement dire bien construit, mais si tu as atteind un niveau de programmation te permettant de valider W3C on doit pouvoir faire confiance à ton code.

Tu peux toujours en mettre un bout histoire de regarder ? Sinon je pense plus à un souci de naviguateur pour l'affichage, tu ouvres le site sur quoi ?

Cordialement

Auloni
0
jouvre mon site avec explorer et firefox aussi,lorsque je louvre a partir de mon ordi c impeccable,
ensuite jenvoi mon dossier sur un autre ordi et c la que ca ne safiche pas correctement,il y a forcement un detail que jai du oublie, ce nets que la premiere fois que je maprette a envoyer mon site sur internet, c peut etre normal non?? ah joubliai!! jai pas encore de PhP ds mon site serait ce la raison??peut etre qun serveur doit intervenir la dedans non?? merci
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 13:37
Re,

Ben je ne sais pas, faudrait voir le code pour juger. Maintenant c'est sur qu'il peut y avoir une différence d'affichage entre firefox 3 et IE 6 par exemple. Dans tout les cas il faut que tu regles le problème, il ne devrait plus y avoir de différences d'affichage avant de livrer ton site.

Cordialement

Auloni
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ca va etre difficil de mettre tt le site, mais maintenant que jy pense, jai defini la position de mes Div avec des pixels et non pas em cest un probleme non?
merci de ta patience
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 14:22
Re,

Non c'est pas un problème.

Tu veux pas coller ton code pour que je matte ça de plus pret ?

Cordialement

Auloni
0
ok alors ca va etre long, jte met le html maintenant et juste apres ds le message aui suit le css:



<?xml version="1.0" encoding="utf-8"?>
<!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="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />

<title>Pavillon</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{

$(this).css({backgroundImage:"url(touche.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css;
});

});
</script>

</head>


<body>

<div class="bref" id="en_tete">
<img src="picture/logo.png" class="logo" alt="logo"/>
<h1 class="title1">PAVILLON</h1>
<p class="title2">Conseils & finances</p>
<p class="title3">AUDIT EN FISCALITE D'ENTREPRISE ET GESTION DE PATRIMOINE</p>
</div>


<div id="colonne">
<div id="menu_gauche">
<div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
<p class="menu_head">Impots locaux</p>
<div class="menu_body">
<a href="w">Taxe professionnelle</a><br />
<a href="#">Taxe foncière</a><br />
<a href="">Taxe sur les bureaux</a><br />
</div>

<p class="menu_head"><a href="#" class="link">Charges sociales</a></p>
<p class="menu_head">Pole recherche et innovation</p>

<div class="menu_body">
<a href="#">Crédit impot recherche</a><br />
<a href="#">Jeunes Entreprises innovantes</a><br />
</div>


<p class="menu_head">Crédits impots</p>

<div class="menu_body">
<a href="w">apprentissage</a><br />
<a href="#">Gazelles</a><br />
<a href="">Famille</a> <br />
<a href="w">Nouvelles technologies</a><br />
<a href="#">Export</a><br />
<a href="">Métiers d’art</a><br />
<a href="#">Dépenses de collection</a><br />
<a href="">Cinema</a><br />
</div>

<p class="menu_head"><a href="#" class="link">Audit énergie</a></p>

<p class="menu_head"><a href="#" class="link">T.V.A</a></p>

<p class="menu_head"><a href="#" class="link">Défiscalisation</a></p>

</div>

</div>

<div id="en_savoir_plus">
<p><img src="picture/savoir.png" class="savoir" alt="image savoir"/></p>
<div id="case_haut">
<p><a href="#" class="link_actualite">Actualités</a></p>
</div>

<div id="case_bas">
<p><a href="#" class="link_infos">Infos pratiques</a></p>
</div>

</div>

</div>

<div id="centre">
<div id="centres">
<div id="menu_central">
<span><a href="Accueil.html" class="accueil" >Accueil</a></span>
<span><a href="domaines.html" class="central_menu">Nos compétences</a></span>
<span><a href="méthodologie.html" class="central_menu" >Nos garanties</a></span>
<span><a href="Liens_utiles.html" class="central_menu" >Liens utiles</a></span>
<span><a href="Contacts.html" class="central_menu" >Contacts</a></span>

</div>

<div id="body_top">
<div id="bande">

</div>

<p class="slogant">PAYER LA JUSTE SOMME, RECUPERER CE QUI VOUS APPARTIENT!</p>

</div>


<div id="body_bottom">
<div id="central">

<h4> PAVILLON CONSEIL</h4>

<p><strong>Propose aux entreprises une réduction de leurs impôts, taxes et cotisations sociales</strong> rémunérée aux résultats.<br />

Réduire vos impôts, optimiser vos cotisations, requérir pour vous les crédits d′impôts auxquels vous pouvez légitimement prétendre, telles sont nos priorités.</p>

<p>Spécialisés dans l’audit en fiscalité des entreprises, Pavillon Conseil et ses intervenants vous offre la possibilité <strong> d′actualiser vos assiettes,</strong>de <strong> vérifier vos modes de calculs,</strong> et de <strong>vous représenter auprès de l′administration fiscale.</strong></p>

<h4>NOTRE PLUS VALUE</h4>

<p> Une entreprise de taille humaine pour servir ses clients avec <strong>disponibilité</strong> et <strong> transparence.</strong></p>

<p>Toujours à l′affut des évolutions législatives et jurisprudentielles, Pavillon Conseil c′est la <strong>réactivité</strong>, et l′<strong>efficacité</strong>. Cette philosophie de veille permanente permet à <br /> PAVILLON CONSEIL d′innover en proposant de<strong> nouveaux produits </strong> et de nouvelles opportunités d′économies.</p>

<p>Un <strong>accompagnement pédagogique</strong>…une fois l′audit terminé, les entreprises disposent de toutes les clés pour pouvoir ensuite voler de leurs propres ailes grâce aux rapports de nos spécialistes.</p><br />

<p><strong>Pavillon Conseil se rémunère en proportion des optimisations obtenues.</strong></p><br />

</div>

<div id="nos_garanties">
<p class="garanties">NOS GARANTIES</p>

<ul class="ul1">
<li>Une équipe disponible et polyvalente</li>
<li>Un accompagnement pédagogique</li>
<li>Un rapport d′audit détaillé avec une mise à jour de vos base</li>
<li>Analyse complète de vos bases d′imposition</li>
<li>Respect de la déontologie</li>
<li>Respect de la politique de l′entreprise</li>
</ul>


<p class="garanties">QUELQUES CHIFFRES</p>

<ul class="ul2">
<li>80% des entreprises sont sur imposées en taxe professionnelle</li>
<li>75% des entreprises sont surimposees en taxe foncière</li>
<li>En 2007, 8071 entreprises ont souscrit une déclaration de crédit d'impôt recherche 2006 et 5921 ont été bénéficiaires, pour un montant <br />de 1 495 M€.</li>
</ul>
</div>


<div id="telechargement">
<p class="entete_telechargement">Vous désirez un audit?</p>
<p>Consultez en ligne notre plaquette.<br />
Notre équipe d′auditeurs est à votre disposition pour tous renseignements.</p>
<p><a href="telechargement.html" class="telechargement">Cliquez ici pour télécharger</a></p>
</div>

</div>



<div id="pied_de_page">
<p>PAVILLON CONSEIL S.A.S <br />
Siege social 110 rue Edouard Vaillant 961100 Villeurbanne<br />
Tel:04.78.68.86.01 <br />
Siret:423564986 0001 Code APE:6920Z
</p>
</div>
</div>
</div>
</body>
</html>
0
@charset "utf-8";


body
{

margin-left:50px;


}

div#en_tete
{

height:100px;
width:1150px;



}

.logo
{
position:relative;
}

.title1
{
display:none;
}

.title2
{
margin-left:245px;
margin-top:-118px;
padding-top:8px;
padding-bottom:0px;
padding-left:8px;
height:27px;
width:200px;
border-left:solid #558ed5 1px;
color:#558ed5;
font-family:Calibri ;
font-size:15px;


}

.title3
{
position:absolute;
left:640px;
top:70px;
font-family:Arial;
color:#000066;
font-size:14px;
font-weight: bolder;


}

div#centre
{ height:1000px;
width:930px;
margin-left:152px;
position:absolute;
border:#e8eff9 solid 3px;
top:110px;
padding-top:20px;


}

div#centres
{ height: 1020px;
border:#b9cde5 solid 1px;
margin:15px;
margin-top:0px;
margin-bottom:20px;

}

div#menu_central
{


height:28px;
background-image: url(picture/em.png);
background-repeat:repeat-x;
padding-bottom:0px;
padding-top:5px;
font-size:14px;
margin-left:6px;
width:893px;



}

.central_menu
{
text-decoration:none;
border-left: solid #FFFFFF 1px;
padding-bottom:0px;
padding-top:0px;
padding-left:50px;
padding-right:45px;
margin-right:-5px;
color:#FFFFFF;


}
.central_menu:hover
{
text-decoration: underline;
border-left: solid #FFFFFF 1px;
padding-bottom:2px;
padding-top:0px;
padding-left:50px;
padding-right:45px;
margin-right:-5px;
;

}

.accueil
{
text-decoration: underline;
padding-left:55px;
padding-right:65px;
padding-bottom:12px;
padding-top:5px;
margin-left:0px;
margin-right:-5px;
color: #077ef9;
font-weight:bold;
background-color: #FFFFFF;
height:20px;





}

div#body_top
{

height:140px;
margin-bottom:0px;
background-image:url(picture/essai.png);
background-repeat:no-repeat;


}

div#bande
{
width:700px;
height:100px;
margin-bottom:20px;
margin-left:170px;
margin-top:20px;
background-repeat:no-repeat;


}

.img
{

}
.slogant
{
margin-left:120px;
margin-top:0px;
color:#644141;
font-style:italic;
font-family:Arial;
font-weight:bold;
font-size:16px;
}

div#body_bottom
{

}

div#central
{

width:550px;
height:auto;
margin-bottom:0px;
margin-top:0px;
margin-left:30px;
margin-right:30px;
padding:10px;
font-size:13px;
color:#404040;
font-family:Arial, Helvetica, sans-serif;

}


h4
{
color: #404040;
font-weight:lighter;
}

div#nos_garanties
{


border-left:solid #0000ff 1px;
width:260px;
height:600px;
float:right;
position:absolute;
padding-right:10px;
left:645px;
top:250px;


}

.garanties
{
color:#0000fd;
font-size:16px;
margin-left:20px;
padding-bottom:15px;
font-weight:bold;
background-image:url(picture/barre.png);
background-position:bottom;
background-repeat:repeat-x;

}


.ul1
{
font-size:12px;
text-indent:15px;
list-style-image:url(picture/list.png);
color:#404040;
font-weight:normal;

}

.ul2
{
font-size:12px;
list-style-image:url(picture/list1.png);
color:#404040;
font-weight:normal;
}

li
{
line-height:2em;
}


div#colonne
{

width:170px;
left:40px;
height:560px;
border:solid #d3e1f3 2px;
position:absolute;
top:150px;


}


div#en_savoir_plus
{

width:150px;
height:170px;
margin-top:380px;
margin-left:10px;
overflow:hidden;

}

.savoir
{
margin-bottom:-15px;
}

div#case_haut
{
height:50px;
width:140px;



}
div#case_bas
{

height:50px;
width:140px;
border-top:solid #0033FF 1px;
border-bottom:solid #0033FF 1px;

}


.link_actualite
{
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
color:#000000;
text-decoration:none;
margin-left:40px;

}

.link_infos
{
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;

color:#000000;
text-decoration:none;
margin-left:20px;
}

div#telechargement
{

padding:5px;
padding-left:10px;
padding-top:0px;
margin-bottom:50px;
margin-left:250px;
width:330px;
height:120px;
background-color:#3737ff;
color:#FFFFFF;
font-size:12px;

}

.entete_telechargement
{
background-color:#3737ff;
font-weight:bold;
font-style:italic;
text-decoration:underline;
font-size:16px;
font-family:Calibri;
padding:5px;
}

.telechargement
{
color: #FFFFFF;
font-weight:bold;
text-decoration:none;
cursor: pointer;
margin-left:150px;
font-style:italic;
}

div#pied_de_page
{
margin-left:0px;
padding-left:10px;
padding-top:1px;
font-weight:normal;
background-color:#dce6f2;
background-image:url(picture/ombre.png);
background-position:bottom;
background-repeat:repeat-x;
height:90px;
width:920px;
font-size:11px;
text-align:center;
margin-left:-16px;
margin-bottom:100px;
border-top:solid #6cbad1 1px;
font-family:Calibri;
}

div#menu_gauche
{


font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
position:absolute;
left:15px;



}

.menu_list {
width: 140px;
height:470px;
margin-right:-10px;


}
.menu_head {

cursor: pointer;
position:relative;
margin:5px;
border-bottom:solid #0033FF 1px;
height:30px;
text-align:center;
padding:10px;
padding-bottom:5px;
color:#000000;
background-color:#FFFFFF;


}
.menu_body {
display:none;
width:130px;
margin-left:5px;
background-color: #3399FF;

}
.menu_body a{
display:block;
color: #FFFFFF;
padding-left:10px;
font-weight:bold;
text-decoration:none;
height:30px;


}
.menu_body a:hover{
color: #000000;
text-decoration:underline;

}
.link
{
text-decoration:none;
color: #000000;


}
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 14:38
Ok vu,

Déjà tu fixes la largeur du site en 1150 sur div en-tete mais tu définis pas la marge droite et gauche de l'ensemble.

margin-right:auto;
margin-left:auto;

Ce qui permettra au site de s'adapter aux différéntes résolutions d'écran en adaptant les marges en fonction.

Je regarde le reste (ça fait plaisir de voir un type qui construit sans tableau et en 1.0 strict)

Cordialement

Auloni
0
lol merci beaucoups en tt cas, ce qui ne se met pas a sa place cets surtt le menu_gauche.... et puis la bande du haut..
0
je dois rajouter les marges auto de lentete mais aussi du body?
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 14:46
Re,

Oui je viens de voir dans dreamweaver.

T'as un problème de positionnement du div colonne et du div centre, ils se superposent

Faut que tu redéfinisses la largeur de ses deux div pour que leur addition soit egale à la largeur du header avec le logo qui lui meme doit etre egal au footer.

Bien codé juste un prob de dimension, prend ta calculette ::))

Cordialement

Auloni
0
lol merci bcp cets mon premier site....

juste une derniere question, en fait cest fait expres si mon menu soit sur la gauche,en retrait par rapport a lentete, je lai mis en position absolute, mais cets pas possible de le laisser comme ca??
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 14:56
Re,

Ah ben ça c'est comme tu sens hein, si tu veux que ça se superpose c'est ton choix de mise en page. Je suis un classique moi, menu gauche, contenu centre, header, footer

après c'est surtout les marges droite/gauche qui manquent pour l'adaptation; surtout qu'aujourd'hui avec les écrans qui passent de 15 pouces en 800x600 chez les vieux ordi aux écrans 10 fois plus grands...

J'ai pas bien saisi la premiere ligne avec la balise xml aussi lol.

Cordialement

Auloni
0
bas moi aussi a vrai dire lol, sur le site de validation il mon dit de recopier lol!

bref en gros pour en terminer avec ca, sachant que jai un probleme de dimension si je met en position absolute les div que je veux faire deborder alors il me reste plus qua verifier mes marges des div restant......

une petite et derniere question... est il possible de faire un site entierement avec des balises positionnees en absolute pour eviter davoir des problemes daffichage ou de marges?
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 15:05
Re,

Ben tout est possible, en relative, en absolute, tout est question de taille.

à priori on utilise absolute pour positionner une div dans une autre div.

Cordialement

Auloni
0
ok en tt cas merci beaucoups pour ton aide cest super gentil @+
0
Auloni Messages postés 22 Date d'inscription mardi 21 juillet 2009 Statut Membre Dernière intervention 7 janvier 2012
21 juil. 2009 à 15:10
Re,

De rien, tout le plaisir est pour moi.

Cordialement

Auloni
0