PF2G Posted June 18, 2012 Report Share Posted June 18, 2012 (edited) Boas eu estou a começar a trabalhar com CSS e neste momento estou a criar a Home Page, quero por o logtipo e o menu na mesma linha. Só que o menu está-me a dar alguns problemas, vai para baixo do logitipo, quando devia estar a frente, a caixa do submenu não aparece e a imagem de background a:hover do submenu tbm não aparece. Alguém me pode ajudar, sff? html <!----------------NAVIGATION-MENU----------------> <div id="header2"> <img src="images/logotipo.png"> <div id="menu"> <ul> <li>WATERPIK <ul> <a href="#"><li>Quem Somos</li></a> <img src="images/separador_submenu.png"> <a href="#"><li>Serviço Ao Cliente</li></a> <img src="images/separador_submenu.png"> <a href="#"><li>Parceiros</li></a> <img src="images/separador_submenu.png"> <a href="#"><li>Artigos Clínicos</li></a> </ul> </li> <a href="#"><li>PRODUTOS</li></a> <a href="#"><li>ONDE ESTAMOS</li></a> <a href="#"><li>CONTACTOS</li></a> <a href="#"><li>LOJA ONLINE</li></a> </ul> </div> </div> <!--------------END/NAVIGATION-MENU--------------> css /* head2 */ .thrColAbsHdr #header2 { height: 65px; } .thrColAbsHdr #header2 h1 { margin: 0; padding: 10px 0; } /* MENU */ #menu { width:100%; height:30px; } #menu ul { margin:0px; padding:0px; } #menu ul li { display:inline; height:30px; float:left; list-style:none; margin-left:15px; position:relative; } #menu li a { color:#fff; text-decoration:none; } #menu li a:hover { color:#000000; } #menu li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-image:url(images/box_submenu.png); } #menu li:hover ul { display:block; width:160px; } #menu li li { list-style:none; display:list-item; width:100%; } #menu li li a { color:#fff; text-decoration:none; } #menu li li a:hover { background-image:url(images/but_submenu.png); } /* END MENU */ /* end head2 */ Edited June 22, 2012 by PF2G Link to comment Share on other sites More sharing options...
brunoais Posted June 18, 2012 Report Share Posted June 18, 2012 Põe isso mais legível sff (cores e indentação). Põe a imagem dentro de um div, é preciso um bloco para fazer esse trabalho. Usa o float para por a imagem à esquerda e o outro div à direita. A soma da largura do elemento à esquerda e do elemento à direita tem que ser maior ou igual ao div que os contém (@id="header2"). Nota: Largura = width + padding + margin. "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%. Link to comment Share on other sites More sharing options...
PF2G Posted June 22, 2012 Author Report Share Posted June 22, 2012 Ja consegui alinhar o logotipo com o menu, so tenho um problema: não consigo por a imagem background no submenu: box-submenu: #menu li ul { margin:0px; padding:0px; display:none; position:absolute; left:0px; top:20px; background-image:url(images/box_submenu.png); but-submenu: hover #menu li li a:hover { background-image:url(images/but_submenu.png); } PS: @brunoais não estou a conseguir mudar a cor do codigo em html... Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted June 22, 2012 Report Share Posted June 22, 2012 PS: @brunoais não estou a conseguir mudar a cor do codigo em html... eu quando reparei que no novo site do forum as tags html deixaram de ser apresentadas com highlight, passei a usar as tags de php IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now