ok alors a defaut de liens, je vais fournir le code html et css
html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www/w3c.org/1999/XHTML" xml:lang="fr-BE" lang="fr-BE">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>High-jacK - official website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- banniere 01 -->
<a id="banner01" href="home.html"><img border="0" title="home" src="img/bass/hj_banner03.png" alt="Bienvenue sur le site de High-Jack ! (Cliquer pour revenir à home)" /></a>
<!-- banniere 02 -->
<a id="banner02" href=#><img border="0" title="banniere" src="img/bass/hj_banner2.png" alt="banniere" /></a>
<!-- contenant -->
<div id="container">
<!-- Naviguation -->
<!-- menu principal -->
<div id="menu_p">
<ul class="content">
<li><a title="news, archives" href="news.html">News</a></li>
<li><a title="bio, membres" href="band.html">Groupe</a></li>
<li><a title="à venir, passés" href="gigs.html">Concerts</a></li>
<li><a title="mp3, photos" href="media.html">Media</a></li>
<li><a title="disco, paroles" href="disco.html">Musique</a></li>
<li><a title="groupes, divers" href="links01.html">Liens</a></li>
<li><a title="groupe, webmaster" href="contact.html">Contact</a></li>
</ul>
</div>
<!-- menu contextuel -->
<div id="menu_c">
<ul class="content">
<li id="nav">News :</li>
<li><a href="news.html">Dernières news</a></li>
<li><a href="archives.html">Archives</a></li>
</ul>
</div>
<!-- Contenu -->
<!-- cadre principal -->
<div id="t_content">
<!-- cadre 1 -->
<div class="content">
<h1>xx/yy/zz : Enfin!!!</h1>
<p>Eh oui, High-Jack a enfin son site...</p>
</div>
<!-- cadre 2 -->
<div class="content">
<h1>xx/yy/zz : HJ en "studio"</h1>
<p>Nous sommes actuellement entrain d'enregistrer une pre-demo...</p>
</div>
<!-- cadre 3 -->
<div class="content">
<h1>xx/yy/zz : Nous recherchons des concerts</h1>
<p>Si vous avez une proposition de concert à nous faire, ça se passe dans la rubrique "contact" [cligne]</p>
</div>
</div>
</div>
<!-- pied de page -->
<div id="footer">
<p>Webmaster:1001101011</p>
</div>
</body>
</html>
css :
/******************************************************
* High-Jack website - style.css (bass) by Ed *
******************************************************/
/*************
* General *
*************/
* {
font-size: 100%;
font-family: "Courrier New", monospace, sans-serif;
}
body {
color: #ffffff;
background: #242424; /*essai*/
height: 100%;
}
h1 {
margin: 0;
padding: 10px 0;
font-size: 1em;
font-weight: bold;
}
h2 {
margin: 0;
padding: 0;
font-size: 1em;
font-weight: bold;
}
p {
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
}
table {
border-width: 1px;
border-color: #000000;
text-align: center;
}
th {
padding: 0 10px;
font-weight: bold;
}
/*inutile?*/
td {
width: auto;
height: auto;
padding: 0 10px;
}
/*links*/
a:link {
color: #000000;
border: thin solid #ffffff;
text-decoration: underline;
}
a:visited {
color: #000000;
border: thin solid #ffffff;
text-decoration: underline;
}
a:hover {
background-color: grey;
border: thin solid #000000;
color: #ffffff;
text-decoration: none;
}
p a:link {
border: thin solid #ffffff;
text-decoration: underline;
}
p a:hover {
background: #ffffff;
color: #000000;
border: thin solid #ffffff;
text-decoration: underline overline;
}
/***************
* Classes *
***************/
.banner {
float: left;
/*width: 640px;
clear: right;*/
border: 0;
}
.content {
margin: 10px 10px;
padding: 10px 10px;
background-color: #ffffff;
color: #000000;
}
/****************
* Identities *
****************/
/*home.html*/
#home {
position: absolute;
top: 50%;
height: 480px;
margin-top: -240px;
left: 50%;
width: 640px;
margin-left: -320px;
padding: 0;
border-style: solid;
border-width: 10px;
}
/*conteneur principal*/
#container {
position: absolute;
top: 50%;
height: 480px;
margin-top: -240px;
left: 50%;
width: 640px;
margin-left: -320px;
padding: 0;
background-image: url(img/bass/background.png);
background-repeat: no-repeat;
border-style: solid;
border-width: 10px;
}
/*menu principal*/
#menu_p {
float: left;
/*clear: none;*/
width: 120px;
height: auto; /*essai*/
padding: 0;
margin: 125px 10px 0 10px;
/*temp*/
border-style: solid;
border-width: thin;
border-color: #ffffff;
}
#menu_p ul {
line-height: 25px;
}
#menu_p ul li a {
display: block;
margin: 0;
text-decoration: none;
}
/*menu contextuel*/
#menu_c {
position: relative;
/*float: left;
clear: right;*/
width: 480px;
height: auto;
padding: 0;
margin: 110px 10px 5px 145px;
/*temp*/
border-style: solid;
border-width: thin;
border-color: #ffffff;
}
#menu_p .content, #menu_c .content {
margin: 0;
text-align: center;
list-style-type: none;
}
#menu_c ul li {
display: inline;
}
#menu_c ul li a {
text-decoration: none;
padding: 0 1em;
}
/*rappel de rubrique*/
#nav {
float: left;
clear: none;
width: 100px;
font-weight: bold;
list-style-type: disc;
}
/*cadre de contenu*/
#t_content {
/*float: right;*/
overflow: auto;
position: relative;
width: 485px;
margin: 0 10px 0 145px; /*margin: x x x 0(firefox) ou 145px(ie & opera)*/
/*margin-left: 0;
margin-right: 10px; /*essai*/
height: 310px;
border-style: hidden;
}
#t_content ul li {
line-height: 130%;
}
#t_content ol li {
list-style-type: decimal-leading-zero;
line-height: 130%;
}
/*pied de page*/
#footer {
/*float: left;*/
background-color: #242424; /*essai*/
position: absolute;
width: 640px;
left: 50%;
margin-left: -320px;
bottom: 0;
clear: both;
}
#footer p {
background-color: #242424; /*essai*/
color: #646464; /*essai*/
font-size: 70%;
text-align: center;
}
J'en profite egalement pour demander des eclairements sur deux choses :
1) j'utilise un overflow:auto dans le div id=#t_content, or je dois spécifier une margin-left differente pour firefox(0px) que pour IE ou opera(145px) sinon firefox deplace mon div sur la droite
Y a-t-il moyen de regler cela autrement que par des commentaires conditionnels?
2) sous IE, il refuse de placer les éléments #menu_c et #t_content à droite de #menu_p positionné en float: left
J'ai deja essaye 1001 trucs mais rien n'y fait
Voila voila merci beaucoup pour vos reponses
a+
Modifié par b1nary0d1g1t (29 Dec 2005 - 14:48)
)