Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Position: Relative no Header não fucionou

Olá

Preciso de ajuda quanto ao posicionamento das palavras chaves.

Inseri o Position: Relative no Header como foi sugerido, porém ele apenas alterou o posicionamento das minhas palavras chaves e as mesmas continuaram "atropelando" a foto home quando redimensiono a página.

Segue códigos:

<!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">
</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>
    </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>
                    <a href="blog.html">O essencial de design responsivo</a>
                </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

.subtitulo-principal{
    font-size: 1rem;   
}
.foto-home {
    height: 200px;

}
.saudacao p {
    font-size: 1.5em;
    color: #99A;
    line-height: 1;
    padding: 2em;
}
.saudacao-inicio {
    font-size: 3em;
    color: #889;
}
.saudacao-ultima-linha {
    text-align: right;
    display: block;
}
.saudacao strong {
    color: #000;
    font-size: 2em;
}
.saudacao em {
    color: #851944;
    font-size: 4em;
}
.botao-index {
    font-size: 1.25em;
    background-color: #851944;
    color: #FFF;
    border: .2em solid black;
    width: 40ch;
    margin: 2em auto;
    display: block;
    text-align: center;
}
.secao-inicio h2 {
    font-size: 3em;
    text-shadow: 2px 2px #000;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.trabalhos {
    background-color: #3C1D3D;
    border-top: 10px solid #000;
    border-bottom: 10px 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;
}

.blog small {
    position: relative;
    top: -2em;
}

.blog li a {
    color: #FCF;
    padding: .5em;
    display: block;
    padding: 2em;
}
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;
}

/* Posicionamento das Palavras chaves */

.palavra-home{
    font-weight: bolder;
    font-family: Shadows Into Light; 
    color: #D5447E;
    font-size: 1.5rem;
    position: absolute;
}

.eficiencia{
    top: 20%;
    left: 10%;
}
.boas-praticas{
    top: 20%;
    right: 10%;

}
.codigo-limpo{
    top: 10%;
    left: 20%;
}
.css3{
    top: 10%;
    right: 20%;
}
.html5{
    top: 40%;
    left: 10%;
}
.javascript{
    top: 40%;
    right: 10%;
}
.acessibilidade{
    top: 50%;
    left: 20%;
}
.responsivo{
    top: 50%;
    right: 20%;
}
.otimizacoes{
    top: 28%;
    left: 20%;
}
.agilidade{
    top: 28%;
    right: 28%;
}

.design{
    top: 18%;
    left: 34%;
}

header {
    position: relative;
}
6 respostas

Boa noite, Matheus! Tudo bem, cara? =)

Eu fiz um teste aqui com o seu código e apenas uma palavra-chave "atropelou" a imagem, que foi o Design, correto? No seu caso, teve mais alguma?

Para resolver isso, a única alteração que eu fiz foi alterar o left: 34% para left: 29% na classe design, assim:

.design {
    top: 18%;
    left: 29%;
}

Quando fiz isso, realizei o redimensionamento e não tive qualquer problema... Você poderia testar e me dar um feedback se tudo correu bem? Se não tiver solucionado, poderia mostrar um print para eu dar uma olhadinha?

De qualquer forma, espero ter ajudado, mas se ainda não tiver resolvido, posta aqui que vamos continuar até resolver seu problema! =)

Abraço e bons estudos,

Fábio

Oi Fábio.

Fiz o teste redimensionando pela metade da tela, porém o problema persiste.

E respondendo sua pergunta: Não apenas a palavra Design.

De que forma posso te mandar o print?

Matheus,

Você pode hospedar a imagem em algum lugar e postar o link aqui. Eu nunca usei, mas vários alunos costumam usar o Imgur para fazer isso... Mas fique à vontade para usar qualquer um que você conhecer. =)

Fábio

Ok, segue o print.

http://imgur.com/rLtLDQq

solução!

Matheus,

Agora saquei! Eu estava utilizando o modo responsivo do navegador, ao invés de redimensioná-lo!

A única solução que vejo é alterar o valor das porcentagens do posicionamento. E, dependendo de quanto você redimensionar, não vai fugir desse problema sem alterar o tamanho da fonte também, sacou? =|

Então o jeito é ir alterando os valores das propriedades top, left e right até que fique tudo ajustado. =)

Espero ter ajudado!

Abraço e bons estudos,

Fábio

Ok, Fábio.

Eu testei da sua forma, ou seja, utilizando o modo responsivo do navegador e funcionou como esperávamos.

De qualquer forma esta discussão serviu para avaliar se eu estava indo pelo caminho certo.

Agradeço muito por toda atenção, até mais!

: )