Sujet Précédent Sujet Suivant

Probleme de positionement en HTML CSS

Résolu/Fermé
Brainwasher - 15 sept. 2009 à 19:21
 Brainwasher - 16 sept. 2009 à 20:55
Bonjour,

Voila j'apprend le (X)HTML et le CSS et je rencontre 2 problème :

- Le positionement varie selon les navigateurs, j'ai 3 résultat diffèrent sur chrome, firefox et IE, comme c'est une barre de navigation en onglet qui est collé au corps du texte c'est un peut gênant de la voir venir empiéter dessus ou sur l'en tête ^^

- Autre probleme j'ai créer un effet hover quand je passe sur les boutons de la barre de navigation, quand je pointe le lien tout se passe bien, mais quand je suis sur le cadre (juste a coté du lien) il reprend sa couleur d'origine (blanc) mais le fond reste activé en hover (blanc aussi donc le texte est illisible).

Merci d'avence

Code source :
<!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>
<title>Mon premier site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>

<div id="en_tete"><!-- En tête du site (baniere, titre, etc...)-->
<h1>Site de démonstration </h1>
</div>

<div id="barre_de_navigation">
<ul>
<li><a href="musique.html" title="Pour écouter de la musique">Musique</a></li>
<li><a href="dossiers.html" title="Les dossiers à voir">Dossiers</a></li>
<li><a href="cours.html" title="Acceder aux cours">Cours</a></li>
<li><a href="index.html" title="Retourner à la page d'accueil">Accueil</a></li>

</ul>


</div>


<div id="menu"><!-- Menu du site ...-->

<div class="element_menu">
<h3>Home</h3>
<ul>
<li><a href="lien">Lien</a></li>
<li><a href="lien">Lien</a></li>
<li><a href="lien">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Dossiers</h3>
<ul>
<li><a href="lien">Lien</a></li>
<li><a href="lien">Lien</a></li>
<li><a href="lien">Lien</a></li>
</ul>
</div>

</div>

<div id="corps"><!-- Comme son nom l'indique ...-->

<h1>Mon premier site</h1>
<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site génial qui va parler de... heu... Je cherche encore un peu le thème de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ça doit pas être bien compliqué). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros à mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le contrôle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers à la recherche de nouveaux peuples à soumettre à ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>

</div>

<div id="pied_de_page"><!-- Emplacelent copyright-->

<p>Copyright "W-Corporation" 2009, tous droits réservés</p>
<p>Ce site est optimisé pour Firefox</p>

</div>

</body>
</html>


Code CSS:

body
{
font-family : "comic sans ms", arial, serif;
color : white;
width : 90%;
background-image : url("http://www.w-corporation.com/site/images/fond2.jpg");
margin : auto;
margin-bottom : 20px;
margin-top : 20px;
}

#en_tete
{
height : 97px;
background : black;
text-align : center;
font-family : satans;
border : white 2px solid;
}

#barre_de_navigation
{
padding : 20px; /* à modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */
margin-left : 0px;
padding-top : 0px;
margin-bottom : 20px;
}

#barre_de_navigation li
{
float : right;
height : 18px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
margin-top : 10px;
margin-left : 5px;
margin-right : 5px;
border : 2px solid white;
border-bottom : black 2px solid;
padding : 10px;
padding-top: 0px;
list-style-type : none;
background-color : black;
}

#barre_de_navigation a
{
display : block;
color : white;
text-decoration : none;
padding-top : 3px;
}

#barre_de_navigation ul :hover
{
background-color : white;
border-bottom : white 2px solid;
color : black;
}

#barre_de_navigation li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}
#barre_de_navigation ul
{
position : relative;
top: 16px;
right : 0px;
}

#menu
{
float : left;
width : 120px;
}

.element_menu
{
border : 2px solid black;
background-color : black;
border : white 2px solid;
margin : 15px;
}

.element_menu ul
{
padding : 0px;
padding-left : 8px;
margin : 0px;
margin-bottom : 5px;
list-style : none;
}

.element_menu h3
{
text-align : center;
margin : 0px;
margin-top : 4px;
margin-bottom : 8px;
padding-bottom : 4px;
border-bottom : white 2px solid;
}

.element_menu a
{
text-decoration : none;
color : white;
text-align : left;
}

.element_menu a:hover
{
background-color : white;
text-decoration : underline;
color : black;
}

#corps
{
margin-left : 140px;
margin-bottom : 20px;
padding: 8px;
padding-left : 12px;
background-color : black;
border : white 2px solid;
}

#pied_de_page
{
padding:5px;
text-align : center;
background-color : black;
border : white 2px solid;
}

.anodin
{
width: 80%;
-moz-border-radius : 50px ;
background-color: #f8f8f8;
}
A voir également:

2 réponses

Réponse 1 / 2
M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
16 sept. 2009 à 10:34
Bonjour,

Voici un CSS qui résout tes problèmes: 
body
{
font-family : "comic sans ms", arial, serif;
color : white;
width : 90%;
background-image : url("http://www.w-corporation.com/site/images/fond2.jpg");
margin : auto;
margin-bottom : 20px;
margin-top : 20px;
}

#en_tete
{
height : 97px;
background : black;
text-align : center;
font-family : satans;
border : white 2px solid;
}

#barre_de_navigation
{
height:30px;
margin:0px;
padding:20px 20px 0px 20px;
}

#barre_de_navigation ul {
	margin:0px;}

#barre_de_navigation a:hover
{
background-color : white;
color : black;
}

#barre_de_navigation li
{
float : right;
margin:0px 5px;
border : 2px solid white;
border-bottom : black 0px solid;
padding:0px;
list-style-type : none;
background-color : black;
}
	
#barre_de_navigation a
{
display : block;
color : white;
height:24px;
text-decoration : none;
padding : 3px 10px;
}


#barre_de_navigation li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}

#menu
{
float : left;
width : 120px;
}

.element_menu
{
border : 2px solid black;
background-color : black;
border : white 2px solid;
margin : 15px;
}

.element_menu ul
{
padding : 0px;
padding-left : 8px;
margin : 0px;
margin-bottom : 5px;
list-style : none;
}

.element_menu h3
{
text-align : center;
margin : 0px;
margin-top : 4px;
margin-bottom : 8px;
padding-bottom : 4px;
border-bottom : white 2px solid;
}

.element_menu a
{
text-decoration : none;
color : white;
text-align : left;
}

.element_menu a:hover
{
background-color : white;
text-decoration : underline;
color : black;
}

#corps
{
margin-left : 140px;
margin-bottom : 20px;
padding: 8px;
padding-left : 12px;
background-color : black;
border : white 2px solid;
}

#pied_de_page
{
padding:5px;
text-align : center;
background-color : black;
border : white 2px solid;
}

.anodin
{
width: 80%;
-moz-border-radius : 50px ;
background-color: #f8f8f8;
}


Pour le positionnement, le problème de compatibilité venait des margins et de la hauteur du <ul> de la barre de navigation.
En effet, les margins sont ajoutés les uns aux autres sur certains navigateurs, et fusionnés sur d'autres. il vaut donc mieux travailler avec des paddings.
De plus, le fait de mettre float:right; sur les <li> est très bien, mais a l'inconvénient de passer le <ul> correspondant dans un comportement façon "overflow:visible;". il faut donc le limiter en hauteur, pour que ça soit plus compatible.

Pour les liens en hover, j'ai fait quelques modifications. le fait de passer les <a> en 'display:block;' est la base pour pouvoir avoir des liens qui remplissent les <li>, mais il faut aller jusqu'au bout: - supprimer les padding des <li> afin que le contenu puisse prendre toute la place; -mettre le padding sur le <a> afin qu'il prenne toute la place.

Voilà!

Pour info, le rendu est le même sur Firefox 3.5, IE8, Opera 10, Safari 2.0 et Chrome 2.0
1
Réponse 2 / 2
Brainwasher
16 sept. 2009 à 20:55
Merci beaucoup =D. Et merci d'avoir pris le temps de m'aider ^^
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Balise </br>
erf -
erf -

3 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses