28173 sujets

CSS et mise en forme, CSS3

Voila regardez, j'ai un gros problème ce n'est pas un simple décalage c'est tout le contenu qui va en bas Smiley decu
http://bestpig.info


/*

Description : Mise en forum du design(Header, Menu, Footer)

*/

#design 
{
	margin: auto;
	border: 1px solid black;
	border: 0px;
	width: 970px;
	background-image: url('background.gif');
}

#header 
{
	width: 930px;
	height: 150px;
	margin: 0 20px 0 20px;
	background-image: url('header.gif');
}

#menuhaut 
{
	width: 930px;
	height: 35px;
	margin: 0 20px 0 20px;
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 0px;
	border: 0px;
	background-repeat:no-repeat;
	background-image: url('menuhaut.gif');
}

#menu 
{
	float: left;
	width: 175px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 27px;
	background-image: url('menu_back.gif');
}

#menuright
{
	float: right;
	width: 175px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-right: 27px;
	background-image: url('menu_back.gif');
}

#contenu 
{
	display: block;
	width: 525px;
	margin-top: 5px;
	margin-bottom: 15px;
	margin-left: 210px;
	margin-right: 15px;
	padding: 15px;
	vertical-align: super;
}

#footer 
{
	clear: both;
	font-size : 12px;
	font-family : Arial;
	color : #FFFFFF;
	font-weight : bold;
	text-align: center;
	border: 0px;
	padding-top: 8px;
	width: 930px;
	height: 22px;
	vertical-align: bottom;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-repeat:no-repeat;
	background-image: url('bas.gif');
}

.menu_int 
{
	text-align: center;
	width: 155px;
	margin: 0 10px 0 10px;
}

.menu_int2 
{
	width: 155px;
	margin: 0 10px 0 10px;
}

.menu_titre 
{
	width: 175px;
	height: 20px;
	margin-bottom: 15px;
	padding-top: 2px;
	background-repeat:no-repeat;
	background-image: url('menu_titre.gif');
}

.menu_titre p 
{
	vertical-align: middle;
	font-size : 12px;
	font-family : Arial;
	color : #FFFFFF;
	font-weight : bold;
	text-align: center;
}

#menu_bas 
{
	width: 175px;
	height: 1px;
	background-image: url('menu_bas.gif');
}


Merci D'avance Smiley cligne
Bonjour,

Quel bazard ces templates !!
Bon tu as un truc de trop large ou plutôt sans width dans ton contenu qui pousse IE à prendre 100% de la largeur à mon avis.
Regarde peut être vers ta balise h1.

Bon courage
Ok, je ve regarder vers h1 merci,

j'ai réussi, a mettre le contenu au milieu mais ya toujour des décalages, si tu pouvait regarder .

EDIT: sa marche pas sur le net mais en local oui Smiley decu , je comprend pas vraiment biz
Modifié par bestpig (08 Sep 2006 - 22:01)
Je pense surtout que tu as un problème de Doubled Margin bug sous IE6.
La marge gauche de ton bloc flottant à gauche et la marge droite de ton bloc flottant à droite sont doublées dans IE6.

http://www.positioniseverything.net/explorer/doubled-margin.html


Ensuite :
1. Tu sembles effectivement avoir un problème avec une image trop large (celle avec le cochon et les statistiques).

2. Il me semble plus efficace de dimmensionner le bloc central en réduisant sa largeur par des marges, plutôt qu'en lui donnant à la fois des marges et une largeur fixe.
#contenu 
{
	margin: 5px 210px 15px 210px;
	padding: 15px;
	vertical-align: super;
}



Dans la foulée et pour finir, tu déclares des bêtises au début de ta page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

(...)

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-2">

1. Es-tu sûr de l'encodage choisi ? Je ne suis pas sûr qu'il soit le plus adapté à un site en français :
http://fr.wikipedia.org/wiki/ISO_8859#Les_parties_du_standard_ISO_8859 a écrit :
Wikipedia[/url
]ISO 8859-2 (latin-2 ou européen central) — prend en charge celles des langues d'Europe centrale ou de l'Est basées sur un alphabet romain. Ceci inclut le bosniaque, le croate, le polonais, le tchèque, le slovaque, le slovène et le hongrois. Le symbole de l'euro manquant est présent dans la version ISO 8859-16.

Il me semble que les encodages iso-8859-1 et iso-8859-15 seraient plus adaptés à tes besoins.

2. Tu utilises pour une page web un format XML, le XHTML 1.1, qui doit nécessairement être servi en mode "application/xhtml+xml". C'est bien ce que tu déclares, et sans doute par erreur : la gestion de "application/xhtml+xml" par certains navigateurs n'est pas des plus heureuses, et dans la très très très grande majorité des cas on fera mieux d'utiliser du HTML 4.01 ou du XHTML 1.0 servi en "text/html". MAIS, tu as beau marquer "application/xhtml+xml" dans ta page, le serveur, lui, envoie l'information suivante :

Et l'information du serveur est prioritaire.

Si tu n'as pas de besoins particuliers qui nécessitent l'utilisation du type MIME "application/xhtml+xml", je te conseille tout simplement de remplacer ton doctype et la balise META fautive par le code suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(...)

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

(J'ai corrigé au passage l'encodage, mais c'est peut-être une erreur de ma part : à toi de voir si c'est à faire ou pas).
enfaite je maitrise assez bien php, mais html/css je ne maitrise pas donc j'ai du déclaré des conneries .. (comme tu le dit Smiley biggrin )

Bon jvé voir et modif ce que a mis merci beaucoup je te tien au courant

EDIT : Ghost, j'ai bien ff
Modifié par bestpig (09 Sep 2006 - 19:14)
Merci pour les correction mpop ^^,

Mais qu'appeler vous Statistique ?
Best Pig Site est un site qui propose des services gratuitements.
Pour l'instant il n'y a pas encore beaucoup de service mais sa risque de venir.

Ce Site n'est pas fini il reste encore à faire :

    * News [Fini]
    * News par rss [Fini]
    * Commentaire pour les News [Fini]


Et l'image trop grande ??, je trouve pas quelle taille pensez vous qu'il faut que je mette ?
bestpig a écrit :
Mais qu'appeler vous Statistique ?

Je pensais à l'image d'avatar. J'avais regardé vite fait, et j'ai cru que le texte reprenait des statistiques de participation à un forum, des choses comme ça. En l'occurence il s'agissait de mon adresse IP et autres renseignements me concernant.

a écrit :
Et l'image trop grande ??, je trouve pas quelle taille pensez vous qu'il faut que je mette ?

L'image, insérée comme elle l'est dans une liste avec un retrait à gauche, dépasse des limites du bloc central. Elle a peut-être pile la bonne largeur (je ne sais pas exactement, je n'ai pas vérifié), mais dans ce cas il ne faut pas le moindre retrait à gauche. Smiley cligne
Bonjour,

Si tu as FF telecharge l'outil web developer et tu verras par toi même ... le pourquoi des comments