Bonjour,
Sur mon site, j'ai une partie "colonne droite", qui me permet d'afficher des informations (tableaux ou autres) à droite. Mais je rencontre un problème que je n'arrive pas à résoudre: la partie colonne droite n'est pas alligné à droite comme je voulais, mais il est affiché à gauche, la partie central est affiché en dessous alors que je voudrais que la parte centrale du site soit affiché à gauche et le colonne droite soit affiché à droite. J'essaye avec float: right, mais ca ne marche pas. Pouvez m'aider à comprendre le problème?
Voici mon code du fichier colonne_droite.php
< div class = "col-droite" >
<?php
$bdd = new PDO ( '' );
?>
< div class = "" >
< table class = "marg" >< tbody>
< tr>< th> Les dernières dossiers </ th></ tr>
<?php
$reponse = $bdd -> query ( 'SELECT * FROM dossiers ORDER BY id DESC LIMIT 0, 10' );
while ( $donnees = $reponse -> fetch ())
{
?>
< tr>< td> Dossier crée le <?php echo date ( 'd/m/Y à H\hi' , strtotime ( $donnees [ 'date' ]));
< a href= "dossier.html?id=<?php echo $donnees['id']; ?>" ><?php echo stripslashes ( $donnees [ 'titre' ]);
<?php
}
?>
</ tbody></ table>
</ div>
et le fichier design.css
body
{
margin-top: 0 ;
background-color: #A9A9A9 ;
Background-repeat: no-repeat ;
background-position: 35% 65% ;
background-size: cover ;
font-family: 'Trebuchet MS ', Arial , sans-serif ;
color: #181818 ;
}
#bloc_page
{
width: 962px ;
margin: auto ;
}
header
{
display: inline-block ;
margin-left: -10px ;
padding-top: 10px ;
}
#img1 {
display: inline-block ;
float: left ;
margin-left: -23px ;
}
#img2 {
display: inline-block ;
float: left ;
margin: 10px ;
margin-left: -3px ;
margin-bottom: -10px ;
}
section h1, footer h1, nav a
{
font-family: Dayrom , serif ;
font-weight: normal ;
text-transform: uppercase ;
}
#menu {
width: 970px ;
margin: 10px 0 0 -10px ;
padding: 0 ;
list-style: none ;
background: #111 ;
background: -moz-linear-gradient (#444 , #111 );
background: -webkit-gradient (linear ,left bottom ,left top ,color-stop (0 , #111 ),color-stop (1 , #444 ));
background: -webkit-linear-gradient (#444 , #111 );
background: -o-linear-gradient (#444 , #111 );
background: -ms-linear-gradient (#444 , #111 );
background: linear-gradient (#444 , #111 );
-moz-box-shadow: 0 2px 1px #9c9c9c ;
-webkit-box-shadow: 0 2px 1px #9c9c9c ;
box-shadow: 0 2px 1px #9c9c9c ;
}
#menu li{
float: left ;
padding: 10px 0 10px 0 ;
position: relative ;
}
#menu a{
float: left ;
height: 25px ;
padding: 0 25px ;
color: #999 ;
text-transform: uppercase ;
font: bold 15px /25px Arial , Helvetica ;
text-decoration: none ;
text-shadow: 0 1px 0 #000 ;
}
#menu li: hover > a{
color: #fafafa ;
}
* html #menu li a: hover{
color: #fafafa ;
}
#menu li: hover > ul{
display: block ;
}
#menu li: hover{
color: white ;
background-color: black ;
}
#menu ul{
list-style: none ;
margin: 0 ;
padding: 0 ;
display: none ;
position: absolute ;
top: 45px ;
left: 0 ;
z-index: 99999 ;
background: #444 ;
background: -moz-linear-gradient (#444 , #111 );
background: -webkit-gradient (linear ,left bottom ,left top ,color-stop (0 , #111 ),color-stop (1 , #444 ));
background: -webkit-linear-gradient (#444 , #111 );
background: -o-linear-gradient (#444 , #111 );
background: -ms-linear-gradient (#444 , #111 );
background: linear-gradient (#444 , #111 );
}
#menu ul li{
float: none ;
margin: 0 ;
padding: 0 ;
display: block ;
-moz-box-shadow: 0 1px 0 #111111 , 0 2px 0 #777777 ;
-webkit-box-shadow: 0 1px 0 #111111 , 0 2px 0 #777777 ;
box-shadow: 0 1px 0 #111111 , 0 2px 0 #777777 ;
}
#menu ul li: last- child{
-moz-box-shadow: none ;
-webkit-box-shadow: none ;
box-shadow: none ;
}
#menu ul a {
display: block ;
float: none ;
height: auto ;
line-height: 1 ;
padding: 10px 30px ;
text-transform: none ;
white-space: nowrap ;
font-size: 13px ;
}
* html #menu ul a{
height: 10px ;
width: 150px ;
}
*: first- child+ html #menu ul a{
height: 10px ;
width: 150px ;
}
#menu ul a: hover{
color: white ;
text-decoration: underline ;
background-color: black ;
}
#menu ul li: first- child a{
-moz-border-radius: 5px 5px 0 0 ;
-webkit-border-radius: 5px 5px 0 0 ;
border-radius: 5px 5px 0 0 ;
}
#menu ul li: first- child a: after{
content: '';
position: absolute ;
left: 30px ;
top: -8px ;
width: 0 ;
height: 0 ;
border-left: 5px solid transparent ;
border-right: 5px solid transparent ;
border-bottom: 8px solid #444 ;
}
#menu ul li: first- child a: hover: after{
border-bottom-color: #04acec ;
}
#menu ul li: last- child a{
-moz-border-radius: 0 0 5px 5px ;
-webkit-border-radius: 0 0 5px 5px ;
border-radius: 0 0 5px 5px ;
}
#menu : after{
visibility: hidden ;
display: block ;
font-size: 0 ;
content: " ";
clear: both ;
height: 0 ;
}
* html #menu { zoom: 1 ; }
*: first- child+ html #menu { zoom: 1 ; }
#menu ul li: first- child a: after{
content: '';
position: absolute ;
left: 30px ;
top: -8px ;
width: 0 ;
height: 0 ;
border-left: 5px solid transparent ;
border-right: 5px solid transparent ;
border-bottom: 8px solid #444 ;
}
#menu ul li: first- child a: hover: after{
border-bottom-color: black ;
}
#menu li ul li: hover ul li a: before , #menu li ul li: hover ul li a: after {
visibility: hidden ;
}
#menu li ul li: hover ul {
height: auto ;
margin: -45px 0 0 125px ;
position: absolute ;
padding: 0 ;
}
section
{
width: 950px ;
height: auto ;
clear: both ;
padding-left: 10px ;
padding-right: 10px ;
padding-top: 5px ;
margin-top: 0 ;
background-color: white ;
margin-left: -10px ;
display: inline-block ;
}
section p
{
font-family: Arial , "Times New Roman ", sans-serif ;
}
section h1
{
font-family: "Arial Black ", Arial , "Times New Roman ", sans-serif ;
text-align: center ;
}
section h2
{
font-family: Arial , "Arial Black ", Verdana , sans-serif ;
}
section a
{
text-decoration: none ;
color: black ;
font-weight: normal ;
}
section a: hover
{
text-decoration: underline ;
color: red ;
}
.news {
clear: left ;
position: relative ;
width: 700px ;
}
.news h2 {
font-family: Arial ,"Arial Black ",Verdana ,sans-serif ;
margin: 0 ;
margin-left: 0 ;
}
.titre_news {
font-family: Arial ,"Arial Black ",Verdana ,sans-serif ;
font-size: 23px ;
}
.titre_news a: hover {
color: black ;
}
.news p
{
display: block ;
font-family: Arial ,"Arial Black ",Verdana ,sans-serif ;
font-size: 14px ;
margin: 4px ;
margin-left: 10px ;
}
.intro
{
font-family: Arial ,"Arial Black ",Verdana ,sans-serif ;
font-size: 14px ;
margin: 0 ;
padding-top: 7px ;
margin-bottom: -10px ;
margin-left: 270px ;
}
.hr
{
padding: 20px ;
border-bottom: 2px solid #a6a1ff ;
width: 50% ;
}
.cat_date
{
font-size: 12px ;
font-family: Arial ,Verdana ,sans-serif ;
}
.titre
{
margin: 0 ;
margin-bottom: 10px ;
margin-left: 0 ;
}
.introduction
{
display: block ;
width: 89% ;
margin-top: 5px ;
margin-bottom: 5px ;
font-weight: bold ;
font-size: 13px ;
font-family: Arial , Verdana , "Times New Roman ", sans-serif ;
}
.contenu
{
display: block ;
width: 89% ;
margin-top: 10px ;
font-size: 14px ;
font-family: Arial , Verdana , "Times New Roman ", sans-serif ;
}
.col - droite {
display: inline-block ;
border-left: 3px solid #ccc ;
padding-left: 10px ;
float: right ;
}
.news p, .news em, .news h2 {
margin: 5 ;
padding: 5 ;
}
table {
width: 230px ;
}
th {
background-color: red ;
font-size: 15px ;
}
.marg tr a: hover{
color: red ;
}
.marg
{
padding-top: 30px ;
}
td, th {
border: 1px solid black ;
font-family: Arial , Verdana , sans-serif ;
font-size: 12px ;
}
.pages
{
font-family: Arial , Verdana , sans-serif ;
font-size: 14px ;
}
.contact
{
border: none ;
}
.comm a{
font-family: Verdana , Arial , sans-serif ;
font-size: 15px ;
color: blue ;
}
.commentaires
{
font-family: "Arial Black ", Arial , Verdana , sans-serif ;
font-size: 20px ;
background-color: #a6a1ff ;
margin-right: 300px ;
}
.coms
{
margin-right: 300px ;
}
.introd
{
font-size: 15px ;
}
.introd p
{
text-transform : none ;
font-family: Arial , Verdana , sans-serif ;
}
Merci d'avance pour votre aide
Afficher la suite