Ir ao conteúdo
  • Cadastre-se
juliobino

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

Recommended Posts

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?

Compartilhar este post


Link para o post
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

  • Curtir 1

Compartilhar este post


Link para o post
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

×