Style css et firefox
Résolu/Fermé
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
-
7 févr. 2008 à 10:08
Scalpweb Messages postés 1467 Date d'inscription samedi 13 mars 2004 Statut Membre Dernière intervention 5 mai 2010 - 7 févr. 2008 à 11:08
Scalpweb Messages postés 1467 Date d'inscription samedi 13 mars 2004 Statut Membre Dernière intervention 5 mai 2010 - 7 févr. 2008 à 11:08
A voir également:
- Style css et firefox
- Style word - Guide
- Telecharger firefox - Télécharger - Navigateurs
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Nom pour facebook stylé - Guide
- Exporter favoris firefox - Guide
8 réponses
Scalpweb
Messages postés
1467
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
5 mai 2010
43
7 févr. 2008 à 10:31
7 févr. 2008 à 10:31
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.
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.
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
5
7 févr. 2008 à 10:44
7 févr. 2008 à 10:44
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
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
Scalpweb
Messages postés
1467
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
5 mai 2010
43
7 févr. 2008 à 10:46
7 févr. 2008 à 10:46
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.
Il s'adaptera tout seul.
Scalpweb
Messages postés
1467
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
5 mai 2010
43
7 févr. 2008 à 10:54
7 févr. 2008 à 10:54
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>
<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
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
5
7 févr. 2008 à 10:55
7 févr. 2008 à 10:55
ca devrais s'adapter tout seul mais des que je met le style flotant ca ne s'adapte plus
Scalpweb
Messages postés
1467
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
5 mai 2010
43
7 févr. 2008 à 10:56
7 févr. 2008 à 10:56
Tu peux me fournir le code définitif qui ne marche pas chez toi stp ?
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
5
7 févr. 2008 à 11:07
7 févr. 2008 à 11:07
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
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
Scalpweb
Messages postés
1467
Date d'inscription
samedi 13 mars 2004
Statut
Membre
Dernière intervention
5 mai 2010
43
7 févr. 2008 à 11:08
7 févr. 2008 à 11:08
De rien.
Passe ce post en tant que résolu.
Passe ce post en tant que résolu.
7 févr. 2008 à 10:41
html, body{
height: 100%;
}
?
7 févr. 2008 à 10:42
border: 1px solid red
dans #content, tu verras qu'il ne prend pas 100% de la hauteur de ta page...