[Résolu] Design louche - ...et pas passoire... par Yloy - page 1

Bonjour

Après ce bide en titre, je vais vous exposer mon problème :
C'est à propos de mon design. Je n'arrive pas à faire ce que je veux !
Voici le site : http://yannis1000.free.fr/Oblivion/
Et voici les codes :

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>

<body>


<?php include("menu_gauche.php"); ?>
<?php include("menu_droite.php"); ?>


<div id="corps">

<p> eee </p>

</div>

</body>
</html>

menu_gauche.php

menu_droite.php

design.css

/*/////////////////////////////////////////////////////////// TOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

body
{
width: 1000px;
margin: auto; /* Pour centrer notre page */

margin-top: 20px; /* Pour éviter de coller avec le haut. */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
}

/*/////////////////////////////////////////////////////////// CORPS \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

#corps
{/*
width: 640px; /* Largeur. */

margin-left: 200px; /* Marge à l'extérieur, gauche. *//*
margin-right: 20px; /* Marge à l'extérieur, droite. */

background-image: url("images/corps_a.png"); /* L'image d'en haut. */
background-repeat: no-repeat; /* Ne pas répéter. */
background-color: #ffffe6; /* Couleur de fond. */
}

/*//////////////////////////////////////////////////////////// MENU \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

#menu_gauche
{
width: 160px; /* Largeur. */
float: left; /* Le menu flottera à gauche. */
/*
margin-left: 12px; /* Marge à l'extérieur, gauche. *//*
margin-right: 12px; /* Marge à l'extérieur, droite. */

padding-left: 30px; /* Marge à l'intérieur, gauche. */
padding-top: 30px; /* Marge à l'intérieur, haut. */
padding-right: 30px; /* Marge à l'intérieur, droite. */
}

#menu_droite
{
width: 160px; /* Largeur. */
float: right; /* Le menu flottera à droite. */
/*
margin-left: 12px; /* Marge à l'extérieur, gauche. *//*
margin-right: 12px; /* Marge à l'extérieur, droite. */

padding-left: 30px; /* Marge à l'intérieur, gauche. */
padding-top: 30px; /* Marge à l'intérieur, haut. */
padding-right: 30px; /* Marge à l'intérieur, droite. */
}

/* ********************************************************** */
/* ----------------Titre------------------- */

.menu_a
{
height: 44px; /* Hauteur . */

padding-left: 10px; /* Marge à l'intérieur, gauche. */
padding-top: 10px; /* Marge à l'intérieur, haut. */
padding-right: 10px; /* Marge à l'intérieur, droite. */

background: url("images/menu_a.png") no-repeat; /* Fond, non répété.. */

font-size: 100%; /* Taille du texte */
font-family: "Times New Roman", Arial, Verdana, serif; /* Police */
text-align: center; /* Alignement */
overflow: hidden; /* Coupé si ça dépasse. */
}

/* ----------------Menu------------------- */

.menu_b
{
min-height: 118px; /* Hauteur. */

padding-left: 10px; /* Marge à l'intérieur, gauche. */
padding-right: 10px; /* Marge à l'intérieur, droite. */

background: url("images/menu_b.png") repeat-y; /* Fond, se répète verticalement. */

font-size: 100%; /* Taille du texte */
font-family: "Times New Roman", Arial, Verdana, serif; /* Police */
text-align: left; /* Alignement */
}

/* ----------------Bas------------------- */

.menu_c
{
min-height: 26px; /* Hauteur. */

padding-left: 10px; /* Marge à l'intérieur, gauche. */
padding-right: 10px; /* Marge à l'intérieur, droite. */

background: url("images/menu_c.png") no-repeat; /* Fond, non répété. */
}

Voilà

Et j'aimerais afficher les menus et le corps (en entier parce qu'il est coupé) au même niveau.
Merci d'avance !

Yloy

22 juillet 2006 à 9:58:20

Jashugal

22 juillet 2006 à 10:06:04

margin-top: 20px; /* Pour éviter de coller avec le haut. */

En augmantant ce nombre ça donne quoua ?
(si ça bug, pense à rêgler la largeur de ton bloc)

22 juillet 2006 à 10:12:26

Ceci
Note à benet : j'ai mis 50 px.

SdT

22 juillet 2006 à 10:15:41

Je ne le vois pas coupre moi. Tu parles du corp et de tes menus si ils sont coupés ?

Moi je n'ai rien de couper. Sinon effectivement oui met un margin-bottom ou margin-top.

"J'voulais faire, de grandes études j'ai les attitudes..." Meugiwarano, né en 3015 dans un monde lointain de la terre... www.maitre-gims.fr

22 juillet 2006 à 10:21:31

Tu as quel navigateur ?

Sinon pour les margin, je vois pas où tu veux que je les "mettes" (orthographe douteux).

22 juillet 2006 à 10:27:05

Moi je suis sous Mozilla FireFox.

Si tu as IE ca peut se comprendre qu'il t'affiche mal ton design.

Sinon bien tu mes des margins en haut et bas des propriétés des cadres de design. C'est-à-dire que tu définis un espace en haut et en bas. Et puis sinon ce que tu peux faire tu attribus carrément une hauteur à tes cadres de menu. Un petit height: et comme ça c'est par défaut. Et puis quand tu rajoutes un lien ou autre.. sois tu rajoutes quelques pixels en hauteurs. Mais la meilleur solution est quand même de faire un "truc" extensible.

Tu vois ce que je veux dire ou pas ? :euh:

22 juillet 2006 à 10:33:22

Moi aussi je suis sous Mozilla, tu as quelle résolution ? Moi j'ai 1024 * 768 (je crois).

Mais je ne vois pas l'intérêt de mettre des margin aux menus et au corps.

EDIT : Voilà ce que ça m'affiche : http://img206.imageshack.us/img206/9747/sitegp5.png

22 juillet 2006 à 10:37:33

Oui j'ai à peu près pareil.

Et donc là tu reproches quoi au design et aux menus ?

22 juillet 2006 à 12:25:18

Et ben en fait j'aimerais que mes menus et mon corps soit à la même hauteur; que quand je met un padding-top au corps ça marche, qu'il soit pas coupé...
Et puis aussi quand j'augmente les paddings des menus, j'aimerais qu'il y ait une marge au lieu qu'ils se décalent en bas à droite...

Bref je ne vois pas d'où vient le problème. Et j'aimerais bien résoudre tout ça !

EDIT :
C'est bon ! Ca marche. Ca venait en fait de pleins de petites choses minimes mais qui ensembles donnaient ce résultat. Merci de votre aide !

Design louche

...et pas passoire...

Design louche

Supprimer

Modérer

Signaler le message aux modérateurs