Espace entre 2 « div »

Québec · Message par **Québec** » 13 déc. 2007, 23:04

C'était trop dur... je n'ai pu résister... J'ai décidé de modifier quelque peu mon site wouèbe!

J'ai créé un « div » pour l'ensemble de la page, de façon à spécifier d'emblée les éléments de texte (taille, police...). Ensuite, j'ai créé un autre « div » pour un entête qui va contenir une image de fond et un titre (h1). Juste en dessous, je suis parvenu à faire un menu de navigation avec effet de « rollover » (yesss! Il est chouette!!!).

Mais KomPoZer sépare les deux blocs démesurément. J'aimerais bien que mes deux « boîtes » se touchent de façon à ce que la barre de menu vienne souligner en quelque sorte l'entête (image de fond + h1). J'ai fait des essais dans ma feuille CSS (variation de marge...), rien à faire, KompoZer garde un vaste espace entre les deux boites. Que faire?

Aussi, sur FireFox, ma barre de navigation est un peu plus large que mon entête quand pourtant, sur Kompozer, tout est ok.

Là encore, ya un truc qui m'a échappé...

Merci.

R.

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 déc. 2007, 00:03

Si cela t'as échappé, nous on devrait pouvoir le voir dans ta page... encore faut-il que tu nous donnes son adresse ... ou à défaut son code, mais ce n'est pas le + pratique.
Prends pas froid!

Message par **Ymai** » 14 déc. 2007, 00:20

Bonjour
Ne serait-ce pas la même question que http://www.geckozone.org/forum/viewtopic.php?t=61239 ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Québec · Message par **Québec** » 14 déc. 2007, 04:30

Effectivement, c'est le même genre de problème que dans le lien que tu pointes. J'ai fouillé sur ma page et ma feuille css pour tenter de trouver une réponse équivalente, mais j'ai encore rien vu... J'ai tenté de changer la hauteur de la ligne; j'ai éliminé le «div» qui faisait toute la page; j'ai surveillé pour des « margin-top » et autre trucs qui fabriquent de l'espace...

Je viens de faire un essai avec iCab, et c'est la même chose: il y a toujours cet espace qui refuse de disparaître. J'ai ce vague sentiment que ce n'est pas grand chose, et qu'il me pend au bout du nez... saloperie!

Je n'ai pas tout changé mon site encore, seulement la page suivante:
http://www.rguertin.com/geographie.html

Et puis, le gris va bientôt être remplacé par une image...

Merci.

R. Depuis son Québec enterré sous la neige (et dire qu'ils veulent nous faire croire que le climat se réchauffe...)

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 14 déc. 2007, 07:33

Ton fichier css devrait débuter par :

Code : Tout sélectionner

/* Generated by KompoZer */
* {margin:0; padding:0;} // hack IE
body {
  font-family: Verdana;
  text-align: justify;
  font-size: small;
  margin-right: 1%;
}
#entete {
//  margin: 2%;  ligne à supprimer
  padding: 0;
  background-color: #999999;
}

Tu modifies le html comme suit:

Code : Tout sélectionner

 <body >
    <div id="entete">
      <h1>
        Géographie
      </h1>
    </div>
    <div id="navcontainer">
      <ul>
        <li>
          <a href="http://www.rguertin.com/index.html">accueil</a>

Cela devrait résoudre tes problèmes

Message par **chinon37** » 14 déc. 2007, 08:29

Québec a écrit :J'ai créé un « div » pour l'ensemble de la page, de façon à spécifier d'emblée les éléments de texte (taille, police...).

Inutile de créer un div.
Pour spécifier les styles applicables à la page entière, il suffit que tu crées une règle body, voire même html. cela créera un style qui sera automatiquement appliqué si aucun autre style ne vient le contredire en aval.

Québec · Message par **Québec** » 16 déc. 2007, 04:23

Merci. Tout baigne. Il reste quelques liens à faire fonctionner...

Ça tombe bien, parce que demain on nous annonce un autre 30cm de neige avec vents forts... On va rester bien au chaud demain!

R.

Message par **chinon37** » 16 déc. 2007, 09:47

Québec a écrit : Ça tombe bien, parce que demain on nous annonce un autre 30cm de neige avec vents forts... On va rester bien au chaud demain!

Quelques photos quand même?

Un petit détail qui m'ennuie sur ta nouvelle présentation (oui, je chipote, je chipote, pas taper)
Au niveau du bandeau d'en-tête, sur les écrans larges, on a un raccord à gauche: il s'agit de la répétition de l'image de fond. Et ça gène un peu l'esthétique de l'ensemble.
3 solutions peuvent pallier ce tout petit inconvénient:
- Faire une image de fond plus "panoramique" qui sera suffisamment large pour passer sur un maximum d'écrans. Mais sur les petits écrans, une partie de l'image ne sera pas visible.
- faire une image composée d'un certain nombre de petites images: la répétition choquera moins
- faire une entête à largeur fixe qui ne dépasse pas la taille maximum de l'image.

Québec · Message par **Québec** » 16 déc. 2007, 14:56

Merci de l'observation. Ya tellement de trucs à penser... quand c'est pas un bout de code, c'est la présentation selon différents formats (IE, iCab, largeur d'écran...).

Pour ceux et celles qui cherchent une façon facile de faire des menus, j'ai trouvé:

http://css.maxdesign.com.au/ (en englais cependant; ya peut-être un meilleur endroit qu'ici pour l'annoncer?).

Sur mon serveur, dans mes stats, j'ai remarqué une erreur «404» (ou un truc du genre) concernant un document nommé: « robots.txt ». Je n'ai pas un tel document sur mon site mais vraisemblablement les moteurs de recherche le cherche. Ça correspond à quoi?

R.

Message par **Ymai** » 16 déc. 2007, 15:31

Bonjour
Voici un peu de lecture: http://docs.abondance.com/robots.html

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.11) Gecko/20071204 Ubuntu/7.10 (gutsy) Firefox/2.0.0.11

Québec · Message par **Québec** » 23 déc. 2007, 16:34

Pour chinon37: tu voulais des photos de tempête? J'en ai mis en ligne: une de la tempête et une autre de l'après-tempête... Et je vais en ajouter une troisième dans la journée. Mais photographier une tempête c pas évident... surtout pour le matériel!!!

Il ne reste qu'à mettre une image d'entête plus large pour les écrans (qui sont de plus en plus large!).

Joyeux Noël!!!

R.

jpbardiau · Message par **jpbardiau** » 23 déc. 2007, 16:48

Québec a écrit :(en englais cependant; ya peut-être un meilleur endroit qu'ici pour l'annoncer?)

"englais" c'est du québécqois ? contraction de anglais et english

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9b2) Gecko/2007121016 Firefox/3.0b2

Geckozone

Espace entre 2 « div »

Espace entre 2 « div »

Neige

Qui est en ligne ?