28220 sujets

CSS et mise en forme, CSS3

Probleme avec "height" sous FF [resolu]

Bonjour,

Après avoir consulté quelques articles traitant du sujet, je n ai toujours pas pu resoudre ce maudit probleme... Donc voici:

Sous IE mon site ce présente bien... mais sous FF mon bloc centrale ne s affichait pas, donc pour y remedier je l ai mis en position:fixed... là mon bloc a réapparu mais du coup j ai perdu la barre de défilement de la page...

n étant pas encore un expert je vous post mon code pour y voir plus clair..... Je ne voudrais pas abuser mais est ce que quelqu un pourrais me donner son avis sur la maniere dont j ai construis tout ça par la meme occasion...svp...

pour le css :
body{
margin: 0px;
background-color: #EEEEEE;
}
ul#menu{
margin: 0px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
list-style-type: none;
padding-top:3px;
}
#menu li{
display:inline;
}
#menu a
{
color: #000000;
text-decoration: none;
margin-right: 15px;
margin-left:15px;
}
#menu a:hover{
color: #007AC0;
}
#centrage
{
position: relative;
width: 686px;
margin: 0 auto;
}
#barremenu
{
clear: both;
width: 636px;
height: 23px;
background: url(../images/bg_menu.gif);
border: 1px solid #9D9D9D;
margin:0px;
padding-left: 50px;
}
#bloc{
clear: both;
width: 686px;
height: 150px;
background-image: url(../images/banner_fond.jpg);
margin:0px;
border-left: 1px solid #9D9D9D;
border-right: 1px solid #9D9D9D;
}
#contenu{
background-color: White;
position: fixed;
width: 686px;
border-right: 1px solid #9D9D9D;
border-left: 1px solid #9D9D9D;
height: 100%;
voice-family: "\"}\"";
voice-family:inherit;
height: 100%;
}
html>body #contenu {
height:100%;
} 
#footer{
clear: both;
width: 686px;
height: 20px;
background-image: url(../images/bg_menu.gif);
border: 1px solid #9D9D9D;
}
#divpic{
float: left;
width: 100px;
margin-left:25px;
margin-top:25px;
}
#divcontenu{
float: left;
width: 34px;
margin-left:30px;
margin-top:30px;
}
#divtext{
width:400px;
float: left;
margin-left:30px;
margin-top:60px;
text-align:justify;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
#logo{
float:right;
margin-right:10px;
margin-top:30px;
margin-bottom: 10px;
}


et pour le html
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id=centrage>
<div id=bloc>
<img src="images/header.jpg" height="30" width="686" alt="">
</div>
<div id=barremenu>
<ul id=menu>
<li> | <a href="home.html">Home</a> | </li>
<li><a href="welcome.html">Welcome</a> | </li>
<li><a href="program.html">Program</a> | </li>
<li><a href="news.html">News</a> | </li>
<li><a href="info.html">Practical Info</a> | </li>
<li><a href="contact.html">Contact</a> | </li>
</ul>
</div>
<div id=contenu>
<div id=divpic>
<img src="images/img1.jpg" height="100" width="100" alt="">
<img src="images/img2.jpg" height="100" width="100" alt="">
<img src="images/img3.jpg" height="100" width="100" alt="">
<img src="images/img4.jpg" height="100" width="100" alt="">
</div>
<div id=divcontenu>
<img src="images/home.gif" height="401" width="34" alt="titre menu">
</div>
<div id=divtext>
Lorem Ipsum is...........
</div>
<img id=logo src="images/logo1.gif" alt="">
<img id=logo src="images/logo2.gif" alt="">
</div>
<div id=footer>
</div>
</div>
</body>
</html>


D avance je vous en remercie....
Modifié par toutanne (20 Nov 2005 - 14:09)
Salut,

pour ce problème d'ajustement de hauteur de boites tu peux utiliser la méthode du <hr />
ajoutes le à la fin de ton div contenu et donnes lui le style
#contenu hr{
clear:both;
visibility:hidden;
}
Salut yyoupla...

j ai testé ta methode.. donc j ai enlevé ma position:fixed, j ai retrouvé mon bloc avec ma barre de defilement mais j ai un ecart avant et apres le bloc contenu.......
Modifié par toutanne (20 Nov 2005 - 13:03)
Sujet clos
Aller à