[Aidez moi] Problème de codage
Résolu
Juliann60
-
Juliann60 -
Juliann60 -
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
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
A voir également:
- [Aidez moi] Problème de codage
- Codage ascii - Guide
- Codage binaire - Guide
- Application codage - Guide
- Fichier word illisible codage - Guide
- Pour enregistrer ce texte au format txt sans perdre d’informations, quel codage utiliser ? ✓ - Forum Word
7 réponses
bonjour,
Sinon place tes éléments dans des tableaux. Ainsi tu centre ton tableau sur la page et tes liens tu les alignes à droite.
Sinon place tes éléments dans des tableaux. Ainsi tu centre ton tableau sur la page et tes liens tu les alignes à droite.
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 !!!
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+
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+
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 !
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 !