Rodapé x Menu acordion

Início
Ant
1
Próximo
Fim

glauciarezende
Autor do Tópico
Offline
JCB! Senior

Mais

14 anos 10 meses atrás #9724 por glauciarezende

glauciarezende created the topic: Rodapé x Menu acordion

Olá, pessoal!

Problema no rodapé de um template que usa menu acordion. Acontece que se eu tiro o height (altura está em 750px) da minha div principal (um container)... o bendito rodapé cola no meu menu acorrdion... se eu não tiro essa altura da div, quando os outros textos passam de 750px eles atropelam meu rodapé...

O site é esse: http://www.wimpel.com.br/

As seções que usam menu acordion (produtos, manuais e ass. técnica).

O código do index.php :

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>

<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;

<html xmlns=" www.w3.org/1999/xhtml" ; xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" />
<link href="<?php echo $this->baseurl ?> wimpel.com.br/favicon.ico" ; type="image/x-icon" rel="shortcut icon">
<link href="<?php echo $this->baseurl ?> wimpel.com.br/favicon.ico" ; type="image/x-icon" rel="icon">
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/wimpel/javascript/md_stylechanger.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/wimpel/css/estilo.css" type="text/css" />
</head>

<body>

<div id="tudo">

<div id="menu">
<jdoc:include type="modules" name="mod_mainmenu" />
</div>

<div id="principal">

<div id="artigos">

<jdoc:include type="modules" name="slides"/>

<div id="fonte">
<script type="text/javascript">
//<![CDATA[
document.write('<h3><?php echo JText::_('Tamanho da Letra:'); ?></h3><p class="fonte">'); document.write('<a href="index.php" title="<?php echo JText::_('Increase size'); ?>"onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_(' '); ?></a><span class="unseen"> </span>');
document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>"onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_(' '); ?></a><span class="unseen"> </span>');
document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>"onclick="revertStyles(); return false;" class="reset"><?php echo JText::_(' '); ?></a></p>');
//]]>
</script>
</div>

<div id="navega">
<p><?php echo JText::_('Você está aqui:');?>
<jdoc:include type="module" name="mod_breadcrumbs" style="none" />
</p>
</div>

<jdoc:include type="modules" name="NOTICIAS"/>
<jdoc:include type="modules" name="conteudo"/>
<jdoc:include type="component" />
</div>

<div id="menus">
<jdoc:include type="modules" name="menu_produtos" />
<jdoc:include type="modules" name="menu_noticias" />
<jdoc:include type="modules" name="menu_manuais" />
</div>

<div id="menu_assis">
<jdoc:include type="modules" name="menu_assis" />
</div>

</div>

<div id="clear"> </div>

<jdoc:include type="modules" name="fim"/>

</div>

</body>
</html>

E o meu CSS:

* {
margin:0;
padding:0;
}

body {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
background: #2f7ed5 url(../images/fundo-wimpel-1.jpg) repeat-x;
}

* html #tudo #artigo {
height: 100%;
min-height:670px;
}

img {
border:0;
}

a {
text-decoration:none;
}

div#principal {
width:773px;
height:750px;
background-color:transparent;
}

#tudo {
position:absolute;
width:773px;
left:50%;
top:3%;
background: transparent url(../images/fundoIdeal.jpg) no-repeat;
margin-left:-387px;
}

#fonte {
position:relative;
color:#999999;
font-weight:normal;
z-index:1;
margin-top:10px;
margin-left:40px;
margin-bottom:10px;
}

#fonte h3, #fonte p {
border:0;
display:inline;
margin-right:5px;
font-size:14px;
}

#fonte p {
margin-top:-15px;
}

#fonte p a {
font-weight:normal;
display:inline;
text-decoration:none;
}

#fonte p a.larger {
background: url(../images/mais.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.smaller {
background: url(../images/menos.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.reset {
background: url(../images/zerar.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.larger:hover,#fonte p a.larger:active,#fonte p a.larger:focus {
background: url(../images/mais_out.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.smaller:hover,#fonte p a.smaller:active,#fonte p a.smaller:focus {
background: url(../images/menos_out.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#fonte p a.reset:hover,#fonte p a.reset:active,#fonte p a.reset:focus {
background: url(../images/zerar_out.gif) no-repeat;
width:19px;
height:18px;
padding-left:17px;
padding-top:1px;
}

#menu {
position:relative;
background-color:transparent;
margin-left:6px;
margin-top:12px;
z-index:2;
line-height:20px;
}

#menu ul {
list-style-type:none;
background-color:transparent;
}

#menu li a {
color:#ffffff;
background-color:transparent;
font-weight:bold;
font-size:13px;
}

#menu li a:hover {
background-color:transparent;
color:#00ccff;
font-weight:bold;
font-size:13px;
}

img.direita {
float:right;
margin-right:-30px;
margin-top:-20px;
}

#navega {
position:relative;
display:inline;
font-size:14px;
margin-left:40px;
background-color:transparent;
}

#navega p {
height:25px;
display:inline;
color:#666666;
font-size:14px;
}

#navega a {
display:inline;
color:#666666;
font-size:14px;
}

h1 {
position:relative;
color:#333399;
width:460px;
left:0px;
margin-top:20px;
font-weight:bold;
font-size:26px;
text-transform:uppercase;
border-bottom:1px dashed #cccccc;
}

.titulo_produtos {
color:#333399;
position:absolute;
width:470px;
top:200px;
font-size:26px;
left:167px;
font-weight:bold;
text-transform:uppercase;
border-bottom:1px dashed #cccccc;
}

div#slides {
position:absolute;
left:194px;
margin-top:145px;
}

div.noticias {
position:absolute;
top:200px;
left:490px;
width:103px;
height:401px;
font-size:12px;
padding-top:95px;
list-style-type:none;
color:#000099;
background:url(../images/noticias.png) no-repeat;
}

.noticias ul li {
float:left;
list-style-type:none;
margin-left:-20px;
margin-top:30px;
}

div.noticias a {
float:left;
color:#000099;
font-weight:bold;
}

div#produtos table {
position:relative;
margin-left:-5px;
margin-top:15px;
border: 2px solid #ccc;
background-color:#fff;
width:570px;
text-align:center;
border: 1px solid #ccc;
}

div#produtos tr td {
border: 1px solid #ccc;
}

div#menu_produtos h1 {
color:#000099;
position:relative;
width:100%;
margin-top:12px;
margin-bottom:15px;
margin-left:4px;
font-weight:bold;
text-transform:upercase;
border-bottom:1px dashed #cccccc;
}

div#produtos img {
margin:10px;
}

div#produtos p {
text-align:justify;
margin-left:5px;
margin-right:5px;
}

div#produtos h4 {
text-align:justify;
color:#000099;
text-align:center;
font-weight:bold;
}

div#produtos ul {
text-align:left;
margin-left:20px;
list-style-type:square;
color:#000099;
margin-bottom:15px;
}

div#produtos li {
line-height:15px;
margin-top:10px;
padding-left:3px;
}

div#conteudo {
left:-25px;
top:20px;
width:460px;
background-color:transparent;
}

div#conteudo p {
color:#000099;
margin-top:10px;
text-align:justify;
}

#artigos {
position:relative;
margin-top:-35px;
margin-left:150px;
min-height:100%; /* Para browsera modernos */
height:auto !important; /* Para browsera modernos */
height:100%; /* Para o IE6 */
background-color:transparent;
width:590px;
padding:5px;
color:#000099;
z-index:10000;
overflow:auto;
}

#artigos ol {
float:left;
list-style-type:none;
background-color:transparent;
margin-top:-10px;
margin-bottom:30px;
color:#000099;
}

#artigos li {
margin-top:15px;
color:#000099;
padding-left:30px;
line-height:20px;
background:url(../images/conexao1.gif) no-repeat;
}

div#manuais table {
color:#000099;
text-align:justify;
margin-top:30px;
width:440px;
}

div#manuais_lista table tr td{
border: 1px solid #ccc;
padding:4px;
color:#000099;
}

div#manuais_lista {
margin-top:30px;
}

.tituloTabelaManuais {
text-transform:uppercase;
font-weight:bold;
color:#000099;
}

div#manuais_lista a {
color:#000099;
}

div#manuais_lista a:hover {
color:#000099;
}

div#secao a {
position:relative;
margin-left:-24px;
margin-top:-2px;
line-height:27px;
text-align:left;
color:#000099;
}

div#secao a:hover {
color:#000099;
}

div#secao li {
list-style-type:none;
}

div#categoria a {
position:relative;
left:-4px;
top:25px;
line-height:27px;
text-align:left;
color:#000099;
}

div#categoria li {
list-style-type:none;
}

div#categoria a:hover {
color:#000099;
}

div#assistencia_endereco p {
position:relative;
margin-left:50px;
text-align:left;
color:#000099;
}

div#assistencia_endereco h4 {
color:#000099;
margin-top:50px;
margin-left:50px;
margin-bottom:17px;
}

div#contato {
position:relative;
margin-left:0px;
width:460px;
margin-bottom:-300px;
background-color:transparent;
}

div#contato h1 {
position:relative;
color:#333399;
width:450px;
left:0px;
margin-top:20px;
font-weight:bold;
font-size:26px;
text-transform:uppercase;
border-bottom:1px dashed #cccccc;
}

div#contato input {
position:absolute;
left:80px;
margin-bottom:6px;
background-color:#e1f9ff;
color:#000099;
}

div#contato textarea {
background-color:#e1f9ff;
color:#000099;
}

div#contato label {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
color:#000099;
}

div#contato .copia_email {
margin-left:-85px;
margin-top:6px;
}

div#tabela_thumb table {
width:570px;
background-color:#ffffff;
text-align:center;
}

div#tabela_thumb p {
text-align:center;
}

div#tabela_thumb {
position:relative;
margin-bottom:-400px;
}

div#tabela_thumb a {
font-size:12px;
text-align:center;
}

div#tabela_thumb img {
border:0;
}

div#tabela_thumb h4 {
text-align:center;
margin-bottom:10px;
}

div#icones {
margin-left:0px;
width:60px;
margin-top:30px;
background-color:transparent;
}

div#menus {
position:relative;
margin-left:50px;
margin-top:30px;
background-color:transparent;
}

div#box_noticia {
position:relative;
background-color:#ffcc33;
}

div#box_conteudo {
position:relative;
background-color:#000099;
}

div#mapa {
position:relative;
margin-top:30px;
margin-left:46px;
overflow:auto;
height:500px;
width:400px;
color:#000099;

}

div#mapa a, a:hover, a:visited {
color:#000099;
font-size:12px;
}

div#mapa h4 {
color:#333399;
font-weight:bold;
font-size:18px;
text-transform:uppercase;
margin-top:20px;
}

div#fim {
position:relative;
padding-top:40px;
left:0px;
height:79px;
margin-top:-60px;
background:transparent url(../images/pistola.jpg) no-repeat;
width:770px;
}

div#fim p {
color:#ffffff;
text-align:center;
}

div#menu_assis {
float:left;
margin-left:10px;
margin-top:0px;
background-color:transparent;
}

div#kel {
margin-top: 10px;
margin-left: 160px;
min-height:670px;
background-color: transparent;
}

div#clear {
clear: both;
}

Alguém tem alguma idéia? Meu cliente está satisfeito com tudo... mas preciso resolver essa questão do rodapé.

Preciso muito desta ajuda, estou desanimada...

Obrigada

Please Entrar ou Registrar to join the conversation.

Andre MaNcHa
Offline
JCB! Hero

Mais

14 anos 10 meses atrás #9799 por Andre MaNcHa

Andre MaNcHa replied the topic: Re: Rodapé x Menu acordion

Olá glauciarezende!

Eu tentaria resolver da seguinte forma:

- Colocaria o background da div#tudo como uma imagem contínua;
- Criaria uma div dentro da div#tudo para colocar a imagem "fundoIdeal.jpg" que vc está usando e é uma imagem inteira.
- A imagem de rodapé vc só arrumaria para acompanhar a imagem contínua da div#tudo.

Obs: Geralmente se usa várias divs para poder controlar as imagens de fundo e poder desenvolver um layout mais detalhado com imagens.

Parece complicado.. mas é bem simples.

A princípio não vejo outra forma de resolver para que vc continue usando a imagem que já possui!

Qualquer dúvida estamos aqui para ajudar. <img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" />

Please Entrar ou Registrar to join the conversation.

Início
Ant
1
Próximo
Fim

Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates