Jump to content
Inferi

Hover fica por trás de imagens

Recommended Posts

Inferi

Boa tarde,

Tenho um menu com dropdown (hover) que em certas situações fica por trás de imagens, quando deveria ficar por cima.

vejam os exemplos:

tVGjrZf.jpg

Sa201mi.jpg

4wIVgEM.jpg

 

Não consigo entender porquê é que isso fica assim nem que propriedade "joga" as imagens para primeiro plano

Share this post


Link to post
Share on other sites
brunuu

Era preciso ver o código mas tenho acerteza que esta relacionado com as ordem das camadas na class que usas para as imagens 

Share this post


Link to post
Share on other sites
Inferi
Em 30/10/2017 às 20:01, brunuu disse:

Era preciso ver o código mas tenho acerteza que esta relacionado com as ordem das camadas na class que usas para as imagens 

Bom dia, aí está o código a baixo. Penso ser o suficiente para conseguir descobrir o que se passa.

Código da página com os dados do objecto carregado:

<div id="main">
    <!-- begin content -->
    <div id="site_content">
      <!-- start gallery HTML containers -->
      <div id="thumb-container">
        <div id="thumbs" class="navigation">
          <table class="tableGeralDados">
            <tbody>
              <tr>
                <td colspan="2" class="tdTit">
                  <p class="objTit">A Corrida do Rato</p>
                </td>
              </tr>
              <tr>
                <td>
                  <div class="slideshow-container">
                    <div class="mySlides fade" style="display: block;">
                      <div class="numbertext">1 / 1</div>
                      <img src="images/livros/images400px/AFS0003.jpg">
                    </div>
                  </div>
                  <p class="numeroartigo">Número: AFS0003</p>
                </td><td rowspan="3" align="right">
                <table class="tableDados">
                  <tbody>
                    <tr>
                      <td class="tdDados">
                    	<p class="objtCt">Tipo</p>
                    	<p class="objtDad">livro</p>
                    	</td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                    	<p class="objtCt">SubTipo</p>
                        <p class="objtDad">livro</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Autor</p>
                        <p class="objtDad">Lauzier</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Editor</p>
                        <p class="objtDad">Meribérica/Liber</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Local</p>
                        <p class="objtDad">Paris</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Ano</p>
                        <p class="objtDad">1978</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Idioma</p>
                        <p class="objtDad">português</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Ilustrado</p>
                        <p class="objtDad">Sim</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Paginas</p>
                        <p class="objtDad">61</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Capa</p>
                        <p class="objtDad">Mole, sem envólucro</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Estado</p>
                        <p class="objtDad">Bom</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Nº de exemplares</p>
                        <p class="objtDad">1</p>
                      </td>
                    </tr>
                    <tr>
                      <td class="tdDados">
                        <p class="objtCt">Origem</p>
                        <p class="objtDad">compra</p>
                      </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
            </tbody>
          </table>        
        </div>
      </div>
    </div>
  </div>

Código do menu de navegação:

<nav>
  <ul class="sf-menu" id="nav">
    <li><a href="index.php?menu=home">home</a></li>
    <li><a href="index.php?menu=about">acerca de</a></li>
    <li><a href="#">colecção</a>
      <ul>
        <li><a href="index.php?menu=portfolio_one&amp;p=1">livros</a></li>
        <li><a href="#">revistas</a></li>
        <li><a href="#">objectos</a></li>
      </ul>
    </li>
    <li><a href="http://blog.afundasao.com/" target="_blank">blog</a></li>
    <li><a href="http://www.afundasao.com/html/faz-me_um_bico_e_outras_tshirts_afundasao.htm" target="_blank"> aloja-te</a></li>
    <li><a href="http://diciordinario.afundasao.com/" target="_blank">diciOrdinário</a></li>
    <li><a href="contact.php">contacto</a></li>
  </ul>
</nav>

CSS:

@font-face { 
  font-family: Jenna Sue; 
    src: url('../fonts/JennaSue-webfont.eot'); 
    src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf'); 
} 

@font-face { 
  font-family: News Cycle; 
    src: url('../fonts/NewsCycle-Regular.eot'); 
    src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 
} 

html { 
  height: 100%;}

* { 
  margin: 0; 
  padding: 0;}

/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section { 
  display:block;}
  
body { 
  font: normal .80em arial, sans-serif;}

img { 
  border: 0;}

h1 { 
  font: normal 300% 'Pacifico', cursive, sans-serif;
  margin: 0 0 5px 0;
  padding: 0;}

h2 { 
  font: normal bold 130% Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
  margin: 0;
  padding: 0 0 8px 0;}

a, a:hover { 
  outline: none;
  text-decoration: none;}

a:hover { 
  text-decoration: none;}

ul { 
  margin: 2px 0 22px 17px;}

ul li { 
  list-style-type: circle;
  margin: 0 0 0 0; 
  padding: 0 0 4px 5px;}

ol { 
  margin: 8px 0 22px 20px;}

ol li { 
  margin: 0 0 11px 0;}

#main, #header, #logo, #menubar, #site_content, #footer { 
  margin-left: auto; 
  margin-right: auto;}

#main { 
  width: 950px;
  margin: 20px auto;}

header { 
  width: 950px;
  height: 105px;}
  
#logo { 
  width: 950px;
  float: left;
  height: 100px;
  background: transparent;
  padding: 0;}

#logo h1 { 
  font: normal 420% 'Pacifico', arial, sans-serif;
  padding: 0px 0 0 10px;}

#logo h1 a:hover { 
  text-decoration: none;}

#site_content { 
  width: 950px;
  height: 665px;
  overflow: hidden;
  margin: 4px auto 0 auto;
  padding: 0;}

#left_content { 
  float: left;
  text-align: justify;
  width: 444px;
  padding: 20px 0 5px 25px;
  margin: 0;}

#left_content ul { 
  margin: 2px 0 22px 0px;}

#left_content ul li { 
  list-style-type: none;
  margin: 0 0 0 0; 
  padding: 2px 0 2px 28px;
  line-height: 1.5em;}

#right_content { 
  float: right;
  width: 450px;
  padding: 0;
  min-height: 450px;}

#right_content img { 
  float: left;}

footer { 
  height: 54px;
  width: 950px;
  float: right;
  margin: 10px auto 20px auto;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;
  font: 160% 'News Cycle', arial, sans-serif;
  text-align: right;
  }
footer p { 
  padding: 0 0 10px 0;}

footer a, footer a:hover {
  text-decoration: none;}

/* styling for the slideshow on the homepage */
ul.slideshow {
  width: 950px;
  height: 450px;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;}
  
ul.slideshow li {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  list-style: none;}
 
ul.slideshow li.show {
  z-index: 500;}
 
ul img {
  border: none;}
 
#slideshow-caption {
  width: 950px;
  height: 90px;
  position: absolute;
  bottom: 0;
  left: 0; 
  z-index: 500;}
 
#slideshow-caption .slideshow-caption-container {
  padding: 20px 25px 0 25px;   
  z-index: 1000;}
 
#slideshow-caption p {
  padding: 0;
  font: normal 130% arial, sans-serif;}

/* form styling */
.form_settings { 
  margin: 0;}

.form_settings p { 
  padding: 0 0 10px 0;}

.form_settings span { 
  padding: 5px 0; 
  float: left; 
  width: 170px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea { 
  padding: 4px; 
  width: 252px; 
  font: 100% 'trebuchet ms', arial, sans-serif;
  border: 0;
  border-bottom: 1px solid; 
  background: transparent;}
  
.form_settings .submit { 
  font: 220% 'Jenna Sue', arial, sans-serif; 
  border: 0; 
  width: 100px; 
  margin: 0 0 0 162px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;}

.form_settings textarea, .form_settings select { 
  font: 100% 'trebuchet ms', arial, sans-serif; 
  border: 1px solid; 
  border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  -moz-border-radius: 6px 6px 6px 6px;
  width: 250px;
  overflow: auto;}

.form_settings select { 
  width: 304px;}

.form_settings .checkbox { 
  margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;}

/* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 180px;}

html body ul.sf-menu ul ul { 
  margin: 0 0 0 180px;}

ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;}

ul.sf-menu { 
  display: block;
  position: relative;}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ }

ul.sf-menu a { 
  display: block;
  position: relative;}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 150px; 
  top: auto;
  left: -999999px;}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ }

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;}

/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}

ul ul span.sf-arrow { 
  right: 5px;
  top: 20px;
  background-position: 0 100%;
}

/* theming the menu */
nav { 
  height: 44px;
  width: 950px;
  float: right;
  margin: -20px auto 20px auto;
  border-radius: 7px 7px 7px 7px;
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border: 7px 7px 7px 7px;} 

/* Theming the menu */
ul#nav { 
  float: left;}

ul#nav ul { 
  padding-bottom: 15px;}

ul#nav li a { 
  padding: 10px 10px 6px 25px;
  font: 160% 'Luckiest Guy', arial, sans-serif;
  text-decoration: none;
  margin-right: 2px;}


/* Theming the page of details of the object*/

.tableGeralDados{
  width: 950px;
  height: auto;
  vertical-align: top;
  align-items: center;
}

.tableDados{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 470px;
  height: auto;
  margin-right: 0px;
  margin-left: auto;
  margin-top: 0px;
  margin-bottom: auto;
  vertical-align: top;
}

.tdDados{
  border-collapse: collapse;
  border-spacing: 0px;
  vertical-align: top;
}

.tdImg{
  height: auto;
  margin-right: 0px;
  margin-left: auto;
  margin-top: 0px;
  margin-bottom: auto;
  vertical-align: top;
}

.tdTit{
  font-family: 'Arial Black', Gadget, sans-serif;
  text-align: center;
  color: #ffdab9;
  background-color: #660000;
  height: 25px;
  font-weight: bold;
  vertical-align: top;
}

.objTit{
  font-family: 'Arial Black', Gadget, sans-serif;
  background-color: #660000;
  font-size: 15px;
  color: #ffdab9;
  font-weight: bold;
}

.objtCt{
  font-family: 'Arial Black', Gadget, sans-serif;		
  font-size: 12px;
  font-weight: bold;
  color:#660000;
  background-color: #DCB78A;
  border-collapse: collapse;
  border-spacing: 0px;
  text-align: left;
  height: 18px;
}

.objtDad{
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 600px;
  height: 12x14x4; /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.objtComent{
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 600px;
  height: 60px; /* Fallback for non-webkit */
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  overflow-y: scroll;
}

.numeroartigo{
  font-family: 'Arial', Gadjet, sans-serif;
  font-size: 12px;
}


/* CSS SLIDESHOW */
.mySlides {
        display:none;
        vertical-align: top;
      }
    .demo {cursor:pointer}

* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {
    display:none;
    vertical-align: top;
  }

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative; 
  margin: auto;
  vertical-align: top;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

 

0iPigys.jpg

Edited by Inferi
Inserir imagem para perceber melhor o aspecto da página

Share this post


Link to post
Share on other sites
rafaelcarvalho20
Em 21/11/2017 às 12:27, HappyHippyHippo disse:

Com certeza essa é a solução, se inserir uma classe para os elementos de img's, e no CSS para essa classe atribuir um z-index talvez de 20 para baixo resolverá tua situação.

Edited by rafaelcarvalho20

A vida pode até te derrubar, mas é você quem escolhe a hora de se levantar.

Mr. Han - Karate Kid (2010)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.