Bord autour de la page [RÉSOLU]

Bonjour,

je suis en train de développer une petite interface pour un site Web dont je m'occupe en ce moment...

J'ai cependant un problème : J'aimerais un bord rouge de 20px autour de la page, mais lorsque je le fais, le contenu est décalé vers le bas/droite ! (Le bord rouge et une partie de la page se retrouvent donc hors écran)

Voici un zip dans lequel se trouvent ma feuille CSS et le fichier servant de modèle, vous pourrez donc voir ce qu'il en est...

Horizontalement je suppose qu'une largeur fixe pour le conteneur, accompagnée d'une couleur de fond sur le body arrangerait bien des choses, mais je me trouve en design fluide... Alors bon, difficile de calculer une largeur !


Merki d'avance
Modifié par SolykZ (05 Oct 2006 - 17:01)

Tu as essayé simplement border?

body
{
background: white;
border: black solid 20px;
}

J'avais déjà testé : Haut, droite et gauche c'est ok !

Par contre pour le bas, tout est décalé !

hello !

j'ai regardé tes fichiers mais je ne comprend pas ce que tu veux faire... est-ce que c'est :

un bloc "page" (largeur ???) qui contient :
=> un header en haut sur toute la largeur
=> un menu à gauche d'une largeur de 180px
=> un contenu à droite (largeur ?? le reste je pense)
=> un bottom en bas sur toute la largeur

et ça serait le bloc page qui aurait un contour rouge ?? c'est ça ??

des questions et remarques :

- il faut que tu définisses une largeur totale pour ton bloc page
- la propriété min-height ne fonctionne pas sous IE
- ce n'est pas la peine de mettre de hauteur sur ton body ou html

essai quelque chose dans le genre

body {
	margin: 0;
	padding: 0;
	background: white;
}
div#page {
	border: 20px solid red;
}

div#entete {
	height: 3em;
	line-height: 2.8em;
	text-align: center;
	background: yellow;
}

div#menu {
	float: left;
	width: 180px;
}
div#contenu	{
	background: blue;
}
div#conteneurpieddepage {
	height: 80px;
	clear: both;
	text-align: center;
	background: green;	
}

a+
Taly
Modifié par Taly (05 Oct 2006 - 16:30)

Pour ce que tu dis, c'est exactement ça !

Il y a cependant une nuance : Les deux colonnes (donc contenu de gauche et menu de droite) descendent jusqu'au pied de page qui lui, est toujours collé au bas de la page, même si le contenu des deux colonnes n'est pas assez important pour descendre jusque là : D'où la hauteur de 100% sur le body et l'html. Concernant la propriété min-height sous IE, elle est conditionnée dans le fichier de modèle (dans le head)

Quant à la largeur totale du bloc de page, il est de 100%

Bon, en cherchant un peu j'ai fini par trouver quelque chose me convenant :

html, body
	{
	border-left: 10px solid white;
	border-right: 10px solid white;
	overflow: hidden; /* Empêche l'ascenceur vertical sous IE */
	}

div#entete
	{
	border-top: 20px solid white;
	}

div#pieddepage
	{
	border-bottom: 20px solid white;
	}

Par contre, je ne comprends pas que pour les bordures horizontales (haut et bas donc), il faille placer une bordure de taille double à celle des bordures verticales (gauche et droite), sans quoi la bordure n'est pas identique sur tous les cotés !

Je passe donc ce topic en résolu (hé hé, j'offre le champagne : c'est la première fois que je solutionne tout seul un problème de mise en page CSS)

SolykZ a écrit :
(hé hé, j'offre le champagne : c'est la première fois que je solutionne tout seul un problème de mise en page CSS)

Pas pour moi parce que je ne suis pas en état , mais bravo quand-même

Kidibull ça fait l'affaire ?

En suppositoire, c'est jouable ?

Raphael a écrit :
suppositoire

Ca me fait penser à un mail reçu ce matin

a écrit :
Lorsque ton travail t'ennuie, que tu es au bord de la dépression, que vraiment plus rien ne va comme tu le voudrais au travail.

Alors fais ceci : En sortant du travail arrête-toi à la pharmacie, achète un thermomètre rectal Johnson & Johnson [seulement cette marque là].

Ouvre la boîte du thermomètre rectal et lis les instructions.

Tu trouveras cette phrase quelque part : Chaque thermomètre rectal Johnson & Johnson a été testé personnellement à notre usine.

Alors maintenant ferme les yeux et répète 5 fois à voix haute :

"Je suis heureux(se) de ne pas travailler au contrôle de la qualité chez Johnson & Johnson".

Modifié par SolykZ (05 Oct 2006 - 17:15)