Titre: probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 00:54:32
Bonjour,
Etant débutant dans le monde du php, je vous explique mon problème qui a mon avis est bête comme chou.
J'ai créé une page index.php et un header.html. Le probleme est qu'entre mon header et le contenu j'ai un espace et je ne vois pas comment l'enlever. Pourquoi? me direz vous. Tout simplement parce que j'ai une couleur qui va de la barre de menu à mon footer. Or la j'ai un espace entre, comme sur l'image:
[url=http://img695.imageshack.us/i/sanstitrefhy.jpg/]
Uploaded with ImageShack.us (http://imageshack.us)
Je peux fournir mon code si cela peut aider.
En remerciant que vous aider un newbie :(
|
Titre: Re:probleme barre sous header
Posté par: Ether Création le le 12-02-2011 a 08:10:32
Bonjour,
Le plus simple pour vous venir en aide serez que vous nous envoyé votre page intégré + votre code.
Cordialement
Arthur |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 13:26:16
la page : http://www.dba-prod.com/index.php.
Le code du header.html :
<div id="recherche">
<table width="984" border="0">
<tr>
<td> </td>
<td width="139px" height="29px"> </td>
<td width="24px" height="29px"> </td>
</tr>
</table>
</div>
<div id="bandeau"></div>
<div id="menu">
<a href="index.html"><div class="menu accueil-in"></div></a>
<a href="lasociete.html"><div class="menu societe"></div></a>
<a href="prestations.html"><div class="menu prestations"></div></a>
<a href="podcast.html"><div class="menu podcast"></div></a>
<a href="livredor.html"><div class="menu livredor"></div></a>
<a href="contact.php"><div class="menu contact"></div></a>
<a href="mentionslegales.html"><div class="menu mentionslegales"></div></a>
<a href="partenaires.html"><div class="menu partenaires"></div></a>
</div>
<div id="ligne"></div>
----
la page index.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DBA PRODUCTION FILMS</title>
<link rel="SHORTCUT ICON" href="http://dba-prod.com/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="shortcut icon" href="favicon.ico" />
<link href="style-site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.featureList-1.0.0.js"></script>
<div id="header">
<div id="entete">
<?php include('header.html'); ?>
</div>
</div>
</head>
<body>
<style type="text/css">
h3 {
margin: 0;
padding: 7px 0 0 0;
font-size: 16px;
text-transform: uppercase;
}
div#feature_list {
width: 955px;
height: 240px;
overflow: hidden;
position: relative;
}
div#feature_list ul {
position: absolute;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}
ul#tabs {
left: 0;
z-index: 2;
width: 320px;
}
ul#tabs li {
font-size: 12px;
font-family: Arial;
}
ul#tabs li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}
ul#tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}
ul#tabs li a:hover {
text-decoration: underline;
}
ul#tabs li a.current {
background: url('jquery/feature-tab-current.png');
color: #FFF;
}
ul#tabs li a.current:hover {
text-decoration: none;
cursor: pointer;
}
ul#output {
right: 0;
width: 646px;
height: 240px;
position: relative;
}
ul#output li {
position: absolute;
width: 646px;
height: 240px;
}
ul#output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}
ul#output li a:hover {
background: #29aac9;
}
</style>
<script language="javascript">
$(document).ready(function() {
$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);
/*
// Alternative
$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});
*/
});
</script>
<div id="page">
<div id="jquery">
<div id="feature_list">
<ul id="tabs">
<li>
<a href="javascript:;">
<img src="jquery/services.png" />
<h3>Podcast</h3>
<span>Comment créer une arche à ballons</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="jquery/programming.png" />
<h3>cinema</h3>
<span>Programme de février 2011</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="jquery/applications.png" />
<h3>facebook</h3>
<span>Pourquoi facebook vaut cher?</span>
</a>
</li>
</ul>
<ul id="output">
<li>
<img src="jquery/sample1.jpg" />
<a href="#">Découvrez la vidéo</a>
</li>
<li>
<img src="jquery/sample2.jpg" />
<a href="#">voir le programme</a>
</li>
<li>
<img src="jquery/sample3.jpg" />
<a href="#">lire l'article</a>
</li>
</ul>
</div>
</div>
<div id="menu_carre">
<table width="984" border="0">
<tr>
<td colspan="9" height="18px"></td>
</tr>
<tr>
<td> </td>
<td ><img src="images/carre_1.png" width="228" height="147" /></td>
<td> </td>
<td><img src="images/carre_2.png" width="228" height="147" /></td>
<td> </td>
<td><img src="images/carre_3.png" width="228" height="147" /></td>
<td> </td>
<td><img src="images/carre_4.png" width="227" height="147" /></td>
<td> </td>
</tr>
<tr>
<td colspan="9" height="44px"></td>
</table>
</div>
<div id="pied">Content for id "pied" Goes Here</div>
Content for id "page" Goes Here</div>
</body>
</html>
|
Titre: Re:probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 13:26:35
le stule-site.css :
#search {
background-image:url(images/bg_head.png);
background-repeat:repeat-x;
}
#recherche {
font-family: "Segoe UI";
background-image: url(images/bg_head.png);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
height: 33px;
}
#bandeau {
background-image: url(images/banniere_logo.png);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
height: 139px;
width: 984px;
}
#page {
background-color: #FFF;
background-image: url(images/bg.jpg);
background-repeat: repeat;
padding: 0px;
width: 984px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-color: #FFF;
background-image: url(images/bg.jpg);
background-repeat: repeat;
padding: 0px;
width: 984px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#titre{
margin-top: 10px;
}
#menu_carre {
height: 165px;
width: 984px;
background-color: #E2E2E2;
}
#menu {
background-color: #E2E2E2;
height: 38px;
width: 984px;
}
#jquery {
height: 240px;
width: 955px;
margin-top: 19px;
background-color: #E2E2E2;
margin-right: 14.5px;
margin-left: 14.5px;
background-image: url(images/fond_jquery.png);
background-repeat: repeat;
}
body
{
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
background-color:#f2f2f2;
width:984px;
margin:auto;
margin-top:25px;
}
/* Barre de menu */
.menu
{
width:98px;
height:38px;
display:inline-block;
background-image:url(images/menu.png);
background-repeat: no-repeat;
margin-right:-4px;
}
.accueil {width: 98px; background-position: 0 top;}
.societe {width: 108px; background-position: -98px top;}
.prestations {width: 146px; background-position: -206px top;}
.podcast {width: 97px; background-position: -352px top;}
.livredor {width: 105px; background-position: -449px top;}
.contact {width: 110px; background-position: -554px top;}
.mentionslegales {width: 157px; background-position: -664px top;}
.partenaires {width: 162px; background-position: -821px top;}
.accueil:hover {width: 98px; background-position: 0 -40px;}
.societe:hover {width: 108px; background-position: -98px -40px;}
.prestations:hover {width: 146px; background-position: -206px -40px;}
.podcast:hover {width: 97px; background-position: -352px -40px;}
.livredor:hover {width: 105px; background-position: -449px -40px;}
.contact:hover {width: 110px; background-position: -554px -40px;}
.mentionslegales:hover {width: 157px; background-position: -664px -40px;}
.partenaires:hover {width: 162px; background-position: -821px -40px;}
.accueil-in {width: 98px; background-position: 0 -80px;}
.societe-in {width: 108px; background-position: -98px -80px;}
.prestations-in {width: 146px; background-position: -206px -80px;}
.podcast-in {width: 97px; background-position: -352px -80px;}
.livredor-in {width: 105px; background-position: -449px -80px;}
.contact-in {width: 110px; background-position: -554px -80px;}
.mentionslegales-in {width: 157px; background-position: -664px -80px;}
.partenaires-in {width: 162px; background-position: -821px -80px;}
#formulaire {
font-family: "Segoe UI";
font-size: 12px;
}
#main-container{
width:400px;
margin:30px auto;
}
td{
white-space:nowrap;
}
a, a:visited {
color:#00BBFF;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
h1{
color:#777777;
font-size:22px;
font-weight:normal;
text-transform:uppercase;
margin-bottom:5px;
}
h2{
font-weight:normal;
font-size:10px;
text-transform:uppercase;
color:#aaaaaa;
margin-bottom:15px;
border-bottom:1px solid #eeeeee;
margin-bottom:15px;
padding-bottom:10px;
}
label{
text-transform:uppercase;
font-size:10px;
font-family:Tahoma,Arial,Sans-serif;
}
textarea{
color:#404040;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
td > button{
text-indent:8px;
}
.error{
background-color:#AB0000;
color:white;
font-size:10px;
font-weight:bold;
margin-top:10px;
padding:10px;
text-transform:uppercase;
width:240px;
}
#loading{
position:relative;
bottom:9px;
visibility:hidden;
}
.clear{
clear:both;
}
#form-container{
background-color:#f5f5f5;
padding:15px;
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}
#adresse{
width:800px;
margin:30px auto;
}
#adressepostale{
background-color:#f5f5f5;
padding:15px;
-moz-border-radius:12px;
-khtml-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius:12px;
}
#pied {
background-image: url(images/bg_foot.png);
height: 184px;
width: 962px;
background-repeat: no-repeat;
margin-top: 43px;
margin-right: 11px;
margin-bottom: 14px;
margin-left: 11px;
padding: 0px;
}
merci beaucoup de m'aider |
Titre: Re:probleme barre sous header
Posté par: Ether Création le le 12-02-2011 a 14:19:43
Bonjour,
Alors tout d'abord ca :
<div id="header">
<div id="entete">
<?php include('header.html'); ?>
</div>
</div>
Il faut le mettre juste après le <body> et non pas dans le head.
Ensuite pour le soucis de marge, c'est dans le css voici l'endroit
Ligne 63 dans votre fichier style-site.css ou #jquery
Il faut enlever le margin-top.
Cordialement
Arthur |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 19:42:38
| merci beaucoup, mais je me suis mal exprimé. Le but est d'avoir la meme page que http://dba-prod.com/index.html. En en supprimant le margin top, effectivement la page se colle bien au menu, sauf qu'à la base, la ligne blanche est sencé etre coloré en gris, comme le fond gauche droite du site. désolé encore :'( |
Titre: Re:probleme barre sous header
Posté par: Ether Création le le 12-02-2011 a 19:51:54
| Dans ce cas remplacer le margin-top, par un padding-top ! |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 19:53:50
| je sais que je suis chiant, sur les cotés effectivement c'est devenu gris, mais sur le jquery ca reste blanc. Mystere et boule de gum :s |
Titre: Re:probleme barre sous header
Posté par: Ether Création le le 12-02-2011 a 19:55:08
oui a cause du background.
Donc la solution est de créer un div intermédiaire! |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 19:59:56
oui c'est ce que je viens de me dire, que j'avais pas mis de blanc a part en fond du jquery.
Merci beaucoup a toi de prendre le temps d'aider les nuls comme moi ::)
Merci :D |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 12-02-2011 a 21:23:54
J'aurais voulu te demander, a moins que cela t'embete, comment en php, je peux faire cela : utiliser le meme header pour toutes mes pages (jusque la pas compliqué^^) mais faire mon onmouseover et garder selectionner la deuxieme image quand je suis sur la page (en occurence, garder le mot "accueil" selectionner sur la page accueil, prestation, quand je suis sur la page prestation)...
|
Titre: Re:probleme barre sous header
Posté par: Ether Création le le 14-02-2011 a 08:46:29
En php tu créer une variable comme = $menu ou tu met avant d'appeler ton include.
Ensuite dans ton include, tu fais des conditions en fonction de ton menu. |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 14-02-2011 a 11:24:04
| Je suis désolé, mais je ne comprends pas trop. Enfin j'imagine qu'il faut utiliser "if" et tout, mais comme dit précédemment je suis novice. Je sais que je t'embete beaucoup |
Titre: Re:probleme barre sous header
Posté par: Ether Création le le 14-02-2011 a 11:28:00
| En effet le plus simple serait que j'ai accès à votre code (ftp) pour que je puisse vous faire la modifications ;) |
Titre: Re:probleme barre sous header
Posté par: damb341 le le 14-02-2011 a 11:46:22
| je t'ai envoyé tout ca en privé. En tout cas, merci beaucoup de ton aide :). J'imagine le temps que cela représente |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|