créer un site


Pb avec Moz et Opera

Poster un nouveau sujet sur css   Répondre au sujet à css:Pb avec Moz et Opera    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Kinase
frontpage mioche
frontpage mioche
MessagePb avec Moz et Opera , Posté le: 01-12-2003 17:03

voici ce que j'ai "bricole":
Ca marche impec avec IE mais y a "search qui est plus haut avec Moz et Opera et la partie bottom merde completement.
Code:

<style  type="text/css">
#container
{
width: 800px;
margin: 10px auto;
background-image: url('bg2.jpg');
color: #000050;
border: 1px solid #000040;
}
#top
{
padding: 0;
background-image: url('header3.jpg');
height: 90px;
border-bottom: 1px solid #000040;
}
#search
{
clear: both;
background-image: url(bar.gif);
border-bottom: 1px solid #ff8000;
height: 30px;
}
#navlist li
{
float: right;
display: inline;
list-style-type: none;
padding-right: 20px;
margin-top: 5px;
}
#navlist li
a
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
color: #000030;
}
#navlist li
a:hover
{
text-decoration: none;
color: #d70000;
font-weight: bold;
}

#leftnav
{
float: left;
width: 150px;
margin: .5em;
padding: .5em;
background-color: transparent;
font-family: Verdana;
font-size: 11pt;
color: #036;
font-weight: bold;
}


#navleft { width: 160px;
margin: 0;
padding: 0;
}
#navleft ul
{
margin-left: 0;
padding-left: .5em;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}

#navleft a
{
display: block;
padding: 3px;
width: 140px;
font-size: 7pt;
color: #ff8000;
background-color: #036;
border-bottom: 1px solid #eee;
}

#navleft a:link, #navlist a:visited
{
color: #ff8000;
text-decoration: none;
}

#navleft a:hover
{
background-color: #369;
color: #fff;
}

#rightnav
{
float: right;
width: 60px;
margin-top:35em;
padding: 1em;
text-align: center;
}
#content
{
margin-left: 240px;
border-left: 1px solid #ff8000;
border-bottom: 1px solid #ff8000;
margin-right: 100px;
border-right: 1px solid #ff8000;
padding: 1em;
font-family: Verdana;
font-size: 10pt;
color: #000040;
text-align: justify;
font-weight: bold;
line-height: 120%;
}
.im {
 float: left;
 margin-right: 5px;
  }
#content a
{
text-decoration: none;
font-family: verdana;
font-size: 10pt;
color: #ff8000;
font-weight: bold;
}
#content a:hover
{
background-color: #ffad5b;
color: #5151ff;
}
#footer
{
width: 800px;
margin: 10px auto;
padding: 0;
text-align: center;
font-family: Verdana;
font-size: 8pt;
color: #000050;
font-weight: bold;
border: 0;
}
#navbottom
{
width: 100%;
padding: 0;
margin: 0;
background-color: transparent;
border-top: 1px solid #ff8000;
text-align: center;
}
#navbottom a
{
text-decoration: none;
font-family: verdana;
font-size: 10pt;
color: #ff8000;
font-weight: bold;
padding: .2em 1em;
}
#navbottom a:hover
{
background-color: #ffad5b;
color: #5151ff;
}
</style>


Mecri de m'aider.
Kinase
frontpage mioche
frontpage mioche
MessagePb avec Moz et Opera , Posté le: 02-12-2003 12:00

Voici le code HTML:

Code:

<body>
<div id="container">
<div id="top">
</div>
<div id="search">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Six</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">ONE</a></li>
</ul>
</div>
</div>

<div id="leftnav">
<p> texte</p>
<p> texte</p>
<p> texte</p>
<p> texte</p>
<p> texte</p>
<p> texte</p>
</div>
<div id="rightnav">
image
</div>
<div id="content">
<h3>TITRE</h3>
<p>BLA BLA BLA...</p>
<p>BLA BLA BLA...</p>
<p>BLA BLA BLA...</p>
</div>
<div id="navbottom">
<ul id="navbottom">
<li><a href="#">ONE</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
</ul>
</div>
</div>

<div id="footer">
<p> bla bla..</p>
</div>
</body>
</html>


la bar "search" est plus haute sur Moz et Opera.
Le "bottom" avec le menu est n'importe quoi avec Moz et Opera, en particulier quand la partie content est courte!
salemioche
salemioche
salemioche
MessagePb avec Moz et Opera , Posté le: 03-12-2003 9:14

dans ta css il y a du leftnav et du navleft, verifie et supprime ce qui est en trop c'est un peu trop lourd pour trouver sinon

ensuite il y a des div en float et d'autre pas, le resultat est du coup un peu different entre IE et les autres car il ne gere pas cela de la meme facon, le mieux : faire du float pour tout tes blocs
Kinase
frontpage mioche
frontpage mioche
MessagePb avec Moz et Opera , Posté le: 07-12-2003 21:27

y a en effet pas mal de superflu (je debute avec le css)!
en fait mon probleme principal est avec mozilla:
comment faire quand on a une colonne de gauche (secondaire) qui est pus longue que la colonne centrale (principale) pour que cette colonne de gauche ne sorte pas du conteneur. Ca va avec opera et IE mais rien a faire avec moz.
j'ai trouve des combines comme le spacer ou <hr> invisible mais marche pas avec moz.
salemioche
salemioche
salemioche
MessagePb avec Moz et Opera , Posté le: 07-12-2003 22:56

ca fait partie des pb qu'il est difficile de resoudre avec CSS2 et qui devrait trouver leur solution avec CSS3, c'est pour ca que certains preconise de continuer à utiliser les table et non les DIV:

http://dbaron.org/log/2003-11#e20031126a
Kinase
frontpage mioche
frontpage mioche
MessagePb avec Moz et Opera , Posté le: 08-12-2003 1:56

je crois que je vais m'arranger pour eviter ce probleme!

encore un truc qui est tres ennervant,

j'ai de temps a autres un petit espace entre la bordure et une image, conteneur... sans raison apparente!!!
a quoi est ce du???
salemioche
salemioche
salemioche
MessagePb avec Moz et Opera , Posté le: 08-12-2003 7:07

il faut faire attention a ne pas avoir d'espace entre la fin de l'image de le tag suivant
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:Pb avec Moz et Opera    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales