Bonjour à tous !
Un petit soucis avec un site que je suis en train de mettre en place :
J'utilise la technique FIR pour les liens du menu et sous IE un probleme de calage fait que je ne peux cliquer sur les dits liens ...
Je soupconne une histoire de padding ou de margin, mais là je sèche ...
Au passage, les critiques sur le design et l'ergonomie sont les bienvenu ! C'est encore une ébauche mais bon ...
Un GRAND merci à ceux qui prendront le temps de me lire et de me répondre !!
l'adresse : http://www.ekxaoproductions.com/arroenia
le css :
le html :
Modifié par barbe douce (07 Apr 2006 - 18:52)
Un petit soucis avec un site que je suis en train de mettre en place :
J'utilise la technique FIR pour les liens du menu et sous IE un probleme de calage fait que je ne peux cliquer sur les dits liens ...
Je soupconne une histoire de padding ou de margin, mais là je sèche ...
Au passage, les critiques sur le design et l'ergonomie sont les bienvenu ! C'est encore une ébauche mais bon ...
Un GRAND merci à ceux qui prendront le temps de me lire et de me répondre !!
l'adresse : http://www.ekxaoproductions.com/arroenia
le css :
/* G E N E R A L */
body {
margin: 0;
padding: 0;
font: normal bold 0.9em Geaorgia, Courrier, serif;
background-color: #004D20;
}
p {
margin: 0 0 5px 0;
font: normal 0.7em Verdana, Times, Arial, sans-serif;
color: white;
}
img {
border: solid white 10px;
}
span, h1 span, h2 span {
display: none;
}
/* C O N T E N E U R */
.conteneur {
width: 750px;
position: absolute;
left: 50%;
top: 10%;
margin-left: -385px;
}
/* C O N T E N U */
.contenu {
width:750px;
height: 400px;
}
/* H E A D E R */
.header {
height: 120px;
}
.header h1 {
width: 335px;
height: 120px;
margin-left: 420px;
background: url(images/logo.jpg) bottom right no-repeat;
}
/* G A U C H E */
.gauche {
position: absolute;
margin-top: -413px;
padding-bottom: 10px;
left:0;
width: 515px;
height: 400px;
background-color: transparent;
}
/* F R A M E */
.frame {
margin-top: -404px;
margin-left: 520px;
width: auto;
height: 390px;
background-color: transparent;
overflow: auto;
}
/* F O O T E R */
#footer {
position: absolute;
top: 555px;
left: 0;
margin-left: 420px;
background: url(images/contact.jpg) right no-repeat;
}
.arroenia h2 {
display: block;
width: 312px;
height: 18px;
margin: 0 0 0 -70px;
background: url(images/arroenia.gif) right no-repeat;
}
#footer ul {
position: absolute;
top: 0;
left: -150px;
}
#footer li {
float: left;
}
#footer li a {
display: block;
width: 100px;
height: 18px;
color: #fff;
font-size: 10px;
line-height: 50px;
text-decoration: none;
}
#footer li a:hover {
background: transparent url(images/contact.gif) no-repeat;
}
/*a#contact:hover {
background-position: 0px 0%;
}
a#ekxao:hover {
background-position: 0px 0%;
}
/* M E N U */
ul, li {
list-style-type: none;
margin:0;
padding:0;
}
#menu {
position: absolute;
top: 120px;
left: 0;
background: transparent url(images/fondmenu.jpg) top left no-repeat;
width: 400px;
}
#menu li {
float: left;
}
#menu li a {
display: block;
height: 50px;
width: 100px;
color: #fff;
font-size: 10px;
line-height: 50px;
text-decoration: none;
}
li a:hover {
background: transparent url(images/fondmenu.jpg) top left no-repeat;
}
a#menu1:hover {
background-position: -400px 0%;
}
a#menu2:hover {
background-position: -500px 0%;
}
a#menu3:hover {
background-position: -600px 0%;
}
a#menu4:hover {
background-position: -700px 0%;
}le html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Arroenia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="conteneur">
<div class="header">
<h1><span>Restaurant ARROENIA</span></h1>
</div>
<ul id="menu">
<li><a id="menu1" title="menu1" accesskey="1" href=""><span>Accueil</span></a></li>
<li><a id="menu2" title="menu2" accesskey="2" href=""><span>Le Restaurant</span></a></li>
<li><a id="menu3" title="menu3" accesskey="3" href=""><span>La Carte</span></a></li>
<li><a id="menu4" title="menu4" accesskey="4" href=""><span>Galerie</span></a></li>
</ul>
<div class="contenu"><img src="images/fond.jpg" alt="" title="" width="730" height="390">
<div class="gauche">
</div>
<div class="frame">
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Cras porttitor. Ut nonummy vestibulum
arcu. Nulla eros eros, mattis et, dictum quis, convallis vel, mauris.
Ut sed mauris vel metus pretium pretium. Curabitur tristique sem id
justo. Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu,
cursus a, posuere sed, sollicitudin in, justo. Pellentesque enim lacus,
egestas ut, elementum eu, molestie vel, urna.</p>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Cras porttitor. Ut nonummy vestibulum
arcu. Nulla eros eros, mattis et, dictum quis, convallis vel, mauris.
Ut sed mauris vel metus pretium pretium. Curabitur tristique sem id
justo. Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu,
cursus a, posuere sed, sollicitudin in, justo. Pellentesque enim lacus,
egestas ut, elementum eu, molestie vel, urna.</p>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Cras porttitor. Ut nonummy vestibulum
arcu. Nulla eros eros, mattis et, dictum quis, convallis vel, mauris.
Ut sed mauris vel metus pretium pretium. Curabitur tristique sem id
justo. Nunc sit amet felis. Duis luctus pharetra urna. Sed enim arcu,
cursus a, posuere sed, sollicitudin in, justo. Pellentesque enim lacus,
egestas ut, elementum eu, molestie vel, urna.</p>
</div>
</div>
<div id="footer" class="arroenia">
<h2><span>ARROENIA rue du lavoir - 64210 BEHOBIE</span></h2>
<ul id="footer">
<li><a id="contact" href=""><span>Contact</span></a></li>
<li><a id="ekxao" href=""><span>Ekxao Productions</span></a></li>
</ul>
</div>
</div>
</body>
</html>Modifié par barbe douce (07 Apr 2006 - 18:52)
^^
