Bonsoir à tous!
je suis en train d'adapter un template à xoops mais auparavant j'ai besoin de le modifier lui même pour le décomposer en fait. (je n'arrive pas sinon à le morphogeniser)
Et là j'ai un pb avec IE et FF comme d'hab quoi...
Voici mes deux pages de codes CSS et HTML du header:
HTML
<div id="header">
<!--logo part start -->
<div id="left_pan">
<img src="images/trial.gif" width="85" height="100" title="trial impact" alt="trial impact" />
<h2>members <span>area</span></h2>
</div>
</div>
<!--logo side end -->
<!--ban side start -->
<div id="rightPan">
<div id="navbar">
<ul>
<li><a href="#" class="main">Home</a></li>
<li><a href="#" class="home">About Us</a></li>
<li><a href="#" class="home">Network</a></li>
<li><a href="#" class="sub">Submission</a></li>
<li><a href="#" class="home">Archives</a></li>
<li><a href="#" class="home">Finance</a></li>
<li><a href="#" class="con">Contact</a></li>
</ul>
</div>
<!--3 cases start -->
<div id="cases">
<ul class="link">
<li><a href="#">Assos</a></li>
<li class="sup"><a href="#">Media</a></li>
<li class="sol"><a href="#">Echange</a></li>
</ul>
<ul class="sub_link">
<li><a href="#">sodales lac</a></li>
<li class="sup1"><a href="#">sodales lac</a></li>
<li class="sol1"><a href="#">sodales lac</a></li>
</ul>
</div>
<!--3 cases end -->
</div>
<!--header part end -->
et le CSS:
/* CSS Document */
body{
background:url(images/bg.gif) repeat-x 0 0 #FFF9F2; color:#333227;
padding:0; margin:0;
}
div, p, ul, h1, h2, h3, img, form{
padding:0; margin:0;
}
ul{
list-style-type:none;
}
.bank{
line-height:0; font-size:0; clear:both;
}
/*------------------------left side header-------------------------*/
#header{
width: 778px; margin:0 auto 0 auto; clear:both; height: 1%;
}
#left_pan{
width:188px; background:url(images/logo_bg.gif) no-repeat #FFF9F2; color:#fff; float:left;
}
#left_pan img{
margin:40px 0 38px 52px; display:block;
}
#left_pan h2{
width:73px; height:41px; background:url(images/login_bg.gif) no-repeat 0 0; margin:0 0 0 6px; display:block;
font:14px/14px Arial, Helvetica, sans-serif; padding:17px 65px 0 32px; font-weight:bold; text-transform:uppercase;
}
#left_pan h2 span{
font-size:24px; line-height:24px;
}
/*-------------------------------right side Header--------------------*/
#rightPan{width:590px; float: left; margin:0 ;height:1%;
}
#navbar {width:580px; margin:0; display:block; float:left}
#navbar ul {width:550px; display:block; margin:0 0 0 0px; height:29px; font-size:0;}
#navbar ul li{
float:left; height:29px;
}
#navbar ul li a{
font:12px/29px Arial, Helvetica, sans-serif; font-weight:bold; height:29px; display:block; color:#FFF9F2;
background:url(images/navi_bg.gif) repeat-x 0 0 #005050; text-decoration:none; text-align:center;
}
#navbar ul li a.main{
background:url(images/home.gif) no-repeat 0 0; width:59px;
}
#navbar ul li a.main:hover{
background:url(images/home_h.gif) no-repeat 0 0; width:59px;
}
#navbar ul li a.home{
background:url(images/about_us.gif) no-repeat 0 0; width:74px;
}
#navbar ul li a.home:hover{
background:url(images/about_us_h.gif) no-repeat 0 0; width:74px;
}
#navbar ul li a.sub{
background:url(images/submission.gif) no-repeat 0 0; width:92px;
}
#navbar ul li a.sub:hover{
background:url(images/submission_h.gif) no-repeat 0 0; width:92px;
}
#navbar ul li a.con{
background:url(images/contact_us.gif) no-repeat 0 0; width:74px;
}
#navbar ul li a.con:hover{
background:url(images/contact_us_h.gif) no-repeat 0 0; width:74px;
}
#cases {
width:580px;
float:left;
margin:0;
height:210px;
background:url(images/header_pic.jpg) no-repeat;
}
#cases ul.link{
width:590px; display:block; margin:23px 0 0 0; height:20px;
}
#cases ul.link li{
float:left; width:102px; font-size:0px; display:block; padding:0 0 0 96px; height:10px;
}
#cases ul.link li.sup{
float:left; width:96px; font-size:0px; display:block; padding:0 0 0 102px; height:10px; margin:0;
}
#cases ul.link li.sol{
float:left; width:122px; display:block; padding:0 0 0 55px; height:10px;
}
#cases ul.link li a{
font:20px/20px Arial, Helvetica, sans-serif; text-transform:uppercase; color:#AA855B ; font-weight:normal;
background-color:#FFF9F2; background-image:none; display:block; width:104px; text-align:right; height:20px;
}
#cases ul.link li a:hover{
color:#5A3000; background-color:#FFF9F2; padding:0; margin:0;
}
#cases ul.sub_link{
width:590px; display:block; margin:0px 0 0 0; height:14px; padding:0;
}
#cases ul.sub_link li{
float:left; width:104px; font-size:0px; display:block; padding:0 0 0 94px; height:14px; margin:0;
}
#cases ul.sub_link li.sup1{
float:left; width:96px; font-size:0px; display:block; padding:0 0 0 102px; height:auto;
}
#cases ul.sub_link li.sol1{
float:left; width:112px; font-size:0px; display:block; padding:0 0 0 65px;
}
#cases ul.sub_link li a{
font:14px/14px Arial, Helvetica, sans-serif; color:#353535; font-weight:normal;
background-color:#FFF9F2; background-image:none; display:block; width:104px; text-align:right; height:14px;
}
#cases ul.sub_link li a:hover{
color:#5A3000; background-color:#FFF9F2; padding:0; margin:0; text-decoration:underline;
}
Sous FF aucun problème le template s'affiche correctement, comme
ceci.
(le header tout jusqu'à MEMBER AREA compris)
Sous IE la partie droite du Header se retrouve en dessous.
Quelqu'un a t il une idée?
trial_impact.zip
