Ir ao conteúdo
  • Cadastre-se

Como centralizar um div "escapando" da div mãe


juliobino

Posts recomendados

Senhores segue o HTML e CSS respectivamente:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>..:: Skull Store ::..</title>

<link rel="stylesheet" type="text/css" href="css/estilos.css" />

</head>

<body background="imagens/bg.gif">

<div id="header"><!-- inicio da header -->
<img src="imagens/header.png" />
</div> <!-- fim do header -->

<div id="box"> <!-- inicio da box -->

<div id="menu"> <!-- inicio do menu -->
<img src="imagens/menu_fundo.png" />
</div> <!-- fim do menu -->

<div id="escritas_menu"> <!-- inicio do escritas menu -->

<ul>

<a href="#"> <li>Home</li> </a>
<a href="#"> <li> Venda de KK's </li> </a>
<a href="#"> <li> Addons/Mounts </li> </a>
<a href="#"> <li> Quem Somos </li> </a>
<a href="#"> <li> Contato </li> </a>

</ul>

</div> <!-- fim do escritas menu -->

<div id="lateral_esquerda"> <!-- começo lateral esquerda -->

<div id="noticias"> <!-- inicio das noticias -->
<img src="imagens/noticias.png" />
</div> <!-- fim das noticias -->

<div id="divisor_vertical"> <!-- inicio do divisor vertical -->
<img src="imagens/divisoria_vertical.gif" />
</div> <!-- fim do divisor vertical -->

</div> <!-- fim lateral esquerda -->

<div id="lateral_direita"> <!-- começo lateral direita -->

<div id="box_servicos"> <!-- começo da box serviços -->
<img src="imagens/outros_servicos.png" />
</div> <!-- fim da box serviços -->

<div id="servicos"> <!-- começo dos serviços -->

<div id="premmy"> <!-- começo premmy -->
<a href="#"> <img src="imagens/premmy.png" /> </a>
</div> <!-- fim premmy -->

<div id="ibot_days"> <!-- começo ibot days -->
<a href="#"> <img src="imagens/ibot_days.png" /> </a>
</div> <!-- fim ibot days -->

<div id="camisetas"> <!-- começo camisetas -->
<a href="#"> <img src="imagens/shirts_tibia.png" /> </a>
</div> <!-- fim camisetas -->

<div id="stuff"> <!-- começo stuff -->
<a href="#"> <img src="imagens/stuff.png" /> </a>
</div> <!-- fim começo stuff -->

</div> <!-- fim dos serviços -->

<div id="divisor_horizontal_um"> <!-- começo divisor horizontal um -->
<img src="imagens/linha_horizontal.gif" />
</div> <!-- fim divisor horizontal um -->


<div id="box_links"> <!-- começo da box links -->
<img src="imagens/links_uteis.png" />

<div id="box_tempo_online"> <!-- começo tempo online -->
<a href="#"> <img src="imagens/tempo_online.png" /> </a>
</div> <!-- fim tempo online -->

<div id="site_ibot"> <!-- começo site ibot -->
<a href="#"> <img src="imagens/sie_ibot.png" /> </a>
</div> <!-- fim site ibot -->

<div id="tibia_wiki"> <!-- começo tibia wiki -->
<a href="#"> <img src="imagens/tibia_wiki.png" /> </a>
</div> <!-- fim tibia wiki -->

<div id="tibia_br"> <!-- começo tibiabr -->
<a href="#"> <img src="imagens/tibia_br.png" /> </a>
</div> <!-- fim tibiabr -->

</div> <!-- fim da box links -->


<div id="divisor_horizontal_dois"> <!-- começo divisor horizontal dois -->
<img src="imagens/linha_horizontal.gif" />
</div> <!-- fim divisor horizontal dois -->


<div id="ads"> <!-- começo dos ads -->
<img src="imagens/pagseguro.jpg" width="250" height="250"/>
</div> <!-- fim dos ads -->

</div> <!-- fim lateral direita -->
</div> <!-- fim da box -->

</body>


</html>




@charset "utf-8";
/* CSS Document */

body{
font-family:"Trebuchet MS", Arial, tahoma;
text-align:center;
}

#box{
background:#FFF;
width:815px;
-webkit-border-radius: 20px;
-moz-border-radius:20px;
margin:0 auto;
text-align:left;


}

#menu{
width:872px;


}
#escritas_menu ul{
width:730px;
background:green;
margin:0;
padding:0;
list-style:none;


}

#escritas_menu ul li{
display:inline;
}


>>> O problema e o seguinte: preciso que o "#menu" ( que e o fundo do meu menu ) fique centralizado na "#box" porém ele deve ficar com os cantos escapando para a body do html.Para depois eu poder colocar a lista com as categorias emcima

Soluçoes?maneiras mais praticas?

Deixo uma imagem de como deve ficar essa parte do layout:

68a9.png

explicando a imagem:

-a textura preta e o bg do meu body lá no HTML.

-os bonecos e a logotipo,tem um fundo transparente e foram jogados nesse local ( no caso e a "#header")

-este menu arredondado que precisa ficar como na foto ( lembrando que mentalizei em 2 etapas esse menu : 1. colocar o fundo no local

2. colocar a lista "ul li" em cima

é o jeito mais fácil/correto?

Link para o comentário
Compartilhar em outros sites

  • Moderador

Qual é o erro que dá?

se possivel mostre um print do problema...

De primeira vista.. eu solucionava deixando a div do menu maior do que a div do conteudo.. .. para isso eu tiraria a div do meu de dentro da #box .. e usaria apenas um margin 0 auto no #box para ficar centralizado

Link para o comentário
Compartilhar em outros sites

Qual é o erro que dá?

se possivel mostre um print do problema...

De primeira vista.. eu solucionava deixando a div do menu maior do que a div do conteudo.. .. para isso eu tiraria a div do meu de dentro da #box .. e usaria apenas um margin 0 auto no #box para ficar centralizado

Obrigado pela dica div,de poquinho vou pegando essa "manhas"

ty

Link para o comentário
Compartilhar em outros sites

Arquivado

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

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...