Created
September 26, 2017 00:10
-
-
Save leandroCodeDev/3983cda75c5f9c605650b156785e59a3 to your computer and use it in GitHub Desktop.
Problema com responsividade. Não consigo aplicar os efeitos de responsividade no navegador chrome e opera.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<meta id="viewport" name="viewport" content="width=device-width, usersalable=no"> | |
<title>Projeto 2</title> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
<div class="topo"> | |
<div class="topo-conteudo"> | |
<div class="topo-content-left"> | |
<ul> | |
<li><A HREF="#" class="ativo">Home</A></li> | |
<li><a href="#">Quem Somos</a></li> | |
<li><a href="#">Anuncie Aqui</a></li> | |
<li><A HREF="#">Contato</A></li> | |
</ul> | |
</div> | |
<div class="topo-content-right"> | |
<input type="image" border="0" src="assets/images/lupa.png" width="26" height="26"> | |
<input class="topo-busca"type="text" name="busca" placeholder="Buscar ...."/> | |
<a href="#"><img src="assets/images/youtube.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/twitter.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/facebook.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/googleplus.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/rss.png" border="0" width="26" height="26"></a> | |
</div> | |
</div> | |
</div> | |
<div class="topo-logos"> | |
<div class="topo-logo-conteudo"> | |
<div class="logo"> | |
<img src="assets/images/logo.png" border="0" width="230"> | |
</div> | |
<div class="banner"> | |
</div> | |
</div> | |
</div> | |
<div class="todo-menu"> | |
<div class="menu"> | |
<ul> | |
<li><a href="#" class="ativo">Home</a></li> | |
<li><a href="#">Economia</a></li> | |
<li> | |
<a href="#">Entretenimento</a> | |
<img src="assets/images/arrowdown.png" border="0" width="10"> | |
<div class="submenu"> | |
<a href="#"><div class="submenu-item"> | |
subMenu 1 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 2 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 3 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 4 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 5 | |
</div></a> | |
</div> | |
</li> | |
<li> | |
<a href="#">Esporte</a> | |
<img src="assets/images/arrowdown.png" border="0" width="10"> | |
<div class="submenu"> | |
<a href="#"><div class="submenu-item"> | |
subMenu 1 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 2 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 3 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 4 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 5 | |
</div></a> | |
</div> | |
</li> | |
<li><a href="#">Geral</a></li> | |
<li> | |
<a href="#">Noticias</a> | |
<img src="assets/images/arrowdown.png" border="0" width="10"> | |
<div class="submenu"> | |
<a href="#"><div class="submenu-item"> | |
subMenu 1 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 2 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 3 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 4 | |
</div></a> | |
<a href="#"><div class="submenu-item"> | |
subMenu 5<img src="assets/images/arrowdown.png" border="0" width="10"> | |
<div class="submenu1"> | |
<a href="#"><div class="submenu-item1"> | |
subMenu 1 | |
</div></a> | |
<a href="#"><div class="submenu-item1"> | |
subMenu 2 | |
</div></a> | |
<a href="#"><div class="submenu-item1"> | |
subMenu 3 | |
</div></a> | |
<a href="#"><div class="submenu-item1"> | |
subMenu 4 | |
</div></a> | |
<a href="#"><div class="submenu-item1"> | |
subMenu 5 | |
</div></a> | |
</div> | |
</div></a> | |
</div> | |
</li> | |
<li><a href="#">Politica</a></li> | |
<li><a href="#">Videos</a></li> | |
</ul> | |
</div> | |
</div> | |
<div class="noticias"> | |
<div class="noticias-conteudo"> | |
<div class="noticas-infor"> | |
<div class="noticas-banner"> | |
ÚLTIMAS NOTICIAS | |
</div> | |
<div class="noticas-aviso"> | |
Alguma notícia de algum texto que irá ficar por aqui mesmo. | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="conatainer"> | |
<div class="container-corpo"> | |
<div class="container-noticias"> | |
<div class="slideshow" id="slideshow"> | |
<div class="slidecontrol"> | |
<div class="control" id="0" onclick="mudarSlide(0)"></div> | |
<div class="control" id="1" onclick="mudarSlide(1)"></div> | |
<div class="control" id="2" onclick="mudarSlide(2)"></div> | |
<div class="control" id="3" onclick="mudarSlide(3)"></div> | |
</div> | |
<div class="slideshow-area"> | |
<a href="#"> | |
<div class="slide" style="background-image:url('http://www.google.com.br/google.jpg')" > | |
<div class="slideinfo"> | |
<div class="Slideinfo-titulo">Titulo de teste 1</div> | |
<div class="Slideinfo-subtitulo">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old.</div> | |
</div> | |
</div> | |
</a> | |
<a href="#"> | |
<div class="slide" style="background-image:url('http://www.google.com.br/google.jpg')" > | |
<div class="slideinfo"> | |
<div class="Slideinfo-titulo">Titulo de teste 2</div> | |
<div class="Slideinfo-subtitulo">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old.</div> | |
</div> | |
</div> | |
</a> | |
<a href="#"> | |
<div class="slide" style="background-image:url('http://www.google.com.br/google.jpg')" > | |
<div class="slideinfo"> | |
<div class="Slideinfo-titulo">Titulo de teste 3</div> | |
<div class="Slideinfo-subtitulo">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old.</div> | |
</div> | |
</div> | |
</a> | |
<a href="#"> | |
<div class="slide" style="background-image:url('http://www.google.com.br/google.jpg')" > | |
<div class="slideinfo"> | |
<div class="Slideinfo-titulo">Titulo de teste 4</div> | |
<div class="Slideinfo-subtitulo">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old.</div> | |
</div> | |
</div> | |
</a> | |
</div> | |
</div> | |
<div class="widget"> | |
<div class="widget-titulo"> | |
NOTICIAS | |
</div> | |
<div class="widget-conteudo"> | |
<div class="noticiaarea-principal"> | |
<div class="noticiaitem noticiabig"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer Algum titulo | |
qualquerAlgum titulo qualquerAlgum titulo </div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
</div> | |
<div class="noticiaarea-destaque"> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
</div> | |
<div style="clear:both"></div> | |
</div> | |
</div> | |
<div class="widget"> | |
<div class="widget-titulo"> | |
NOTICIAS | |
</div> | |
<div class="widget-conteudo"> | |
<div class="noticiaarea-principal"> | |
<div class="noticiaitem noticiabig"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer Algum titulo | |
qualquerAlgum titulo qualquerAlgum titulo </div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
</div> | |
<div class="noticiaarea-destaque"> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
<div class="noticiaitem"> | |
<div class="noticiaimg" > | |
<img src="" border="0" width="80" height="80"/> | |
</div> | |
<div class="noticiatitulo"> Algum titulo qualquer</div> | |
<div class="noticiainfo"> 500 comentarios</div> | |
</div> | |
</div> | |
<div style="clear:both"></div> | |
</div> | |
</div> | |
</div> | |
<div class="container-destaques"> | |
<div class="widget"> | |
<div class="widget-titulo"> | |
SOCIAL | |
</div> | |
<div class="widget-conteudo"> | |
<a href="#"><img src="assets/images/youtube.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/twitter.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/facebook.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/googleplus.png" border="0" width="26" height="26"></a> | |
<a href="#"><img src="assets/images/rss.png" border="0" width="26" height="26"></a> | |
</div> | |
</div> | |
<div class="widget"> | |
<div class="widget-titulo"> | |
ULTIMAS NOTICIAS | |
</div> | |
<div class="widget-conteudo"> | |
<div class="noticia-item"> | |
<a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old. </a> | |
</div> | |
<div class="noticia-item"> | |
<a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old. </a> | |
</div> | |
<div class="noticia-item"> | |
<a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old. </a> | |
</div> | |
<div class="noticia-item"> | |
<a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old. </a> | |
</div> | |
<div class="noticia-item"> | |
<a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old. </a> | |
</div> | |
<div class="noticia-item"> | |
<a href="#">Contrary to popular belief, Lorem Ipsum is not simply random text. It | |
has roots in a piece of classical Latin literature from 45 BC, making it over | |
2000 years old. </a> | |
</div> | |
</div> | |
</div> | |
<div class="widget"> | |
<div class="widget-titulo"> | |
PUBLICIDADE | |
</div> | |
<div class="widget-conteudo"> | |
<img src="assets/images/banner.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=http%3A%2F%2Fwww.facebook.com%2FLeandrodsdias&tabs=timeline%2Cevents%2Cmessage&width=0&height=0&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2347824578775239" width="0" height="0" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript" src="script.js"></script> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var slideItem = 0; | |
window.onload = function() { | |
setInterval(passarSlide, 2000); | |
var slidewidth = document.getElementById("slideshow").offsetWidth; | |
var objs = document.getElementsByClassName("slide"); | |
for (var i in objs) { | |
objs[i].style.width = slidewidth; | |
} | |
} | |
function passarSlide() { | |
var slidewidth = document.getElementById("slideshow").offsetWidth; | |
if(slideItem >= 3){ | |
slideItem = 0; | |
}else{ | |
slideItem++; | |
} | |
document.getElementsByClassName("slideshow-area")[0].style.marginLeft = "-" + (slidewidth * slideItem)+"px"; | |
} | |
function mudarSlide(pos){ | |
slideItem = pos -1 ; | |
passarSlide(); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
margin: 0px; | |
font-family: Arial; | |
font-size: 12px; | |
} | |
.topo{ | |
height: 30px; | |
background-color: #333333; | |
color:#FFF; | |
} | |
.topo-conteudo{ | |
width: 100%; | |
max-width: 1040px; | |
height: 30px; | |
margin: auto; | |
} | |
.topo-content-left{ | |
float: left; | |
width: 50%; | |
height: 30px; | |
} | |
.ativo{ | |
color: blue; | |
} | |
.topo-content-left ul{ | |
margin: 0; | |
padding: 0; | |
float: left; | |
line-height: 30px; | |
} | |
.topo-content-left ul li{ | |
list-style: none; | |
float: left; | |
margin-left: 8px; | |
margin-right: 8px; | |
} | |
.topo-content-left li a{ | |
text-decoration: none; | |
color:#FFF; | |
} | |
.topo-content-left li a:active{ | |
color: blue; | |
text-decoration: none; | |
} | |
.topo-content-right{ | |
float: right; | |
width: 50%; | |
height: 28px; | |
line-height: 30px; | |
margin-top: 2px; | |
} | |
.topo-content-right a{ | |
float: right; | |
} | |
.topo-content-right img{ | |
margin-right: 2px; | |
margin-left: 2px; | |
} | |
.topo-content-right input{ | |
float: right; | |
} | |
.topo-busca{ | |
width: 110px; | |
height: 26px; | |
outline: 0; | |
border-bottom-left-radius: 5px; | |
border-top-left-radius: 5px; | |
} | |
.topo-logos { | |
height: 95px; | |
} | |
.topo-logo-conteudo { | |
width: 100%; | |
max-width: 1040px; | |
height: 95px; | |
margin: auto; | |
} | |
.logo { | |
width: 230px; | |
height :90px; | |
float: left; | |
margin-top: 5px; | |
} | |
.topo-logos .banner { | |
width: 650; | |
height :80px; | |
float: right; | |
margin-top: 7px; | |
background-color: red; | |
} | |
.todo-menu{ | |
height: 40px; | |
background-color: red; | |
} | |
.menu{ | |
width: 100%; | |
max-width: 1040px; | |
height: 40px; | |
margin: auto; | |
} | |
.menu ul{ | |
padding: 0; | |
margin: 0; | |
list-style: none; | |
} | |
.menu li { | |
float: left; | |
height: 40px; | |
line-height: 40px; | |
padding-left: 8px; | |
padding-right: 8px; | |
} | |
.menu li:hover .submenu{ | |
display: block; | |
} | |
.menu li a{ | |
color: #FFF; | |
text-decoration: none; | |
} | |
.submenu{ | |
width: 150px; | |
background-color: red; | |
position: absolute; | |
display: none; | |
} | |
.submenu-item{ | |
width: 130px; | |
height: 30px; | |
line-height: 30px; | |
padding-left: 20px; | |
} | |
/* teste de menu de sub niveis*/ | |
.submenu-item:hover .submenu1{ | |
display: block; | |
} | |
.submenu-item:hover{ | |
background-color: #FF5555; | |
} | |
.submenu1{ | |
width: 150px; | |
background-color: red; | |
position: absolute; | |
display: none; | |
margin-left: 130px; | |
margin-top:-30px; | |
} | |
.submenu-item1{ | |
width: 130px; | |
height: 30px; | |
line-height: 30px; | |
padding-left: 20px; | |
} | |
.submenu-item1:hover{ | |
background-color: #FF5555; | |
} | |
/* termina aqui teste*/ | |
.noticias{ | |
height: 40px; | |
} | |
.noticias-conteudo{ | |
width: 100%; | |
max-width: 1040px; | |
height: 40px; | |
margin: auto; | |
} | |
.noticas-infor{ | |
width: 100%; | |
height: 28px; | |
background-color: #FFF; | |
border: 1px solid #CCC; | |
margin-top: 10px; | |
} | |
.noticas-banner{ | |
background-color: #FF0000; | |
color: #FFF; | |
height: 28px; | |
display: inline-block; | |
line-height: 28px; | |
padding-left: 10px; | |
padding-right: 10px; | |
font-size: 16px; | |
} | |
.noticas-aviso{ | |
color: #000; | |
height: 28px; | |
line-height: 28px; | |
display: inline-block; | |
padding-left: 5px; | |
} | |
.container-corpo{ | |
width: 100%; | |
max-width: 1040px; | |
margin: auto; | |
} | |
.container-noticias{ | |
width: 100%; | |
max-width: 753px; | |
float: left; | |
} | |
.container-destaques{ | |
width: 275px; | |
min-height: 200px; | |
float: right; | |
margin-left: 12px; | |
} | |
.widget{ | |
background-color: #FFF; | |
border:1px solid #CCC; | |
margin-bottom: 10px; | |
} | |
.widget-titulo{ | |
height: 30px; | |
line-height: 30px; | |
background-color: #DDD; | |
border-bottom: 1px solid #CCC; | |
font-size: 14px; | |
padding-left: 2px; | |
} | |
.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: black; | |
} | |
.slidecontrol{ | |
position: absolute; | |
width: 200px; | |
height: 20px; | |
} | |
.control{ | |
width: 20px; | |
height: 20px; | |
float: left; | |
margin-right: 3px; | |
margin-left: 2px; | |
cursor: pointer; | |
background-color: #CCC; | |
border-radius: 10px; | |
} | |
.slideshow{ | |
background-color: #CCC; | |
height: 335px; | |
overflow: hidden; | |
margin-bottom: 15px; | |
} | |
.slideshow-area{ | |
height: 335px; | |
width: 100000px; | |
background-color: #DDD; | |
transition: all 1s; | |
} | |
.slide { | |
height: 335px; | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: cover; | |
float: left; | |
} | |
.Slideinfo{ | |
height: 70px; | |
background-image: url('../images/slideshow_bg.png'); | |
background-size: auto 70px; | |
margin-top: 265px; | |
} | |
.Slideinfo-titulo{ | |
font-size: 20px; | |
color:#FFF; | |
padding-top: 15px; | |
padding-left: 20px; | |
} | |
.Slideinfo-subtitulo{ | |
font-size: 13px; | |
color:#FFF; | |
padding-left: 20px; | |
} | |
.noticiaarea-principal{ | |
width: 430px; | |
height: 420px; | |
float: left; | |
} | |
.noticiaitem{ | |
text-align: left; | |
height: 89px; | |
margin-top: 7px; | |
margin-bottom: 7px; | |
} | |
.noticiaarea-destaque{ | |
width: 320px; | |
height: 420px; | |
float: left; | |
} | |
.noticiaimg{ | |
width: 80px; | |
height: 80px; | |
border: 1px solid #CCC; | |
padding: 3px; | |
float: left; | |
} | |
.noticiatitulo{ | |
float: left; | |
margin-left: 6px; | |
font-size: 16px; | |
width: 225px; | |
} | |
.noticiainfo{ | |
float: left; | |
margin-left: 6px; | |
font-size: 12px; | |
color: #999; | |
width: 225px; | |
} | |
.noticiabig { | |
margin-left: 10px; | |
} | |
.noticiabig .noticiaimg{ | |
width: 384px; | |
height: 220px; | |
} | |
.noticiabig .noticiaimg img{ | |
width: 384px; | |
height: 220px; | |
} | |
.noticiabig .noticiatitulo{ | |
font-size: 30px; | |
width: 384px; | |
} | |
@media only screen (max-width:1059px) { | |
.topo-conteudo, | |
.topo-logo-conteudo, | |
.menu, | |
.noticias-conteudo, | |
.container-corpo{ | |
max-width: 890px; | |
} | |
.container-noticias{ | |
width: 600px; | |
} | |
.noticiaarea-principal{ | |
width: 278px; | |
} | |
.noticiabig .noticiaimg{ | |
width: 245px; | |
} | |
.noticiabig .noticiaimg img{ | |
width: 245px; | |
} | |
.noticiabig .noticiatitulo{ | |
font-size: 25px; | |
width: 245px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Faltou um and na linha 408 do style.css.