Ir para conteúdo

POWERED BY:

Arquivado

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

rafaacampos

Divs aumentando tamanho da página

Por , em Desenvolvimento frontend

Recommended Posts

rafaacampos    0

rafaacampos
Postado

Boa noite pessoal, estou fazendo um trabalho de desenvolvimento web e surgiu um problema na minha página, quando adicionei 2 divs em uma página, elas estão dentro de outra div chamada conteúdo, porém não é a div#conteudo que expandiu, me parece ser o body.

vou deixar uma foto e o código html e css.

As divs que fizeram a página expandir são: #msg_trocar e #thumb.

retirando elas a página volta a "quase ao normal", me parece que todas as divs, aside, section, nav, header, tudo aumenta um pouco a página ;x

desculpem qualquer erro bobo, estou aprendendo ainda!

Obrigado desde já!!!

 

O problema é a parte amarela abaixo da parte branca.

 

link da imagem:

http://postimg.org/image/cb39okub1/

 

código html:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Pet Shop</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/menu.css" type="text/css">
        <link rel="stylesheet" href="css/pagina.css" type="text/css">
        <link rel="stylesheet" href="css/fundo.css" type="text/css">
        <link rel="stylesheet" href="css/husky.css" type="text/css">
    </head>
    <body>
        
        <script type="text/javascript">  
            function changeImage(a) 
            {  
            document.getElementById("img").src=a;  
            }  
        </script> 
        
        <div id="mundo">
            <figure id="pata">
                <img src="pata.png">
            </figure>
            <figure id="pata2">
                <img src="pata.png">
            </figure>
            <figure id="pata3">
                <img src="pata.png">
            </figure>
            <figure id="pata4">
                <img src="pata.png">
            </figure>
            <figure id="pata5">
                <img src="pata.png">
            </figure>
            <figure id="pata6">
                <img src="pata.png">
            </figure>
            <figure id="pata7">
                <img src="pata.png">
            </figure>
            <figure id="pata8">
                <img src="pata.png">
            </figure>
            <figure id="pata9">
                <img src="pata.png">
            </figure>
            <figure id="pata10">
                <img src="pata.png">
            </figure>
            <figure id="pata11">
                <img src="pata.png">
            </figure>
            <figure id="pata12">
                <img src="pata.png">
            </figure>
            <figure id="pata13">
                <img src="pata.png">
            </figure>
            <figure id="pata14">
                <img src="pata.png">
            </figure>
            <figure id="pata15">
                <img src="pata.png">
            </figure>
            <figure id="pata16">
                <img src="pata.png">
            </figure>
        <div id="conteudo">
            <figure id="banner">
                <img src="banner.jpg">
            </figure>
                <nav id="menu">
                    <ul>
                        <li><a href="index.html">Novidades</a></li>
                        <li><a href="animais.html">Animais</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="servicos.html">Serviços</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            <section>
                <figure id="fotoPrin">
                    <img id="img" src="imagens_caes/husky/husky.jpg">
                </figure>
            </section>
            <aside id="inf">
                <table>
                    <tr><td>Nome:</td><td>Husky Siberiano</td></tr>
                    <tr><td>Altura:</td><td>55cm</td></tr>
                    <tr><td>Peso:</td><td>25kg</td></tr>
                    <tr><td>Gênero:</td><td>Macho</td></tr>
                    <tr><td colspan="2" id="apenas">Por Apenas</td></tr>
                    <tr><td colspan="2" id="preco">R$ 1500,00</td></tr>
                    <tr><td colspan="2" id="parc">Em Até 10x no cartão de crédito</td></tr>
                </table>
                <figure id="comprar">
                    <a href="Contato.html"><img src="botao_comprar.jpg"></a>
                </figure>
            </aside>
            <div id="msg_trocar">
                Clique nas miniaturas abaixo para expandir.
            </div>
            <div id="thumb">
                <img id="foto1" src="imagens_caes/husky/husky.jpg"  onclick='changeImage("imagens_caes/husky/husky.jpg");'>
                <img id="foto2" src="imagens_caes/husky/husky2.jpg"  onclick='changeImage("imagens_caes/husky/husky2.jpg");'>
                <img id="foto3" src="imagens_caes/husky/husky3.jpg"  onclick='changeImage("imagens_caes/husky/husky3.jpg");'>
            </div>
        </div>
        </div>
    </body>
</html>

código css:

figure#fotoPrin
{
    box-shadow: 1px 1px 1px black;
    position: absolute;
    margin: 300px 100px;
    height: 350px;
    width: 400px;
}

figure#fotoPrin img
{
    height: 350px;
    width: 400px;
}

aside#inf
{
    height: 300px;
    width: 350px;
    position: absolute;
    margin: 325px 530px;
    font-size: 20px;
}
td#apenas
{
    position: absolute;
    margin: 50px 100px;
    font-weight: bold;
    font-size: 22px;
}

td#preco
{
    position: absolute;
    margin: 90px 100px;
    color: red;
    font-weight: bold;
    font-size: 25px;
    text-align: right;
}

td#parc
{
    position: absolute;
    margin: 120px 65px;
    color: blue;
    font-size: 15px;
}

figure#comprar
{
    box-shadow: 1px 1px 1px black;
    height: 70px;
    width: 300px;
    position: absolute;
    margin: 140px 20px;
}

figure#comprar img
{
    height: 70px;
    width: 300px;
}

div#thumb
{
    box-shadow: 1px 1px 1px black;
    height: 120px;
    width: 380px;
    margin: 675px 112px;
    position: absolute;
}

img#foto1
{
    height: 120px;
    width: 120px;
    position: absolute;
    margin: 0px 0px;
}

img#foto2
{
    height: 120px;
    width: 120px;
    position: absolute;
    margin: 0px 130px;
}

img#foto3
{
    height: 120px;
    width: 120px;
    position: absolute;
    margin: 0px 260px;
}

div#msg_trocar
{
    position: absolute;
    height: 20px;
    width: 265px;
    margin: 653px 170px;
}

body
{
    background-color: #FFFF99;
    margin: 0 auto;
    height: 910px;
}

div#conteudo
{
    width: 900px;
    height: 900px;
    background-color: floralwhite;
    margin: 0px 200px;
}

div#mundo
{
    margin: 0 auto;
    height: 900px;
    width: 1300px;
}

figure#banner
{
    margin: 0 auto;
    position: absolute;
    width: 900px;
    height: 198px;
}

figure#banner img
{
    width: 900px;
    height: 198px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafaacampos    0

rafaacampos
Postado

dei uma reformulada no código e percebi que a página apenas com o banner e o menu ela fica correta, porém ao adicionar a primeira imagem (#img) dependendo do tamanho dela, ela aumenta a página.

como resolvo isso para eu não ficar limitado a usar uma imagem pequena?

 

com esse tamanho que está no código 200x250px a página fica normal, porém quando eu mudo para o tamanho que eu quero 400x350 a página aumenta ;x

 

segue os códigos reformulados

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Pet Shop</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/menu.css" type="text/css">
        <link rel="stylesheet" href="css/pagina.css" type="text/css">
        <link rel="stylesheet" href="css/fundo.css" type="text/css">
        <link rel="stylesheet" href="css/husky.css" type="text/css">
    </head>
    <body>
        
        <script type="text/javascript">  
            function changeImage(a) 
            {  
            document.getElementById("img").src=a;  
            }  
        </script> 
        
        <div id="mundo">
            <img id="pata" src="aaa.jpg">
            <img id="pata2" src="aaa.jpg">
        <div id="conteudo">
            <figure id="banner">
                <img src="banner.jpg">
            </figure>
                <nav id="menu">
                    <ul>
                        <li><a href="index.html">Novidades</a></li>
                        <li><a href="animais.html">Animais</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="servicos.html">Serviços</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            
                <img id="img" src="imagens_caes/husky/husky.jpg">
        </div>
        </div>
    </body>
</html>


#img
{
    box-shadow: 1px 1px 1px black;
    position: absolute;
    margin: 300px 100px;
    height: 250px;
    width: 200px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito