Mise en page site web sous ie et firefox
belkawired
Messages postés
4
Date d'inscription
Statut
Membre
Dernière intervention
-
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Gihef Messages postés 5150 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
je viens de créer mon site web perso, je suis totalement novice dans les langages html et css donc j'ai appris sur le tas.
j'ai un soucis d'affichage sous ie j'ai fait mon site sur mon pc portable avec une resolution de 1680 par 1050 jusque la tout passer nikel jusqu'a ce que je modifie tout en pourcentage car à la base j ai mis toute les mesures en pixel.
j'ai fait tester mon site a un ami et lui a tout décaler donc je l'ai remodifier pour qu'il s"adapte aux autres résolutions ( chose que j'avais totalement zapper..)
donc je l"ai tester sur mon ancien pc avec une resolution de 1024 par 768 je l ai meme modifier dessus pour pouvoir le regler correctement, le soucis qui se heurte c'est que le menu sous ie avec la resolution 1024 par768 est bien plus grande tandis que sur firefox le menu reste nikel il bouge pas, quand je le passe sur mon pc portable avec ie et firefox le menu est nikel identique juste des legers tres light modif de quelques millimetres rien de bien mechant.
Donc je sollicite l'aide d'une personne plus aguerri car la je commence limite a peter les plombs avec ie et comme personne peut m'aider j'ai sollicité ce forum.
Je vous donne le css et le html
voici le CSS
*Configuration générale */
* { margin: 0; padding: 0;}
body {
margin: 0;
background-image: url(images/extensiblehead.jpg) ;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
a { color: #3e3e3e; }
a:hover {text-decoration: none; }
/* -Header- */
#header {
width: 373px;
height: 153px;
background: url(images/header.jpg) no-repeat ;
margin: 0;
}
#header span {
display: none;
}
/* -Menu header- */
#menuhorizontal {
height: 27px;
margin: -96px 0 0 362px;
list-style-type: none;
}
#menuhorizontal li {
float: left;
display: block;
width: 81px;
height: 27px;
margin: 0 4px 0 5px ;
line-height: 15px;
background: url(images/menuheader.jpg) no-repeat;
text-align: center;
}
#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}
#menuhorizontal li a:hover {text-decoration: underline;}
/* Barre de Connexion */
#connexion {
height: 45px;
margin: 24px 0 0 370px;
color: #6a6a6a;
padding: 7px 0;
}
/* Menu vertical */
#menuvertical {
width: 10%;
margin: 4% 0 0 0;
float: left;
list-style-type: none;
}
#menuvertical li {
display: block;
width: 140px;
line-height: 190%;
text-align: right;
margin-top: 2%;
padding: 0 20% 10% 0;
background: url(images/menuvertical.jpg) no-repeat;
}
#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 50% 7% 0 0;
}
#menuvertical li a:hover{text-decoration: underline;}
#menuvertical h4 {
font-size: 140%;
text-align: center;
}
/* Contenu */
#contenu {
margin: 4% 0 0 0;
}
#contenu h2 {
color: #fb8800;
margin: 2% 0 0 20%;
font-size: 150%;
}
#contenu p {
margin: 3% 0 3% 25%;
/* titre université lycée, centré mise en hauteur gauche droite bas*/
}
#contenu p.lieu {
padding-top: 1%;
/*hauteur entre titre septembre 2005 et université */
}
#contenu ul {
padding: 0 0 0 15%; /*deplace les retraits d'alinea petit point de formation et experience*/
}
#contenu h1 {
font-size: 220%;
margin: 0 0 0 20%;
text-align: center;
}
#contenu p.description {
margin: 0 0 0 19%;
line-height: 200%;
font-size: 119%;
}
#accueil p {
margin: 1% 0 0 18%;
font-size: 121%;
}
#accueil h2 {
margin: 2% 0 0 56%;
}
#Formations h2 {
margin: 3% 0 0 19%;
}
#Formations h1 {
margin: 0 0 0 16%;
}
#Formations p.lieu {
margin: 0 0 0 0%;
}
#Formations p.compétence {
margin: 0 0 0 0%;
}
#Formations li {
font-size: 120%;
margin: 0 0 0 10%;
}
#Formations ul {
margin: 3% 0 0 5%;
}
#experience h1 {
text-align: center;
}
#experience ul {
margin: 1% 0 0 11%;
}
#experience p{
margin: 4% 0 0 18%;
}
#divers h1 {
text-align: center;
}
#divers ul {
font-size: 115%;
margin: 2% 0 5% 13%;
line-height: 130%;
}
#contact p {
margin: 4% 0 0 42%;
font-size: 115%;
}
#contact h1 {
text-align: center;
}
#footer {
clear: both;
margin: 2%;
color:#939393;
padding: 1%;
}
#footer p{
margin: 2% 0 0 25%;
}
et voici le code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="fr">
<head>
<title>CV de Belkacem ABDICHE, webmarketer, chargé de référencement, trafic manager</title>
<meta http-equiv="Content-type" content="text/html charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
<meta name="description" content="Cv de Belkacem ABDICHE , webmarketer, chargé de référencement, trafic manager." />
<meta name="keywords" content="cv,curriculum vitae,webmarketer,chargé de référencement,référenceur,trafic manager,traffic manager,webmarketing,e-marketing,e-commerce,référencement" />
<meta name="author" content="abdiche,belkacem" />
<meta http-equiv="robots" content="all,follow,index" />
<meta name="revisit-after" content="10 days" />
<meta name="copyright" content="belkacem abdiche" />
<meta name="language" content="fr" />
</head>
<body>
<!-- L'en-tête -->
<div id="header">
</div>
<!-- Les menus -->
<div id="menuvertical">
<div class="element_menu">
<!-- menu terminé -->
<h4>Navigation</h4>
<ul>
<li><a href="page d'accueil.html">Accueil</a></li>
<li><a href="qui_suis_je.html">Qui suis je ?</a></li>
<li><a href="Formations.html">Formations</a></li>
<li><a href="Expériences.html">Expériences</a></li>
<li><a href="Divers.html">Divers</a></li>
<li><a href="Contact - CV.html">Contact - CV</a></li>
</ul>
</div>
</div>
<!-- Le corps-->
<div id="corps">
<div id="contenu">
<h1>Accueil</h1>
<div id="accueil">
<h2>Objectif</h2>
<p>
<br/>Bonjour et bienvenue sur ce site qui va vous permettre de consulter mon CV en ligne, ainsi que de le télécharger au format PDF.<br/>
<br/>Sur ces quelques pages, je vais essayer de vous présenter mon parcours ainsi que mes expériences professionnelles.<br/>
<br/>J'ai obtenu ma licence professionnelle E-Commerce / E-Marketing en septembre 2006.<br/>
<br/>Je recherche donc un poste de webmarketer, chargé de référencement, ou responsable marketing référencement site web.<br/>
<br/>Si vous êtes intéressés par mon profil n'hésitez pas à me contacter !
</p>
</div>
</div>
</div>
<!-- Le pied de page-->
<div id="footer">
<p>Copyright © 2007 Belkacem ABDICHE, tous droits réservés. Interface graphique par
<a href="www.flydraw.com">Cam972</a> pour <a href="http://www.kits-gratuits.net/">Kits-Gratuits</a></p>
</div>
</body>
</html>
En vous remerciant de votre précieuse aide
je viens de créer mon site web perso, je suis totalement novice dans les langages html et css donc j'ai appris sur le tas.
j'ai un soucis d'affichage sous ie j'ai fait mon site sur mon pc portable avec une resolution de 1680 par 1050 jusque la tout passer nikel jusqu'a ce que je modifie tout en pourcentage car à la base j ai mis toute les mesures en pixel.
j'ai fait tester mon site a un ami et lui a tout décaler donc je l'ai remodifier pour qu'il s"adapte aux autres résolutions ( chose que j'avais totalement zapper..)
donc je l"ai tester sur mon ancien pc avec une resolution de 1024 par 768 je l ai meme modifier dessus pour pouvoir le regler correctement, le soucis qui se heurte c'est que le menu sous ie avec la resolution 1024 par768 est bien plus grande tandis que sur firefox le menu reste nikel il bouge pas, quand je le passe sur mon pc portable avec ie et firefox le menu est nikel identique juste des legers tres light modif de quelques millimetres rien de bien mechant.
Donc je sollicite l'aide d'une personne plus aguerri car la je commence limite a peter les plombs avec ie et comme personne peut m'aider j'ai sollicité ce forum.
Je vous donne le css et le html
voici le CSS
*Configuration générale */
* { margin: 0; padding: 0;}
body {
margin: 0;
background-image: url(images/extensiblehead.jpg) ;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
a { color: #3e3e3e; }
a:hover {text-decoration: none; }
/* -Header- */
#header {
width: 373px;
height: 153px;
background: url(images/header.jpg) no-repeat ;
margin: 0;
}
#header span {
display: none;
}
/* -Menu header- */
#menuhorizontal {
height: 27px;
margin: -96px 0 0 362px;
list-style-type: none;
}
#menuhorizontal li {
float: left;
display: block;
width: 81px;
height: 27px;
margin: 0 4px 0 5px ;
line-height: 15px;
background: url(images/menuheader.jpg) no-repeat;
text-align: center;
}
#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}
#menuhorizontal li a:hover {text-decoration: underline;}
/* Barre de Connexion */
#connexion {
height: 45px;
margin: 24px 0 0 370px;
color: #6a6a6a;
padding: 7px 0;
}
/* Menu vertical */
#menuvertical {
width: 10%;
margin: 4% 0 0 0;
float: left;
list-style-type: none;
}
#menuvertical li {
display: block;
width: 140px;
line-height: 190%;
text-align: right;
margin-top: 2%;
padding: 0 20% 10% 0;
background: url(images/menuvertical.jpg) no-repeat;
}
#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 50% 7% 0 0;
}
#menuvertical li a:hover{text-decoration: underline;}
#menuvertical h4 {
font-size: 140%;
text-align: center;
}
/* Contenu */
#contenu {
margin: 4% 0 0 0;
}
#contenu h2 {
color: #fb8800;
margin: 2% 0 0 20%;
font-size: 150%;
}
#contenu p {
margin: 3% 0 3% 25%;
/* titre université lycée, centré mise en hauteur gauche droite bas*/
}
#contenu p.lieu {
padding-top: 1%;
/*hauteur entre titre septembre 2005 et université */
}
#contenu ul {
padding: 0 0 0 15%; /*deplace les retraits d'alinea petit point de formation et experience*/
}
#contenu h1 {
font-size: 220%;
margin: 0 0 0 20%;
text-align: center;
}
#contenu p.description {
margin: 0 0 0 19%;
line-height: 200%;
font-size: 119%;
}
#accueil p {
margin: 1% 0 0 18%;
font-size: 121%;
}
#accueil h2 {
margin: 2% 0 0 56%;
}
#Formations h2 {
margin: 3% 0 0 19%;
}
#Formations h1 {
margin: 0 0 0 16%;
}
#Formations p.lieu {
margin: 0 0 0 0%;
}
#Formations p.compétence {
margin: 0 0 0 0%;
}
#Formations li {
font-size: 120%;
margin: 0 0 0 10%;
}
#Formations ul {
margin: 3% 0 0 5%;
}
#experience h1 {
text-align: center;
}
#experience ul {
margin: 1% 0 0 11%;
}
#experience p{
margin: 4% 0 0 18%;
}
#divers h1 {
text-align: center;
}
#divers ul {
font-size: 115%;
margin: 2% 0 5% 13%;
line-height: 130%;
}
#contact p {
margin: 4% 0 0 42%;
font-size: 115%;
}
#contact h1 {
text-align: center;
}
#footer {
clear: both;
margin: 2%;
color:#939393;
padding: 1%;
}
#footer p{
margin: 2% 0 0 25%;
}
et voici le code HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="fr">
<head>
<title>CV de Belkacem ABDICHE, webmarketer, chargé de référencement, trafic manager</title>
<meta http-equiv="Content-type" content="text/html charset=iso-8859-1"/>
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
<meta name="description" content="Cv de Belkacem ABDICHE , webmarketer, chargé de référencement, trafic manager." />
<meta name="keywords" content="cv,curriculum vitae,webmarketer,chargé de référencement,référenceur,trafic manager,traffic manager,webmarketing,e-marketing,e-commerce,référencement" />
<meta name="author" content="abdiche,belkacem" />
<meta http-equiv="robots" content="all,follow,index" />
<meta name="revisit-after" content="10 days" />
<meta name="copyright" content="belkacem abdiche" />
<meta name="language" content="fr" />
</head>
<body>
<!-- L'en-tête -->
<div id="header">
</div>
<!-- Les menus -->
<div id="menuvertical">
<div class="element_menu">
<!-- menu terminé -->
<h4>Navigation</h4>
<ul>
<li><a href="page d'accueil.html">Accueil</a></li>
<li><a href="qui_suis_je.html">Qui suis je ?</a></li>
<li><a href="Formations.html">Formations</a></li>
<li><a href="Expériences.html">Expériences</a></li>
<li><a href="Divers.html">Divers</a></li>
<li><a href="Contact - CV.html">Contact - CV</a></li>
</ul>
</div>
</div>
<!-- Le corps-->
<div id="corps">
<div id="contenu">
<h1>Accueil</h1>
<div id="accueil">
<h2>Objectif</h2>
<p>
<br/>Bonjour et bienvenue sur ce site qui va vous permettre de consulter mon CV en ligne, ainsi que de le télécharger au format PDF.<br/>
<br/>Sur ces quelques pages, je vais essayer de vous présenter mon parcours ainsi que mes expériences professionnelles.<br/>
<br/>J'ai obtenu ma licence professionnelle E-Commerce / E-Marketing en septembre 2006.<br/>
<br/>Je recherche donc un poste de webmarketer, chargé de référencement, ou responsable marketing référencement site web.<br/>
<br/>Si vous êtes intéressés par mon profil n'hésitez pas à me contacter !
</p>
</div>
</div>
</div>
<!-- Le pied de page-->
<div id="footer">
<p>Copyright © 2007 Belkacem ABDICHE, tous droits réservés. Interface graphique par
<a href="www.flydraw.com">Cam972</a> pour <a href="http://www.kits-gratuits.net/">Kits-Gratuits</a></p>
</div>
</body>
</html>
En vous remerciant de votre précieuse aide
A voir également:
- Mise en page site web sous ie et firefox
- Création site web - Guide
- Web office - Guide
- Site de telechargement - Accueil - Outils
- Site comme coco - Accueil - Réseaux sociaux
- Mise en forme conditionnelle excel - Guide
6 réponses
c'est le menu a gauche la navigation quand je le passe sur la resolution de mon pc fixe en 1024 par 768 sous ie entre chaque case bleu il y a un grand vide et sous firefox ca fait un menu normal, je ne sais pas comment ca rend sur ton pc
slt !
j'ai deja eu ce probleme j'ai juste changer mon type de liste !
plutot que d'utiliser <ul><li>...</li></ul>
j'ai mi <dl><dt>...</dt></dl>
et ça fonctionne
mais pourquoi alors la ...
j'ai deja eu ce probleme j'ai juste changer mon type de liste !
plutot que d'utiliser <ul><li>...</li></ul>
j'ai mi <dl><dt>...</dt></dl>
et ça fonctionne
mais pourquoi alors la ...
bin ecoute absurdsystem j ai fait comme tu as dit mettre des dl et dt mais bon voila au niveau du css quand je reprend les memes données ca refait les memes trucs que dois je modifier au niveau du css des valeurs ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bonjour,
bon j'ai oublier de dire que ie c est 6.0.2900.2180 je tourne sous xp et sur mon pc portable c la derniere version ie car c vista donc est ce ke le navigateur y est aussi en faute?
bon j'ai oublier de dire que ie c est 6.0.2900.2180 je tourne sous xp et sur mon pc portable c la derniere version ie car c vista donc est ce ke le navigateur y est aussi en faute?
Il me semble que ce tu dois modifier, c'est tous ces %.
Il y en a partout. Même pour des marges verticales…
À quoi servent-ils ?
Tu places des <li> de 140px dans un #menu de 10%.
Pour que le menu fasse réellement 140px à l'écran, il faudrait qu'on affiche la page en 1400px (sans les marges) !
Dans n'importe quelle résolution, 140 = 140.
Tu utilises une image en background no-repeat.
Elle a donc des dimensions précises.
Là-dessus, tu appliques une line-height en %.
Le #menu est en float.
Rien ne lui répond en face. Et le #contenu rentre dedans quand on réduit la largeur de la page.
On s'attendrait à trouver le #corps en float lui aussi.
Il n'est pas défini dans la feuille de styles.
Et c'est plutôt les #menu a qui ont besoin d'un “display:block”, pas les #menu li.
Pour partir de 0, applique des margin et padding à 0 au #menu ul.
Ensuite, donne des dimensions précises aux éléments du menu avec des px.
Le menu n'a pas besoin de s'adapter.
++
Évite les espaces, accents… dans les noms de tes fichiers.
--
Il y en a partout. Même pour des marges verticales…
À quoi servent-ils ?
Tu places des <li> de 140px dans un #menu de 10%.
Pour que le menu fasse réellement 140px à l'écran, il faudrait qu'on affiche la page en 1400px (sans les marges) !
Dans n'importe quelle résolution, 140 = 140.
Tu utilises une image en background no-repeat.
Elle a donc des dimensions précises.
Là-dessus, tu appliques une line-height en %.
Le #menu est en float.
Rien ne lui répond en face. Et le #contenu rentre dedans quand on réduit la largeur de la page.
On s'attendrait à trouver le #corps en float lui aussi.
Il n'est pas défini dans la feuille de styles.
Et c'est plutôt les #menu a qui ont besoin d'un “display:block”, pas les #menu li.
Pour partir de 0, applique des margin et padding à 0 au #menu ul.
Ensuite, donne des dimensions précises aux éléments du menu avec des px.
Le menu n'a pas besoin de s'adapter.
++
Évite les espaces, accents… dans les noms de tes fichiers.
--