Bloc CSS positions [résolu]

Raimon · Message par **Raimon** » 16 déc. 2010, 14:25

Bonjour,
j'ai réalisé un modèle de page en CSS et j'ai un petit problème sur les blocs.
Je n'arrive pas à coller le bloc "En-tête" au sommet de la page, il reste 2-3 pixels de libres. Comment coller le bloc en tête (qui est une photo/bandeau) au sommet de ma page?
Le menu est fait sous forme de liste (en ligne horizontale) le problème c'est que comme c'est une liste, une marge supérieure et inférieure sont ajoutées, comment les supprimer?
J'aimerais que le style que j'ai crée sur cette page modèle se reproduise sur toutes les autres pages, pouvez vous m'aider?
Merci

Message par **chinon37** » 16 déc. 2010, 15:12

As tu essayer de mettre pour le bloc le plus haut une marge supérieure à 0px?

Raimon · Message par **Raimon** » 16 déc. 2010, 15:27

oui et ça fonctionne j'ai mis un wrapper aussi peut être que c'est la cause?

Message par **chinon37** » 16 déc. 2010, 16:02

wrapper?
On peut voir le code de la page?

Raimon · Message par **Raimon** » 16 déc. 2010, 16:04

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>modele</title>
<style type="text/css">
#menu ul {
padding-bottom: 0px;
}
#menu li {
border: none;
text-transform: none;
font-weight: bold;
margin-right: 0px;
text-decoration: none;
display: inline;
font-style: normal;
color: white;
font-family: Ubuntu;
margin-left: 0px;
font-size: 4mm;
list-style-type: none;
text-align: center;
left: 0px;
}
#wrapper {
padding-top: 0px;
background-color: black;
width: 720px;
margin-right: auto;
top: 0px;
margin-left: auto;
margin-top: 0px;
}
#menu {
font-weight: bold;
text-align: center;
}
body {
background-color: black;
font-family: Helvetica;
font-size: 1em;
color: white;
text-align: justify;
text-decoration: none;
}
#entete {
padding-top: 0px;
margin-bottom: 0px;
margin-top: 0px;
top: 0px;
text-align: center;
}
#menu a:visited {
}
#menu a:hover {
border-top: 1px solid red;
border-bottom: 1px solid red;
color: red;
}
a:visited {
color: red;
}
#menu a {
font-family: ubuntu;
font-weight: bold;
text-align: center;
color: white;
text-decoration: none;
}
#langues {
color: #fbfbe9;
font-family: Helvetica;
font-size: 3mm;
text-align: center;
}
h2 {
text-transform: capitalize;
text-decoration: none;
font-family: helvetica;
text-align: left;
padding-top: 0mm;
line-height: 17px;
margin-bottom: 8px;
font-weight: bolder;
color: #ffffef;
padding-right: 0mm;
font-style: normal;
font-size: 25px;
padding-bottom: 1mm;
margin-top: 0px;
}
#pied {
padding-bottom: 0px;
margin-top: 0px;
text-align: center;
color: #9b9b9b;
font-size: 8pt;
margin-bottom: 1px;
font-family: Ubuntu;
padding-top: 0px;
font-weight: normal;
}
#pied a:hover {
margin-top: 20px;
margin-bottom: 1px;
color: #fff8e1;
padding-top: 0px;
font-family: Ubuntu;
text-align: center;
padding-bottom: 0px;
font-size: 9pt;
text-decoration: underline;
}
#pied a {
padding-bottom: 0px;
font-family: Ubuntu;
color: #c5c0ae;
margin-top: 20px;
font-size: 9pt;
text-align: center;
padding-top: 0px;
margin-bottom: 1px;
text-decoration: underline;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="entete"><img src="images/voyage_en_palestine.jpg"
alt="voyage_en_palestine.jpg"><br>
</div>
<div id="menu"><?php include ("menuinc.html");?><br>
</div>
<div id="texte">
<div id="langues">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;<br>
</div>
<iframe src="http://www.openfilm.com/v/27481?c1=0x767676&c2=0x0F0F0F"
frameborder="0" height="430" width="720"></iframe><br>
<br>
<br>
N'oubliez pas de laisser un commentaire dans la rubrique "Réagir" !<br>
<br>
Pour obtenir un DVD, ou si vous souhaitez diffuser le film dans une
meilleure qualité, n'hésitez pas à nous contacter.<br>
<br>
Le film sera aussi disponible en téléchargement sur ce site.<br>
<br>
<h2>
Synopsis</h2>
Ce film est un témoignage de notre voyage en Palestine en août 2009.
Sur place, nous avons pu découvrir une réalité du conflit
israélo-palestinien bien différente des préjugés créés par les médias.
Tout en essayant de rester le plus objectif possible, nous présentons,
à travers ce documentaire, notre cheminement et nos découvertes au cœur
de la culture palestinienne. Nous espérons vous transmettre l'envie de
découvrir ce peuple si accueillant et cette terre chargée d'histoire <br>
<br>
<br>
<h2>
Intentions</h2>
En cours de rédaction...<br>
<br>
<br>
<br>
</div>
<div id="pied"><img src="images/bandejaune1px.jpg"
alt="bandejaune1px.jpg"><br>
copyright SGDF2009&nbsp; <a style="font-weight: normal;"
href="mailto:*************************">contact
webmaster</a>&nbsp; <span style="font-weight: normal;">hébergeur :
tuxleg</span>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</body>
</html>

Message par **chinon37** » 16 déc. 2010, 16:10

un simple 0px de marge haute pour body collera la page en haut, sans marge.

Raimon · Message par **Raimon** » 16 déc. 2010, 16:20

merci bcp ça marche

Raimon · Message par **Raimon** » 16 déc. 2010, 16:54

Le menu est fait sous forme de liste (en ligne horizontale) le problème c'est que comme c'est une liste, une marge supérieure et inférieure sont ajoutées, comment les supprimer?

Message par **chinon37** » 16 déc. 2010, 17:04

2 choses peuvent jouer:
1- la taille des blocs ul ou li et leurs marges ou espacements
2- la hauteur de ligne et taille de la police (onglet texte de l'éditeur css)

Fais déjà des essais sur ces paramètres.

Raimon · Message par **Raimon** » 17 déc. 2010, 15:19

En fait je me rends compte que j'ai oublié de précisé que le menu est inséré via la fonction include.
Voici le code de ma page modèle avec tout les blocs css etc... :

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>modele</title>
<style type="text/css">
#menu ul {
padding-bottom: 0px;
}
#menu li {
border: none;
text-transform: none;
font-weight: bold;
margin-right: 0px;
text-decoration: none;
display: inline;
font-style: normal;
color: white;
font-family: Ubuntu;
margin-left: 0px;
font-size: 4mm;
list-style-type: none;
text-align: center;
left: 0px;
}
#wrapper {
padding-top: 0px;
background-color: black;
width: 720px;
margin-right: auto;
top: 0px;
margin-left: auto;
margin-top: 0px;
}
#menu {
font-weight: bold;
text-align: center;
}
body {
background-color: black;
font-family: Helvetica;
font-size: 1em;
color: white;
text-align: justify;
text-decoration: none;
margin-top: 0%;
}
#entete {
padding-top: 0px;
margin-bottom: 0px;
margin-top: 0px;
top: 0px;
text-align: center;
}
#menu a:visited {
}
#menu a:hover {
border-top: 1px solid red;
border-bottom: 1px solid red;
color: red;
}
a:visited {
color: red;
}
#menu a {
font-family: ubuntu;
font-weight: bold;
text-align: center;
color: white;
text-decoration: none;
}
#langues {
color: #fbfbe9;
font-family: Helvetica;
font-size: 3mm;
text-align: center;
}
h2 {
text-transform: capitalize;
text-decoration: none;
font-family: helvetica;
text-align: left;
padding-top: 0mm;
line-height: 17px;
margin-bottom: 8px;
font-weight: bolder;
color: #ffffef;
padding-right: 0mm;
font-style: normal;
font-size: 25px;
padding-bottom: 1mm;
margin-top: 0px;
}
#pied {
padding-bottom: 0px;
margin-top: 0px;
text-align: center;
color: #9b9b9b;
font-size: 8pt;
margin-bottom: 1px;
font-family: Ubuntu;
padding-top: 0px;
font-weight: normal;
}
#pied a:hover {
margin-top: 20px;
margin-bottom: 1px;
color: #fff8e1;
padding-top: 0px;
font-family: Ubuntu;
text-align: center;
padding-bottom: 0px;
font-size: 9pt;
text-decoration: underline;
}
#pied a {
padding-bottom: 0px;
font-family: Ubuntu;
color: #c5c0ae;
margin-top: 20px;
font-size: 9pt;
text-align: center;
padding-top: 0px;
margin-bottom: 1px;
text-decoration: underline;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="entete"><img src="images/voyage_en_palestine.jpg"
alt="voyage_en_palestine.jpg"><br>
</div>
<div id="menu"><?php include ("menuinc.html");?><br>
</div>
<div id="langues">&nbsp;&nbsp;&nbsp; français - english - esperanto<br>
</div>
<div id="texte">
<iframe src="http://www.openfilm.com/v/27481?c1=0x767676&c2=0x0F0F0F"
frameborder="0" height="430" width="720"></iframe>N'oubliez pas de
laisser un commentaire dans la rubrique "Réagir" !<br>
<br>
Pour obtenir un DVD, ou si vous souhaitez diffuser le film dans une
meilleure qualité, n'hésitez pas à nous contacter.<br>
<br>
Le film sera aussi disponible en téléchargement sur ce site.<br>
<br>
<h2>
Synopsis</h2>
Ce film est un témoignage de notre voyage en Palestine en août 2009.
Sur place, nous avons pu découvrir une réalité du conflit
israélo-palestinien bien différente des préjugés créés par les médias.
Tout en essayant de rester le plus objectif possible, nous présentons,
à travers ce documentaire, notre cheminement et nos découvertes au cœur
de la culture palestinienne. Nous espérons vous transmettre l'envie de
découvrir ce peuple si accueillant et cette terre chargée d'histoire <br>
<br>
<br>
<h2>
Intentions</h2>
En cours de rédaction...<br>
<br>
<br>
<br>
<br>
</div>
<div id="pied"><img src="images/bandejaune1px.jpg"
alt="bandejaune1px.jpg"><br>
copyright SGDF2009&nbsp; <a style="font-weight: normal;"
href="mailto:raimongaffier@gmail.com">contact
webmaster</a>&nbsp; <span style="font-weight: normal;">hébergeur :
tuxleg</span>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</body>
</html>

<div id="menu"><?php include ("menuinc.html");?><br>
</div>

et voici le code de ma page menuinc.html :

Code : Tout sélectionner

<html>
<head>
<meta id="_moz_html_fragment">
</head>
<body>
<ul id="menu">
<li><a href="index.html">Voir le film</a> <span
style="color: black; font-weight: normal;"><span style="color: red;">|</span></span>
<a href="index.html"><span style="color: red; font-weight: normal;"></span></a><a
href="index.html"><span style="font-weight: bold;"></span></a> <a
href="film.html">Synopsis<span
style="color: black; font-weight: normal;"><span style="color: red;"></span></span>
et intentions</a> <span style="color: black; font-weight: normal;"><span
style="color: red;">|</span></span> <a href="projet.html">Projet</a> <span
style="color: black; font-weight: normal;"><span style="color: red;">|</span></span>
<a href="Vosavis.html">Réagir</a> <span
style="color: black; font-weight: normal;"><span style="color: red;">|</span></span>
<a href="partenaires.html">Partenaires</a> <span
style="color: black; font-weight: normal;"><span style="color: red;">|</span></span>
<a href="credits.html">Crédits</a> <span
style="color: black; font-weight: normal;"><span style="color: red;">|</span></span>
<a href="contact.html">Contacts</a></li>
</ul>
<span style="color: black; font-weight: normal;"><span
style="color: red;"></span></span><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a><a href="index.html"><span
style="font-weight: bold;"></span></a>
<ul id="menu">
</ul>
</body>
</html>

Raimon · Message par **Raimon** » 20 déc. 2010, 04:51

yep, en jouant avec les marges ça à marché,
Merci bcp

Message par **chinon37** » 20 déc. 2010, 09:38

Pour info, le fichier inclus ne doit pas comporter d'entête html, de balises <head> ou <meta>. Il ne doit comporter que le code qui se trouverait dans la page html en lieu et place de cet include.

Geckozone

Bloc CSS positions [résolu]

Bloc CSS positions [résolu]

Re: Bloc CSS positions

Re: Bloc CSS positions

Re: Bloc CSS positions

Re: Bloc CSS positions

Re: Bloc CSS positions

Re: Bloc CSS positions

Re: Bloc CSS positions (résolu en fait pas complètement)

Re: Bloc CSS positions (résolu en fait pas complètement)

Re: Bloc CSS positions (résolu en fait pas complètement)

Re: Bloc CSS positions (résolu en fait pas complètement)

Re: Bloc CSS positions [résolu]

Qui est en ligne ?