Salut j'ai un problème de positionnement et j'utilise le language HTML/CSS et PHP mais le problème vient du CSS. Voici le lien poru mieu comprendre : http://www.powerweblive.com/Test
CODE HTML/PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accueil</title>
<link href="css/design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navigation"></div>
<div id="boutons">
<div id="page_01"><p><a href="#">Accueil</a></p></div>
<div id="page_02"><p><a href="#">Tutoriaux</a></p></div>
<div id="page_03"><p><a href="#">Forum</a></p></div>
</div>
<div id="news"></div>
<div id="titre_news"><p>Le nouveau site web !</p></div>
<div id="texte_news">
<p>Voici le tout nouveau site web de Power Web Live ! Nous avons complètement redessiné le design pour en faire un nouveau bien plus pratique. Notre site web utilise dès à présent le language de programmation PHP. Nous sommes présentement en train de transférer tous les fichiers de notre ancien site sur le nouveau. Cela ne sera pas très long ... Nous espèrons que vous aimez le nouveau design qui est mainteant équipé d'un système de news pour vous informer sur les nouveautés informatiques. Le site n'est pas encore tout à fait terminé mais il sera prêt d'ici peu. Merci énormément !<br/><br/>
De plus, nous recrutons présentement des rédacteurs pour les news informatiques alors si vous êtes intéressé, n'hésitez pas à nous écrire à l'adresse suivante : <a href="mailto:team@powerweblive.com">team@powerweblive.com</a><br/>
<br/><br/><br/><strong>Toute l'équipe</strong></p></div>
<div id="publicite"></div>
<div id="texte_publicite" align="center"><script type="text/javascript"><!--
google_ad_client = "pub-2678900867148430";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as_rimg";
google_cpa_choice = "CAAQraiUlwIaCP7uoAdsoCn8KJ2493M";
google_ad_channel = "";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div id="info"></div>
<div id="texte_info"><p>Il y a présentement 5 personnes sur le site !</p></div>
<div id="sondage"></div>
<div id="texte_sondage"><p>Aucun sondage pour le moment ...</p></div>
</body>
</html>
CODE CSS
/* Design CSS */
/* Autres */
body
{
background-color:#CFCFCF;
width:auto;
height:auto;
padding:0px;
padding-bottom:15px;
margin:0px;
}
p
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#515151;
margin:0px;
padding:5px;
text-align:justify;
text-decoration:none;
}
#texte_news p
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#515151;
margin:0px;
padding:15px;
text-align:justify;
text-decoration:none;
}
#titre_news p
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#515151;
margin:0px;
padding:5px;
text-align:justify;
text-decoration:none;
}
a
{
color:#898989;
text-decoration:underline;
}
a:hover
{
color:#ABABAB;
text-decoration:underline;
}
a:active
{
color:#ABABAB;
text-decoration:underline;
}
#boutons a
{
color:#515151;
text-decoration:none;
}
#boutons a:hover
{
color:#515151;
text-decoration:underline;
}
#boutons a:active
{
color:#515151;
text-decoration:underline;
}
/* Balises ID */
#news
{
background-image:url(../images/design/news.jpg);
background-repeat:no-repeat;
width:498px;
height:35px;
padding:0px;
margin:auto;
margin-top:15px;
border:1px solid #B5B5B5;
position:relative;
}
#titre_news
{
background-image:url(../images/design/titre_news.jpg);
background-repeat:repeat-x;
width:498px;
height:25px;
padding:0px;
margin:auto;
border:1px solid #B5B5B5;
border-top:none;
position:relative;
}
#texte_news
{
background-color:#E1E1E1;
width:498px;
height:auto;
padding:0px;
margin:auto;
border:1px solid #B5B5B5;
border-top:none;
position:relative;
}
#navigation
{
background-image:url(../images/design/navigation.jpg);
background-repeat:no-repeat;
width:198px;
height:35px;
padding:0px;
margin:0px;
margin-top:15px;
margin-left:15px;
border:1px solid #B5B5B5;
position:relative;
}
#boutons
{
width:198px;
height:auto;
background-color:none;
position:relative;
margin:0px;
padding:0px;
margin-left:15px;
border:1px solid #B5B5B5;
border-top:none;
}
#page_01
{
width:198px;
height:25px;
background-color:#E1E1E1;
position:relative;
}
#page_01:hover
{
width:198px;
height:25px;
background-color:#939393;
position:relative;
}
#page_02
{
width:198px;
height:25px;
background-color:#D5D5D5;
position:relative;
}
#page_02:hover
{
width:198px;
height:25px;
background-color:#939393;
position:relative;
}
#page_03
{
width:198px;
height:25px;
background-color:#E1E1E1;
position:relative;
}
#page_03:hover
{
width:198px;
height:25px;
background-color:#939393;
position:relative;
}
#publicite
{
background-image:url(../images/design/publicite.jpg);
background-repeat:no-repeat;
width:198px;
height:35px;
padding:0px;
margin:0px;
margin-top:15px;
margin-left:15px;
border:1px solid #B5B5B5;
position:relative;
}
#texte_publicite
{
width:198px;
height:auto;
background-color:#D5D5D5;
position:relative;
margin-left:15px;
padding:0px;
padding-top:5px;
padding-bottom:5px;
border:1px solid #B5B5B5;
border-top:none;
}
#info
{
background-image:url(../images/design/info.jpg);
background-repeat:no-repeat;
width:198px;
height:35px;
padding:0px;
margin:0px;
margin-top:15px;
margin-left:15px;
border:1px solid #B5B5B5;
position:relative;
}
#texte_info
{
width:198px;
height:auto;
background-color:#D5D5D5;
position:relative;
margin-left:15px;
padding:0px;
padding-top:5px;
padding-bottom:5px;
border:1px solid #B5B5B5;
border-top:none;
}
#sondage
{
background-image:url(../images/design/sondage.jpg);
background-repeat:no-repeat;
width:198px;
height:35px;
padding:0px;
margin:0px;
margin-top:15px;
margin-left:15px;
border:1px solid #B5B5B5;
position:relative;
}
#texte_sondage
{
width:198px;
height:auto;
background-color:#D5D5D5;
position:relative;
margin-left:15px;
padding:0px;
padding-top:5px;
padding-bottom:5px;
border:1px solid #B5B5B5;
border-top:none;
}
Voilà en réalité je voudrais que mon "navigation" et "publicité" soit à gauche et "info" et "sondage" à droite. Le problème c'est que je ne suis pas capable d'aligner "navigation" par exemple à la même hauteur que "news" pour ensuite mettre en bas "publicité". C'est pareil pour "info" et "sondage" je ne suis pas capable de les mettre à gauche de "news" et de les mettre à la même hauteur. Aidez-moi SVP !
Il y a 2718 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.
