Designe codage

Résolu

lolerki Messages postés 675 Statut Membre -
lolerki Messages postés 675 Statut Membre - 9 avr. 2009 à 18:32

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

Afficher la suite

A voir également:

Designe codage
Codage ascii - Guide
Codage binaire - Guide
Apprendre le codage - Guide
Codage alphanumérique ✓ - Forum Graphisme
Fichier word illisible codage - Guide

79 réponses

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.

Réponse 1 / 79

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); }

Réponse 2 / 79

Yaninho Messages postés 530 Statut Membre 63

Il te faut quoi ? Tu veux faire quoi ?

Réponse 3 / 79

math 2000 Messages postés 2589 Date d'inscription Statut Membre Dernière intervention 405

et quel est le problème

Réponse 4 / 79

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)

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

Posez votre question

Réponse 5 / 79

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

Réponse 6 / 79

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>

Yaninho Messages postés 530 Statut Membre 63

Du coup c'est les CSS correspondants aux div qu'il nous faut ;)

Réponse 7 / 79

lolerki Messages postés 675 Statut Membre 102

math 2000

avec

margin-left: 0px;

rien ne change l'image ne bouge pas.

Réponse 8 / 79

lolerki Messages postés 675 Statut Membre 102

Yaninho j'ai mis tout les codes que j'avais

Yaninho Messages postés 530 Statut Membre 63

pardon j'avais pas vu désolé ;)

Réponse 9 / 79

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

Réponse 10 / 79

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;
		}

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

on sais jamais d'où vient le problème.

Réponse 11 / 79

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

Réponse 12 / 79

lolerki Messages postés 675 Statut Membre 102

le teste en ligne http://devilux.olympe-network.com/Animes%20scans/

Yaninho Messages postés 530 Statut Membre 63

Dans ton CSS de header : tu met le margin:17px;

lolerki Messages postés 675 Statut Membre 102 > Yaninho Messages postés 530 Statut Membre

merci sa marche mais maintenant le header est descendu -_-

Réponse 13 / 79

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>

Réponse 14 / 79

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

Réponse 15 / 79

lolerki Messages postés 675 Statut Membre 102

je copie tout ? je prend juste pour le header et le footer ?

Réponse 16 / 79

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

Réponse 17 / 79

lolerki Messages postés 675 Statut Membre 102

oui je l'est fiat sa marche mais maintenant le header est un peut descendu -_-

Réponse 18 / 79

lolerki Messages postés 675 Statut Membre 102

enfin je veut dire le designe lui même est un peut descendu.

Yaninho Messages postés 530 Statut Membre 63

Tu as bien mis margin-left:17px et non margin:17px; (j'avais oublié le left^^)

lolerki Messages postés 675 Statut Membre 102 > Yaninho Messages postés 530 Statut Membre

oui je me suis pas tromper ^^

Réponse 19 / 79

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

Réponse 20 / 79

lolerki Messages postés 675 Statut Membre 102

Discussions similaires

CODE ALPHANUMERIQUE

faire un code alphanumérique

controleur de codage/décodage PCI

Pilote controleur de codage/décodage PCI manquant

Contrôleur de codage/décodage PCI pilote manquant ASUS X751S

Discussions similaires

Newsletters