18041 sujets

Questions générales et questions de débutants

[résolu] Je me présente et j'expose mon pb !!!

Bonjour,

Tout nouveau cela fait longtemps que je rumine la création de mon site... je me suis intéressé au HTML en prenant quelques cours virtuels en ligne ainsi qu'au CSS. D'originaire d'Alsace, je compte bien perséverer dans la voie du langage en me perfectionnant dans le pHp et le javascript.... mais avant toute chose je vais me faire la main sur mon propre site en le remaniant de plus en plus et ainsi l'améliorer au max.
Voilà à part cela j'ai 39 ans, marié et 2 enfants. Je salue maintenant tous les anciens et les nouveaux à venir sur le site, qui est une mine d'informations...

Passons maintenant à mon pb.
Pour faire mon site j'utilise Dreamweaver... une manière évidente de faire le template est d'utiliser les calques... ainsi c'est très visible...
J'ai donc commencé comme cela avec les calques....J'ai également choisi cette méthode, car j'ai pu lire que l'on pouvait créer avec les calques une manière de faire des menus déroulants (un de mes buts... plus tard, à partir de cet ébauche de site que je construis)

Mon site comporte une en-tete, 1 menu, un corps central et un pied de page... le tout est englobé par un calque que j'ai appelé page.
Pour tout centrer j'ai eu un peu de mal, mais j'y suis arrivé bien que le calque "page" ne veut pas se caler tout en haut de la page.... il me laisse un espace d'une dizaine de pixel !

Mon souci majeur, et je viens d'y passer 2 journées.... c'est la création de mon menu....un menu horizontal, rien de compliqué comportant 7 cases cliquables que je veux alignées les unes après les autres de manière à ce qu'elles soient de même taille toutes ! Le texte je le veux centré !
Je n'ai pas encore trouvé la manière d'opérer, étant passé par un float left, un display inline.... etc... bref
Je ne suis arrivé à les mettre en place qu'en bidouillant les positions à tort et à travers sans aucune logique (pour moi).... d'autre part on se perd vite entre les positions absolues, relatives, fixed... J'ai beau lire un tuto.... c'est souvent pas clair !
Alors voilà je vous balance le code... je serais heureux si vous pouviez me donner un coup de pouce...
Merci d'avance...J'ai remis le code de début (sans tout mes bidouillages...) pour partir sur de bonnes bases...


_________________________________________________________________

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La galerie de Pascal</title>
<style type="text/css">
<!--
-->
</style>
<link href="Styles/style_index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
  <div id="centre"></div>
  <div id="pied_de_page"></div>
  <div id="menu">
    <ul>
      <li><a href="index.html">Acceuil</a></li>
      <li><a href="photo.html">Photos</a></li>
      <li><a href="video.html">Vidéos</a></li>
      <li><a href="livre_or.html">Livre d'Or</a></li>
      <li><a href="agenda.html">Agenda</a></li>
      <li><a href="liens.html">Liens</a></li>
      <li><a href="option.html">Options</a></li>
    
    </ul>
  </div>
  <div id="en_tete">En-tête</div>
</div>
</body>
</html>

_________________________________________________________________


@charset "utf-8";
/* CSS Document */

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
	background-color: #000;
}
#menu li {
	background-color: #6FF;
	float: left;
	display: inline;
	



}
#menu ul li a {
	background-color: #36F;
}
#en_tete {
	position:absolute;
	width:760px;
	height:150px;
	z-index:6;
	background-color: #393;
	left: 20px;
	top: 20px;
	visibility: visible;
}
#page {
	position:relative;
	width:800px;
	height:1000px;
	z-index:2;
	background-color: #CCC;
	margin-right: auto;
	margin-left: auto;
	}
#menu {
	position:absolute;
	left:20px;
	top:170px;
	width:760px;
	height:60px;
	z-index:5;
	background-color: #FF0;
	padding: 0;
	list-style: 0;
	margin: 0;
	visibility: visible;

}
#centre {
	position:absolute;
	left:20px;
	top:250px;
	width:760px;
	height:680px;
	z-index:4;
	background-color: #F60;
	visibility: visible;
}
#pied_de_page {
	position:absolute;
	width:760px;
	height:50px;
	z-index:3;
	background-color: #996;
	left: 20px;
	top: 930px;
	visibility: visible;
}

Modifié par baup67 (23 Jan 2009 - 13:10)
a écrit :
D'originaire d'Alsace, je compte bien perséverer dans la voie du langage


L'alsacien ? Smiley cligne

Nan je blague.
Déjà il existe une façon conforme de présenter les codes [ code ] très utile pour mieux lire les sources.
Ensuite tu exagères un peu avec les positionnements (pratiquement besoin d'aucun dans ton cas...) et avec les visibilités qui sont définitivement calées sur visible par défaut.
Enfin il est préférable de tenir compte de la logique de flux : l'entête est en premier, la page après et le pied de page en dernier. Or dans ton code c'est à peu près inversé.

Remets déjà tout ça dans le bon sens et on pourra après se pencher sur la *présentation* des choses et l'aspect final qu'elles auront...
... alors voilà... j'ai remis un peu d'ordre....


-------- Déjà il existe une façon conforme de présenter les codes [ code ] -----

C'est à dire... mettre tout entre des crochets ?

Pour les positionnements, il faut bien que la superposition des parties collent, non ?
Je rappelle que "page" est un calque qui englobe l'ensemble de l'en-tete, menu, centre et pied de page...


Alors voilà le code :

______________________________________________________________

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La galerie de Pascal</title>
<style type="text/css">
<!--
-->
</style>
<link href="Styles/style_index.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <div id="page">

  <div id="en_tete">En-tête</div>

  <div id="menu">
    <ul>
      <li><a href="index.html">Acceuil</a></li>
      <li><a href="photo.html">Photos</a></li>
      <li><a href="video.html">Vidéos</a></li>
      <li><a href="livre_or.html">Livre d'Or</a></li>
      <li><a href="agenda.html">Agenda</a></li>
      <li><a href="liens.html">Liens</a></li>
      <li><a href="option.html">Options</a></li>
    </ul>
  </div>

  <div id="centre"></div>

  <div id="pied_de_page"></div>
    
</div>

</body>

</html>



______________________________________________________________


@charset "utf-8";
/* CSS Document */

body {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
	background-color: #000;
}

#page {
	position:relative;
	width:800px;
	height:1000px;
	z-index:2;
	background-color: #CCC;
	margin-right: auto;
	margin-left: auto;
	}
	
#en_tete {
	position:absolute;
	width:760px;
	height:150px;
	z-index:6;
	background-color: #393;
	left: 20px;
	top: 20px;	
	}

#menu {
	position:absolute;
	left:20px;
	top:170px;
	width:760px;
	height:60px;
	z-index:5;
	background-color: #FF0;
	
}

#menu li {
	background-color: #6FF;
	float: left;
	display: inline;
	
	}
	
#menu ul li a {
	background-color: #36F;
}



#centre {
	position:absolute;
	left:20px;
	top:250px;
	width:760px;
	height:680px;
	z-index:4;
	background-color: #F60;
	
}
#pied_de_page {
	position:absolute;
	width:760px;
	height:50px;
	z-index:3;
	background-color: #996;
	left: 20px;
	top: 930px;
	
}
_____________________________________________________________


En espérant que cette fois ci c'est bon... soyez indulgent... svp
Modifié par 6l20 (22 Jan 2009 - 10:47)
Hello baup67 et bienvenue parmi nous Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation Smiley smile
Bonjour et merci pour les infos Heyoan,

Je vais faire de mon mieux.

Alors je remets mon code :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>La galerie de Pascal</title>
<style type="text/css">
<!--
-->
</style>
<link href="Styles/style_index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page">

<div id="en_tete">En-tête</div>

<div id="menu">
<ul>
<li><a href="index.html">Acceuil</a></li>
<li><a href="photo.html">Photos</a></li>
<li><a href="video.html">Vidéos</a></li>
<li><a href="livre_or.html">Livre d'Or</a></li>
<li><a href="agenda.html">Agenda</a></li>
<li><a href="liens.html">Liens</a></li>
<li><a href="option.html">Options</a></li>
</ul>
</div>

<div id="centre"></div>

<div id="pied_de_page"></div>

</div>

</body>

</html>


@charset "utf-8";
/* CSS Document */

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: #000;
}

#page {
position:relative;
width:800px;
height:1000px;
z-index:2;
background-color: #CCC;
margin-right: auto;
margin-left: auto;
}

#en_tete {
position:absolute;
width:760px;
height:150px;
z-index:6;
background-color: #393;
left: 20px;
top: 20px;
}

#menu {
position:absolute;
left:20px;
top:170px;
width:760px;
height:60px;
z-index:5;
background-color: #FF0;

}

#menu li {
background-color: #6FF;
float: left;
display: inline;

}

#menu ul li a {
background-color: #36F;
}



#centre {
position:absolute;
left:20px;
top:250px;
width:760px;
height:680px;
z-index:4;
background-color: #F60;

}
#pied_de_page {
position:absolute;
width:760px;
height:50px;
z-index:3;
background-color: #996;
left: 20px;
top: 930px;

}
Merci pour la mise en page (même si l'idéal aurait été d'éditer ton message plutôt que d'en recréer un Smiley cligne ).

Comme te le disait Arsene tu utilises la position: absolute; alors que rien ne le justifie et que cela pose des problèmes : par exemple si on augmente la taille du texte tout part en vrille. C'est une erreur courante lorsque l'on débute... et une erreur récurrente des versions de Dreamweaver (encore que je ne connaisse pas les plus récentes).

Si tu veux avoir la main je t'invite à préférer le mode code au mode création même si ce dernier est intéressant pour apprendre l'utilisation des balises. Au passage le terme de calque propre à DW est incorrect : lire Quelle est la différence entre un DIV et un "calque".

Pour en revenir au positionnement et à la notion de flux je t'invite à lire : Comment positionner les éléments en CSS.

Pour ce qui est des menus plusieurs tutos en parlent.

Lorsque tu auras digéré tout ça et si tu as encore des questions n'hésite pas à repasser. Smiley smile
Re,


Ca y est j'ai tout lu et j'ai appliqué !
Que du bonheur... tout fonctionne parfaitement.... et en plus dans un style totalement épuré.... comme quoi il n'y a que le code et rien que le code....

Par contre j'aimerai connaître une autre solution....Comment fait-on pour ne recharger qu'un conteneur au lieu de la page toute entière... c'est ce que j'aimerais faire pour mon site, en l'occurence ne recharger que la partie centrale et laisser ainsi en place l'en-tete, le menu et le pied de page...

J'avais crû comprendre qu'il fallait utiliser les inex-z.... mais maintenant que j'ai supprimé tout le bidouillage autour !!!!

Merci d'avance pour vos réponses et surtout merci de m'avoir indiqué le bon chemin pour le placement des DIV et du MENU.
baup67 a écrit :

Ca y est j'ai tout lu et j'ai appliqué !
Que du bonheur... tout fonctionne parfaitement.... et en plus dans un style totalement épuré.... comme quoi il n'y a que le code et rien que le code....
Bravo. Smiley smile

baup67 a écrit :

J'avais crû comprendre qu'il fallait utiliser les inex-z....
Je suppose que tu veux parler de z-index... mais ça n'a rien à voir (cf. la FAQ pour plus d'infos).

baup67 a écrit :

Par contre j'aimerai connaître une autre solution....Comment fait-on pour ne recharger qu'un conteneur au lieu de la page toute entière... c'est ce que j'aimerais faire pour mon site, en l'occurence ne recharger que la partie centrale et laisser ainsi en place l'en-tete, le menu et le pied de page...
En fait il n'y a rien de spécial à faire si ce n'est placer les éléments fixes au même endroit dans chacune de tes pages (le principe est exactement le même pour un site dynamique). Comme tout ce qui est fixe est dans le cache du navigateur cela "donne l'impression" que seul le contenu central a changé.

PS : à vrai dire il existe une solution qui fait exactement cela et c'est Ajax mais cela sert aux applications en ligne (je te laisse regarder sur Google pour plus d'infos).
Ok, merci pour la réponse....
Je vais donc faire ainsi...
En attendant, je vais bosser sur mon site... le pauffiner....
Et à la prochaine interrogation, je frapperais à la porte...

Encore merci
Sujet clos
Aller à