PF2G Posted June 18, 2012 at 11:10 AM Report Share #463621 Posted June 18, 2012 at 11:10 AM (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 at 09:48 AM by PF2G Link to comment Share on other sites More sharing options...
brunoais Posted June 18, 2012 at 05:53 PM Report Share #463768 Posted June 18, 2012 at 05:53 PM 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 at 09:30 AM Author Report Share #464869 Posted June 22, 2012 at 09:30 AM 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 at 09:41 AM Report Share #464876 Posted June 22, 2012 at 09:41 AM 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