Espaces entre les blocs

Ecam · Message par **Ecam** » 23 juil. 2012, 19:10

Bonsoir,

Ma page web m'insère des sortes d'interlignes entre les blocs, voici la composition de la page :

-Entete/menu (inséré avec php include)

- Corps de texte

- Pieds de page (inséré avec php include)

Et entre ces blocs il y a un espace que je n'arrive pas à supprimer. Pourtant je n'ai mis aucune marge ou bordure. J'ai mis "margin:auto" pour centrer le bloc à l'horizontal mais en le supprimant le bloc se décale à gauche mais ne supprime pas l'espace.

Voici l'adresse du site pour un exemple concret :

http://ecam.perso.sfr.fr/

Merci

Ecam

Message par **Ymai** » 23 juil. 2012, 21:34

Bonjour
La suppression des paragraphes vides ne résoudrait-elle pas les choses?
Sous l'entête

Code : Tout sélectionner

<p align="center">&nbsp;</p>
  <p>&nbsp;</p>

et sous le corps de texte

Code : Tout sélectionner

<p align="left">&nbsp;</p>

Puis-je me permettre une petite remarque bonus? Le bloc "pied de page" n'aime pas trop son nom contenant des espaces.
Du coup, le code HTML devient:

Code : Tout sélectionner

<div align="center" id="pieds" de="de" page="page"">

Pas glop...

Ecam · Message par **Ecam** » 23 juil. 2012, 23:00

Pour le pieds de page, j'ai mis "piedpage" mais merci du conseil

Pour les espaces, j'ai sélectionné les balises <P> et je leur ai rajouté dans le css "padding: 0 ;" ce qui a arrangé les choses.
Mais c'etait bien histoire de paragraphe

Merci beaucoup

Fréd71 · Message par **Fréd71** » 03 sept. 2012, 12:05

Bonjour à tous

,

Je profite de ce topic pour vous expliquez mon problème car je pense qu'il est similaire au sujet.

Mes blocs ont un espace entre le bas de chacun d'eux et le suivant, pourtant en lisant ce topic j'ai vérifié, je n'ai pas de ligne vide inutile.

Pour l'instant je m’entraîne, donc mon code est encore assez rudimentaire. Si quelqu'un pouvait m'aider ce serait vraiment sympa.

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Page d'accueil Kompozer</title>
<style type="text/css">
body {
margin: 0px auto;
padding: 0;
background: yellow url(images/kompozer2.png) no-repeat fixed center;
font-family: Arial,Helvetica,sans-serif;
color: black;
width: 840px;
}
#entete {
background-color: #c06000;
margin-top: 0px;
margin-bottom: 0px;
}
#corps {
background-color: white;
opacity: 0.8;
}
#piedpage {
background-color: #c06000;
color: black;
text-align: center;
font-family: Arial,Helvetica,sans-serif; } #menuh {
padding-left: 0%;
margin-top: auto;
}
#menuli {
border: 1px solid black;
text-align: center;
background-color: #c06000;
float: left;
width: 166px;
margin-right: 0px;
margin-left: 0px;
list-style-type: none;
}

</style>
</head>
<body>
<div style="text-align: center;" id="entete"> <h1>Kompozer</h1> <h2>La création de site facile<br> </h2> <br> </div> <div id="menu"> <ul id="menuh"> <li id="menuli"><a href="index.html">Accueil</a></li>
<li id="menuli"><a href="service.html">Service</a></li>
<li id="menuli"><a href="produit.html">Produit</a></li>
<li id="menuli"><a href="entreprise.html">Entreprise</a></li>
<li id="menuli"><a href="contact.html">Contact</a><br>
</li>
</ul>
</div>
<div id="corps">Corps<br>
<br>
<br>
</div>
<div id="piedpage">Pied de page<br>
</div>
</body>
</html>

Merci,
Fred

Fred71 · Message par **Fred71** » 03 sept. 2012, 13:27

Je viens de reécrire le code dans dreamweaver et l'affichage est tout aussi moche

Donc j'en conclu que j'ai une erreur dans le code. Pourtant pour coller les blocs le code est margin : opx ou margin-top : opx ?

C'est simple le css !!

Message par **chinon37** » 03 sept. 2012, 14:20

Bonjour,

je n'ai pas trop le temps de regarder ton code, mais il y a des erreurs "flagrantes":
- un id (#) ne peut être utilisé qu'une fois par page, or, #menuli est utilisé plusieurs fois dans la page exemple (une fois par item). A la place d'un id, il eut été plus judicieux d'utiliser une classe (.menuli).
- un id #menu est présent dans la page alors qu'il n'existe pas dans la feuille de style. ça n'a pas de rai conséquence, mais ça alourdit le code inutilement.
- le flottant sur menuli le fait passer derrière le div corps et provoque l'espacement avec l'entête.
- Il serait sans doute plus judicieux de faire un affichage en ligne des éléments de la liste plutôt que d'utiliser le flottant, en ajustant la taille des éléments <li>

En espérant t'avoir un peu aidé. Si j'ai plus de temps, j'y reviendrais...

Fred71 · Message par **Fred71** » 03 sept. 2012, 15:26

Salut Chinon 37,

En effet c'est bien parce qu'il est flottant que mon menu à placé un espace entre lui et le conteneur précédent. Bien vu merci

Merci pour ton aide !

Oui j'ai utilisé une fois par item #menuli, sa ne fonctionnait pas avec une class. Je vais reprendre ce point.

Merci beaucoup,

Fredéric

Geckozone

Espaces entre les blocs

Espaces entre les blocs

Re: Espaces entre les blocs

Re: Espaces entre les blocs

Re: Espaces entre les blocs

Re: Espaces entre les blocs

Re: Espaces entre les blocs

Re: Espaces entre les blocs

Qui est en ligne ?