posição absoluta

[feliper 0]

Fala pessoal, faz muito tempo que não vinha aqui, resolvi me reciclar e estou aprendendo html5 + css3 com umas videos aulas na web e foi ai que surgiu uma duvida. Estou fazendo o site http://www.feliper.com/html5/index.html para aprender mas estou com um certo problema na posição do menu e do oculos.

 

 

Se eu utilizar a visualização fullhd 1920x1080 o menu e o oculos são exibidos corretamente como pode ser visto abaixo.

 

 

 

 

 

 

Se eu utilizar qualquer resolução menor que esta fica desfigurado, veja o exemplo:

 

 

 

O que eu queria saber é como faço para que independente do tamanho da tela(visualização) da pessoa o menu e o oculos permaneça no local indicado da resolução 1920x1080.

 

O codigo CSS que uso está logo abaixo e pode ser visto também na pagina:http://www.feliper.com/html5/index.html

 

 

@charset "UTF-8";
body {
    background-color: #DDDDDD;
    color: rgba(0,0,0,1);
}

div#interface {
    width: 900px;
    background-color: white;
    margin: -20px auto 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}

p {
    text-align: justify;
    text-indent: 50px;
}

header#cabecalho img#icone {
    position: absolute;
    left: 65%;
    top: 40px;
}

/* Formatação de imagens com legendas */
figure.foto-legenda {
    position: relative;
    border: 8px solid white;
    box-shadow: 1px 1px 4px black;
}

figure.foto-legenda img {
    width: 100%;
    height: 100%;
}

figure.foto-legenda figcaption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
    color: white;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    transition: opacity 1s;
}

figure.foto-legenda:hover figcaption {
    opacity: 1;
}

/* Formatação do menu */
#nav#menu {
    display: block;
}

nav#menu ul {
    list-style: none;
    text-transform: uppercase;
    position: absolute;
    top: -20px;
    left: 41%;
}

nav#menu li {
    display: inline-block;
    background-color: #DDDDDD;
    padding: 10px;
    margin: 2px;
    transition: background-color 1s;
}

nav#menu li:hover {
    background-color: #606060;
}

nav#menu h1 {
    display: none;
}

nav#menu a {
    color: black;
    text-decoration: none;
}

nav#menu a:hover {
    color: white;
}

 

 

Conto com ajuda de vocês :worship:

[xanburzum 169]

qual o link dos vídeos html5 + css3 vc esta acessando.

[Maujor 144]

Quando se posiciona de forma absoluta um box as coordenadas left e top são tomadas em relação ao elemento ancestral do box que tenha sido posicionado de forma relativa ou absoluta. Esse elemento cria um contexto de posicionamento.

Se não houver aquele elemento ancestral posicionado as coordenadas são tomadas em relação ao elemento body, o canto superior esquerdo da janela do navegador. ( Esse é o caso do seu código).

Assim, quando você varia a largura da janela os 41% e 65% de coordenada left para o menu e para o óculos se referem ao canto superior da janela e não ao canto superior da área do site (div#interface).

Para corrigir o problema:
1- defina a div#interface como sendo o contexto de posicionamento.
2-) defina a coordenada direita do menu como sendo 0, para ele 'encostar' na lateral direita da #interface.
3-) o mesmo para o óculos #icone.

 

div#interface {
  position: relative;
  ...
}

nav#menu ul { 

  ...
  left: 41%; <--- retire essa declaração
  right: 0;
}


header#cabecalho img#icone { 
  ...
  left: 65%; <--- retire essa declaração
  right: 0;
}

Mais: Sempre que possível, simplifique a grafia dos seus seletores. Isso incrementa a performance.

Por exemplo:

#interface em lugar de div#interface

#icone em lugar de header#cabecalho img#icone

[feliper 0]

Opa,

 

qual o link dos vídeos html5 + css3 vc esta acessando.

 

Estou assistindo estes: http://www.youtube.com/user/cursosemvideo

 

 

 

 

Maujor, não deu muito certo não veja:

 

 

 

Creio que não soube explicar direito.

[Maujor 144]

Controle o posicionamento do menu e do óculos com a coordenada right.

 

Por exemplo:

right: -20px; para o óculos.
right: 20px para o menu.

 

Por que você tirou a página do ar?
Outros, no futuro, poderão ter a mesma dúvida e ao consultar ela não está mais lá.

Não se quebra links em fóruns. Se preferir hospede seu código no JSfiddle ou outro serviço gratuito de hospedagem de códigos.

 

[feliper 0]

Olá Maujor, primeiramente gostaria de agradece-lo pela ajuda, e não retirei do servidor o site não, está online e estou vendo normal.

[Maujor 144]

Ok Feliper.
Agora estou visualizando a página normalmente.
Por favor marque o post como RESOLVIDO.