[Resolvido] Estou com um problema com meu menu e logotipo!

Meh · Dezembro 14, 2010

Boa tarde!

Peço que por favor vcs me ajudem com meu problema, pois tenho uma div declarada para o logotipo e meu menu, só que meu menu não está alinhando abaixo da logotipo.

Código segue abaixo:

HTML ~~ CSS

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>.:: Móveis Tupy - 15 anos produzindo móveis de qualidade ::.</title>

</head>

<body>

Login: <input type="text" name="login">

Senha: <input type="password" name="senha">

<button type="submit">Entrar</button>

</form>

</div>

</div>

<h6>Móveis Tupy, a 15 anos produzindo móveis de qualidade.</h6>

</div>

</div>

<li><a href="#.html">Testando</a></li>

<li><a href="#.html">Teste dois</a></li>

</ul>

</div>

</div>

</body>

</html>

/* Documento CSS - Móveis Tupy */

/* Desenvolvido por Melina P. Girardi */

/* Inicio */

*{

Margin: 0px;

Padding: 0px;

list-style: none;

text-decoration: none;

}

/* RESET */

/*Body, definiçoes básicas*/

body {

height: 100%;

width: 100%;

font-family: "Trebuchet MS", Garamond, "Lucida Bright";

}

/*Parágrafos, Títulos, etc */

p {

color: #000;

font-size: 16px;

text-align: left;

}

h1 {

color: #232121;

font-size: 20px;

text-align: left;

}

h2, h3 {

color: #a50006;

text-align: left;

font-size: 20px;

}

h4,h5 {

color: #232121;

font-size: 14px;

text-align: center;

}

h6, h7 {

color: #FFF;

font-size: 16px;

text-align: right;

}

/* Fim Configuração geral: Fontes, Body */

/*Div Login*/

#Login {

background-color: #000;

width: 100%;

text-align: center;

color: #FFF;

}

/*Fim Div Login*/

/* Logotipo, Listra e Menu */

#Logotipo {

position: absolute;

width: 20%;

height: 110px;

margin-left: 10%;

margin-right: 10%;

background-color: #347AC4;

}

#Listra {

width: 80%;

height: 30px;

margin-left: 10%;

margin-right:10%;

}

#CampoMenu{

background-color: #EAEAEA;

width: 20%;

height: 500px;

margin-left: 10%;

margin-right: 10%;

border: 3px double #919294;

position: relative;

}

#Menu ul{

list-style: none;

}

#Menu li{

}

#Menu a{

color: #646464;

display:block;

text-decoration: none;

background-color: #423379;

border: 1px solid #000;

}

#Menu a:hover{

background-color: #522227;

}

/*Fim listra, menu e logotipo*/

/* Conteudo */

#Conteudo {

background-color: #FFF;

float: right;

width: 59%;

height: 500px;

margin-right: 10%;

border: 3px double #000;

}

/*Fim Conteudo*/

/*Rodape*/

#Rodape {

clear: both;

background-color: #a50006;

width: 80%;

height: 30px;

margin-left: 10%;

margin-right: 10%;

border: 2px solid #7D0002;

}

/*Fim Rodapé*/

/* Suft TI - Desenvolvido por Melina */

/* *----* */

/*Fim do CSS*/

Obrigado desde Já,

Imagens:

Com position: relative no #CampoMenu:

Sem Position relative no #CampoMenu:

Tentei por margin e padding tbm, só que o menu vai LÁ EM BAIXO ..

tá complicado. E ainda por cima tenho q jogar javascript nisso. bah. me ajudem se puderem, fico muito grata!

Preis85 · Dezembro 15, 2010

Eu acho que o problema esta em #Logotipo ter position:absolute.

Eu jogaria essa div #Logotipo para dentro de #CampoMenu e com poucas alterações no CSS estaria certo.

Testando aqui, cheguei nisso:

HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="keywords" name="Moveis, Tupy Cozinhas, mesas, cadeiras, cozinhas, balcoes"/>
<meta name="description" content="Móveis Tupy, 15 anos produzindo móveis de qualidade." />
<meta name="Author" content="Melina Girardi e Luiz Felipe Gehlen" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="30 days" />
<meta name="distribution" content="global" />
<meta name="rating" content="general" />
<meta name="content-language" content="pt-br" />
<link rel="stylesheet" type="text/css" href="MoveisTupy.css" media="all">
<title>.:: Móveis Tupy - 15 anos produzindo móveis de qualidade ::.</title>
</head>
<body>
<div id="Login">
<form name="Login" action="#" method="post" onsubmit="return validaForm()">
Login: <input type="text" name="login">
Senha: <input type="password" name="senha">
<button type="submit">Entrar</button>
</form>
</div>

<div id="Listra">
<h6>Móveis Tupy, a 15 anos produzindo móveis de qualidade.</h6>
</div>
<div id="Conteudo">
</div>
<div id="CampoMenu">
<div id="Logotipo">
</div>
<ul id="Menu">
<li><a href="#.html">Testando</a></li>
<li><a href="#.html">Teste dois</a></li>
</ul>
</div>
<div id="Rodape">
</div>
</body>
</html>

CSS

/* Documento CSS - Móveis Tupy */
/* Desenvolvido por Melina P. Girardi */
/* Inicio */
*{
Margin: 0px;
Padding: 0px;
list-style: none;
text-decoration: none;
}
/* RESET */
/*Body, definiçoes básicas*/
body {
background-image: url('../catalogo 2010/Fundo-Listrado.jpg');
height: 100%;
width: 100%;
font-family: "Trebuchet MS", Garamond, "Lucida Bright";
}
/*Parágrafos, Títulos, etc */
p {
color: #000;
font-size: 16px;
text-align: left;
}
h1 {
color: #232121;
font-size: 20px;
text-align: left;
}
h2, h3 {
color: #a50006;
text-align: left;
font-size: 20px;
}
h4,h5 {
color: #232121;
font-size: 14px;
text-align: center;
}
h6, h7 {
color: #FFF;
font-size: 16px;
text-align: right;
}
/* Fim Configuração geral: Fontes, Body */
/*Div Login*/
#Login {
background-color: #000;
width: 100%;
text-align: center;
color: #FFF;
}
/*Fim Div Login*/
/* Logotipo, Listra e Menu */
#Logotipo {
background-image: url('../catalogo 2010/LogoTupy.jpg');
height: 110px;
margin-left: 10%;
margin-right: 10%;
background-color: #347AC4;
}
#Listra {
background-image: url('../catalogo 2010/Fundo1.jpg');
background-color:#A50006;
width: 80%;
height: 30px;
margin-left: 10%;
margin-right:10%;
float:right;
}
#CampoMenu{
background-color: #EAEAEA;
width: 20%;
height: 500px;
margin-left: 10%;
margin-right: 10%;
border: 3px double #919294;
position: relative;
}
#Menu ul{
list-style: none;
}
#Menu li{
}
#Menu a{
color: #646464;
display:block;
text-decoration: none;
background-color: #423379;
border: 1px solid #000;
}
#Menu a:hover{
background-color: #522227;
}
/*Fim listra, menu e logotipo*/
/* Conteudo */
#Conteudo {
background-color: #FFF;
float: right;
width: 59%;
height: 500px;
margin-right: 10%;
border: 3px double #000;
}
/*Fim Conteudo*/
/*Rodape*/
#Rodape {
clear: both;
background-color: #a50006;
width: 80%;
height: 30px;
margin-left: 10%;
margin-right: 10%;
border: 2px solid #7D0002;
}
/*Fim Rodapé*/
/* Suft TI - Desenvolvido por Melina */
/* *----* */
/*Fim do CSS*/

Meh · Dezembro 15, 2010

Ah.. certo

testei aqui, só falta ajustar alguns tamanhos (%, px), que fica tudo certo.

Obrigado!!

PS: Podem marcar como Resolvido.. Muito Obrigaado ;D

Entrar

Arquivado

[Resolvido] Estou com um problema com meu menu e logotipo!

Recommended Posts

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Preis85 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Meh 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante