Interface KompoZer

Breat · Message par **Breat** » 19 oct. 2008, 16:52

Voilà ce que j'obtiens, mais comme tu peux le voir il y a encore 3 problèmes avec les fond:

Tous mes problèmes en plus du fond sont représenté sur l'image

http://i76.servimg.com/u/f76/11/46/76/68/site12.jpg
Image non intégré à la page car trop grande (1600x1200)

1°) la barre à droite est cachée
Les barres grises sont sensées être visible seulement après la baniière bleue.

2°) il y a une barre en plein milieu

3°) le gris ne se propage pas

Et voici l'image de ce que je veux eu final:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 19 oct. 2008, 18:17

Ca devient de + en + précis, les rapports sur ton site sur le forum, on va être obligé de continuer à se pencher sur le problème! Mais ce soir, y'a des gens qui viennent, alors... à bientôt.

Breat · Message par **Breat** » 20 oct. 2008, 01:14

mon site (son interface) devrai normalement ressembler à ça:

et voilà ce que j'ai:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

donc voici mon code CSS, pouvez-vous me dire ce qui cloche?

Code : Tout sélectionner

/*
Design Bleu de  Breat's Site
Réalisé par Breat
<lien url="http://breatsite.fr">http://breatsite.fr</lien>
*/


/*----------*/
/* Le fond */
/*--------*/

body
	{
		width: 755px;
		margin: auto; /* Pour centrer notre page */
		margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
		margin-bottom: 20px;    /* Idem pour le bas du navigateur */
		background-color: #EEEEEE;
	}

#page
	{
		width: 755px;
		margin-left: auto;
		margin-right: auto;
		background-image: url("images/fond.png");
		background-repeat: repeat-y;
	}


/*------------*/
/* L'en-tête */
/*----------*/

#en_tete
{
   width: 755px;
   height: 91px;
   background-image: url("images/bann_bleue.png");
   background-repeat: no-repeat;
}


/*-----------------*/
/* Le menu  gauche*/
/*---------------*/

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 120px; /* Très important : donner une taille au menu */
}

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


/*----------------------------------------*/
/* Quelques effets sur les menus gauches */
/*--------------------------------------*/

.menu_g h3 /* Tous les titres de menus */
{    
   background-image: url("images/menu.png");
   margin-left: -30px;
   font-family: Arial, "Arial Black", Helvetica, "Times New Roman", Times, Verdana, serif, sans-serif;
   text-align: center;
   font-style: inherit; 
   font-size: small;
   color: #FF0000;
}

.menu_g ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 5px; /* ... 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 */
   font-size: small;
}

.menu_g a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.menu_g a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: #000000;
}


/*---------------------*/
/*-- Le menu  droit --*/
/*-------------------*/

#pub
{
   float: right; /* Le menu flottera à droite */
   width: 120px; /* Très important : donner une taille au menu */
}

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

/*---------------------------------------*/
/* Quelques effets sur les menus droits */
/*-------------------------------------*/

.menu_d h3 /* Tous les titres de menus */
{    
   background-image: url("images/menu.png");
   font-family: Arial, "Arial Black", Helvetica, "Times New Roman", Times, Verdana, serif, sans-serif;
   text-align: center;
}

.menu_d ul /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-right: 5px; /* ... 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 */
}

.menu_d a /* Tous les liens se trouvant dans un menu */
{
   color: #B3B3B3;
}

.menu_d a:hover /* Quand on pointe sur un lien du menu */
{
   background-color: #B3B3B3;
   color: #000000;
}

/*----------------------*/
/* Le corps de la page */
/*--------------------*/

#corps
{
   	width: 760px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-repeat: no-repeat;
	background-color: #EEEEEE;
  	margin-left: 140px; /* 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: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   	color: #000000;
   	border: 0px; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: #FF0000;
   text-align: right;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   font-size: large; 
   text-decoration: underline;
}

#corps h2 /* Tous les titres h2 du corps */
{
   height: 30px;
   background-image: url("images/titre.png"); /* Une petite image de fond sur les titres h2 */
   background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */
   padding-left: 30px;
   color: #FF0000;
   text-align: center;
}

.justifie 
{ 
  text-align : justify; 
}


/*------------------*/
/* Le pied de page */
/*----------------*/

#pied_de_page
{
	width: 760px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-repeat: no-repeat;
	background-color: #EEEEEE;
   	background-image: url("images/foot.png");
  	padding: 5px;
  	text-align: center;
  	color: #B3B3B3; 
  	border: 0px;
}

Gagea · Message par **Gagea** » 20 oct. 2008, 08:14

Je débute comme toi et j'ai eu des problèmes de mise en page jusqu'à ce que je mette dans body un div wrapper comme ça :

Code : Tout sélectionner

/* Generated by KompoZer */
body {
  background-color: #cccccc;
  font-family: Arial,Helvetica,sans-serif;
  color: #000066;
  font-size: 14px;
  text-align: center;
}
#wrapper {
  width: 930px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Breat · Message par **Breat** » 20 oct. 2008, 09:23

cela ne change absolument rien malheuresement

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Mongo Bob · Message par **Mongo Bob** » 20 oct. 2008, 11:52

Breat a écrit :cela ne change absolument rien malheuresement

Ca dépend de que tu as fait, mais c'est difficile de comprendre ce que tu veux, car tu poses plusieurs problèmes à la fois. Maintenant, ton problème est devenu qu'une grande image de fond avec le bandeau "Breat's site" en haut soit en fond de tous tes textes et liens. Je crois qu'il est impossible de mettre en place précisément toutes tes zones de texte par rapport aux différents emplacements de l'image.
Comment ça va s'adapter aux différentes résolutions d'écrans de tes visiteurs depuis l'écran à tube en 1024x768 jusqu'au plat en 16/9, ben, pas impossible, mais faudrait recommencer à 0 avec une bonne base html, déjà tu as des <div> (class "justifie") qui devraient être des <p>, mais y'a aussi que tu n'as pas assez joué au niveau positionnement avec les marges et les dimensions, trop de dimensions en pixels, tout devrait être -par exemple- en %, avec l'image de fond ça pose d'autres problèmes, mais non insolubles.
Avant de penser à l'image de fond, essaie d'avoir une base html et css plus solide avec une seule feuille css, les "alternate", c'est un peu prématuré!
Et essaie de créer ton code de A à Z au lieu d'en piquer apparemment (pardon si je me trompe là-dessus) des bouts par ci par là, mais je te l'ai déjà dit.
Je crois que je vais en rester là, parce que tant que tu n'as pas plus de formation de base, je peux pas t'aider.
Bon courage...

Breat · Message par **Breat** » 20 oct. 2008, 12:41

désolé mais tu te trompe je l'ai tapé moi même en suivant le tutoriel du site du zero

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

GAUNCE · Message par **GAUNCE** » 20 oct. 2008, 13:01

Si tu pouvais nous enlever, dans ta signature, ton bandeau clignotant, ça serait sympa, d'autant que si un de tes clients tombe sur un de tes posts il va être pour le moins surpris!...
Quand tu seras au niveau des mousquetaires, tu pourras le remettre!

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1

Mongo Bob · Message par **Mongo Bob** » 20 oct. 2008, 14:54

Breat a écrit :désolé mais tu te trompe je l'ai tapé moi même en suivant le tutoriel du site du zero

MB a écrit :(pardon si je me trompe là-dessus)

GAUNCE a écrit :Si tu pouvais nous enlever, dans ta signature, ton bandeau clignotant

je les vois plus

http://extensions.geckozone.org/AdblockPlus/

Invité · Message par **Invité** » 21 oct. 2008, 11:49

Merci Breat de l'avoir enlevé...
Bob, j'ai Adblock plus, mais je trouve mieux pour lui et pour nous qu'il l'ai fait...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Geckozone

Interface KompoZer

Qui est en ligne ?