designe codage Résolu

Question

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 !

Yaninho · Answer

Il te faut quoi ? Tu veux faire quoi ?

math 2000 · Answer

et quel est le problème

lolerki · Answer

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)

math 2000 · Answer

ç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

lolerki · Answer

ok j'ai oublier le html désoler header

tout les

son bien fermer footer

lolerki · Answer

math 2000

avec margin-left: 0px; rien ne change l'image ne bouge pas.

lolerki · Answer

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

math 2000 · Answer

oui bon si tu nous donne un code avec des url relative 
il nous faut le dossier entier
sinon essaie avec les positions relative

lolerki · Answer

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.

math 2000 · Answer

up au cas ou tu es pas uv mon message psoté en même temps

lolerki · Answer

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

math 2000 · Answer

essaies ça Animes-scans

bon je teste teste

math 2000 · Answer

c'est ce que j'ai mis dans le code html

lolerki · Answer

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

math 2000 · Answer

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

lolerki · Answer

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

lolerki · Answer

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

math 2000 · Answer

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

lolerki · Answer

ok

lolerki · Answer

sa marche pas rien ne bouge !

math 2000 · Answer

ba si chez moi ça marche dans le div header tu rajoute 
 style="margin-left: 17px; margin-top: -10px;"

donc soit tu met ça soit tu met dans le css à header 
header(
margin-left: 17px; 
margin-top: -10px;")

lolerki · Answer

ha oui merci sa marche ^^

math 2000 · Answer

de rien 
 tu peux mettre le sujet en résolut stp

lolerki · Answer

ha aussi tu peut me dire comment réglé le problème du texte stp regarde http://devilux.olympe-network.com/Animes%20scans/ il est a moitié centre alors qu'il devrait pas

lolerki · Answer

sa je pense que c'est a cause du menu regarde mon code css

		#menu {
			padding-top:0px;
			width:190px;
			float:left;
			margin-top:0;
		}
		
		#menu .bloc {
			width:129px;
			margin-left:635px;
		}
		
		h3 {
			color:#2575A0;
			font-weight:bold;
			padding-top:3px;
			padding-left:2px;
			font-size:12px;
			font-family:'Arial black', sans-serif;
			text-transform:uppercase;
		}
		
		#menu ul {
			margin:0;
			padding-top:5px;
			padding-left:3px;
			list-style:none;
			color:#7FC7DF;
		}
		
		#menu a {
			color:#7FC7DF;
		}
		#menu, .bloc, .bloc h3, .bloc ul{margin:0;}
		
		#contenu{
		margin-left:220px;
		margin-top:0;
		padding-top:5px;
		width:600px;
		}

math 2000 · Answer

c"'est bizarre ça j'y retournerais plus tard

lolerki · Answer

ok merci

math 2000 · Answer

on peut rien faire de propre avec le css car ton  tu as tout qui se décale vars la droite donc je te propose de supprimer ton div et de le mettre dans le div qui s'appelle menu

lolerki · Answer

ok

math 2000 · Answer

est ce que ça a marché

lolerki · Answer

non et j'ai teste des code sa a marcher mais le menu se déplace :s aussi

math 2000 · Answer

je vais essayer de te faire une page propre

lolerki · Answer

rajoute moi sur msn virgilmeaup@homail.fr sa sera mieux que sur comment ça marche. Merci

math 2000 · Answer

http://bormat2.free.fr/math%202000/lolerki/lesiteparmath200.html
je me suis embêter avec le css pour iren c'était le html qu'il fallait changer

lolerki · Answer

ok je vais aller voir

lolerki · Answer

ho merci beaucoup sa marche ^^ merci merci ^^ bon il me manque plus que le footer j'ai déjà réparer une erreur la il faut faire comme le header le déplacer vers la gauche (plus de blanc)

math 2000 · Answer

un conseil réduit la taille de l'image

lolerki · Answer

du footer non elle est a la bonne taille faut juste la déplacer.

math 2000 · Answer

je veux dire le poid de l'image est trop hgros et prend trop de temps à charger

lolerki · Answer

bizarre pas chez moi ^^. Mais je préfère réglé tout les problème avant de faire sa

math 2000 · Answer

as tu encore besoins d'aide 
le principe est simple on déplace les éléments avec les margin ou les position absolute

lolerki · Answer

je dois placer Accueil, Forum et Contact dans le header dans les boutons mais j'arrive pas a bien les placer c'est mon code

lolerki · Answer

est impossible de bouger le footer avec margin et position si y a d'autres codes je les connais pas -_-

math 2000 · Answer

(position:absolute
 ;left:xpx 
right:xpx)

lolerki · Answer

t'es codes marchent, mais regarde sa me fait sa https://www.casimages.com/i/090409030542617487.png.html
a la fin sa doit faire sa https://www.casimages.com/i/090409031149547289.png.html (cette image vient du designe lui même donc, sans code)

math 2000 · Answer

créer un nouvelle class et un nouveau div sinon on comprend plus rien

lolerki · Answer

?? pas trop compris :s

math 2000 · Answer

pour mettre ton texte à la fin du code html du créer un div ett tu le place en position relative comme ça ça ne déplacera pas le reste
 au fait si tu vide ton cache tu verra que l'image est longue à chager j'arrive à la mettre en 44ko sans différence à l'oeil nu au lieu de tes 270ko
passe moi la page et une capturee avec ce que ça doit faire à la fin et je le fait 
si j'ai bien compris faut déplacer le bas et déplacer acceil 
sauf que j'ai pas le code

lolerki · Answer

a la toute fin le designe sa donne sa https://www.casimages.com/i/090409034830227001.jpg.html

math 2000 · Answer

j'ai réussis c'était pas trop dur avec le mgin et en supprimant height attent je te le passe
il faut qu'on la vois ou pas la bande noir en haut

lolerki · Answer

le code du header est du footer ?

lolerki · Answer

non sa fait moche donc tu voit même je l'est enlever.

math 2000 · Answer

mince ça marche plus sous ie attend un peu

lolerki · Answer

ok, pas grave.

math 2000 · Answer

je crois que ça vient pas de chez moi car sur ton site 
http://devilux.olympe-network.com/Animes%20scans/
ça marche pas et je me suis servie de  cette page pour corrigé le bug 
sur le lien que je t'ai passé ça marché

math 2000 · Answer

j'ai un,e petite idée ton image
 http://devilux.olympe-network.com/Animes%20scans/img/footer.png

est inchargeable sous ie 
tu as testé ?

lolerki · Answer

oui elle est pas inchargable 0_o tout s'affiche du premier coup

lolerki · Answer

c'est quoi ton idée ?

math 2000 · Answer

chez moi ça marche pas tu peux demander à des gens que tu connais si ça marche chez eux avec ie6 ou ie7
peut être que ça marche par ce qu'elle est dans ton cache tu as essayé ctrl + f5 pour voir

math 2000 · Answer

sinon je teste à un 2eme ordi pour voir qui a ie6 au fait les png transparent faut des hack pour que ça marche sous ie6 sinon il faut mettre la couleur du fond

math 2000 · Answer

ha bizarre sur l'autre ordi ça marche donc ça devrais marcher même si je vois rien donc je peux te passer la page

lolerki · Answer

toi tu le vois pas le footer ?

math 2000 · Answer

bon je te passe le css 

/* ::::: file://localhost/C:/Documents%20and%20Settings/Propri%C3%A9taire/Application%20Data/Mozilla/Firefox/Profiles/20cup8ug.default/ScrapBook/data/20090408193714/lolerki/index.css ::::: */

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:17px }
 a { color: rgb(8, 100, 149); }

il faudra remettre un margin au test je l'ai supprimé par ereur

lolerki · Answer

ok pas grave

math 2000 · Answer

bon j'ai fermer ma session puis je l'ai reouverte et ça a remarcher sur ie c'est quand même bizarre

lolerki · Answer

lol, fait moi ce que tu voi devant ton ordi avec le css que tu ma donner stp.

math 2000 · Answer

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

lolerki · Answer

ha ok je me disais aussi.

math 2000 · Answer

et maintenant c'est différent avec ie mais ça marche avec firefox

math 2000 · Answer

je dois pas être en forme aujourd'hui

lolerki · Answer

ho merci c'est bien placer ^^. Mais il reste un dernier truc c'est que le texte :s http://devilux.olympe-network.com/Animes%20scans/ enfin tu va comprendre quand tu aura regarder.

lolerki · Answer

le texte doit être placer dans l'espace blanc.

math 2000 · Answer

oui  c'est simple le pb c'est le bas il y a un décalage sous ie il me faudrait du css spécial ie mais je sais pas comment faire

lolerki · Answer

ok, pas grave je vais cherche de mon coté.

math 2000 · Answer

c bon je te le passe j'ai joué avec les width dans le fichier html

math 2000 · Answer

bah mon message a pas été posté bizarre 
http://bormat2.free.fr/math%202000/lolerki/test2/

lolerki · Answer

ho 0_o toi le texte est bien placer...

math 2000 · Answer

tu as rien remarqué image de 44ko au lieu de + de 200 sans perte de qualité sinon ça a l'air de ressemblé à ta photo ha non il reste encore accueil et tout à placer

lolerki · Answer

le accueil j'arrive pas a la placer :s

Designe codage - Page 4

Discussions similaires

Newsletters