Flux rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Mise en page site web sous ie et firefox

belkawired, le vendredi 4 janvier 2008 à 00:51:53
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://kits-gratuits.net">Kits-Gratuits</a></p>
</div>
</body>
</html>

En vous remerciant de votre précieuse aide
Configuration: Windows Vista
Firefox 2.0.0.11
Répondre à belkawired  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Gihef, le vendredi 4 janvier 2008 à 01:58:13
Bonjour,

Quel menu ?

--
   
Répondre à Gihef

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
belkawired, le vendredi 4 janvier 2008 à 12:28:45
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
   
Répondre à belkawired

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
absurdsystem, le vendredi 4 janvier 2008 à 12:36:02
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 ...
Mon seul reve est de détruire vos cauchemars...
   
Répondre à absurdsystem

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
belkawired, le vendredi 4 janvier 2008 à 13:52:35
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 ?
   
Répondre à belkawired

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
belkawired, le vendredi 4 janvier 2008 à 14:10:19
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?
   
Répondre à belkawired

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Gihef, le vendredi 4 janvier 2008 à 15:26:03
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.

--
   
Répondre à Gihef
Posez votre question Répondre
Pb images site web IE (Résolu)Bonjour, je créé 1 site web dans lequel j'ai mis des petites photos au format jpg . Problème : certaines images affichés sous IE sont de très mauvaises qualités, sous Firefox c'est niquel. J'ai essayé de les mettre en gif ou png mais le... www.commentcamarche.net/forum/affich-8144167-pb-images-site-web-ie
Comment avoir plus de visiteur sur mon site? (Résolu)Bonjour, voila mon problème: il y a 1 ou 2 semaine que j'ai mis mon site web en ligne et je n'est que 4 à 5 visiteur par jour bien que j'ai déja effectuer un gros travaille de réfférencement dans les index (genre:google) et dans les... www.commentcamarche.net/forum/affich-5739327-comment-avoir-plus-de-visiteur-sur-mon-site
Référencement google (Résolu)Bonjour, J'ai mis mon site web en ligne , il y a 2 semaines avec les meta tags positionnés correctement ainsi que sitemaps. Mais quand je recherche dans google je ne vois aucune amélioration... Le resultat de google est le suivant : Bienvenue... www.commentcamarche.net/forum/affich-8471571-referencement-google
[Aspirateur de pages HTML] Comment aspirer un site Web ?HTTrack est un excellent aspirateur, gratuit en licence GNU GPL (libre). HTTrack permet de télécharger un site web d'Internet vers votre disque dur, en construisant récursivement tous les répertoires, récupérant html, images et fichiers du serveur... www.commentcamarche.net/faq/sujet-2658-aspirateur-de-pages-html-comment-aspirer-un-site-web
[Téléchargement] Récupérer un site web en .chm (Windows Help)Il peut être pratique d'avoir en local certains sites web, par exemple pour consulter des documentations sur un ordinateur portable pendant un voyage. Voici comment récupérer un site web sous forme de fichier .chm Pourquoi le format .CHM ? C'est... www.commentcamarche.net/faq/sujet-1144-telechargement-recuperer-un-site-web-en-chm-windows-help
Vérifier les liens brisés d'un site webL'erreur 404, renvoyée par un site Web, indique que la page demandée n'a pas été trouvée à l'adresse indiquée. Il s'agit d'un des cauchemars du webmaster, car il indique généralement un lien brisé (lien mort), c'est-à-dire un lien dont l'adresse a... www.commentcamarche.net/faq/sujet-5353-verifier-les-liens-brises-d-un-site-web
Prob mise en ligne site web (Résolu)bonsoir, j'ai besoin d'aide pour la mise en ligne de mon site web. je travaille avec thundersite. mon dossier du site est transfere chez free, en hebergement gratuit, avec une adresse url. comment faire ensuite pour que mon site... www.commentcamarche.net/forum/affich-2530539-prob-mise-en-ligne-site-web
Les CSS !!! IE!=FireFox (Résolu)Allo, Bonne Année, j'ai un souci de CSS. je suis entrain de faire un site valide W3C. Mon souci est que j'utilise les div et les css et que depuis I.E. on ne voit que le fond de la page alors que sous Firefox on voit mon contenu (oui, je... www.commentcamarche.net/forum/affich-2561865-les-css-ie-firefox
Outil pour créer site web recettes de cuisine (Résolu)Bonjour, connaissez vous un outil de création de site web fastoche qui permette de gérer des recettes de cuisine dedans (entre autre) ? j'utilise cariboost qui permet de composer très simplement un site web en 3 click, (version 8 pages gratuite)... www.commentcamarche.net/forum/affich-5617091-outil-pour-creer-site-web-recettes-de-cuisine
Webmastering - Conception d'un site web La conception d'un site web doit être une démarche participative, orientée utilisateurs, c'est-à-dire qu'elle doit se faire, autant que possible, en concertation avec un ensemble de représentants de l'entreprise ou de l'organisation, et de ses... www.commentcamarche.net/web/conception.php3
Métiers de l'informatique - Webmaster (Administrateur de site web) Le webmaster (également appelé administrateur de site web ou webmestre) est chargé du maintien et de l'évolution du site web de l'entreprise. A ce titre, il travaille à définir l'architecture et l'arborescence du site web, en concertation... www.commentcamarche.net/metiers-informatique/webmaster.php3
Métiers de l'informatique - Webmaster (Administrateur de site web) Le webmaster (également appelé administrateur de site web ou webmestre) est chargé du maintien et de l'évolution du site web de l'entreprise. A ce titre, il travaille à définir l'architecture et l'arborecsence du site web, en concertation... www.commentcamarche.net/metiers-informatique/chef-projet-multimedia.php3
Toutes les réponses pour « mise en page site web sous ie et firefox »