Galera boa tarde,
Estava com o mesmo problema que a maioria do pessoal aqui, o meu banner estava saindo fora da pagina e criou um scroll horizontal. No meu caso eu coloquei o codigo overflow: hidden e deu certo. Porém gostaria de entender o motivo pelo qual eu coloquei esse codigo overflow no elemento e ele nao funcionou, depois coloquei no elemento pai (header-) e tbm nao funcionou, só foi funcionar no elemento body. Legal ter funcionado mais nao gostaria de ter que ficar testando em cada elemento até achar onde da certo, gostaria de entender o pq funcionou em 1 e nos outros não. Segue abaixo meu codigo. Obrigado.
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>João da Silva - Desenvolvedor Web</title>
<link rel="shortcut icon" href="imagens/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
</head>
<body>
<header class="titulo-principal">
<img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
<h1>João da Silva</h1>
<p class="subtitulo-principal">Desenvolvedor web</p>
<ul>
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
<a class="sigame" href="">Siga-me no twiter</a>
</header>
<main>
<section class="secao-inicio saudacao">
<p class="saudacao"><span class="saudacao-inicio">Olá,</span> meu nome é <strong>João da Silva</strong> <span class="saudacao-ultima-linha">e eu construo <em>sites maravilhosos</em></span></p>
<a class="botao-index" href="bio.html">Conheça mais um pouco sobre mim</a>
</section>
<section class="secao-inicio trabalhos">
<h2>Trabalhos</h2>
<ul>
<li><img src="imagens/bmw.png" alt="Site da BMW"></li>
<li><img src="imagens/ibm.png" alt="Site da IBM"></li>
<li><img src="imagens/uol.png" alt="Site da UOL"></li>
</ul>
<a class="botao-index" href="portfolio.html">Veja mais</a>
</section>
<section class="secao-inicio blog">
<h2>Blog</h2>
<small>Últimos posts</small>
<ol>
<li class="mais-recentes">
<a href="blog.html">O essencial de design responsivo</a>
<p class="inicio-post">
Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?
</p>
</li>
<li>
<a href="blog.html">Por que fazer páginas acessíveis?</a>
</li>
<li>
<a href="blog.html">JavaScript não obstrusivo</a>
</li>
</ol>
<a class="botao-index" href="blog.html">Veja mais</a>
</section>
</main>
<footer>
<h2>Vamos conversar?</h2>
<p>Você pode entrar em contato comigo <a href="contato.html">por e-mail</a> ou pelo telefone <a href="tel:+551234567890">(12) 3456-7890</a></p>
</footer>
</body>
</html>
-------------------------------------------------------
CSS (site.css)
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 120%;
line-height: 1.5;
overflow-x: hidden;
}
h1,
h2,
.subtitulo-principal {
font-family: "Open Sans Condensed", "Arial", sans-serif;
}
h1 {
text-transform: uppercase;
font-size: 60px;
}
.titulo-principal {
text-align: center;
background-color: #851944;
color: #FFF;
padding: 25px;
border-bottom: 10px solid #000;
overflow-x: auto;
}
.subtitulo-texto {
font-size: 30px;
clear: both;
}
main a {
color: #851944;
}
main p {
text-align: justify;
margin: 20px 0;
}
.navegacao-site {
text-align: center;
background-color: #3C1D3D;
color: #F2FFFC;
padding: 20px;
}
.navegacao-site a {
color: inherit;
font-family: "Open Sans Condensed", "Arial", sans-serif;
text-transform: lowercase;
}
.navegacao-site h1 {
font-size: 30px;
margin-bottom: 25px;
}
.rodape-pagina {
background-color: #000;
color: #F2FFFC;
padding: 20px;
clear: both;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
.container {
width: 720px;
margin-left: auto;
margin-right: auto;
padding: 30px 0;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.icones-redes-sociais li {
display: inline-block;
}
.icones-redes-sociais a {
width: 40px;
height: 40px;
display: block;
text-indent: -99999px;
}
.github {
background-image: url(../imagens/github.png);
}
.twitter {
background-image: url(../imagens/twitter.png);
}
.linkedin {
background-image: url(../imagens/linkedin.png);
}
main {
width: 80%;
float: left;
padding-bottom: 80px;
}
.minha-foto,
.navegacao-site {
border-left: 10px solid black;
border-bottom: 10px solid black;
box-sizing: border-box;
}
.navegacao-site {
width: 20%;
float: right;
position: relative;
top: 300px;
}
.minha-foto {
position: absolute;
top: 0;
right: 0;
height: 300px;
}
--------------------------------------------
CSS (index.css)
.foto-home {
height: 200px;
border-radius: 10% 50% / 50% 10%;
}
header{
absolute: relative;
}
.palavra-home {
position: absolute;
font-family: 'Shadows Into Light', cursive;
color: #D5447E;
font-size: 1.5rem;
}
.eficiencia{
left: 2em;
top: 5em;
transform: rotate(20deg);
}
.boas-praticas{
left: 15em;
top: 5em;
transform: rotate(10deg);
}
.codigo-limpo{
left: 20em;
top: 3em;
transform: rotate(-10deg);
}
.css3{
left: 35em;
top: 12em;
transform: rotate(-20deg);
}
.html5{
left: 10em;
top: 11em;
transform: rotate(30deg);
}
.javascript{
left: 1em;
top: 11em;
transform: rotate(50deg);
}
.acessibilidade{
left: 17em;
top: 8em;
transform: rotate(-20deg);
}
.responsivo{
left: 9em;
top: 2em;
transform: rotate(-50deg);
}
.otimizacoes{
left: 25em;
top: 9em;
}
.agilidade{
left: 30em;
top: 3em;
}
.design{
left: 33em;
top: 3em;
}
.saudacao p {
font-size: 1.5em;
color: #99A;
line-height: 1;
padding: 2em;
}
.saudacao-inicio {
font-size: 3em;
color: #889;
}
.sigame{
position: absolute;
background-color: #400080;
color: #FFF;
padding: 10px 60px;
top:0;
right: 0;
transform-origin: 0 0;
border: 5px solid #000;
transform: translate(7.05em, -2.2868em) rotate(45deg) ;
}
.saudacao-ultima-linha {
text-align: right;
display: block;
}
.saudacao strong {
font-size: 2em;
color: #000;
}
.saudacao em {
display: inline-block;
color: #851944;
font-size: 4em;
transform: skew(-10deg) rotate(-5deg);
}
.botao-index {
font-size: 1.25em;
background-color: #851944;
color: #FFF;
padding: .5em;
border: .2em solid black;
width: 40ch;
margin: 2em auto;
display: block;
text-align: center;
-webkit-depth: 10px;
-webkit-transform: skew(20deg)
rotate(30deg)
scale(1.2);
perspective: 4px;
}
.secao-inicio {
padding: 2em;
}
.secao-inicio h2 {
font-size: 3em;
text-shadow: 2px 2px #000;
text-transform: uppercase;
margin-bottom: .5em;
}
.trabalhos {
background-color: #3C1D3D;
border-top: .5em solid #000;
border-bottom: .5em solid #000;
}
.trabalhos h2 {
color: #FFF;
}
.trabalhos ul {
overflow: hidden;
border: .5em solid black;
}
.trabalhos li {
float: left;
width: 33.333%;
}
.trabalhos img {
width: 100%;
display: block;
}
.blog {
background-color: #999;
color: #FFF;
border-bottom: .5em solid #851944;
position: relative;
}
.blog small {
position: relative;
top: -2em;
}
.blog li a {
color: #FCF;
padding: .5em;
display: block;
}
.mais-recentes a{
background-color: #FFF;
width: 50%;
}
.inicio-post{
position: absolute;
top: 4em;
left: 30%;
right: 3em;
height: 8em;
background: #FFF;
padding: 1em;
color: black;
}
footer {
background-color: #000;
color: #FFF;
padding: 2em;
}
footer h2 {
font-size: 3em;
}
footer a {
color: #F99;
}
main {
width: 100%;
padding-bottom: 0;
float: none;
}obrigado pela ajuda.
