Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mauricio Macedo

Menu

Recommended Posts

Bem galera do forum vim aqui para pedir uma mega ajuda de vcs!

É o seguinte estou estruturando um layout coloquei o topo certinho as imagens a logo tudo perfeito como queria

só que chegou no meu e eu empaquei o menu nção fica logo a baixo do topo ele cai tipo lá para baixo como se fosse o rodape, tentei varias formas de coloca-lo e nada.

 

CSS:

 

* {margin:0; padding:0;}

#topo {width:100%; height:353px; background-image: url(file:///C|/Users/Mauricio/Desktop/layout%20site/img/bgtopo.jpg);background-repeat: repeat-x;}

#imgpos{ /* Para posicionar a imagem logo */
position: absolute;
right: 530px;
top: 133px;
}

#imgpos1{ /* Para posicionar a imagem me gusta 01 */
position: absolute;
left:150px; 
top: 80px;
}

#imgpos2{
position:absolute;
right:150px;
top: 80px;
}

#dentrotopo {
width:1403px; 
height:353px; 
margin:0 auto; 
padding-top:100px;}

#menu {
position: absolute;
width:100%; 
height:67px; 
background-image: url(file:///C|/Users/Mauricio/Desktop/layout%20site/img/bgmenu.jpg); 
background-repeat: repeat-x;
}

#dentromenu{ width:100%; 
height:67px; 
margin:0 auto; 

}

 

HTML:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="estilo/estilo.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meme Gusta</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('img/logo2.jpg')">

<a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo','','img/logo2.jpg',1)"><img src="img/logo.jpg" alt="logo" name="logo" width="504" height="63" border="0" id="imgpos" /></a>
<div id="topo">
</div>
<div id="dentrotopo">
<img src="img/imagemlogo.jpg" id="imgpos1" />
<img src="img/imagemlogo2.jpg" id="imgpos2" />
</div>

<div id="menu">
<div id="dentromenu">
<a href="" class ="links"> Home<a/>
<a href="" class= "links"> Envie sua tirinha<a/>
<a href="" class= "links"> Contato<a/>
</div>
</div>


</body>
</html>

 

Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, Maurício!

 

Acredito que seu problema seja por conta de como você fez o menu. Acredito eu, que o correto é fazer o menu usando UL, LI, etc. Acredito que seja que você fez o seu menu com DIVS, mas o correto seria usar outro modo (o que eu já citei). Bom, é isso, ve ai se você consegue fazer funcionar do jeito que você quer, modificando o jeito do HTML e CSS.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Por qual motivo você está usanso position: absolute no #menu?

E como foi citado na resposta de cima, utilize ul>li para fazer o seu menu.

Compartilhar este post


Link para o post
Compartilhar em outros sites

E como foi citado na resposta de cima, utilize ul>li para fazer o seu menu.

 

Por que? Não vejo necessidade do uso de uma lista quando não possui sub-menus (que neste caso vem a calhar o elemento LI, que suporta filhos em nível de bloco).

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu, por questões de organização, prefiro fazer assim. Pra mim um menu, normalmente, é uma listagem e pra listas eu uso ul>li / ol>li.

Mas quem quiser pode fazer uma lista com o que quiser ... :pinch:

Por que? Não vejo necessidade do uso de uma lista quando não possui sub-menus (que neste caso vem a calhar o elemento LI, que suporta filhos em nível de bloco).

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu, por questões de organização, prefiro fazer assim. Pra mim um menu, normalmente, é uma listagem e pra listas eu uso ul>li / ol>li.

Mas quem quiser pode fazer uma lista com o que quiser ... :pinch:

 

Mas semanticamente falando, colocar as ancoras diretamente em um contêiner é certo, não? Pois utilizando um leitor de tela o <a /> é lido pausadamente, como se houvesse uma vírgula ou quebra de linha entre eles.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Semanticamente falando eu sempre lembro desse texto: Cadê a semântica? :thumbsup:

 

O artigo em questão poe em cheque a construção de elementos em que há a necessidade de utilizar outros elementos (a/k/a div e spans) para a "perfeita" renderização do "layout".

 

Aqui estamos abordando algo menor, e repetitivo no fórum, que é a construção de menus simples, em apenas um nível.

 

Mas como opinião é que nem .., cada um tem o seu né, hehe. No fim prefiro a construção mais simples com <a />'s direto num contêiner. :thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu havia esquecido de definir a que posição eu queria e acabou dando certo!

Qualquer coisa volta a pedir ajude de vocês

Abração a todos e muito obrigado pela atenção foi o único fórum com tempo recorde pra responder um tópico meu. ;D

Compartilhar este post


Link para o post
Compartilhar em outros sites

O artigo fala sobre a semântica das coisas e como as pessas tendem a exagerar nesse aspecto, citei o link por que você usou a palavra. E acho que pra bastante gente é seria uma ótima leitura.

 

Ainda sobre listas - concordo contigo que opinião cada um tem a sua e código cada um faz o seu - prefiro usar os li's mesmo: http://www.w3.org/TR/html401/struct/lists.html ... vai de cada um mesmo.

 

O artigo em questão poe em cheque a construção de elementos em que há a necessidade de utilizar outros elementos (a/k/a div e spans) para a "perfeita" renderização do "layout".

 

Aqui estamos abordando algo menor, e repetitivo no fórum, que é a construção de menus simples, em apenas um nível.

 

Mas como opinião é que nem .., cada um tem o seu né, hehe. No fim prefiro a construção mais simples com <a />'s direto num contêiner. :thumbsup:

 

Mauricio Macedo, que bom que o seu problema foi resolvido. Precisando volte a postar :thumbsup:

Eu havia esquecido de definir a que posição eu queria e acabou dando certo!

Qualquer coisa volta a pedir ajude de vocês

Abração a todos e muito obrigado pela atenção foi o único fórum com tempo recorde pra responder um tópico meu. ;D

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas semanticamente falando, colocar as ancoras diretamente em um contêiner é certo, não? Pois utilizando um leitor de tela o <a /> é lido pausadamente, como se houvesse uma vírgula ou quebra de linha entre eles.

 

Se o link é lido pausadamente, não teria problema usar <li> pois ele está dentro da lista, certo? Qual leitor de tela que diferencia tags html?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se o link é lido pausadamente, não teria problema usar <li> pois ele está dentro da lista, certo? Qual leitor de tela que diferencia tags html?

 

Não posso afirmar, pois infelizmente nunca tentei utilizar algum leitor, e desconheço usuários destes. O que me baseio é pelo que leio em artigos e notícias. Mas é um bom teste/experiência para fazermos não?

 

Pelo que vi tem alguns principais como Jaws, Orca (Linux), Virtual Vision e NVDA (este parece ser o único open para ambiente Windows).

 

O que acham de criar um tópico/sessão para discutirmos sobre? Pois acredito que uma marcação voltada para o perfeito entendimento nesses sintetizadores é melhor do que uma marcação "semanticamente" (termo que utilizei anteriormente, mas é facilmente derrubada com vários recursos que utilizamos no desenvolvimento :pinch: ) correta. A própria W3C faz recomendações para esses leitores, mas será que eles lidam corretamente com elas? É algo grande pra discutir num tópico alheio. :thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ja testei leitores de tela, não lembro quais, e nenhum reconheceu as tags html, só texto puro.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ja testei leitores de tela, não lembro quais, e nenhum reconheceu as tags html, só texto puro.

 

Pois é, por isso sugiro outra área/tópico para discutirmos isso. É recomendado ênfase e/ou entonação diferente de acordo com as tags, virgulas, <br />s. A ordem da leitura parece ser determinada por tags de título (h1~h6). Problemas com image-replacement etc etc etc. :wacko:

Compartilhar este post


Link para o post
Compartilhar em outros sites

O que acham de criar um tópico/sessão para discutirmos sobre? Pois acredito que uma marcação voltada para o perfeito entendimento nesses sintetizadores é melhor do que uma marcação "semanticamente" (termo que utilizei anteriormente, mas é facilmente derrubada com vários recursos que utilizamos no desenvolvimento :pinch: ) correta. A própria W3C faz recomendações para esses leitores, mas será que eles lidam corretamente com elas? É algo grande pra discutir num tópico alheio. :thumbsup:

 

 

Acho interessante a ideia, já li algumas coisas sobre isso e penso que o assunto é pertinente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.