Jump to content

Hover fica por trás de imagens


Inferi
 Share

Recommended Posts

Em 30/10/2017 às 21: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

Link to comment
Share on other sites

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
Link to comment
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
 Share

×
×
  • 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.