[Design] une bordure englobante

28 mars 2006 à 15:15:22

Bonjour à tous

!
Après beaucoup de recherches, c'est dans un élan de désespoir que je vous pose cette question

.
Comment faire pour mettre une bordure qui englobe tout le corps du site, comme sur ce site ?
C'est à dire que comment, comme sur ce site, avoir tout le corps de son site ( bannière, menus et corps de texte ) englobés dans une bordure ?
Je n'y arrive pas ...
Merci de votre aide.

barbarius

28 mars 2006 à 15:22:11

J'ai pas verifié...

Mais a mon avis ce site utilise des <div></div>

Plusieur les unes sous les autres...
Ensuite, par du CSS, il mets des bordures spécifiques.
Pour la div du haut : gauche, haut, droite
pour celle du milieu : guauche et droite
celle du bas :gauche bas, droite..

En donnant, tjs en CSS, la meme largeur a toute les div le resultat est le suivant :
Regarde

Crown

28 mars 2006 à 15:27:39

en fait ce site utilise les tableaux, c'est pour ça que ce site n'a pas d'autre choix que d'être présenté avec une "bordure englobante"

.
or, mon site est totalement dépouruvu de tableaux et codé en xhtml avec une feuille de css.
J'ai essayé de mettre un border au body comme cela :

body
{
border : 1px solid black;
}

mais ca ne produit pas l'effet prévu

.
Je voudrais donc comme tu dis savoir comment faire pour faire la même chose mais sans tableaux, en utilisant jsute un border...

EDIT : je vois, c'est a très peu de chose près ce que je veux faire, or moi j'ai un menu sur le côté, et pas de speedbarre.

Gimmly

28 mars 2006 à 15:33:50

le div autour de la page ne marche pas ?
<body>
<div class="page">

</div>
</body>

pour moi ca me semble le plus simple.
En CSS tu pourra mettre la bordure et donner la taille que tu veux au div.

barbarius

28 mars 2006 à 15:35:11

Humm, des tableaux...
Moi je suis pas fan..

Mais j'aurais du verifié..
Autant pour moi..

Ben si tu as regardé le lien que je t'ai donné le resultat et similaire..

Mais avec des divs (là je suis sur, c moi qui l'ai codé

celui là)

Tu peux alors simplement mettre UNE SEULE div englobant tout ton site...

Puis tu peux ensuite en faire ce que tu veux.
La positionner et : lui mettre une bordure..

le CSS est (tu le connais peut-etre dejà mais au cas ou)

#id_de_la_div /* ou .class_de_la_div c'est au choix */
{
boder: 1px #000 solid;
}
/* le #000 est pour la couleur noir, mais tu peux y mettre ce que tu veux */

voila..
je reste dans le coin si tu as encore besoin de moi..

Si tu veux regarde le CSS de la page que je t'ai donnée..

BOnne chance..

[edit : Rrrrr, pri de vitesse

]

Crown

28 mars 2006 à 15:41:37

voici le code de mon index.php :

<!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 href = "style.css" rel = "stylesheet" type = "text/css" media = "screen" />
<title> The Progstation </title>

</head>

<body>

<div id = "Header">

<img src = "images/ban.png" alt = "progstation" />

</div>

<div id = "LeMenu">

<?php include ( "menu.html" ); ?>

</div>

<div id = "Corps">

<?php include ( "$page" ); ?>

</div>

</body>

</html>

@ Gimmly >
Je mets bien une bordure autour de #Corps, mais ca ne fait pas ce que je veux, ca englobe juste le texte, pas les menus et tout.
J'ai pensé a mettre une bordure sur body, mais ca ne marche pas non plus car les menus ne sont pas englobés, alors que le reste ( texte et header ) oui

.

@ Barbarius >
VOila, j'ai essayé de faire ce que tu as proposé, a savoir une div qui englobe toutes les autres. Mais le résultat est le même que quand j'avais essayé en utilisant body au lieu d'une div : resultat ici

barbarius

28 mars 2006 à 15:44:49

Oui, c'est normal !

Parce que la div corp n'englobe pas tout...

Il faut que tu rajoute une <div id="id">
qui part juste après le <body>
qui englobe tout
et qui arrive juste avant le </body>

Et là tu lui met une bordure

On peut mettre des divs dans des divs alors ne t'en prive pas

Ca marche ?

Crown

28 mars 2006 à 15:51:52

Voila le code changé pour placer la div englobante :

puis, dans le css :

#Englobe
{
border : 1px solid black;
}

Et la vraiment je ne comprends pas pourquoi, sachant que Englobe englobe tout,
le menu n'est pas pris en compte, pas englobé...

edit : le css de mon site

barbarius

28 mars 2006 à 15:59:58

Effectivement..

Bon, je me lance dans ton code..

Ca risque de prendre du temps, je ferais un edit de ce message ci quand j'aurais fini parce que je ne peux pas poster deux fois de suite...

a tout de suite

[EDIT]

Il y a quelqu'un ?!
Bon, je dois avouer que c'est unv rai casse tete !
le probleme vien du float:left du menu..
Le navigateur ne prend plus en compte sa hauteur pour le calcul de celle de #Englobe..

Bon, je suis toujours dessus, en attendant, un petit padding:5px; pour englobe serait sympatique...

[EDIT 2]

Il semblerait que ton site bug sous IE..
Si tu le sais et que ça ne te dérange pas alors j'ai une solution (guère joli mais qui marche. Mais pas sous IE ^^)
Il suffirait de mettre un

#Englobe
{
border: 1px solid black;
padding: 5px;
background: #CCCCCC;
min-height:600px;
height:Auto !important;
/* là je met 600 pour min-height:; mais c'es en fonction du menu, ET DU MENU SEULEMENT, que tu dois mettre cette valeur!

Si le #corps s'allonge le height:auto !important; prend le relais et la hauteur sera bonne...*/
}

à la div #Englobe

Voila..

[EDIT 2 BIS]

Bon, j'epère avoir un peu aidé..
En cas mon adresse msn est dans mon profil..

Crown

28 mars 2006 à 17:48:39

Je suis encore la oui

.
Merci beaucoup d'avoir passé du temps à essayer de m'aider !
Je t'en suis très reconnaissant.
pour les solutions proposées : elles fonctionnent :).
Mais je pense qu'il doit y avoir un moyen de faire en sorte que le menu ne soit plus float sans pour autant mettre des position absolute.
Je cherche de ce côté la

. Merci d'avoir découvert d'ou venait le pb !
Gabriel.