Jump to content

  2. →
  3. →
  4. →

Photo

Rodapé X Menu Acordion

Started By glauciarezende, 02/07/2009, 01:14

  • Faça o login para participar
Nenhuma resposta neste tópico

#1 glauciarezende

glauciarezende

    Novato no fórum

  • Usuários
  • 5 posts
  • Sexo:Não informado

Posted 02/07/2009, 01:14

Olá, pessoal!

Tenho um site na LocaWeb, feito em Joomla. O layout está com problema entre o menu acordion e o rodapé. 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é... Já postei tempos atrás o problema, pensei que tinha resolvido...dai o cliente manda um textão e ele sobrepõe o rodapé... se tiro o 750px (height da div principal) fica ok onde não tem menu acordion, mas onde tem o menu acordion ele cola (sobe) no menu.

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://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 ?>http://wimpel.com.br/favicon.ico" type="image/x-icon" rel="shortcut icon">
<link href="<?php echo $this->baseurl ?>http://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::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');
						document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>"onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('&nbsp;'); ?></a><span class="unseen">&nbsp;</span>');
						document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>"onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('&nbsp;'); ?></a></p>');
						//]]>
						</script>
					</div>
				
							<div id="navega">
								<p><?php echo JText::_('Voc&ecirc; est&aacute; 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">&nbsp;</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... :wacko:

Obrigada !
Voltar para CSS & Semântica (Tableless)


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq