Structure qui décroche à l'activation d'un module search

Question

uniuc

21 May 2013 à 09:51

Bonjour à tous,
Voila je suis en train de faire.. enfin essayer... de faire un site pour un ami, et n'y connaissant pas grand choses, je me retrouve en face de plusieurs problèmes, en faite deux majeurs pour le moment, si je ne compte pas l'incompatibilité avec les vieux navigateurs.
Le premier problème est ma barre social qui ne reste pas au bon endroit selon la taille de la fenêtre, plus la résolution est grande plus elle part vers la gauche.
Le second problème est la barre de navigation en dessous qui décroche des que j'active le module de recherche, elle en fait même disparaître l'image de tête.
Le but au départ étais de fixer le tout en position absolute sur un élément pagebody, mais je crois que l'idée est aussi bancale que mon code :s merci d'avance pour toutes explications.



<!DOCTYPE html>



<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<head>

<html class="no-js" lang="en_US">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<!--   CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="../global/css/w4_fr.css"/>

<link rel="shortcut icon" href="../global/img/gfx/favicon.ico"/>


<title>

</title>

</head>

<body bgcolor=#eaeaea>

<!--                                                   -->
<!--                cadre de fond                    ---->
<!--   à modifier selon la longueur de la page       ---->
<!-- ---------------------------------------------------->

<div id="pageBody">




<!--                                                   -->
<!--                 Barre de Social du haut         ---->
<!-- ---------------------------------------------------->
<div class="socialm">
<CENTER><TABLE>
<TR>
<TD><div class="minormenu">
<a href="company/company.html" class=" "><span>Entreprise</span></a>
<a href="career/career.html" class=" "><span>Recrutement</span></a>
<a href="contact/contact.html" class=" "><span>Contacts</span></a>
<a href="../en/index.html" class=" "><span>English</span></a>
<!-- Socials -->
<a href="http://twitter.com/BROADCASTBOX" class=" "><img src="../global/img/gfx/t.png" /></a> <!-- <span>t</span></a> -->
<a href="http://www.facebook.com/pages/Broadcast-Box/111818052170166" class=" "><img src="../global/img/gfx/f.png" /><!-- <span>f</span></a> -->
<a href="http://www.linkedin.com/company/" class=" "><img src="../global/img/gfx/in.png" /> </a><span></span></a>


</div></TD>
</TR>
</TABLE></CENTER> </div> 

<!--         -----------------------   TEST    -------------------------------------------->




<!-- ------------------test---------------------------------->

<!--                                                   -->
<!--                 Barre de naviguation            ---->
<!-- ---------------------------------------------------->


<div class="navbar">
<a href=" " class="active home " style="width:115px"><span>home</span></a>
<a href="products/products.html" class=" " style="width:115px"><span>Produits</span></a>
<a href="solutions/solutions.html" class=" " style="width:115px"><span>Solutions</span></a>
<a href="company/company.html" class=" " style="width:115px"><span>Entreprise</span></a>
<a href="distributors/distributors.html" class=" " style="width:115px"><span>Distributeurs</span></a>
<a href="investors/investor.html" class=" " style="width:115px"><span>Investisseurs</span></a>
<a href="news/news.html" class=" " style="width:115px"><span>News</span></a>

<!--
<div class="searchfield">
<form method="get" action="../search/">
<input type="hidden" name="rows" value="20">
<input type="text" name="queryString" autocomplete="off" placeholder="">
<button type="submit"><span>search</span></button> 
</form>  -->
</div>




<!--                                                   -->
<!--                 Image de fond                   ---->
<!-- ---------------------------------------------------->


<div id="headimg">



<!--                                                   -->
<!--                 barre flotante                  ---->
<!-- ------------------------------------------------- -->



<div class="middlebar">
<ul class="bannerContent">
<li class="video"><a href="video/" title="Visionner BBOX video">
<div class="videobox"></div><img style="margin-right:10px; padding-bottom: 0px;" src="../global/img/gfx/foldvideo2.png" alt="Play button" /></a> 
</li></li>
<li class="products" title="Consulter les Produits BBOX"><a href="products/products.html"><img style="margin-right:10px; padding-bottom: 0px;" src="../global/img/gfx/Browsebox2.png" alt="Browse button" /></a>
</li><li class="readbbox"><a href="news/index.html" title="Lire les BBOX news"><img style="margin-right:10px; padding-bottom: 0px;" src="../global/img/gfx/read_news2.png" alt="News button" /></a></li>
</ul>
</div>



<!-- ------------------------------------------------------------------------------------------- -->
<!-- ---------------------------- ///   FIN DU CONTENEUR DE TETE    \\\ ------------------------ -->
<!-- ------------------------------------------------------------------------------------------- -->


</div>

</body>
</html>




/*             cadre de fond                   */
/*  à modifier selon la longueur de la page    */  


#pageBody {
  background:#e8e8e9;
  /*background:#d8d8b8;*/  
  width: 960px; 
  height:1250px; 
  position:absolute; 
  border:0;
   left: 50%; 
   margin-left: -480px; 
  /*margin-top:-10px;*/
  z-index:-1;
} 

/*    ---------------------------- barre social  ------------------------ */

.socialm {
  /*background:#d8d8c4;*/
  z-index:1;
  width: 445px;
  height: 25px;
  border:1;
  position: absolute;
  top: 0px;
  left:562px;  
}


div.minormenu span {
  margin-left: 5px;
  margin-right: 5px;
}


.minormenu a, div.languages a  {
  z-index:1;
  text-align: left;
  font-family: Calibri;
  font-weight : bold;
  text-decoration: none;
  color: #6d6d6f;
  padding: 5px;
  float: left;
  top: 0px;
  font-size: 13px;
  -webkit-transition: color .1s ease-in;
  -moz-transition: color .1s ease-in;
  -o-transition: color .1s ease-in;
  transition: color .1s ease-in;
}

div.minormenu.light a, div.languages.light a{
  color: white;
  opacity: 0.9;
  text-shadow: 0 -1px 0 black;
}

.minormenu.light a:hover, .languages.light a:hover {
  opacity:1;
}

.minormenu a:hover, .languages a:hover {
  color: #000000;
}


/* ---------------------- Nav Barre -----------------------------------------*/

div.navbar {

  position: relative;
  top: 25px;
  left: 50%px;
  width: 960px;
  display: block;
  float: left;
  clear: both;
  border-radius: 0px;
  background: #353d46; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: #353d46 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVhNjE2ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjI0MmEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a616e), color-stop(100%, #1b242a)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5a616e 0%, #1b242a 100%); /* IE10+ */
  background: linear-gradient(top, #5a616e 0%, #1b242a 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#5a616e', endColorstr = '#1b242a', GradientType = 0); /* IE6-8 */
  box-shadow: 0px 0px 0px rgba(255, 255, 255, .35), 0px 0px 0px rgba(0, 0, 0, .35);
}

div.navbar a {
   list-style-type: none;
        white-space: nowrap;
  font-family: Calibri;
  /*font-weight : bold;*/
  color: #bcc0c3;
  text-decoration: none;
  color: rgb(188, 192, 195);
  font-size: 18px;
  text-shadow: 0px -1px 0px rgb(0, 0, 0);
  float: left;
  
  display: block;
  text-align: center;
  padding: 7px 0px 8px 0px;
  margin: 8px 0px;
  border-right: 2px solid rgba(27, 36, 42, .5);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, .15);
  -webkit-transition: width .2s ease;
  -moz-transition: width .2s ease;
  -o-transition: width .2 ease;
  -ms-transition: width .2 ease;
  transition: width .2 ease;
}

div.navbar a:hover {
  text-decoration: none;
  text-shadow: 0px 0px 15px #FFFFFF, 0px -1px 0px rgb(0, 0, 0);
}

div.navbar a.active {
  color: rgb(242, 152, 8);
  text-shadow: 0px -1px 0px rgb(0, 0, 0);
}

div.navbar a.home, div.navbar a[href='http://sqlsj.free.fr/cn'] {
  background: url("../img/gfx/bboxlogo3.png") no-repeat center center;
  height: 18px;
  /*padding: 0px 0px 0px 0px;*/
  position: relative;
  top: 3px;
  bottom: 0px;
  left: 0px;
}

div.navbar a.home span {
  display: none;
}

/** searchfield *//* ici quand j'active tout se colle sur la gauche de la fenetre */
/*

.searchfield {
  float: right;
  margin: 15px 10px 0 0;
  overflow: hidden;
  height: 22px;
  background: rgb(90, 97, 110);
  border-radius: 14px;
  box-shadow: 0 0 4px rgba(0, 0, 0, .25) inset, 0 1px 0 rgba(255, 255, 255, .25), 0 -1px 0 rgba(0, 0, 0, .35);
  -webkit-transition: background-color .3s ease;
  -moz-transition: background-color .3s ease;
  -o-transition: background-color .3 ease;
  -ms-transition: background-color .3s ease;
  transition: background-color .3s ease;
}

.seachfield span, .seachfield input[type=text] {

}

.searchfield input[type=text] {
  background: transparent url("../img/gfx/m_glass.png") no-repeat 5px 4px;
  border: 0;
  font-size: 12px;
  height: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: rgb(131, 136, 146);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .35);
  padding-left: 25px;
  float: left;
  width: 70px;
  -webkit-transition: width .2s ease;
  -moz-transition: width .2s ease;
  -o-transition: width .2 ease;
  -ms-transition: width .2s ease;
  transition: width .2s ease;
}

.searchfield input[type=text]:focus {
  color: #FFF;
  outline: none;
}

.searchfield button, .searchfield button span {
  display: none;
}

.searchfield button {
  background: transparent;
  height: 28px;
  width: 28px;
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
}

*/





/*                ------------------------         test         ----------------------------------  */






/*---------------------------------------     image de fond          ----------------------------------*/

#headimg {
  background:url(../img/head/1.jpg) no-repeat;
  height: 480px;
  width: 960px;
  /*min-width: 960px;*/
  position: relative;
  top: 75px;
  left: 50%px;
  z-index: 1
}

/*----------------------------------------  Barre flotante  --------------------------------------------*/
/* dimentionner la baniere video*/
div.middlebar {
  border-bottom: 1px solid #BFBFC1;
  box-shadow: 0px 1px 0px #FFFFFF;
  height: 40px;
  position: absolute;
  width: 960px;
  left: 0;
  /*hauteur de la barre video*/
  top: 300px;
  background: #999999; /* Old browsers */
  /* IE9 SVG */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhZWIwYjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -o-linear-gradient(top, #ffffff 0%, #dfdfe1 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #dfdfe1 100%); /* IE10+ */
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dfdfe1)); /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, #ffffff, #dfdfe1); /* FF3.6+ */
  background: linear-gradient(top, #ffffff 0%, #dfdfe1 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#dfdfe1', GradientType = 0); /* IE6-8 */
}


ul.bannerContent {
  margin: 0 auto;
  width: 960px;
}


/* place les bouton dans la barre video */
/* center left body, à trouver pour absolute position */

ul.bannerContent li {
 /* margin-right: 10px;*/
  display: inline-block;
  vertical-align:center;
  position:relative;
  left:150px;
  top:10px;
}



/*--------------------------------------------------------------------------------------------*/
/*---------------------------   ///   FIN DU CONTENEUR DE TETE    \\\ ------------------------*/
/*--------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/

Modifié par uniuc (12 Dec 2013 - 13:52)

Tybar

21 May 2013 à 21:57

Bonjour,

Je n'arrive pas à avoir les mêmes soucis que tu décrit tu as peut-être fait des changements entre temps. Tu fais tes tests avec quels navigateurs? versions?

Par contre je peux dire en effet que le positionnement en absolute pour centrer en fonction de la taille de la fenêtre c'est pas l’idéale. Garde en tête que le positionnement absolute n'est pas fait pour s'adapter. Je garderais uniquement le width sur ton pagebody le reste paraît inutile, ensuite un margin: 0px auto devrait faire l'affaire. Smiley smile

Pour ta barre sociale préfère un float right tu seras sûr qu'elle sera toujours bien placé et peut-être qu'une liste serait mieux qu'un tableau aussi.

Aussi tu déclare la balise head avant html pas bien! et pas d'indentation non plus visiblement c'est pourtant bien utile regarde tu as quelque balise de fermeture qui ne ferme rien du tout ca pourrait surement être évité de cette façon.

Pour le reste je te laisse le temps de compléter un peu ton site et surtout le temps pour continuer d'apprendre mais je me doute que tu le fais déjà rigoureusement Smiley langue

uniuc

21 May 2013 à 22:11

Déjà je tiens à te remercier pour tout ces conseils, des demain je vais faire quelques tests en prenant en compte tout ce que tu m'a dit.

en ce qui concerne le navigateur c'est opera 11.52 qui me pose problème des que je me sert du zoom, enfin ca c'est pour la barre sociale.

en ce qui concerne le menu de navigation qui change de forme des que j'active l'onglet de recherche ca le fait avec tous.

mais je vais deja voir ce que tout cela donne avec tes conseils et quelque pages de lectures.

encore merci.

Sujet clos

CSS et mise en forme, CSS3

Structure qui décroche à l'activation d'un module search