Bonjour à tous =)
C'est la première fois que je poste ici, vous m'avez l'air d'être un forum très sympa et accueillant, j'ai souvent été déçue par la froideur de certains ailleurs, en espérant que ce ne soit pas le cas ici =)
Je suis vraiment débutante, alors je m'excuse par avance.
Voici mon problème, je travaille avec le système des div, et j'ai beaucoup de mal à les positionner.
En fait, c'est juste la partie du haut qui bug, comme vous pourrez le voir sur les images, le centre et le bas vont très bien =)
Je vous ai fait un petit schéma pour vous montrer ce à quoi je voudrais que ça ressemble au final :
http://www.kinouche.com/schema.jpg
Et une capture d'écran de ce à quoi cela ressemble actuellement ( je travaille mon site en local )
http://www.kinouche.com/capture_pb_haut.jpg
Et voici respectivement, une partie de ma css et ma page accueil.htm qui ne sont pas très ordonnés, mais je fais ce que je peux avec mes maigres connaissances :
Merci d'avance de vos réponse, et bonne fin de journée à vous !
C'est la première fois que je poste ici, vous m'avez l'air d'être un forum très sympa et accueillant, j'ai souvent été déçue par la froideur de certains ailleurs, en espérant que ce ne soit pas le cas ici =)
Je suis vraiment débutante, alors je m'excuse par avance.
Voici mon problème, je travaille avec le système des div, et j'ai beaucoup de mal à les positionner.
En fait, c'est juste la partie du haut qui bug, comme vous pourrez le voir sur les images, le centre et le bas vont très bien =)
Je vous ai fait un petit schéma pour vous montrer ce à quoi je voudrais que ça ressemble au final :
http://www.kinouche.com/schema.jpg
Et une capture d'écran de ce à quoi cela ressemble actuellement ( je travaille mon site en local )
http://www.kinouche.com/capture_pb_haut.jpg
Et voici respectivement, une partie de ma css et ma page accueil.htm qui ne sont pas très ordonnés, mais je fais ce que je peux avec mes maigres connaissances :
body
{
background-color:#000000;
font-size: 12px;
color: #FFFFFF;
font-family: arial;
text-indent: 15px;
list-style-type: circle;
margin: 0 ;
padding: 0 ;
}
#i
{
color: #3d3a3a;
}
#hautgauche
{
height:150px;
width:150px;
float: left;
left:5px;
width: 48%;
height: 48%;
}
#hautdroit
{
height:150px;
width:150px;
float: right;
left:145px;
width: 48%;
height: 48%;
}
#boutontouthaut
{
margin-top: 10px;
text-align: center;
}
#haut
{
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
#conteneur
{
width:1026px;
margin: 0 auto ;
padding: 10px 0px;
text-align: center;
}
#boutonhaut
{
margin-top: 20px;
text-align: center;
}
#boutonhaut a {
margin: 0px 5px;
}
#boutonhaut a img{
border: none;
}
#gauche {
height:297px;
width:221px;
margin-top: 10px;
margin-left:0px;
background-image:url(gauche.jpg);
float: left;
}
#droit {
height:300px;
width:222px;
margin-top: 10px;
background-image:url(droite.jpg);
float: right;
}
#centre {
height: 295px;
width: 577px;
margin-top: 10px;
overflow: auto;
background-image:url(contenu.jpg);
}
#boutonbas {
height: 71px;
margin-top: 10px;
text-align: center;
}
#boutonbas a {
margin: 0px 5px;
}
#boutonbas a img{
border: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<html>
<head>
<title>Kinouche * Accueil</title>
<META NAME="description" CONTENT="Marque déposée de bijoux fantaisies en édition limitée">
<META NAME="keywords" CONTENT="bijoux,perles,edition limitée,pierres,fait main,boutique,fr,magasin,kinouche,fantaisies,achat bijoux,bijou,swarovski,bague,bracelet,collier,bijou de sac,boucles d'oreilles,kinouche.com,estelle comtet,verre,resine,ceramique,metal,mille et une perles,macon,mâcon,71">
<link rel="stylesheet" type="text/css" href="design3.css">
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="conteneur">
<div id="hautgauche">
<tr>
<td>
<table border="0" width="10%" cellspacing="0" cellpadding="0">
<tr>
<td width="10%" height="4" class="infoBoxHeading">
<img src="sidentifier.png" border="0" alt="Identification" title=" Identification " width="150" height="33">
</td>
</tr>
</table>
<table border="0" width="10%" cellspacing="0" cellpadding="0" line-height="0" class="infoBox">
<tr>
<td>
<table border="0" width="10%" cellspacing="0" cellpadding="0" line-height="0" class="infoBoxContent">
<tr>
<td align="center" class="boxText">
<form name="login" action="login.php?action=process" method="post">
<table border="0" cellpadding="0" cellspacing="0" class="smallText" >
<tr>
<td width="10%" height="6" class="smallText">
<p align="center">Email</p>
</td>
</tr>
<tr>
<td width="10%" height="3" class="smallText">
<p align="center">
<input maxLength="96" name="email_address"size="18">
</p>
</td>
</tr>
<tr><br>
<td width="10%" height="3" class="smallText">
<p align="center">Mot de Passe</p>
</td>
</tr>
<tr>
<td width="10%" height="6">
<p align="center">
<font size="1" class="smallText">
<input type="password" maxLength="40" value name="password" size="10">
</font>
</p>
</td>
</tr>
<tr>
<td width="10%" height="1" class="smallText">
<p align="center">
<br>
<INPUT type="image" src="ok.png" name="Submit" alt="cliquer" >
<br><br>
<a class="smallText" href="http://www.kinouche.com/password_forgotten.php">Mot de Passe ?</a>
</p>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</div>
<div id="hautdroit">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="14" class="infoBoxHeading"><a href="http://www.kinouche.com/shopping_cart.php"><img src="monpanier.png" border="0" alt="Panier" title=" Panier " width="180" height="62"></a></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" class="infoBox">
<tr>
<td><table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents2">
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
</tr>
<tr>
<td class="boxText">vide</td>
</tr>
<tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</div>
<div id="boutontouthaut">
<a href="http://www.kinouche.com/presentations.htm"><img src="panier_haut.jpg" align="right"></a><a href="http://www.kinouche.com/login.php"><img src="moncompte_haut.jpg" align="right"></a></div>
<object id="haut" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="643" height="87" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="banhome.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<embed src="banhome.swf" quality="high" bgcolor="#000000" width="673" height="117" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<div id="boutonhaut">
<a href="http://www.kinouche.com/presentations.htm"><img src="boutonpres2.jpg"></a>
<a href="http://www.kinouche.com/collections.htm"><img src="boutoncollec2.jpg"></a>
<a href="http://www.kinouche.com/commander.htm"><img src="boutoncomma2.jpg"></a>
<a href="http://www.kinouche.com/news.htm"><img src="boutonnews2.jpg"></a>
</div>
<div id="droit">
</div>
<div id="gauche">
</div>
<div id="centre">
<center>
<br>
<embed src="accueil2.swf" quality="high" bgcolor="#000000" width="540" height="255" name="news" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</center>
</div>
<div id="boutonbas">
<a href="http://www.kinouche.com/contact.php"><img src="boutoncontact2.jpg"></a>
<a href="http://www.i-services.net/membres/livredor/livredor.php?uid=140987&sid=86424" target="_blank"><img src="boutonlivre2.jpg"></a>
<a href="http://www.kinouche.com/pointsvente.htm"><img src="boutonpoints2.jpg"></a>
</div>
</div>
<br><br>
<center>
<a href="http://www.kinouche.com/accueil.htm"> Accueil </a>
<font color="#000000"> | </font>
<a href="http://www.kinouche.com/liens.htm"> Liens </a>
<font color="#000000"> | </font>
<a href="http://www.kinouche.com/contact.php"> Contact </a>
<font color="#000000"> | </font>
<a href="http://www.kinouche.com/conditions.htm"> Conditions de vente </a>
<br><img src="barre2.jpg">
<br>© Kinouche 2009 - 2010 - Tous droits réservés
</center>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10753340-1");
pageTracker._trackPageview();
}
catch(err) {}
</script>
</body>
</html>
Merci d'avance de vos réponse, et bonne fin de journée à vous !