Sujet Précédent Sujet Suivant

Redimension menu css

Fermé
diamediax Messages postés 1 Date d'inscription mercredi 25 mai 2016 Statut Membre Dernière intervention 25 mai 2016 - 25 mai 2016 à 23:08
 SimonVeille - 25 mai 2016 à 23:31
Bonjour,



je voudrais que mon menu css suive le redimensionnement de ma page web , j ai mis une image de fond , quand je redimensionne ma page le menu reste dans sa grandeur de base , comment y remdier merci d avance
html 
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="index_files/mbcsmbmcp.css" type="text/css" />
</head>
<body>
<div id="mbmcpebul_wrapper" style="max-width: 230px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li><div class="buttonbg" style="width: 58px;"><a>carte</a></div></li>
  <li><div class="arrow buttonbg" style="width: 96px;"><a class="button_2">Products</a></div>
    <ul>
    <li><a title="">Menu Item</a></li>
    <li><a title="">Another Menu Item</a></li>
    <li><a title="">Yet Another</a></li>
    </ul></li>
  <li><div class="buttonbg"><a>Support</a></div></li>
  </ul>
</div>

<script type="text/javascript" src="index_files/mbjsmbmcp.js"></script>
</body>
</html>



css 
#mbmcpebul_wrapper {
  padding: 5px;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 7px;
  background-color: #000000;
  box-shadow: none;
  border-collapse: separate;
  font-size: 0;
  line-height: 0;
}

#mbmcpebul_wrapper.quirks {
  margin-bottom: 0px;
  margin-right: 0px;
}

#mbmcpebul_wrapper.quirks #mbmcpebul_table ul li {
  width: 100%;
}

#mbmcpebul_table {
  margin: 0px;
  margin-bottom: -0px;
  margin-right: -0px;
  padding: 0;
  line-height: 0px;
  font-size: 0px;
  display: inline-block;
  width: auto;
}

#mbmcpebul_table li a {
  line-height: 16px;
  font-size: 13px;
  font-family: Arial,sans-serif;
  text-decoration: none;
  color: #CCCCCC;
  font-style: normal;
  font-weight: bold;
  padding: 13px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mbmcpebul_table li div.buttonbg {
  height: 42px;
  width: 76px;
  line-height: 0;
  background-color: #303030;
  border-style: solid;
  border-color: #585858;
  border-width: 5px 0 0 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}

#mbmcpebul_table li:hover div.buttonbg a, #mbmcpebul_table li.expanded a.topitem, #mbmcpebul_table li.active a.topitem,
#mbmcpebul_table li.itemhot a.topitem, #mbmcpebul_table li a:hover {
  color: #CCCCCC;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}


#mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
  background-color: #585858;
  box-shadow: none;
}

#mbmcpebul_table li.expanded div.buttonbg, #mbmcpebul_table li.active div.buttonbg, #mbmcpebul_table li.itemhot div.buttonbg, #mbmcpebul_table li:hover div.buttonbg {
  border-color: #970202;
}

#mbmcpebul_table ul li a {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11px;
  line-height: 14px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

#mbmcpebul_table ul li:hover > a {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#mbmcpebul_table ul li.subexpanded a.subexpanded, #mbmcpebul_table ul li.subitemhot a.subitemhot, #mbmcpebul_table ul li a:hover {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#mbmcpebul_table ul li:hover, #mbmcpebul_table ul li.subexpanded, #mbmcpebul_table ul li.subitemhot {
  border-color: transparent;
  background-color: #970202;
  box-shadow: none;
}

#mbmcpebul_table ul {
  margin: 0;
  border-style: solid;
  border-color: #870724;
  border-width: 0;
  padding: 0;
  background: #970202;
  font-size: 0;
  border-radius: 0;
}

#mbmcpebul_table ul li a {
  padding: 7px 15px 7px 13px;
  text-align: left;
}

#mbmcpebul_table ul li.separator {
  padding: 7px;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}

#mbmcpebul_table ul li.separator div {
  border-top: 1px solid #FFFFFF;
  font-size: 0px;
}

#mbmcpebul_table ul li {
  border-style: solid;
  border-color: #870724;
  border-width: 0;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  float: none;
  margin: 0 0 0px 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: #970202;
  display: block;
}


#mbmcpebul_table ul {
  box-shadow: 0 0 5px -1px #333333;
}

#mbmcpebul_table a img {
  border: none;
}

#mbmcpebul_table li {
  list-style: none;
  float: left;
  margin: 0px 0px 0px 0px;
  padding: 0;
  float: left;
  display: inline-block;
}

#mbmcpebul_table.css_menu li {
  position: relative;
}

#mbmcpebul_table.css_menu ul li:hover > ul {
  opacity: 1;
}

#mbmcpebul_table.css_menu li:hover > ul {
  top: 100%;
  left: 0;
  right: auto;
  opacity: 1;
}

#mbmcpebul_table.css_menu ul li:hover > ul {
  top: -0px;
  left: 100%;
  right: auto;
}

#mbmcpebul_table.css_menu ul {
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-property:opacity;
  -webkit-transition-property:opacity;
  -moz-transition-property:opacity;
  -ms-transition-property:opacity;
  opacity: 0;
}

#mbmcpebul_table ul {
  position: absolute;
  top:-99999px;
  z-index: 4000;
}

#mbmcpebul_table ul ul {
  position: absolute;
  z-index: 5000;
}

#mbmcpebul_table .submenu_arrow {
  margin-left: 8px;
}


@media screen and (max-width: 500px) {
  #mbmcpebul_wrapper:not(.scripted) {
    text-align: center;
  }

  #mbmcpebul_wrapper:not(.scripted) #mbmcpebul_table li {
    float: none;
    vertical-align: top;
  }
}

#mbmcpebul_wrapper.centeritems {
  text-align: center;
}

#mbmcpebul_wrapper.centeritems #mbmcpebul_table li {
  float: none;
  vertical-align: top;
}
#mbmcpebul_table div.arrow { 
  background-image: url(ebab_mbmcp_d.gif); 
  background-repeat: no-repeat; 
  background-position: right center; 
  height: 100%; 
} 

#mbmcpebul_table ul li a.with_arrow { 
  background-image: url(ebab_mbmcp_c.gif); 
  background-repeat: no-repeat; 
  background-position: right center; 
  padding-right: 19px; 
} 

#mbmcpebul_table li a.button_2, #mbmcpebul_table li div a.button_2 { 
  padding-right: 28px; 
}
A voir également:

1 réponse

Réponse 1 / 1
SimonVeille
25 mai 2016 à 23:26
Sallut,

commencez par utiiser des unités relatives(% et em) et non des mesures fixes qui ne dépendent pas de la taille et résolution de l'écran.

#mbmcpebul_table li div.buttonbg {
height: 42px; <!-- vaut toujours 42px de haut et 76px de large-->
width: 76px;

Donc à indiquer en % et non en pixels qui est dépendant du nombre de pixels de chaque écran(ainsi que de sa redimenssion) donc une borne et non une utilisation de dimensions relatives(à chaque utilisateur qui a un écran différent).

Même chose pour les tailles de polices(et lineheight) qui seront avantageusement noté en em(où encore mieux à pas changer du tout car chacun peut rester libre d'utiliser le 'zoom' qu'il désire pour lire le texte).
L'em ou quadratin(d'imprimerie) correspond à la hauteur de ligne de texte courant de chaque balise.

1em = 100% de la hauteur
0.75em = 75% de la hauteur de base
1.25em= 125% de la hauteur de base


1em pour une balise p ou pour une balise H1 n'aura pas la même dimension, nous sommes bien dans une unité relative à son contexte(balise).
0
SimonVeille
25 mai 2016 à 23:31
ça c'est pas recommandé :

position: absolute;
top:-99999px;
z-index: 4000;

car caché du contenu le rends inaccessible(je parles en terme d'accessibilité) et en tant que tel sera bloquant pour les algorithmes google qui déclasseront tout le site.

Moins pire que hidden mais c'est quelque chose qui fera tilter les robots d'indexation de Google et pas en bien.
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

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

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

8 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses