Style css et firefox
Résolu
nickleus
Messages postés
384
Statut
Membre
-
Scalpweb Messages postés 1483 Statut Membre -
Scalpweb Messages postés 1483 Statut Membre -
Bonjour,
voila mon probleme :
je veux mettre un carde en css a 100% autour d'un ensemble de balises de façon que ca s'adapte au plus juste (je ne veux pas mettre une valeur fixe pour la hauteur pour être plus claire).
la balise qui encadre est <div id = "content"></div>
le cadre entour correctement les les balises suivantes :
<div id="entete"></div>
<ul id="menu">......</ul>
Mais à partir des balises suivantes :
<a href="#">
<ul id="editeurs">Editeurs...</ul>
</a>
et
<a href="#">
<ul id="annonceurs">Annonceurs...</ul>
</a>
la balise <div id = "content"></div> ne les encadre plus sauf sur internet explorer (pour une fois qu'il fait ce que je veux celui là :) ) en gros l'erreur est sur firefox.
sur les deux dernières balises j'ai appliquer un style flotant respectivement gauche et droite.
je vous donne le script html ente les balises body:
<body>
<div id="content">
<div id="entete"></div>
<ul id="menu">
<li><a class="menu" href="index.php">Accueil</a></li>
<li><a class="menu" href="#">Qui nous sommes ?</a></li>
<li><a class="menu" href="#">Nos solutions</a></li>
<li><a class="menu" href="#">Se connecter</a></li>
<li><a class="menu" href="#">Nous contacter</a></li>
</ul>
<a href="#">
<ul id="editeurs">Editeurs
<li>Rémunération inovante.</li>
<li>Liberté totale sans exclusivité.</li>
</ul>
</a>
<a href="#">
<ul id="annonceurs">Annonceurs
<li>Couverture exclusive.</li>
<li>Ciblage avancés.</li>
</ul>
</a>
</div>
</body>
Et le script css :
#content {
height: 100%;
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCCCCC;
position: relative;
}
ul {
list-style-type: none;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
#content #menu {
text-align: center;
width: 690px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
#content #editeurs {
display: block;
height: 100px;
width: 340px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 5px;
}
#content #annonceurs {
display: block;
height: 100px;
width: 340px;
border: 1px solid #CCCCCC;
margin-left: 0px;
float: right;
margin-right: 5px;
}
a {
text-decoration: none;
}
#content #entete {
background-image: url(../images/entete.png);
width: 690px;
height: 234px;
margin-right: auto;
margin-left: auto;
}
#content #menu li {
display: inline;
}
#content #menu .menu {
padding-right: 10px;
padding-left: 10px;
}
je vous remercie par avance du grand service que vous me rendriez en m'expliquant mon erreur afin que je puisse engloger toutes les balises.
en espérent avoir été claire
--
Il n'y a pas de problème, il n'y a que des solutions
voila mon probleme :
je veux mettre un carde en css a 100% autour d'un ensemble de balises de façon que ca s'adapte au plus juste (je ne veux pas mettre une valeur fixe pour la hauteur pour être plus claire).
la balise qui encadre est <div id = "content"></div>
le cadre entour correctement les les balises suivantes :
<div id="entete"></div>
<ul id="menu">......</ul>
Mais à partir des balises suivantes :
<a href="#">
<ul id="editeurs">Editeurs...</ul>
</a>
et
<a href="#">
<ul id="annonceurs">Annonceurs...</ul>
</a>
la balise <div id = "content"></div> ne les encadre plus sauf sur internet explorer (pour une fois qu'il fait ce que je veux celui là :) ) en gros l'erreur est sur firefox.
sur les deux dernières balises j'ai appliquer un style flotant respectivement gauche et droite.
je vous donne le script html ente les balises body:
<body>
<div id="content">
<div id="entete"></div>
<ul id="menu">
<li><a class="menu" href="index.php">Accueil</a></li>
<li><a class="menu" href="#">Qui nous sommes ?</a></li>
<li><a class="menu" href="#">Nos solutions</a></li>
<li><a class="menu" href="#">Se connecter</a></li>
<li><a class="menu" href="#">Nous contacter</a></li>
</ul>
<a href="#">
<ul id="editeurs">Editeurs
<li>Rémunération inovante.</li>
<li>Liberté totale sans exclusivité.</li>
</ul>
</a>
<a href="#">
<ul id="annonceurs">Annonceurs
<li>Couverture exclusive.</li>
<li>Ciblage avancés.</li>
</ul>
</a>
</div>
</body>
Et le script css :
#content {
height: 100%;
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCCCCC;
position: relative;
}
ul {
list-style-type: none;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
#content #menu {
text-align: center;
width: 690px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
#content #editeurs {
display: block;
height: 100px;
width: 340px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 5px;
}
#content #annonceurs {
display: block;
height: 100px;
width: 340px;
border: 1px solid #CCCCCC;
margin-left: 0px;
float: right;
margin-right: 5px;
}
a {
text-decoration: none;
}
#content #entete {
background-image: url(../images/entete.png);
width: 690px;
height: 234px;
margin-right: auto;
margin-left: auto;
}
#content #menu li {
display: inline;
}
#content #menu .menu {
padding-right: 10px;
padding-left: 10px;
}
je vous remercie par avance du grand service que vous me rendriez en m'expliquant mon erreur afin que je puisse engloger toutes les balises.
en espérent avoir été claire
--
Il n'y a pas de problème, il n'y a que des solutions
8 réponses
-
Déjà, le style 100% sur content ne fonctionnera pas.
Si tu veux que ton cadre prenne 100% de la hauteur de ta page, il faut ajouter :
html, body{
height: 100%;
}
Dans un premier tant...
Ensuite, je vais tester ton code et je te tiens au courant. -
je vient de tester
html, body{
height: 100%;}
en faite ca s'adapte a la page en général mais je veux juste que ca s'adapte a l'ensemble des balise entre <div id="content"></div>
merci pour cette astuce ca ma donner une idee pour autre chose.
j'attend ta solution avec impacience merci -
Alors si tu veux juste que ça s'adapte à ce que tes balise div contiennent, tu n'a pas besoin de mettre height:100%; !
Il s'adaptera tout seul. -
Chez moi, ce code-ci fonctionne à mperveilel sous firefox :
<html>
<head>
<style type="text/css">
#content {
height: 100%;
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCCCCC;
position: relative;
}
ul {
list-style-type: none;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
}
#content #menu {
text-align: center;
width: 690px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
}
#content #editeurs {
display: block;
height: 100px;
width: 340px;
border: 1px solid #CCCCCC;
float: left;
margin-left: 5px;
}
#content #annonceurs {
display: block;
height: 100px;
width: 340px;
border: 1px solid #CCCCCC;
margin-left: 0px;
float: right;
margin-right: 5px;
}
a {
text-decoration: none;
}
#content #entete {
background-image: url(../images/entete.png);
width: 690px;
height: 234px;
margin-right: auto;
margin-left: auto;
}
#content #menu li {
display: inline;
}
#content #menu .menu {
padding-right: 10px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="content">
<div id="entete"></div>
<ul id="menu">
<li><a class="menu" href="index.php">Accueil</a></li>
<li><a class="menu" href="#">Qui nous sommes ?</a></li>
<li><a class="menu" href="#">Nos solutions</a></li>
<li><a class="menu" href="#">Se connecter</a></li>
<li><a class="menu" href="#">Nous contacter</a></li>
</ul>
<a href="#">
<ul id="editeurs">Editeurs
<li>Rémunération inovante.</li>
<li>Liberté totale sans exclusivité.</li>
</ul>
</a>
<a href="#">
<ul id="annonceurs">Annonceurs
<li>Couverture exclusive.</li>
<li>Ciblage avancés.</li>
</ul>
</a>
</div>
</body>
</html> -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
ca devrais s'adapter tout seul mais des que je met le style flotant ca ne s'adapte plus
-
Tu peux me fournir le code définitif qui ne marche pas chez toi stp ?
-
c bon je vien de trouver.
en faite il ne faut pas mettre une flotant gauche et droite
il faut simplement mettre une flotant droite a la premiere balise et l'autre prend sa place par default voila la correction :
@charset "utf-8";
a {
text-decoration: none;
}
ul {
list-style-type: none;
margin-top: 0px;
padding-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}
#content {
width: 700px;
margin-right: auto;
margin-left: auto;
border: 1px solid #CCCCCC;
}
#content #entete {
background-image: url(../images/entete.png);
width: 690px;
height: 234px;
margin-right: auto;
margin-left: auto;
}
#content #menu {
text-align: center;
width: 690px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
}
#content #menu li {
display: inline;
}
#content #menu .menu {
padding-right: 10px;
padding-left: 10px;
}
#content #annonceurs {
float: right;
height: 120px;
width: 340px;
border: 1px solid #CCCCCC;
background-image: url(../images/fond_pres.png);
padding-left: 15px;
}
#content #editeurs {
width: 340px;
height: 120px;
border: 1px solid #CCCCCC;
background-image: url(../images/fond_pres.png);
padding-left: 15px;
}
#content #center {
width: 690px;
margin-right: auto;
margin-left: auto;
}
#content #footer {
display: block;
text-align: center;
}
merci quand meme pour l'astuce -
