PB: design, gestion de blocs %, ...

heeeeeeelp

26 novembre 2005 à 23:26:21

dsl je crois que j'ai pas posté au bon endroit, le pb a quelque changé :S

sujet d'origine:
http://www.siteduzero.com/forum-83-409-mise-en-page-difficile.html

voila ce que je voudrai mettre en page
http://awasagaga.free.fr/awsg.jpg

Webokage

27 novembre 2005 à 1:20:11

Pourrais tu t'exprimer plus clairement ?? :-°

Découvrez les grandes inventions et inventeurs qui font de notre monde ce qu'il est aujourd'hui :)

snz

27 novembre 2005 à 10:08:47

Pourquoi tu refais un sujet ?

Tu auais du continuer sur l'autre.

rgwarrior

27 novembre 2005 à 11:41:17

>

voila, jcrois que je vous ai tout donné

HEEEEEEEEELP PLEEEEASE !

c aucun rapport), mais personne ne l'a fait, donc j'en recrée un.

Voila, j'ai un probleme: mon design superpose des blocs, et je ne sais pas très bien comment m'y prendre...
voila à quoi il ressemble => http://awasagaga.free.fr/awsg.jpg
je vois deux solution:

- soit je coupe les images, et je met les fragments dans des blocs (cest ennuyant, ça sera peut être trop imprecis, et ça m'oblige à prendre un design fixe)

- sinon, et je ne sais pas faire, c'est pour ça que je vous demande de l'aide, je voudrai utiliser FLOAT, et faire flotter mon menu legerement sur le corp, donc mettre une marge dans le corp afin que le menu ne soit pas sur le texte... le probleme, c'est que deja ça je maitrise pas trop, mais le plus dur, c'es que je voudrai faire un design en pourcentage, pour que ce soit optimum pour toutes les resolutions

vous pouvez m'aider svp??? parce que je n'arrive à rien !

voila à quoi ça ressemble pour l'instant: http://awasagaga.free.fr/asupprimer.html

pour l'instant, pour remplir ma page, j'utilise celle d'exemple de mateo:

<!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>
<title>Mon super site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>

<body>



<div id="en_tete">

</div>



<div id="menu">
<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="element_menu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>



<div id="corps">
<h1>Mon super site</h1>

<p>
Bienvenue sur mon super site !<br />
Vous allez adorer ici, c'est un site genial qui va parler de... heu... Je cherche encore un peu le th?me de mon site :-D
</p>

<h2>A qui s'adresse ce site ?</h2>
<p>
A tout le monde ! Si je commence a privilegier certaines personnes, on va m'accuser de discrimination ;o)<br />
Que vous soyez fans de fusils a pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
</p>

<h2>L'auteur</h2>
<p>
L'auteur du site ? Bah, c'est moi, quelle question :-p<br />
Je vais essayer de faire le meilleur site du monde (ca doit pas etre bien complique). Mon objectif est d'attirer un maximum de visiteurs, de les rendre accros a mon site, puis de les mettre en mon pouvoir.<br />
Je prendrai ensuite le controle du Monde. Une fois que ce sera fait, j'irai explorer les confins de l'Univers a la recherche de nouveaux peuples a soumettre a ma terrible puissance. MooUUuUuuUAhahHaaAhAAaaah !!! (rire diabolique).
</p>
</div>



<div id="pied_de_page">

</div>

</body>
</html>

et enfin voila le css, aucune image, aucun fond d'écran ne s'affiche ! jdois vraiment avoir fait de la merde !
mais je connais pas du tout les pourcentages !
et aussi, j'ai un probleme avec le bas de ma page papyrus, je demande à ce que le fond se repete verticalement, mais j'espere que la transition sera belle ! et aussi, tout en bas de ma page, je voudrai bien qu'il y ai la flamme, et le bas du papyrus... pour le bas du papyrus, peut etre le mettre en bordure...

body
{

   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px; /* Idem pour le bas du navigateur */
   background-color: black;
}

#en_tete
{
   width: 100%;
   height: 159px;
   background-image: url("image/banniere.jpg");
   background-repeat: no-repeat;
}

#menu
{
   margin-left: 5px;
   float: left; /* Le menu flottera à gauche */
   width: 20%; /* largeur du menu */
   background-color: black;
}

.element_menu
{
   background-color: black;
   background-image: url("image/motif.jpg"); /* element à repeter dans le menu */
   background-repeat: repeat-y;

   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

.element_menu h3 /* A CHANGER Tous les titres de menus */
{
   color: white;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul /* A CHANGER Toutes les listes à puces se trouvant dans un menu */
{

   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.element_menu a /* A CHANGER Tous les liens se trouvant dans un menu */
{
   color: blue;
}

.element_menu a:hover /* A CHANGER Quand on pointe sur un lien du menu */
{
   background-color: white;
   color: red;
}

#corps
{
   margin-left: 18%; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5%; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

   color: black; /* du texte? */

   background-image: url("image/papyrus.jpg"); /* element à repeter dans le menu */
   background-repeat: repeat-y;


}

#corps h1 /* A CHANGER */
{
   color: red;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* A CHANGER */
{
   height: 30px;

   background-image: url("images/titre.png");
   background-repeat: no-repeat;

   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

#pied_page
{
   width: 100%;
   height: 123px;
   background-image: url("image/piedpage.jpg");
   background-repeat: no-repeat;

Exca

27 novembre 2005 à 12:31:07

Si tes images ne s'affichent pas c'est que tu t'es trompé dans les url (ou tu les as mis dans le mauvais dossier).
Là, tu dois avoir dans le même dossier ton fichier css et ton dossier image (et dans ce dossier image tes images).

Synapse

27 novembre 2005 à 12:52:01

Déjà, en regardant ta CSS deux secondes, l'on s'apperçoit que parfois ton dossier image comporte un s et d'autre fois pas...

FAIS ATTENTOIN A CE GENRE DE DETAILS

jp949

27 novembre 2005 à 12:58:26

d'autre part avant de mettre entete 100% il faut dimensionner html et body parceque 100% de rien ca fait rien

rgwarrior

27 novembre 2005 à 13:35:53

comment donner une dimension à la page qui change selon la resolution de l'usager???

=> pour image(s) effectivement, mais c'est pour un titre, la je m'en fou de celui la

si aucuns des fonds ne se met, c'est surement pour la raison indiquée par jp949...

Sniper

27 novembre 2005 à 13:48:54

tu defini la taille de ton body dans le css comme ceci

body
{
width:100%;
height:100%;
}
en gros ca prendras 100% de l'ecran quel que soit la résolution, ensuite tu peu definir tes autres bloc avec des %

rgwarrior

27 novembre 2005 à 15:49:36

j'ai fait ce que tu m'as dit, et ça marche tjrs pas. J'ai fait le ménage dans le css, en ne gardant que l'essenciel.
j'ai aussi vérifié les repertoires, le page et le css sont dans un meme dossier, ainsi que le dossier image ou sont les images.

peut etre que ma façon de m'y prendre n'est pas la bonne, ce que je voudrai, c'est pouvoir avoir mon site comme ce design que j'ai fait => http://awasagaga.free.fr/awsg.jpg

body
{
    width:100%;
height:100%;

   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px; /* Idem pour le bas du navigateur */
   background-color: black;
}

#en_tete
{
   width: 100%;
height: 159px;
   background-image: url("image/banniere.jpg");
   background-repeat: no-repeat;
}

#menu
{
   margin-left: 5px;
float: left; /* Le menu flottera à gauche */
   width: 20%; /* largeur du menu */
background-color: black;
}

.element_menu
{
   background-color: black;
   background-image: url("image/motif.jpg"); /* element à repeter dans le menu */
   background-repeat: repeat-y;

   margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

#corps
{
   margin-left: 18%; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 5%; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

   color: black; /* du texte? */

   background-image: url("image/papyrus.jpg"); /* element à repeter dans le menu */
   background-repeat: repeat-y;


}

#pied_page
{
   width: 100%;
height: 123px;
   background-image: url("image/piedpage.jpg");
   background-repeat: no-repeat;

il n'y a pas quelqu'un qui pourrait maider???