Page 1 sur 1
Bloc CSS positions [résolu]
Publié : 16 déc. 2010, 14:25
par Raimon
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
Re: Bloc CSS positions
Publié : 16 déc. 2010, 15:12
par chinon37
As tu essayer de mettre pour le bloc le plus haut une marge supérieure à 0px?
Re: Bloc CSS positions
Publié : 16 déc. 2010, 15:27
par Raimon
oui et ça fonctionne j'ai mis un wrapper aussi peut être que c'est la cause?
Re: Bloc CSS positions
Publié : 16 déc. 2010, 16:02
par chinon37
wrapper?
On peut voir le code de la page?
Re: Bloc CSS positions
Publié : 16 déc. 2010, 16:04
par Raimon
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">
<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 <a style="font-weight: normal;"
href="mailto:*************************">contact
webmaster</a> <span style="font-weight: normal;">hébergeur :
tuxleg</span>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</body>
</html>
Re: Bloc CSS positions
Publié : 16 déc. 2010, 16:10
par chinon37
un simple 0px de marge haute pour body collera la page en haut, sans marge.
Re: Bloc CSS positions
Publié : 16 déc. 2010, 16:20
par Raimon
merci bcp ça marche
Re: Bloc CSS positions (résolu en fait pas complètement)
Publié : 16 déc. 2010, 16:54
par Raimon
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?
Re: Bloc CSS positions (résolu en fait pas complètement)
Publié : 16 déc. 2010, 17:04
par chinon37
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.
Re: Bloc CSS positions (résolu en fait pas complètement)
Publié : 17 déc. 2010, 15:19
par Raimon
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"> 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 <a style="font-weight: normal;"
href="mailto:raimongaffier@gmail.com">contact
webmaster</a> <span style="font-weight: normal;">hébergeur :
tuxleg</span>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</body>
</html>
</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>
Re: Bloc CSS positions (résolu en fait pas complètement)
Publié : 20 déc. 2010, 04:51
par Raimon
yep, en jouant avec les marges ça à marché,
Merci bcp
Re: Bloc CSS positions [résolu]
Publié : 20 déc. 2010, 09:38
par chinon37
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.