Forum Clubic

[CSS/HTML/JS] Pb d'espace entre logo et menu

Bonjour à tous,

Voila j’ai inseré un menu javascript dans le header de mon site

voir ICI

mais j’ai un soucis d’affichage avec Internet explorer les sous menu

passe en dessous de la banniére , avec Firefox ca marche nikel.

Est ce quelqu’un peut me dire si cela viens de IE qui gere mal certaines

fonctions ou si cela viens du codage du script …

Merci de votre aide

Déjà tu a deux <html> <head> … c’est pas classe…
(mais ça viens pas de là)

sinon, comme ton layer contenant le menu est définis avant le layer contenant la bannière, il me semble normal qu’il soit en background…

essaye de le définir après ta bannière…

merci de ta réponse :slight_smile: je vais regarder de ce coté là alors

Alors pourquoi sous firefox il ne le met pas en background !!!

pourquoi IE oui et Firefox non !! là est ma vrai question

Merci de votre aide

Bon j’ai descendu le menu mais j’aimerai bien supprimer le blanc entre

le header et le menu si quelqu’un a une idée :slight_smile:

Voila le code qui affiche le header.php :



<?php
echo '
<html xmlns="http://www.w3.org/1999/xhtml?quot; xml:lang="fr" lang="fr">
<head>
</head>
<body>
<div id="page">
	<div id="top"><h1><a href="index.php"> </a></h1></div>
	<div id="main">
	<div id="sidebar">';

require ("http://elcheikh76.free.fr/modules/menu2/index.php");


echo '     
       <br>';


 $req_blocs = reqmysql("SELECT * FROM `modules` WHERE  `modules`.`afficher`='1' and `modules`.`type`='bloc' ORDER BY `modules`.`emplacement`, `modules`.`position` ASC");
 while ($result_blocs = mysql_fetch_object($req_blocs))
  {
  # En Quête de la requête
   $id_bloc=$result_blocs->id;

    require("modules/$result_blocs->module/bloc.php");

  }


echo '     
       </div>
  <div id="content">';
echo '     
       <br><br>';



?>

personne :frowning: meme pas barjy :slight_smile:

Tu as ça dans ton css

#menu{
        font-size: 1em;
	background: #000000 url('../img/menu_background.gif');
	background-repeat: repeat-x;
	width: 899px;
	height: 22px;
	margin: 0 auto;
        text-align: center;
        color: #64634B;
        font-weight:700;
        text-align: center;
}

Alors qu’il n’y a pas de <div id=“menu”> mais bien <div id=“menu1”>

(il me semble…)

Regarde déjà à ça non ? (peux tu éditer le titre du sujet en mettant [CSS/HTML/JS] devant stp :slight_smile: ).

Je suis ce post je te répondrai assez rapidement ce soir si je suis là :slight_smile:

mdr :MDR

Salut et tout d’abord merci de ta réponse .

Bon dans le code concerné header.php il n’y a rien qui concerne les div menu .

seulement div id="main" div id="sidebar" div id="page"


<?php
echo '
<html xmlns="http://www.w3.org/1999/xhtml?quot; xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Page-Enter" content="blendTrans(duration=2.0)" "Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Subject" content="'.htmlentities($nom_page).'" />
<meta name="Description" content="'.htmlentities($description).'" />
<meta name="Keywords" content="'.htmlentities($keywords).'" />
<meta name="revisit-after" content="1 days" />
<title>'.htmlentities($nom_page).' :: '.htmlentities($description).'</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 
<link rel="stylesheet" type="text/css" href="themes/'.$theme.'/style/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/modules/menu2/example1.css" />
</head>
<body>
<div id="page">
	<center><div id="top"><h1><a href="index.php"></a></h1></div></center>
	<div id="main">
	<div id="sidebar">';
require "http://elcheikh76.free.fr/modules/menu2/index.php";
echo '     
       <br>';


 $req_blocs = reqmysql("SELECT * FROM `modules` WHERE  `modules`.`afficher`='1' and `modules`.`type`='bloc' ORDER BY `modules`.`emplacement`, `modules`.`position` ASC");
 while ($result_blocs = mysql_fetch_object($req_blocs))
  {
  # En Quête de la requête
   $id_bloc=$result_blocs->id;

    require("modules/$result_blocs->module/bloc.php");

  }


echo '     
       </div>
  <div id="content">';
echo '     
       <br><br>';



?>


et le .css




/* Général
******************************************/
* { padding: 0; margin: 0; border: 0px none; }

body{
	padding: 0;
	margin: 0;
	background: #fff;
	text-align: center; font-style:normal;
	font-variant:normal;
	font-weight:normal;
        font-size: 0.7em;
        font-family:Tahoma, sans-serif;
}




/* Liens
******************************************/
a:link{color:#000; text-decoration: none; background:transparent;}
a:visited{color:#000; text-decoration: none; background:transparent;}
a:hover{color:#000; text-decoration: none; background:transparent;}
a img {border:none; text-decoration: none;}

/* Titres
******************************************/
h1, h2, h3, h4, h5{font-family: "Trebuchet MS", sans-serif;}
h1 a, h2 a, h3 a, h4 a, h5 a{text-decoration: none;}
h2{font-size: 1.2em; margin: 1em 0;}
h3{font-size: 1em; margin: 0.8em 0;}
h4{font-size: 1em; font-weight: normal}

/* Tableau
******************************************/
table { font-size: 1em; }
textarea { width:100%; }

/* Entete
******************************************/
#top{
	height: 150px;
	width: 100%;
	font-size: 1em;

}

#top h1{
	font-size: 1em;
	background: #000000 url('http://elcheikh76.free.fr/logo/');
	width: 899px;
	height: 150px;
	margin: 0 auto;
	position: relative;
}

#top h1 a{
	color: #d3e1f4;
	text-decoration: none;
	text-align: right;
	line-height: 93px;
        display: block;
	position: absolute;
	width: 300px;
	height: 150px;
	left: 0px;
	top: 0px;
}

/* Page
******************************************/
#page{
	text-align: left;
	background: #FFF;
	width: 937px;
        margin-left:auto;
	margin-right: auto;
        background-image:url(../img/fond.jpg);
}

#main	{
	height:100%;
	background-color: #FFF;
	margin-left:19px;
	margin-right:19px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
}


#date {
	font-size: 10px;
        color: #fff;
	background: transparent;
	text-align: center;
	margin: 0;
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: 300px;
}

#welcome_msg {
	width:160px;
        font-size: 10px;
        color: #777;
	background: transparent;
	text-align: right;
	margin: 0;
	position: absolute;
	top: 155px;
	left: 50%;
	margin-left: 280px;
}

#welcome_msg a{
	color: #777;
	background: transparent;
	text-decoration:none;
}

#welcome_msg a:hover{
	color: #F17F29;
	background: transparent;
}

/* menu
******************************************/
#menu{
        font-size: 1em;
	background: #000000 url('../img/menu_background.gif');
	background-repeat: repeat-x;
	width: 899px;
	height: 22px;
	margin: 0 auto;
        text-align: center;
        color: #64634B;
        font-weight:700;
        text-align: center;
}


#menu li {
	display: block;
	float: left;
	height: 16px;
	width: auto;
	margin-left: 8px;
}


#menu li a {
	text-decoration: none;
	color: #64634B;
	background-image: url("../img/fleche.gif");
	background-repeat: no-repeat;
	padding-left: 15px;
}

#menu li a:visited {
	border:0 none;
}

#menu li a:hover {
	text-decoration: underline;
}


/* Colonne
******************************************/
#sidebar	{
	float:left;
	width: 160px;
	margin-top:5px;
	padding-bottom:10px;
	text-align:left;
	clear:both;
}

#sidebar h2{
	margin-top:3px;
	margin-bottom:0px;
        padding-left: 25px;
        background-image: url("../img/puce.gif");
        background-repeat: no-repeat;
        color: #64634B;
        border-bottom: 1px solid;
        border-color: #ccc;
}

#sidebar form input, #sidebar form textarea{
	border: 1px solid #999;
	-moz-border-radius: 4px;
}
#sidebar form input:focus, #sidebar form textarea:focus{
	border-color: #F17F29;
}


/* Bloc
******************************************/
.bloc	{
        width: 155px;
	background-color:#E6EEF9;
	text-align:left;
	padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;
        margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
        border-style:solid;
	border-width:1px;
	border-color:#B9B9B9;
}



.bloc a {
        color:#64634B;
        text-decoration:none;
        padding-left: 10px;
}


.bloc a:hover{
        /*font-weight: bold;*/
        background-image: url("../img/fond_over.gif");
        background-repeat: repeat-y;
        border-color: #B9B9B9;
        border-bottom: 1px solid;
}

.bloc2	{
	background-color:#ffffff;
	text-align:left;
	padding-left:10px;
        padding-right:10px;
        padding-bottom:10px;
        margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
        border-style:solid;
	border-width:1px;
	border-color:#B9B9B9;
}



.bloc2 a {
        color:#64634B;
        text-decoration:none;
}


.bloc2 a:hover {
        /*font-weight: bold;*/
        background-repeat: repeat-y;
        border-color: #B9B9B9;
        border-bottom: 1px solid;
}

/* Contenu
******************************************/
#content {
	float:right;
	width: 685px;
	text-align:left;
	margin-top:5px;
	margin-bottom:5px;
	padding:0px;
	color : #555;

}

#content h2{
	margin-top:3px;
	margin-bottom:0px;
        background-repeat: no-repeat;

}

#footer	{
	border-top: 1px solid;
	border-bottom: 1px solid;
	text-align: center;
	font-family: arial;
	font-size: 11px;
	background-color: #d3e1f4;
	margin-left: 19px;
	margin-right:18px;
	padding-top: 10px;
	padding-bottom:1 0px;
	clear:both;
}

#content form input, #content form textarea{
	border: 1px solid #999;
	-moz-border-radius: 4px;
}

#content form input:focus, #content form textarea:focus{
	border-color: #F17F29;
}

#content ul{
	padding-left:40px;
}

#content li{
	list-style-image: url(../img/li.png);
}


/* Elements divers du skin
******************************************/

.edito {
	background-color:#E6EEF9;
	text-align:left;
	margin-top:0px;
	margin-bottom:5px;
	border-style:dashed;
	border-width:1px;
	border-color:#A0A0A0;
        padding:10px;

}

.edito a:hover{
	color: #F17F29;
}


.titre_right{
	margin-top:3px;
	margin-bottom:0px;
        padding-left: 25px;
        background-repeat: no-repeat;
        color: #F17F29;
        text-align:right;
}

.table {
	background-color:#FaFaFa;
	text-align:left;
	margin-top:0px;
	margin-bottom:5px;
	border-style:dashed;
	border-width:1px;
	border-color:#A0A0A0;
        padding:10px;

}

.table h2 {
        background-image: url("../img/h2.png");
        padding-left: 20px;
        font-size: 1.1em;
}
.table a {
        color: #E67B2A;
}

.news {
	border-bottom: 1px solid #A0A0A0;
	padding: 10px;
}

.news-title {
	font-size: 1.2em;
	margin: 1em 0;
}

.news-title a{
	color: #F17F29;
}

.news-title a:hover{
	color: #999;
}

.news-content a:hover{
	text-decoration:underline;
        color: #999;
}

.news-info {
	font-size: 0.7em;
	color: #979797;
}

.left{
	float: left;
	margin: 0 1em 1em 1em;
}

.quote {
	border: 1px dashed #B9B9B9;
	padding: 5px;

}




si cela peu aider … merci en tout cas

le <table id="menu1" correspond au script de mon menu qui a son propre css

extrait:


.ddmx {
    font: 10px tahoma;
}
.ddmx .item1,
.ddmx .item1:hover,
.ddmx .item1-active,
.ddmx .item1-active:hover {
    padding: 3px 10px 3px 10px;
    background: #d3e1f4;
    font: 12px arial;
    font-style: italic;
    color: #DF5531;
    font-weight: bold;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
}
.ddmx .item2,
.ddmx .item2:hover,
.ddmx .item2-active,
.ddmx .item2-active:hover {
    padding: 3px 8px 4px 8px;
    font: 11px tahoma;
    color: #DF5531;
    font-weight: none;
    font-style: italic;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
    z-index: 500;
}
.ddmx .item2 {
    background: #ffffff;
}
.ddmx .item2:hover,
.ddmx .item2-active,
.ddmx .item2-active:hover {
    background: #d3e1f4;
}
.ddmx .arrow,
.ddmx .arrow:hover {
    padding: 3px 16px 4px 8px;
}
.ddmx .item2 img,
.ddmx .item2-active img{
    position: absolute;
    top: 4px;
    right: 1px;
    border: 0;
}
.ddmx .section {
    border: 1px solid #b8b4ae;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

* html .ddmx td { position: relative; } /* ie 5.0 fix */

En fait la solution (à essayer en tout cas) c’est enlever le margin top de ton tableau menu ou de ta div menu (peu importe ce que tu as utilisé).

donc

margin-top: 0;

J’ai enlevé ce que tu ma dis mais ca na pas changé :slight_smile:

merci je cherche aussi de mon coté

Quand je disais “enlever le margin top” c’est le mettre à Zero quoi

donc le

margin-top: 0;

tu dois le mettre à ton tableau !!

Désolé de m’être mal exprimé :sweet:

Sinon ça foire pas mal dans IE :smiley:

pour moi il y est deja non ??!!!

et pour IE je sais ca bug :):))

je dois aussi m’en occuper

Si il y est déjà eeeeeeeuh :ane:

C’est ça le problème quand on utilise Tableaux + CSS + Div :smiley:

Bon ça m’étonnerait mais essaye de mettre margin-bottom: 0; à ton header ( :neutre: )

Salut

je viens d’essayé sur tout les div concernés, et il semblerai que
le menu soit remonté un tout petit peu mais c’est pas encore ca .

=> via msn se soir se sera plus simple, encore merci bskickfliper

@++ CkH

Goood tout ca !!!!

c’est bon j’ai trouvé la solution je devais juste faire mon require avant les

<div id="main"><div id="sidebar"> et là miracle :wink: le site a retrouvé une téte :wink:

J’ai aussi resolu le pb avec IE il me reste juste un bug de color sous IE avec le menu…

Dans tous les cas merci à ceux qui m’ont aidé !!!!!

ps: bskickfliper je viens de t’ajouter en contact msn :wink:

@+++

Plus besoin :smiley: j’ai plus qu’à te bloquer :smiley: