[Aidez moi] Problème de codage

Résolu/Fermé
Juliann60 - 16 juil. 2008 à 02:39
 Juliann60 - 17 juil. 2008 à 22:37
Bonjour,

Voilà, je post ici pour un problème de codage de design !!!
Enfait j'essaie de décaler ma bannière de 100px vers a gauche, et je n'y arrive pas, même avec le site du zero !
Voilà un aperçu d'écran du problème :

http://img501.imageshack.us/img501/2355/imgproblemeqq5.png
Et voici maintenant, le code html/css :

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Sims 2 fan : Fan de sims 2 - Accueil/News</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="designbricasimsete2008.css" />
<style><!--BODY{
cursor:url("images/curseur.cur");
}
-->
</style>
</head>

<BODY>

<!-- L'en-tête -->

<div id="en_tete">

</div>

<!-- Les menus -->

<div id="enuorizontaln2">


<ul id="nav">
<li><a href="index2.html" title="aller à la section 1">Accueil</a></li>
<li><a href="#" title="aller à la section 2">item2</a></li>
<li><a href="#" title="aller à la section 3">Download</a></li>
<li><a href="#" title="aller à la section 4">item4</a></li>
<li><a href="#" title="aller à la section 5">Contact</a></li>
</ul>

</div>


<div id="corpsmenu">
<div id="menu">
<div class="long">
<div class="element_menu">

<center><a href="index.html"><img src="images/menuaccueil.jpg" title="Les news du site"></a></center><br />
<center><a href="photos.html"><img src="images/photomenu.jpg" title="Les photos"></a></center><br />
<center><a href="theatre.html"><img src="images/phototheatre.jpg" alt="Liens" title="Présentation et Photos de Nala"></a></center><br />
<center><a href="contact.html"><img src="images/menucontact.jpg" alt="Liens" title="Présentation et Photos de Nala"></a></center><br />
</div>
</div>
</div>

<!-- Le corps -->
<div id="corps">
<div id="cadre">
</div>
</div>
</div>
</div>
</div>
<!-- Le pied de page -->

<div id="pied_de_page">

</div>
</body>
</html>



CSS :

a img { border:0; }
font { border:0; }
* { margin: 0; padding: 0; }



body
{
width: 700px;
margin: auto;
margin-bottom: 10px;
background-color: #FF9900;
background-image: url("images/fond.png");
background-repeat: repeat-x;
font-family: Arial;

}

/* L'en-tête */

#en_tete
{
width: 800px;
height: 200px;
background-image: url("images/bannierebricasimsete.png");
background-repeat: no-repeat;
background-position: 10 10 10 10;
margin-top: 0px;
margin-bottom: 0px;
}


/* Le menu honrizontale */

#enuorizontaln2 {
height: 20px ;
background-image: url(images/menuhonrizontalfond.png);
background-repeat: no-repeat;
}

#nav {
list-style: none ;
margin: 0 ;
padding: 0 ;
background-color: #FFFFFF ;
}
#nav li {
float: left ;
width: 130px ;
height: 20px;
}
#nav li a {
font: 15px "Trebuchet MS",Arial,sans-serif ;
font-weight: bold;
padding: 10px ;
text-align: center ;
text-decoration: none ;
}
#nav li a:hover, #nav li a:focus, #nav li a:active {
text-decoration: underline ;
}

/* Le menu verticale */

#menu
{
float: right;
display: block;
width: 150px;
margin: auto;
background-color: #404040;
list-style-image: url("images/puce.gif");
}

.long
{
display: block;
width: 150px;
margin: auto;
background-color: #CCFFCC;
margin: auto;
}

.element_menu
{
display: block;
width: 150px;
margin: auto;
background-color: #404040;
background-image: url("images/menuvertical.png");
background-repeat: repeat-y;
}

/* Quelques effets sur les menus */


.element_menu h3
{
color: #ffffff;
text-align: center;
background-image: url("images/menu.png");
background-repeat: no-repeat;
}

.element_menu ul
{
list-style-image: url("images/puce.jpg");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #76ACD8;
}

.element_menu a:hover
{
background-color: #ffffff;
color: #294994;
}

/* Corps + menu vertical */
#corpsmenu
{
width: 700px;
height: 500px;
margin: auto;
background-color: #FFFFFF;
background-image: url("images/fondcorpsmenu.png");
background-repeat: repeat-y;

}
/* Le corps de la page */

#corps
{
font-size: 12px;
margin-right: 150px;
display: block;
height: auto;
margin-bottom: 0px; /* Espace entre les block */
padding: 5px;

color: #000000;
background-color: #FFFFFF;
}

#corps h1
{
color: #000000;
text-align: center;
}

#corps h2
{
height: 30px;

background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#cadre
{
font-size: 13px;
margin-right: 45px;
margin-left: 48px;
margin-top: 10px;
margin-bottom: 10px; /* Espace entre les block */
padding: 5px;

color: #000000;
background-repeat: repeat;
}

.dashed
{
border: 1px dotted #087D00;
padding: 5px;
}

#cadre h2
{
color: #000000;
text-align: center;
}

#cadre h3
{
height: 20px;
font-size : 18px;

background-image: url("images/fondtitrenews.png");
background-repeat: repeat-x;

padding-left: 50px;
vertical-align: bottom;
color: #636563;
text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
height: 20px;
padding: 0px;
text-align: center;

color: #B3B3B3;
background-color: #FFFFFF;
background-image: url("images/footfond2.png");
background-repeat: repeat-x;

border: 0px solid black;
}

------------------------------------------------------------------------------------------------------------------------------


Voilà, je pense que ce problème a un rapport avec la fonction body, mais je n'en suis pas sur !
J'aimerai donc mettre cette bannière 100px à gauche !
Je suis souvent là donc n'hésitez pas !
Merci d'avance à vous


Juliann60

7 réponses

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juil. 2008 à 17:19
bonjour,

Sinon place tes éléments dans des tableaux. Ainsi tu centre ton tableau sur la page et tes liens tu les alignes à droite.
1
Est-ce que quelqu'un a une réponse à ce problèmes svp ?
0
Oui mais je crois que les tableau ne sont pas valide W3C ( c'est ça je crois)
Autrement dit, il ne sont pas valide avec les codes html/css ! Voilà !
Merci d'avance à ceux qui résoluront le problèmes ou essayerons ainsi qu'à ce qui m'ont déjà répondu !
Amicalement, Juliann
0
Up, svp, qu'est-ce que je dois faire pour que ça se remette en place, j'en ai réellement besoin !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Julien ou Juliann60
17 juil. 2008 à 04:04
Dsl, Julien, c'est Juliann60
0
Niiko4400 Messages postés 1161 Date d'inscription mardi 29 janvier 2008 Statut Membre Dernière intervention 26 mars 2009 57
17 juil. 2008 à 21:14
Personnes n'a la solution ?
0
Et bien si, il ya a moi lol, laisser tomber, j'ai trouver moi même après une bonne heures au calme de recherche et de codage ! Merci quand même !!!
0
joker92 Messages postés 26 Date d'inscription mardi 17 juin 2008 Statut Membre Dernière intervention 28 septembre 2010
16 juil. 2008 à 03:50
salut,

Quand tu dis que t'aimerais décaler ta banniere de 100px a gauche, en fait tu voudrais qu'elle soit collé au bord ?
Essaye un: margin-left:0px; ou un margin: 0;

ça supprime toute les marges, dans ton cas ça devrait fonctionner!

A+
-1
En fait, je voudrais décalé la bannière de 100px de façon à ce qu'elle soit collé au bord de droite ! (et que le diament vert dépasse)

Les margins ne fonctionnent pas, j'avais déjà essayer ! En fait j'ai l'impression de c'est le margin : auto de body qui me bloque tout et je n'arrive pas à faire en sorte quel se décale !

Encore merci d'avance !
0