28220 sujets

CSS et mise en forme, CSS3

Probléme de positionement et de navigateurs

Bonjours,
J'ai un probléme pour le positionement d'une image. Avec Safari pas de soucis mais avec IE et Firefox, ça ne marche pas.

Mes CSS (en partie):

.entete {
    width: 750px;
    height: 110px;
    background-image: url(images/entete3_01.png);
}
.menu {
    width: 750px;
    height: 25px;
    line-height: 25px;
    background-image: url(images/fondnoir2.png);
    text-align: right;
}
a:link {
    height: 25px;
    padding : 4px 11px;
    background-image: url(images/fondnoir2.png);
    color : #f9f9f9;
    font-size : 13px;
    text-decoration : none;
}
a:visited {
    height: 25px;
    padding : 4px 11px;
    background-image: url(images/fondnoir2.png);
    color : #f9f9f9;
    font-size : 13px;
    text-decoration : none;
}
a:hover {
    height: 25px;
    padding : 4px 11px;
    background-image: url(images/fondvert.png);
    color : #f9f9f9;
    font-size : 13px;
    text-decoration : none;
}
a:active {
    height: 25px;
    padding : 4px 11px;
    background-image: url(images/fondvert.png);
    color : #444444;
    font-size : 13px;
    text-decoration : none;
}
.listeliens1 {
     display: inline;
     list-style-type: none;
}
.liste1 {
    margin-top: 0px;
}
.qp {
    height: 25px;
    padding : 4px 11px;
    background-image: url(images/fondblanc.png);
    color : #999999;
    font-size : 13px;
    text-decoration : none;
    border-bottom-color: #999999;
    border-bottom-width: 5px;
    border-bottom-style: solid;
}
.test {
    background-image: url(images/aquadec1.png);
    width: 310px;
    height: 25px;
    margin-top: -37px;
    margin-left: 1px;
}


Et XHTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    
    <meta name="author" content="Vincent LENOIR, Bastien DEVALLOIR">
    <meta name="description" content="Radio web lyceenne">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="styles.css" type="text/css" />

    <title>Radio Web Sonic</title>
    
</head>
<body>

<div class="page">

<div class="entete">

</div>

<div class="menu">

<ul class="liste1">
    <li class="listeliens1"><span class="qp">Accueil</span></li>
    <li class="listeliens1"><a href="#">La radio</a></li>
    <li class="listeliens1"><a href="#">Programmes</a></li>
    <li class="listeliens1"><a href="#">Animateurs</a></li>
    <li class="listeliens1"><a href="#">Contact</a></li>
</ul>

<div class="test"></div>

<div class="ombre"></div>

</div>

</body>
</html>


J'aimerais que l'élement test soit positioner dans l'alignement de la liste, mais sans float ... pour pouvoir marcher avec IE et Firefox, car j'utilise les marges négatives et c'est un peu du bricolage ...

Merci Smiley smile
Modifié par Vince71 (30 Sep 2005 - 22:55)
Sujet clos
Aller à