text is not appearing on the slide show!

Question

text is not appearing on the slide show!

Asked 6 years, 5 months ago

Viewed 62 times

0

I am trying to insert a text in the gradient bar that is the footer of my slide show, but it does not appear. someone can tell me what is wrong?

I made a zip folder with the files for ease! https://drive.google.com/open?id=1InzrGQ4hojkNwmCEVaYTsn3csurkW6l7

2

No one is going to download that file. Use the post to input everything related to your problem.

– MoshMage

2018/05/02 at 15:26
Guy when it is so you do not need to put the codes of the entire site. can just put the code of the party involved in the problem. Besides said the text tool for you to write your question has options for you to add the code etc. Whenever you see my answer you will see how to solve the problem of Slider. Try to put the code right into the question next ok, tmj

– hugocsl

2018/05/02 at 15:44
thank you very much, it worked. Understood next time I will follow your guidelines....

– user111919

2018/05/02 at 16:54

1 answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-05-02T15:41:36+00:00

Dude your problem is that you are putting the Text like it’s another slide. So the div <div class="slideinfo"> must actually be inside <div class="slide"> I also made a CSS adjustment just to make it right inside the same.

Look how low it got.

body {
	margin: 0;
	padding: 0;
	font-family: helvetica;
	font-size: 12px;
}
.topo {
	height: 30px;
	background-color: #303030;
}
.topoint {
	width: 100%;
	max-width: 1040px;
	height: 30px;
	margin: auto;
}
.topoleft {
	width: 50%;
	height: 30px;
	float: left;
}
.toporight {
	width: 50%;
	height: 28px;
	float: right;
	text-align: right;
	margin-top: 2px;
}
.topoleft ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
.topoleft li {
	float: left;
	height: 30px;
	line-height: 30px;
	margin-left: 8px;
	margin-right: 8px;
	display: inline-block;
}
.topoleft li a {
        text-decoration: none;
        color: #FFF;
}
.topoleft li .ativo {
	color: blue;
}
.topobusca {
	width: 110px;
	height: 26px;
	outline: 0;
}
.toporight a {
	float: right;
}
.toporight input {
	float: right;
}
.toporight img {
	margin-right: 4px;
}
.topo2 {
	height: 95px;
}
.topo2int {
	width: 100%;
	max-width: 1040px;
	height: 95px;
	margin: auto;
}
.logo {
	width: 230px;
	height: 65px;
	float: left;
	margin-top: 30px;  
}
.topo2 .banner {
	width: 650px;
	height: 80px;
	float: right;
	margin-top: 7px;
	background-color: #ff0000;
}
.menu {
	height: 40px;
	background-color: #ff0000;
}
.menuint {
	width: 100%;
	max-width: 1040px;
	height: 40px;
	margin: auto;
}
.menu ul {
    margin: 0;
    padding: 0;
	list-style: none;
	position: absolute;
}
.menu li {
	float: left;
	height: 40px;
	line-height: 40px;
	padding-left: 8px;
	padding-right: 8px;
}
.menu li:hover .submenu {
	display: block;
}
.menu a {
	color: #fff;
	text-decoration: none;
}
.submenu {
	width: 140px;
	position: absolute;
	background-color: #ff0000;
	display: none;
}
.submenuitem {
	width: 140px;
	height: 30px;
	line-height: 30px;
	padding-left: 10px;
}
.submenuitem:hover {
       background-color: #ff5555;
       width: 130px;
}
.ultimasnoticias {
	height: 40px;
}
.ultimasnoticiasint {
	width: 100%;
	max-width: 1040px;
	height: 40px;
	margin: auto;
}
.ultnoticiasarea {
	height: 28px;
	background-color: #fff;
	border: 1px solid #ccc;
	margin-top: 10px;
	border-radius: 2px;
}
.ultnoticiastitulo {
	background-color: #ff0000;
	color: #fff;
	height: 28px;
	line-height: 28px;
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
	font-size: 16px;
}
.ultnoticiasnoticia {
	color: #000;
	height: 28px;
	line-height: 28px;
	display: inline-block;
	padding-left: 10px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}
.containerint  {
	width: 100%;
	max-width: 1040px;
	margin: auto;
}  
.leftside {
     width: 750px;
     float: left;
}
.rightside {
	width: 278px;
	min-height: 300px;
    float: right;
    margin-left: 12px;
}
.widget {
    border: 1px solid #ccc; 
	background-color: #fff;
	margin-bottom: 10px;
	border-radius: 2px;
}
.widget_titulo {
    height: 30px;
    line-height: 30px;
    background-color: #ddd;
    border-bottom: 1px solid #ccc;
    padding-left: 5px;
    font-size: 14px;
}
.widget_conteudo {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.noticia_item {
	font-size: 14px;
	margin:0px 10px;
	padding: 10px 0px;
	text-align: left;
	border-bottom: 1px solid #ccc;
}
.noticia_item a {
	text-decoration: none;
	color: #000;
}
.slideshow {
	height: 335px;
	overflow: hidden;
}
.slideshow_area {
	 width: 10000px;
     height: 335px;
}
.slide {
	height: 335px;
	float: left;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.slide img {
	height: 335px;
	width: 750px;
}
.slideinfo {
	position: relative;
    top: -70px;
    height: 70px;
    background-image: url(../images/slideshow_bg.png);
    background-size: auto 70px;
    z-index: 10000;
    text-align: center;
}
.slideinfo_titulo {
	font-size: 20px;
	color: #fff;
	top: 15px;
}
.slideimfo_subtitulo {
	font-size: 13px;
	color: #fff;
}

<html>
<head>
	<title>Html Portal</title>
	<meta charset="utf-8">
	<meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
	<link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
   <div class="topo">
   	<div class="topoint">
       <div class="topoleft">
          <ul>
              <li><a href="./" class="ativo"> Home<a/></li>
              <li><a href="Quem somos">Quem Somos<a/></li>
              <li><a href="Anuncie aqui">Anuncie Aqui<a/></li>
              <li><a href="Contato">Contato<a/></li>
          </ul>
       </div>
       <div class="toporight">
       	    <input type="image" border="0" src="images/lupabranca.png" width="26" height="26" >
       	    <input type="text" name="busca" class="topobusca" placeholder="Busca..." >
            <a href=""><img src="images/youtube.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="images/twitter.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="images/facebook.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="images/googleplus.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="images/rss.png" border="0" width="26" height="26" /></a>
        </div>
   	</div>
</div>
    <div class="topo2">
       <div class="topo2int">
           <div class="logo">
             <img src="images/logo.jpg" border="0" width="230"/>
           </div>
           <div class="banner">
          </div>
       </div>
    </div>
     <div class="menu">
      <div class="menuint">
        <ul>
          <li><a href="./" class="ativo">Home<a/></li>
          <li><a href="./" >Economia<a/></li>
          <li>
            <a href="./" >Entretenimento<a/>
            <img src="images/arrowdown.png" border="0" width="10"/>
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
                  <a href="./"><div class="submenuitem">submenu2</div></a>
                  <a href="./"><div class="submenuitem">submenu3</div></a>
                  <a href="./"><div class="submenuitem">submenu4</div></a>
                  <a href="./"><div class="submenuitem">submenu5</div></a>
              </div>
            </li>
          <li> 
            <a href="./" >Esportes<a/>
            <img src="images/arrowdown.png" border="0" width="10">
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
                  <a href="./"><div class="submenuitem">submenu2</div></a>
                  <a href="./"><div class="submenuitem">submenu3</div></a>
              </div>
          </li>
          <li><a href="./" >Geral<a/></li>
          <li>
            <a href="./" >Notícias<a/>
            <img src="images/arrowdown.png" border="0" width="10">
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
                  <a href="./"><div class="submenuitem">submenu2</div></a>
                  <a href="./"><div class="submenuitem">submenu3</div></a>
                  <a href="./"><div class="submenuitem">submenu4</div></a>
              </div>
          </li>
          <li><a href="./" >policia<a/></li>
          <li><a href="./" >Videos<a/></li>
       </ul>
    </div>
    </div>
       <div class="ultimasnoticias">
        <div class="ultimasnoticiasint">
          <div class="ultnoticiasarea">
             <div class="ultnoticiastitulo">ÚLTIMAS NOTÍCIAS</div>
             <div class="ultnoticiasnoticia">Alguma nótícia de algum texto que vai aparecer aqui...</div>
          </div>
    </div>
  </div>
      <div class="container">
        <div class="containerint">
            <div class="leftside">
                <div class="slideshow" id="slideshow">
                     <div class="slideshow_area">
                        <div class="slide">
                          <img src="http://placecage.com/200/200">
                          <div class="slideinfo">
                              <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                              <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
                          </div>
                        </div>
                        <div class="slide"><img src="images/jornal.jpg"></div>
                        <div class="slide"><img src="images/nfl.jpg"></div>
                        <div class="slide"><img src="images/champions.jpg"></div>
                        
                        </div>
                     </div>
                </div>
                <div class="rightside">
                <div class="widget">
                   <div class="widget_titulo">SOCIAL</div>
                  <div class="widget_conteudo">
                        <a href=""><img src="images/youtube.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="images/twitter.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="images/facebook.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="images/googleplus.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="images/rss.png" border="0" width="26" height="26" /></a>
                  </div>
             </div>
                <div class="widget">
                   <div class="widget_titulo">ULTIMAS NOTÍCIAS</div>
                  <div class="widget_conteudo">
                      <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                         <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                  </div>
             </div>
                <div class="widget">
                   <div class="widget_titulo">PUBLICIDADADE</div>
                  <div class="widget_conteudo">
                      <img src="images/girl.jpg" border="0" width="275" >
                  </div>
             </div>
             <div class="widget">
                   <div class="widget_titulo">ENCONTRE-NOS NO FACEBOOK</div>
                  <div class="widget_conteudo">
                    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs&width=275&height=121&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="275" height="121" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                  </div>
             </div>
        </div>
            </div>
      </div>
</body>
</html>