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
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
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>