Sujet Précédent Sujet Suivant

CSS bancale

Résolu/Fermé
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 - 21 mai 2013 à 11:40
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 - 25 mai 2013 à 15:52
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 disparaitre 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.

<code=html> <!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="https://twitter.com/BROADCASTBOX" class=" "><img src="../global/img/gfx/t.png" /></a> <!-- <span>t</span></a> -->
<a href="https://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></code>

<code=css>
/* 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 \\\ ------------------------*/
/*--------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------*/
</code>

Voici un endroit test ou voir le problème http://stjude.free.fr/fr/

7 réponses

Réponse 1 / 7
bg62 Messages postés 23590 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 15 avril 2024 2 362
21 mai 2013 à 12:30
avant de nous lancer tout cela ... as-tu pensé à " css validator " sur W3C au moins ??
0
Réponse 2 / 7
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
21 mai 2013 à 12:48
Oui j'y suis passé, il y a pas mal de problèmes lier au couleurs, mais rien qui explique pourquoi ma barre sociale ne reste pas en place.

Ma recherche est plus sur comment fixer ma barre sociale (celle avec le facebook)
sur mon fond body pour pouvoir refaire toute la suite en position absolute, sachant que le site n'auras aucun besoin de changer de taille, si quelqu'un avais deja une idée a ce niveau j'aurais deja fait un grand bond en avant.
0
Réponse 3 / 7
Utilisateur anonyme
Modifié par lobotoFix le 21/05/2013 à 14:07
Bonjour, pour le manque de compatibilité c'est normal je vois du css3

pour les truc qui se barre à gauche en zoomant ou en changeant d'écran voici ce que je fait moi

en règle général je préfère la position relative à l'absolue
si je met de l'absolue, elle se trouve toujours dans un bloc en relative
j'évite au maximum les pourcentages et préfère les media query

je connais pas le html de ta page alors ca risque de faire des dégat , mais je pense qu'il va falloir partir de ca
je pense que pagebody est le bloc principal de ta page

remplace pas Ca : 
#pageBody { 
background:#e8e8e9; 
/*background:#d8d8b8;*/ 
width: 960px; 
height:1250px; 
position:relative; 
border:0; 
margin: auto;
/*margin-top:-10px;*/ 
z-index:-1; 
}

linux est le noyaux et Windows les pépins
0
Réponse 4 / 7
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
21 mai 2013 à 17:33
oki je te remercie je vais tester sur cette base
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Utilisateur anonyme
21 mai 2013 à 17:42
ok tiens nous au courant, mais sache que tout tes éléments en absolue vont être déplacés :(
0
Réponse 6 / 7
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
21 mai 2013 à 22:12
je te remercie pour ta réponse je teste ça des demain et je vous tiens au courant
0
Réponse 7 / 7
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
25 mai 2013 à 15:52
ca ne change pas grand chose la barre file toujours quand je zoom sous opera :s
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse