28220 sujets

CSS et mise en forme, CSS3

[Résolu] Petit souci de mise en page

je suis sur un projet de site et j'ai fait une maquette qui me semble au point mise à part quelque petit detail Smiley murf

en voici le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>maquette simplifier du site</title>
<style type="text/css">

body {
background-color : #bbb;
color : black;
margin-top : 20px;
margin-bottom : 20px;
}

#header {
background-color: blue;
width : 775px ;
height: 100px ;
margin-left: auto; margin-right: auto;
text-align: center;
}
#menus {
width : 180px;
float: left;
}
#menu1 {
background-color: green;
height: 300px;
}
#menu2 {
background-color: #FFFF00;
height: 200px;
}
#contenu {
background-color: white;
margin-right: auto; margin-left: auto;
width : 775px ;
min-height: 500px;
}
#footer {
background-color: blue;
width : 775px ;
height: 30px ;
margin-left: auto; margin-right: auto;
text-align: center;
}
.p {
margin-left: 190px;

}
#menu3 {
background-color: black;
float: left;
width: 595px;
height: 30px;
}
#titre {
background-color: silver;
float: left;
width: 470px;
height: 30px;
text-align: center;
}
#fonction {
background-color: navy;
float: left;
height: 30px;
width: 120px;
}
<style>
</head>
<body>
<div id="header">MON BEAU HEADER</div>
<div id="contenu">
<div id="menus">
<div id="menu1">Menu n°1&nbsp;:
</div>
<div id="menu2">Menu n°2&nbsp;:
</div>
</div>
<div id="menu3">
<div id="titre">xxx</div>
<div id="fonction"></div>
</div>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>
<p class="p">Du blablabla&hellip;</p>

</div>
<div id="footer">MON BEAU FOOTER</div>
</body>
</html>


sous IE, mon header et mon footer son bien coller avec la div de contenu (aucun soucis) Smiley cligne

par contre sous Firefox, j'ai un espace entre eux Smiley fache

pouver vous m'aider à resoudre ce probleme Smiley cligne

ps: j'ai essayer des tas de trucs sur les margin et padding top et bottom et rien à faire Smiley confus

ps2: le truc de cette maquette est de pouvoir rajouter autant de contenu (blablabla) que l'on veut car la mise en page peu s'etirer en hauteur Smiley cligne

essayer de rajouter du blabla dand la div de contenu pour voir Smiley biggrin

remarquer un autre petit default (sous IE cette fois):
lors d'un depassement du text par rapport au menu le plus bas, un leger decalage de 1 à 2px ce fait vue qu'il n'y a plus de menu sur la gauche Smiley bawling

c'est sans doute dus au border ou padding interpreter differament par IE Smiley fache

le truc c'est que mon margin-left: 190px; appliqué au paragraphe de texte est mal respecté.

si quelqu'un à une idée sur ce probleme là aussi Smiley cligne
Modifié par beroots (27 Oct 2005 - 22:46)
à oui j'oubliai:

en ajoutant une div en bas du text mon header c'est par la même occasion retrouver collé comme je le voulai à ma div de contenu

j'ai mis ceci (si vous voulez testé, ajouter la div après le dernier <p> et mettez le css avec le css Smiley cligne )
<div id="go_top"></div>


#go_top {
background-color: navy;
margin-left: 755px;
bottom: 0px;
height: 18px;
width: 20px;


c'est juste au cas ou ça pourrai vous eclairez sur mon premier problème Smiley cligne
ça marche pô Smiley decu

penser à faire des essais en copiant collant le code Smiley cligne

je pense qu'il serai bon aussi de préciser dans vos post le probleme auquel vous penser avoir une solution Smiley cligne

si quelqu'un à une autre idée Smiley smile
Administrateur
OK, je me permets de changer ton {reglé} en [Résolu] puisque ça facilitera les recherches dans le forum.
Sujet clos
Aller à