[Problema] Resolução e Browsers

Julho 17, 2008

Galera, estou com um problema em minha página...

sou iniciante em tableless e CSS.

A página que desenvolvi fica, de acordo com a resolução do monitor e browser,

diferente uma da outra, no final do post tem as screenshots de como fica.

Porquê e como arrumo isso ?

é possível arrumar ?

Oque fiz de errado ?

Abaixo segue os códigos.

Obrigado.

Código HTML:

<!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>Menu Horizontal - Rox</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
    <!-- <div id="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Empresa</a></li>
            <li><a href="#">Finâncias</a></li>
            <li><a href="#">Trabalhe Conosco</a></li>
            <li><a href="#">Eventos</a></li>
            <li><a href="#">Fórum</a></li>
            <li><a href="#">Contato</a></li>
        
        </ul>
    </div>-->
    <div id="topo">
        <h1>StudiO.WEB</h1>
        <h2>Formando webdesigners desde 1996.</h2>
            <img class="imgtp" src="tp_menu_lat.jpg" alt="" />
    </div>
    
    <div id="menulat">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Empresa</a></li>
            <li><a href="#">Finâncias</a></li>
            <li><a href="#">Trabalhe Conosco</a></li>
            <li><a href="#">Eventos</a></li>
            <li><a href="#">Fórum</a></li>
            <li><a href="#">Contato</a></li>
        
        </ul>
    </div>
            <div id="conteudo">
                <h1>Bem Vindo ao StudiO.WEB!</h1>
                <p>
    O Mozilla Firefox é um dos melhores navegadores disponíveis atualmente e está         ganhando uma boa parte do mercado ao conquistar muitos usuários.
    
    Você pode utilizá-lo simultaneamente com o Internet Explorer ou qualquer outro navegador. Ele é capaz de importar os websites favoritos do IE para que o usuário não tenha que recriar todos os seus atalhos. As configurações do Mozilla Firefox são independentes e se você desejar, é possível utilizá-lo como o navegador padrão do sistema.
    
    Esta versão do navegador inclui a barra de ferramentas do Google, que adiciona funcionalidades essenciais à navegação, como uma caixa de busca do Google e um corretor ortográfico para formulários, tudo de graça. Se você nunca experimentou navegadores diferentes do que tem instalado no computador, esta é a grande hora de conferir o navegador da raposa e quem sabe mudar de opinião.
                </p>
            
            </div>
    
    
    <div id="rodape">
        <p> <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Política de privacidade</a></li>
                <li><a href="#">Termos de uso</a></li>
                <li><a href="#">Contato</a></li>
                <li><a href="#">Localização</a></li>
            </ul>
         </p>
    </div>
</body>
</html>

Código CSS:

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

* {
    margin: 0px;
    padding: 0px;
}

/*#menu {
    background:#222222;
    display:table;
    width:100%;
    }
    
#menu ul {list-style:none;}

#menu ul li {display:inline;}

#menu ul li a {
    background: #222222;
    padding: 5px 10px;
    font:13px Verdana, Arial, Helvetica, sans-serif;
    color:#fff;
    margin-left:1px;
    text-decoration: none;
    float:left;
    }
    
#menu ul li a:hover {
    background: #444;
    color:white;
    font-weight: 700;
    }*/
    
#topo {
    background-image:url(bg.jpg);
    width:100%;
    height:200px;
    margin:0px;
    }
    
#topo h1 {
    font: 56px Georgia, "Times New Roman", Times, serif;
    color:#FFFFFF;
    text-transform: capitalize;
    text-align: left;
    padding: 20px;
    margin: 0px;
    }
    
#topo h2 {
    font: 20px Georgia, "Times New Roman", Times, serif;
    color:#FFFFFF;
    text-transform: capitalize;
    text-align: right;
    padding: 20px;
    margin: -80px 0px;
    }

#topo .imgtp {
    margin: 166px 0px 0px 30px;
    }
    
#menulat {
    width: 171px;
    height: 100%;
    background:#FFF;
    border-right:1px solid #EEEEFF;
    margin: 0px 0px 0px 32px;
    }
    
#menulat ul {list-style:url(list_style.jpg); margin-top: -20px;  padding: 15px; margin-left: 10px;}

#menulat ul li a {
    color:#333333;
    text-decoration:none;
    /*padding: 100px 0px 0px 0px;*/
    font: 13px Verdana, Arial, Helvetica, Georgia;
    display: block;
    padding-top: 8px;
    
    }

#menulat ul li a:hover {
    font-weight: 600;
    }
        
#conteudo {
    color: #333333;
    font:Verdana, Arial, Helvetica, sans-serif 12px;
    text-align: left;
    float: right;
    weight: 100%;
    margin-top: -180px;
    margin-right: 0px;
    margin-left: 23%;
    }
    
#conteudo h1 {
    font: 25px Georgia, "Times New Roman", Times, serif;
    color:#FF3C3C;
    text-transform: none;
    padding: 15px;
    background:none;
    }
    
#conteudo p {
    color: #333333;
    font: 13px Verdana, Arial, Helvetica, sans-serif;
    line-height: 23px;
    }


#rodape {
    background-image:url(bg_rod.jpg);
    color:#FFF;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    width:100%;
    display:table;
    height:100px;
    }
    
#rodape ul {list-style:none;}

#rodape ul li {display:inline;}

#rodape ul li a {
    font:9px Verdana, Arial, Helvetica, sans-serif;
    color:#999999;
    text-decoration: underline;
    text-align: center;    
    padding: 0px 10px 0px 0px;
    }
    
#rodape ul li a:hover {
    text-decoration: none;
    }

#rodape p {
    margin: 50px auto auto 0px;
    }

Screenshots de como a página fica no internet explorer e no firefox,

em 1024x768 e em 800x600:

_______________________

1024 - Firefox

_______________________

1024 - IE

_______________________

800x600 - Firefox

_______________________

800x600 - IE

_______________________

Entrar

[Problema] Resolução e Browsers

Pergunta

Guest LukZ

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades