I'm trying to insert text into the gradient bar which is the slide of my slide show, but it does not appear. Can someone tell me what's wrong?
I made a zip folder with the files to facilitate! link
text is not appearing on the slide show!
0
asked by anonymous 02.05.2018 / 17:19
1 answer
0
Dude, your problem is that you are putting Text as if it were another slide. So the div <div class="slideinfo"> should actually be within <div class="slide"> I also made a CSS adjustment just so it would stay right inside it.
See how it looks below.
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"><divclass="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>
02.05.2018 / 17:41