(Resolvido) Erro com posicionamento de DIV's

Anderson Ferreira · Setembro 17, 2009

Boa noite galera ...

Bom, estou com o seguinte problema (imagens vale mais que palavras):

O problema é a parte vermelha q não sobe :angry:

A parte laranja é a DIV "conteudo_geral" q engloba tudo...

A parte branca lateral é a DIV "men" (onde fica o menu)...

E por fim, a parte vermelha é a DIV "conteudo_texto_geral" (onde está o texto)... A FDMãe não qr subir . :ninja:

Segue abaixo todo o código fonte:

INDEX.PHP

<HTML>

<HEAD>

        <title> xxx </title>

        <link rel="stylesheet" href="style.css" media="all" type="text/css">

        &lt;script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        &lt;script type="text/javascript" src="js/menu_sanfona.js"></script>

</HEAD>


<BODY>

    <div class='tudo'>

        <div class='cabecario'>

            <img align='left' src='img/xxx.png' class='logotipo'>

        </div> <!-- FIM - DIV "cabecario" -->

<div class="conteudo_geral" align='left'>

            <div class="menu" align='left'>

                <dl>

                    <dt class='bg_aba_menu'><a href="#">INÍCIO</a></dt>
                    <dt class='bg_aba_menu'><a href="#">SOBRE NÓS</a></dt>
                    <dt class='bg_aba_menu'><a href="#">CONTATO</a></dt>

                    <dt class='bg_aba_categorias'><a href="#">CATEGORIAS</a></dt>

                        <dd>

                            <ul>

                                <li>

                                    <a href="#">DESIGN</a>

                                        <ul class="jquery_sub_categorias">
                                            <li class='marcador_none'><a href='#'>Fireworks</a></li>
                                            <li class='marcador_none'><a href='#'>Photoshop</a></li>
                                        </ul>

                                </li>



                                <li>
                                    <a href="#">REDES</a>
                                        <ul class="jquery_sub_categorias">
                                            <li class='marcador_none'><a href='#'>Hub</a></li>
                                            <li class='marcador_none'><a href='#'>Switch</a></li>
                                            <li class='marcador_none'><a href='#'>Roteador</a></li>
                                        </ul>
                                </li>



                                <li>
                                    <a href="#">PROGRAMAÇÃO</a>
                                        <ul class="jquery_sub_categorias">
                                            <li class='marcador_none'><a href='#'>C / C++</a></li>
                                            <li class='marcador_none'><a href='#'>Java</a></li>
                                            <li class='marcador_none'><a href='#'>Java Script</a></li>
                                            <li class='marcador_none'><a href='#'>PHP</a></li>
                                        </ul>
                                </li>

                            </ul>

                        </dd>
                </dl>

            </div> <!-- FIM - DIV "menu" -->





        


            <div class="conteudo_texto_geral">

                ABCDERFGHI

            </div> <!-- FIM - DIV "conteudo_texto_geral" -->





        </div> <!-- FIM - DIV "conteudo_geral" -->

    </div> <!-- FIM - DIV "tudo" -->

</BODY>

</HTML>

STYLE.CSS

/*
Theme name: xxx 1.0
Theme URL: http://www. xxx.com/
Description: Tema 1.0 do site xxx.com
Author: Anderson Ferreira e Matheus Mattos
*/

*
    {
    margin: 0;
    padding: 0;
    font-family: Tahoma, helvetica, serif;
    }

body
    {
    background: #009fdf url(img/body_bg.gif) repeat-x top;
    }

.tudo
    {
    width: 962px;
    position: absolute;
    left: 50%;
    margin: 10px 0 0 -481px;
    }


/* ---------- INICIO DO HEADER (CABECARIO) ---------- */

.cabecario
    {
    width: 962px;
    height: 136px;
    background: url('img/cabecario_bg.gif') no-repeat;
    }

.logotipo
    {
    margin: 20px 0 0 20px;
    width: 319px;
    height: 82px;
    }


/* ---------- CRIACAO DO conteudo_geral (conteudo_geral) ---------- */

.conteudo_geral
    {
    position:absolute;
    margin:-22px 0 0 0;
    width: 962px;
    background: #FF9900;
    }


.conteudo_texto_geral
    {
    width: 200px;
    height: 200px;
    margin: 0 0 0 250px;
    background: #FF0000;
    }



/* ---------- INICIO DA menu (MENU) ---------- */

.menu
    {
    margin: 0;
    padding: 20px 0 0 0;
    width: 200px;
    background: #FFF;
    }

dl
    {
    width: 200px;
    }

dl,dd
    {
    width: 200px;
    }

dt
    {
    height: 22px;
    font-size: 18px;
    padding: 5px;
    }

dt a
    {
    margin: 0 0 0 15px;
    color: #FFF;
    text-decoration: none;
    }

dd a
    {
    color: #000;
    text-decoration: none;
    }

ul
    {
    width: 135px;
    padding: 5px 0 5px 35px;
    list-style: url('img/menu_marcador.gif');
    background: #FFF;
    }

.marcador_none
    {
    list-style: none;
    }

.bg_aba_menu
    {
    background: #FFF url('img/bg_aba_menu.gif') no-repeat;
    }

.bg_aba_categorias
    {
    background: #FFF url('img/bg_aba_categorias.gif') no-repeat;
    }

Editado Janeiro 23, 2010 por Anderson Ferreira

rickayron · Setembro 17, 2009

top: 13%; -> sob desce

left: 1%; -> esqueda direita

margin-top: -90px; -> auxilia o pot margem

margin-left: -100px; ->auxilia o left margem

utilize esses comandos orientar melhor o posisionamento da div haverá sempre uma impatibilibade entre browsers o posicionamento no ie as vezes fica desconfigurado no opera mas isso é um grande pepino até mais

ESerra · Setembro 17, 2009

Movendo: PHP » CSS...

Anderson Ferreira · Setembro 17, 2009

Sim .. rickayron, da maneira q você comentou, nãi iria dar certo. também tentei assim.

O problema era o do lado. porque tipo, eu podia colocar um todo de -100px por exemplo, na DIV onde está o texto. Mas quando eu aumentasse o menu em mais 100px na height, ai eu teria q diminuir os -100px da DIV do texto, para -200px :S // ai ficaria uma coisa meia q manual. Toda vez q eu colocasse uma nova categoria no menu, teria q ficar modificando direto.

Então fui mexendo aq, e não sei como consegui xD

A parte do "index.php" deixei da mesmo maneira...

Alterei somente o CSS. Deixando da seguinte maneira:

/* ==================== CABECARIO ==================== */

.cabecario
    {
    width: 962px;
    height: 136px;
    background: url('img/cabecario_bg.gif') no-repeat;
    }

.logotipo
    {
    margin: 20px 0 0 20px;
    width: 319px;
    height: 82px;
    }


/* ==================== CONTEUDO ==================== */

.conteudo_geral
    {
    position:absolute;
    margin: 0;
    width: 962px;
    background: #FF9900;
    }

.conteudo_texto
    {
    width: 737px;
    height: 242px;
    float:right;
    margin: 0 0 0 0;
    background: #FF0000;
    }


/* ==================== MENU ==================== */

.menu
    {
    margin: 0;
    padding: 20px 0 0 0;
    width: 225px;
    float:left;
    background: #FFF;
    }

[...]

Obrigado mesmo assim pela ajuda :D

Abraços,

Anderson Ferreira

Jonathan Queiroz · Setembro 17, 2009

Vi que o tópico foi marcado por você como Resolvido. Mas de qualquer forma procure algo pela propriedade CSS float.

Anderson Ferreira · Setembro 17, 2009

Sim .. Resolvi o problema com o 'float' também (o float e o position)

Jonathan Queiroz · Setembro 17, 2009

Ok então !

Movi o tópico de JS para HTML.

Entrar

(Resolvido) Erro com posicionamento de DIV's

Pergunta

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

rickayron

Link para o comentário

Compartilhar em outros sites

ESerra

Link para o comentário

Compartilhar em outros sites

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Anderson Ferreira

Link para o comentário

Compartilhar em outros sites

Jonathan Queiroz

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades