Designe codage

Résolu
lolerki Messages postés 675 Statut Membre -  
lolerki Messages postés 675 Statut Membre -
Bonjour,
Je suis ici car j'ai un gros problème sur le designe que je code en se moment regarder https://www.casimages.com/i/090408043143645357.png.html
et
https://www.casimages.com/i/090408043413888409.png.html

code css pour le header 

		#header {
			height:301px;
			width:785px;
			background:url('img/header.png') no-repeat;
			margin:auto;
		}

pour le footer 

		div#footer{
		background-repeat:no-repeat;
		background-position:0 0;
		clear: both;
		height: 70px;
		width:893px
		}

Merci beaucoup de votre aide !
Configuration: Windows XP
Firefox 3.0.8

79 réponses

  • 1
  • 2
  • 3
  • 4
Résumé de la discussion

Le problème de design CSS concerne un header et un footer qui ne s’alignent pas comme prévu sur les captures montrées et le code fourni par l’auteur. Plusieurs réponses préconisent d’ajuster les dimensions et les positions, en précisant un header de 301 px de haut sur 785 px de large et un footer à 893 px, afin d’obtenir l’alignement souhaité. Des échanges évoquent aussi l’importance d’une structure HTML correcte et d’un contexte global cohérent, avec des conseils sur les marges, le débordement et le repositionnement via margin ou position absolue.

Généré automatiquement par IA
sur la base des meilleures réponses
  1. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    oula bizarre c pas pareil donc x
    c'est pas 12 en fait c'est -37

    body { margin: 0pt; background: rgb(229, 243, 252) url('fond.png') repeat-y scroll center top; font-size: 13px; font-family: trebuchet ms,sans-serif; }
    a { text-decoration: none; color: rgb(8, 100, 149); }
    a:hover { text-decoration: underline; }
    img { border: 0pt none ; }
    #global { margin: 0pt auto; background: transparent url('bord.png') repeat-y scroll 0% 0%; width: 913px; }
    #header { background: transparent url('header.png') no-repeat scroll 0% 0%; height: 301px; width: 785px; }
    #menu { padding-top: 0px; width: 190px; float: left; margin-top: 0pt; }
    #menu .bloc { width: 129px; margin-left: 635px; } h3 { color: rgb(37, 117, 160); font-weight: bold; padding-top: 3px; padding-left: 2px; font-size: 12px; font-family: 'trebuchet ms',sans-serif; text-transform: uppercase; }
    #menu ul { margin: 0pt; padding-top: 5px; padding-left: 3px; list-style-type: none; list-style-image: none; list-style-position: outside; color: rgb(127, 199, 223); }
    #menu a { color: rgb(127, 199, 223); }
    #menu, .bloc, .bloc h3, .bloc ul { margin: 0pt; }
    #footer { clear: both; width: 893px;margin-left:-37px }
    a { color: rgb(8, 100, 149); }
    1
  2. Yaninho Messages postés 530 Statut Membre 63
     
    Il te faut quoi ? Tu veux faire quoi ?
    0
  3. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    et quel est le problème
    0
  4. lolerki Messages postés 675 Statut Membre 102
     
    je veut que le header sois bien placer (pas le blanc qu'on voit, il doit être coller a la bar bleu) et le footer il doit être remonter en centre (coller contre le menu)
    0

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

    Posez votre question
  6. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    ça serai bien en fait d'avoir aussi le code html ou un lien
    ou un fichier zip avec tous les fichier
    donc tu veux que la 2eme image n'est pas de blanc il faut donc mettre un margin-left:0px à la partie de droite tu peux mettre des nombres négatif aussi
    0
  7. lolerki Messages postés 675 Statut Membre 102
     
    ok j'ai oublier le html désoler

    header 

    		<div id="global">
			<div id="header">
			</div>
			
		<div id="corps">
		   <div id="contenu">
		      </div>

    tout les 
    <div>
    son bien fermer

    footer 

    <div id="footer"><img src="img/footer.png" /></div>
    0
    1. Yaninho Messages postés 530 Statut Membre 63
       
      Du coup c'est les CSS correspondants aux div qu'il nous faut ;)
      0
  8. lolerki Messages postés 675 Statut Membre 102
     
    math 2000

    avec 
    margin-left: 0px;
    rien ne change l'image ne bouge pas.
    0
  9. lolerki Messages postés 675 Statut Membre 102
     
    Yaninho j'ai mis tout les codes que j'avais
    0
    1. Yaninho Messages postés 530 Statut Membre 63
       
      pardon j'avais pas vu désolé ;)
      0
  10. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    oui bon si tu nous donne un code avec des url relative
    il nous faut le dossier entier
    sinon essaie avec les positions relative
    0
  11. lolerki Messages postés 675 Statut Membre 102
     
    tkt pas grave

    je rajoute deux code 

    		#global{
			background:url('img/bord.png') repeat-y;
			width:913px;
			margin-left:auto;
			margin-right:auto;
			margin-top:0;
			margin-bottom:0;
		}


    et 

    		#contenu{
		margin-left:220px;
		margin-top:0;
		padding-top:5px;
		width:669px;
		}

    on sais jamais d'où vient le problème.
    0
  12. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    up au cas ou tu es pas uv mon message psoté en même temps
    0
  13. lolerki Messages postés 675 Statut Membre 102
     
    le teste en ligne http://devilux.olympe-network.com/Animes%20scans/
    0
    1. Yaninho Messages postés 530 Statut Membre 63
       
      Dans ton CSS de header : tu met le margin:17px;
      0
      1. lolerki Messages postés 675 Statut Membre 102 > Yaninho Messages postés 530 Statut Membre
         
        ok
        0
      2. lolerki Messages postés 675 Statut Membre 102 > Yaninho Messages postés 530 Statut Membre
         
        merci sa marche mais maintenant le header est descendu -_-
        0
  14. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    essaies ça 
    <!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>
  <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8">
  <link rel="shortcut icon" href="favicon.png">
  <title>Animes-scans</title>
  <link rel="stylesheet" type="text/css"
 href="index.css" media="all">
</head>
<body>
<div id="global">
<div style="margin-left: 17px;" id="header"> </div>
<div id="corps">
<div id="contenu"> </div>
<div id="menu">
<div class="bloc">
<div class="bloc2"> <img src="navigation.png">
<ul>
  <li> <a linkindex="0"
 href="http://devilux.olympe-network.com/Animes%20scans/index.php">Accueil</a></li>
  <li> <a linkindex="1"
 href="http://devilux.olympe-network.com/Animes%20scans/">Staff</a></li>
  <li> <a linkindex="2"
 href="http://devilux.olympe-network.com/Animes%20scans/">Forum</a></li>
  <li> <a linkindex="3"
 href="http://devilux.olympe-network.com/Animes%20scans/">Recrutement</a></li>
  <li> <a linkindex="4"
 href="http://devilux.olympe-network.com/Animes%20scans/">Livre
D'or</a></li>
  <li> <a linkindex="5"
 href="http://devilux.olympe-network.com/Animes%20scans/">Partenariat</a></li>
  <li> <a linkindex="6"
 href="http://devilux.olympe-network.com/Animes%20scans/">Nous
Contacter</a></li>
</ul>
</div>
</div>
<br>
<div class="bloc">
<div class="bloc2"> <img src="animes.png">
<ul>
  <li> <a linkindex="7"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="8"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="9"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="10"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="11"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="12"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="13"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="14"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
</ul>
</div>
</div>
<br>
<div class="bloc">
<div class="bloc2"> <img src="scans.png">
<ul>
  <li> <a linkindex="15"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="16"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="17"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="18"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="19"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="20"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="21"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
  <li> <a linkindex="22"
 href="http://devilux.olympe-network.com/Animes%20scans/">Lien</a></li>
</ul>
</div>
</div>
</div>
<div id="contenu">
<p>bon je teste teste</p>
</div>
</div>
<div id="footer"><img src="footer.png"></div>
</div>
</body>
</html>
    0
  15. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    c'est ce que j'ai mis dans le code html
    0
  16. lolerki Messages postés 675 Statut Membre 102
     
    je copie tout ? je prend juste pour le header et le footer ?
    0
  17. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    tu remplace tout par le code que j'ai mis
    mais il faut alors que ton css s'appelle index.css
    sinon tu fais comeme a dit Yaninho,
    tu met à la place de margin auto margin-left:17px
    0
  18. lolerki Messages postés 675 Statut Membre 102
     
    oui je l'est fiat sa marche mais maintenant le header est un peut descendu -_-
    0
  19. lolerki Messages postés 675 Statut Membre 102
     
    enfin je veut dire le designe lui même est un peut descendu.
    0
    1. Yaninho Messages postés 530 Statut Membre 63
       
      Tu as bien mis margin-left:17px et non margin:17px; (j'avais oublié le left^^)
      0
      1. lolerki Messages postés 675 Statut Membre 102 > Yaninho Messages postés 530 Statut Membre
         
        oui je me suis pas tromper ^^
        0
  20. math 2000 Messages postés 2589 Date d'inscription   Statut Membre Dernière intervention   405
     
    margin-top: -10px;
    c'est pas normal mais on dois mettre un nombre négatif j'ai mis -10px
    tu le met au même endroit en plus de l'autre code
    0
  21. lolerki Messages postés 675 Statut Membre 102
     
    ok
    0
  • 1
  • 2
  • 3
  • 4

Discussions similaires

CODE ALPHANUMERIQUE
NOSRIPLEON -
NOSRIPLEON -

5 réponses
faire un code alphanumérique
jacck35 -
Tigresse -

15 réponses
controleur de codage/décodage PCI
dtp33950 -
kaneagle -

6 réponses
comment faire un mots de passe alphanumerique
BOBY -
Moi -

7 réponses
Contrôleur de codage/décodage PCI pilote manquant ASUS X751S
benotiti -
kaneagle -

2 réponses