28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de chevauchement lors de la réduction de la fenêtre

Bonjour à tous,

je viens de m'inscrire et j'ai regardé les différents problèmes qui se rapprochaient du mien. J'ai quelques pistes, notamment sur l'utilisation pas toujours appropriée des div...mais étant donné que ma page ne contient pas encore beaucoup de choses, je me suis dit qu'il serait assez aisé pour les plus chevronnés d'entre vous de résoudre mon problème.
En effet lors de la réduction de ma page, les éléments viennent se chevaucher. N'y a-t-il pas un moyen de les fixer? C'est un travail de veille technologique que je dois rendre, ce serait très sympa de votre part de tester ce code et de voir si vous avez une solution. Merci d'avance!

Voici le code html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>La Plateforme Android</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- L'entête de la page, affiché tout en haut de l'écran : -->
<div id="entete">
<h1>La Plateforme Android</h1>
<!-- Le menu principal du site, affiché horizontalement: -->
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
<!-- La page en elle-même : -->
<div id="page">
<!-- Le sous-menu, affiché dans une colonne sur la gauche du site : -->
<ul id="sous-menu">
<li><a href="#">La Plateforme Android</a></li>
<ul>
<li>Pr&eacute;sentation g&eacute;n&eacute;rale</li>
<li>Architecture</li>
<li>Interface, fonctionnalit&eacute;s</li>
</ul>
<li><a href="#">Communaut&eacute;/Concurrence</a></li>
<ul>
<li>Etat de l'art</li>
<li>Comparaisons, compatibilit&eacute;s</li>
</ul>
<li><a href="#">Enjeux et strat&eacute;gie de Google</a></li>
<ul>
<li>Positionnement</li>
<li>Bataille des fr&eacute;quences</li>
<li>Un m&eacute;dia pour la publicit&eacute;</li>
</ul>
</ul>
<!-- Le contenu utile de la page : -->
<div id="contenu">
<h2>Pr&eacute;sentation g&eacute;n&eacute;rale</h2>
<h3>L'id&eacute;e</h3>
<p>Android veut être le point de ralliement des développeurs
</p>
</div>
<!-- Le pied de page : -->
<div id="pied">
Paragraphe de copyrights...
</div>
</div>

</body>
</html>

et le fichier CSS:
body {
background: white;
margin: 10px 250px;
font-family: sans-serif;
font-size: small;
}
#entete{
background: #97C024;
border-bottom: none;
}
h1{
background: #97C024;
color: white;
word-spacing: 1em;
letter-spacing: 3px;
height: 150px;
line-height:150px;
text-align: center;
font-size: xx-large;
}
#menu {
background: #458EFF;
list-style: none;
margin: 0;
padding: 0;
height: 30px;
line-height:30px;
}
#menu li {
float: left;
margin: 0 2px;
}
#page {
background: white;
border: 1px solid grey;
}
#sous-menu {
height: 450px;
background: #EEEEEE repeat-y;
float: left;
width: 198px;
margin-top:0;
padding:5px;
}
#sous-menu > li{
font-weight: bold;
color: grey;
margin-top: 30px;
list-style: none;
text-indent: 0px;
padding-left: 3px;
}
#sous-menu ul{
margin-top: 20px;
list-style: none;
text-indent: -35px;
}
#contenu{
margin-left: 220px;
padding: 15px;
}
p{
text-align: justify;
}
#pied{
clear:both;
border-top: 1px solid grey;
}
Modifié par remenems (12 Feb 2008 - 21:17)
Si tu fixes une largeur à tes 2 conteneurs principaux (c'est à dire #entete et #page) tu n'aura plus de souci de chevauchement lors de la reduction de ton navigateur.

Ça pourrait donner quelque chose comme ceci :

#entete{
width : 475px; 
background: #97C024;
border-bottom: none;
}
#page {
width : 475px; 
background: white;
border: 1px solid grey;
}


Par contre il te faudra alors légèrement retoucher les propriétés des blocs présents dans le conteneur #page car sur IE ils sont centrés (pas sur Mozilla).
Modifié par neya (12 Feb 2008 - 20:24)
Merci pour la rapidité de ta réponse! Ta solution fonctionne.
En + je n'avais pas encore testé le code sous IE donc merci pour la remarque car je ne pensais pas les différences si importantes! J'ai cru comprendre que IE ne respectait pas les spécifications du W3C, c'est plutôt flagrant...

J'ai d'autres problèmes:

- les blocs du conteneur page sont centrés (d'ailleurs pourquoi pas les autres?) comment rectifier ça? j'ai essayé les propriétés de marge et d'alignement mais rien n'y fait...

- d'autre part, sous Mozilla, ma page est entouré d'une bordure
border: 1px solid grey;

pourquoi ne s'affiche-t-elle pas sous IE? Y-a-til un moyen d'y remédier?

Mais peut-être devrais-je poser ces questions dans un autre topic. Je mets celui-là en résolu.
En tout cas encore merci Neya et si tu as la solution pour ces 2 autres problèmes n'hésites pas . Smiley smile
a écrit :

- les blocs du conteneur page sont centrés (d'ailleurs pourquoi pas les autres?) comment rectifier ça? j'ai essayé les propriétés de marge et d'alignement mais rien n'y fait...


Pour repositionner ton sous menu, force la marge gauche à 0 px


#sous-menu {
height: 450px;
background: #EEEEEE repeat-y;
float: left;
width: 198px;
margin-left:0;
margin-top:0;
padding:5px;
}


Plus de soucis sur IE
Modifié par neya (12 Feb 2008 - 22:33)
a écrit :

- d'autre part, sous Mozilla, ma page est entouré d'une bordure

border: 1px solid grey;

pourquoi ne s'affiche-t-elle pas sous IE? Y-a-til un moyen d'y remédier?


A priori IE préfère le code hexa en ce qui concerne la couleur, utilise par exemple #454545 au lieu de grey.
Modifié par neya (12 Feb 2008 - 22:34)
Encore merci Neya pour tes réponses et Heyoan pour la précision Smiley smile
C'est tellement + sympa de pouvoir avancer avec de l'aide aussi réactif! Smiley cligne
Sujet clos
Aller à