Voila je m'explique,
Je voudrais que deux blocs se retrouvent sur le meme ligne cote à cote mais le probleme est qu'il se mettent toujours a la suite des autres....
Je vais vous joindre le code , vous comprendrez surement mieux:
CSS
XHTML
Merci pour votre aide, n'hesitez pas si vous avez des question
Je voudrais que deux blocs se retrouvent sur le meme ligne cote à cote mais le probleme est qu'il se mettent toujours a la suite des autres....
Je vais vous joindre le code , vous comprendrez surement mieux:
CSS
body {
margin: 0;
text-align: center;
background-color: #474747 ;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #B5B5B5;
}
#global {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 800px;
}
#header {
width: 800px ;
height: 136px ;
background-image: url('images/header.gif') ;
float: left ;
}
#top {
width: 800px ;
height: 34px ;
background-image: url('images/top.gif') ;
float: left ;
}
#menu {
width: 208px ;
float: left ;
padding: 0px ; margin: 0px ;
}
#contenu {
width: 137px ;
margin:0px 0px 0px 34px;
padding:0;
}
#centre {
width: 550px ;
background-color: #052747 ;
margin: 0px 0px 0px 208px;
padding: 0px ;
}
#right {
width: 42px ;
margin:0; padding:0;
float : right ;
}
#footer {
width: 800px ;
height: 29px ;
background-image: url('images/footer.gif') ;
}
#bloc1 {
margin:0; padding:0;
background:#052747 url('images/menu.jpg') top left repeat-y;
}
#bloc2 {
margin:0; padding:0;
background:url('images/right.jpg') top right repeat-y;
}
ul {list-style-type: none;}
li { float: left;}
#titre1 { width: 137px ; height: 41px ; margin: 0px ; padding: 0px ; background-image:url('images/titre2.jpg') ; float: left ; }
#titre2 { width: 137px ; height: 41px ; margin: 0px ; padding: 0px ; background-image:url('images/titre1.jpg') ; float: left ; }
#titre3 { width: 137px ; height: 41px ; margin: 0px ; padding: 0px ; background-image:url('images/titre3.jpg') ; float: left ; }
#titre4 { width: 137px ; height: 41px ; margin: 0px ; padding: 0px ; background-image:url('images/titre4.jpg') ; float: left ; }
.fondmenu {
width: 137px ;
margin: 0px ;
float: left ;
padding: 0px ;
font: bold 12px Tahoma ;
}
.fondmenu a {
width: 137px ;
height: 16px;
display: block;
text-decoration: none ;
text-align: center ;
color: #B5B5B5;
margin: 0px ;
padding: 0px ;
}
.fondmenu a:hover {
background-color: #B5B5B5 ;
color: #000000 ;
}
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0; padding:0;
background:transparent;
}
#topright {
margin: 10px 0px 0px 585px ;
width : 148px ;
height: 116px ;
overflow: auto ;
}
#hnews {
width: 272px ;
height: 34px ;
background-image: url('images/news.jpg') ;
float: left ;
}
#hzoom {
width: 272px ;
height: 34px ;
background-image: url('images/zoom.jpg') ;
float: left;
}
#hinterview {
width: 272px ;
height: 34px ;
background-image: url('images/interview.jpg') ;
float: left ;
}
#defilant {
width: 275px ;
float : right;
}
.rubrique {
width: 272px ;
float : left ;
margin-left: 0px ;
background-image: url('images/tnews.jpg') ;
background-repeat: repeat-y ;
padding: 0px 0px 0px 15px ;
}
.bloc {
width: 275px ;
float: left ;
}
#colG {
width: 550px ;
float: left ;
}
#colD {
width: 275px ;
float: right ;
padding: 100px 0px 0px 0px
}
XHTML
<!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">
<head>
<title>Nba Life</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global">
<div id="header">
<div id="topright">
ok<br /><br />
ok<br /><br />
ok<br /><br />
ok<br /><br />
ok<br /><br />
ok<br /><br />
ok<br /><br />
ok<br /><br />
ok<br /><br />
</div>
</div>
<div id="top"></div>
<div id="bloc1"><div id="bloc2">
<div id="menu"><div id="contenu">
<ul class="fondmenu">
<li><a href="">Résultats</a></li>
<li><a href="">Classement</a></li>
<li><a href="">News</a></li>
<li><a href="">Interview</a></li>
<li><a href="">Face à Face</a></li>
<li><a href="">Zoom</a></li>
</ul>
<div id="titre1"></div>
<ul class="fondmenu">
<li><a href="">Franchises</a></li>
<li><a href="">Frenchies</a></li>
<li><a href="">Biographies</a></li>
<li><a href="">Jordan</a></li>
<li><a href="">Rétro</a></li>
<li><a href="">Records</a></li>
<li><a href="">Photos</a></li>
<li><a href="">Vidéos</a></li>
</ul>
<div id="titre2"></div>
<ul class="fondmenu">
<li><a href="">News</a></li>
<li><a href="">Articles</a></li>
<li><a href="">Hit US</a></li>
<li><a href="">Playlist</a></li>
</ul>
<div id="titre3"></div>
<ul class="fondmenu">
<li><a href="">Jeux Vidéos</a></li>
<li><a href="">Webmasters</a></li>
<li><a href="">Partenaires</a></li>
<li><a href="">Archives</a></li>
</ul>
<div id="titre4"></div>
<ul class="fondmenu">
<li><a href="">Forum</a></li>
<li><a href="">Chat</a></li>
<li><a href="">Livre d'or</a></li>
<li><a href="">Quizz</a></li>
<li><a href="">Contacts</a></li>
</ul>
</div></div>
<div id="centre">
<div id="colG">
<div id="hnews"></div>
<div class="rubrique"> ok<br /><br />ok<br /><br />ok<br /><br />ok<br /><br />ok<br /><br />ok<br /><br />
</div>
<div id="hzoom"></div>
<div class="rubrique">ok<br /><br />ok<br /><br />ok<br /><br /></div>
</div>
<div id="defilant">Ici the texte defilant</div>
<div id="colD">
<div id="hinterview"></div>
<div class="rubrique">ok<br /><br />ok<br /><br />ok<br /><br /></div>
</div>
</div>
<div id="right"></div>
<div class="cleaner"></div>
</div></div>
<div id="footer"></div>
</div>
</body>
</html>
Merci pour votre aide, n'hesitez pas si vous avez des question
