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

1px de linha entre a foto e a barra de navegacao

Ola para todos, primeiramente me desculpem a falta de acentos, meu teclado e alemao.

Eu vou colocar um print pra vcs entenderem a duvida e abaixo o meu codigo CSS.

Desde ja agradeco a todos que tentarem ajudar.

printsitejoao

e segue o link do codigo https://github.com/pdrPhantom/joaodasilvasite.githttps://github.com/pdrPhantom/joaodasilvasite.git

9 respostas

Baixei seu projeto, visualizei no chrome e não apresentou a linha em branco.

Obrigado Diego, parece que no FireFox fica essa linha branca, eu testei no chrome tambem depois que vc falou e funcionou :P sera que tem alguma coisa que eu posso mudar no codigo que vai funcionar igual em qualquer navegador?

Oi Pedro utiliza um reset.css antes para retirar pré-formataçãoes do navegador:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

salve em um arquivo reset.css e importe antes das suas regras CSS. Espero ter ajudado.

Oi Pedro você ainda tem alguma dúvida em relação a esse tópico ? Algo mais em que poderíamos ajudar ? Se não por gentileza poderia marcar uma solução para esse post.

Oi Maison, tudo bom?

Voce chegou a baixar o projeto e olhar? por que eu uso um reset nele. Mas enfim eu mudei uma linha do codigo, no menu de navegacao eu coloquei:

top: 309px;

No lugar de 310px, e ele chegou o menu 1px pra cima, acredito que nao seja a forma mais correta mas a diferenca no layout nao existe mais. Tanto no Chrome quanto no Firefox a aparencia do projeto eh a mesma agora.

Ps.: perdao pela falta de acentos.

Contudo a duvida nao esta solucianada, eu gostaria de saber se o que eu fiz eh a forma mais correta, e se nao qual seria a pratica correta para solucionar essa diferenca no layout.

Obrigado pela atencao.

Oi Pedro seu link do projeto tá incorreto, acredito que tá duplicado, mas eu consegui baixar agora, abrindo aqui seu projeto no Chrome e no Firefox nenhuma linha em branco no arquivo bio.html. Você utiliza zoom no navegador ? Alterou a fonte do navegador ? Se sim utilize as configurações padrões e vê se o problema persiste.

A medida px é uma medida absoluta o que significa que ela não se adapta ao tamanho da tela é aquela medida e pronto se alterarmos o zoom ou tamanho da fonte podemos "quebrar " algo no layout. Mas pra frente no curso vemos sobre medidas relativas que irão garantir que a página funcione em diferentes tamanhos de tela com medidas que se adaptam ao espaço disponível.

Oi Pedro e aí, como ficou, eu baixei o seu projeto novamente e tava ok, caso persista alguma dúvida a respeito desse exercício pode perguntar aqui mesmo ou se você não tiver mais nenhuma dúvida a respeito você pode marcar uma resposta como solução, finalizando assim esse tópico.Espero ter ajudado. Bons estudos.

solução!

Oi Maison, desculpa a demora para finalizar o topico. Ja estou bem na frente no projeto, obrigado pela ajuda.

Sem problemas, por nada.