Ir para conteúdo

POWERED BY:

Arquivado

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

mauelement

Layout com módulos flexiveis

Recommended Posts

Pessoal, estou construindo um layout com a seguinte configuração:

 

TOPO

CONTEUDO............| BARRA A DIREITA

RODAPE

 

Segue imagem do layout:

Imagem Postada

 

Quando acesso algum link do menu que fica no topo, os módulos dentro da div da barra a direita não ficam mais visíveis. A barra lateral só é visível na página principal.

 

Porém eu estando dentro de um dos link o espaço da barra lateral fica lá, mesmo ela não aparecendo a div eo módulo do conteúdo não ocupa 100% de largura da página.

 

Gostaria de saber como fazer pra que ao módulo ficar invisível em um determinado artigo, a largura do content pegar a largura total da página. Senão fica um espaço em branco horrível =/

 

imagem mostrando o que ocorre:

Imagem Postada

 

Meus últimos testes foram o seguinte:

 

head

	<?php
	if($this->countModules('atalhos and central-de-informacoes') == 0) $contentwidth = "100";
	if($this->countModules('atalhos or central-de-informacoes') == 1) $contentwidth = "70";
	if($this->countModules('atalhos and central-de-informacoes') == 1) $contentwidth = "70";
	?>

html

    <div id="global">

       
        <div id="cabecalho">
            <h1 class="logo"> Logo </h1>
				<div id="usuario">
                    <jdoc:include type="modules" name="login" style="xhtml" />
                    <jdoc:include type="modules" name="menu-de-usuario" style="xhtml" />                        
				</div>            

            <div class="clear-left"> </div>
			
            <jdoc:include type="modules" name="menu-principal" style="xhtml" />      

        </div><!-- #cabecalho -->
               
       
        <div id="conteudo">  	
            <jdoc:include type="component" style="xhtml" />
        </div><!-- #conteudo -->
    
		<div id="barra-lateral">
			<?php if($this->countModules('atalhos')) : ?>
                <div id="atalhos">            
                    <jdoc:include type="modules" name="atalhos" style="xhtml" />
                </div>
            <?php endif; ?>
            
            <?php if($this->countModules('central-de-informacoes')) : ?>
                <div id="central-de-informacoes">            
                    <jdoc:include type="modules" name="central-de-informacoes" style="xhtml" />
                </div>                    
            <?php endif; ?>
        </div>
        
    </div><!-- #global -->
    
        <div id="rodape"> 
            <jdoc:include type="modules" name="rodape" style="xhtml" />      
        </div><!-- #rodape -->

CSS:

#global { margin: 0 auto; padding-top: 25px; width: 925px; min-height: 890px; position: relative; }
#barra-lateral { margin-left: 15px; width: 240px; float: left; }
#barra-lateral a { text-decoration: none; }
#barra-lateral ul { list-style: none; padding-bottom: 10px; }
#barra-lateral ul li { margin-left: 35px; border: 0; margin-top: 10px; }
#barra-lateral #atalhos { border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8;  }
#barra-lateral #atalhos h3 { background: url(../imagens/fnd-atalhos.jpg); color: #fff; padding: 7px; height: 20px; }
#barra-lateral #central-de-informacoes { border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8;  }
#barra-lateral #central-de-informacoes h3 { background: url(../imagens/fnd-central-de-informacoes.jpg); color: #fff; padding: 7px; height: 20px; }

#conteudo { width: 670px; float: left; font-size: 12px;  }
#conteudo ul { margin-left: 25px; }
#conteudo ul li { margin-top: 10px; }

#usuario { width: 700px; float: right; margin-top: 5px; }


.logo { background: url(../imagens/logo-fiotec.jpg); width: 195px; height: 90px; text-indent: -9999px; float: left; }
#menu-principal { margin: 20px 0; }
#menu-principal { list-style: none; background: url(../imagens/fnd-menu.jpg); height: 16px; padding: 15px 0; }
#menu-principal li { float: left; margin-left: 20px; padding: 0 10px; }
#menu-principal li a { text-decoration: none; color: #fff; font-size: 14px; }
#menu-principal li a:hover { color: #ccedff; }


#menu-principal li ul  { display: table; position: absolute; left: 0; top: 180px; background: #eff9ff; }
#menu-principal li ul li a {  color: #000; }


/* ############## RODAPÉ ###################### */
#rodape { width: 92%; margin: 0 auto; background: #eff9ff ; padding: 15px; clear: both; border: 1px solid #3faeee; border-bottom: 0; display: table }
#rodape p { width: 775px; float: left; margin-top: 5px; }
#rodape #twitter { width: 150px; float: left; }
#rodape #twitter img { vertical-align: middle }

 

Não estou sabendo a lógica de controlar o tamanho disso, como deve ficar no CSS e ou Nas condições php.

 

Alguém dá uma luz?

 

Obrigado !!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Resolvido utilizando:

<div id="conteudo">
   <?php if($this->countModules('right')) : ?>
      <div id="barra-lateral">
         <jdoc:include type="modules" name="right" style="xhtml" />
      </div><!-- #barra-lateral -->
   <?php endif; ?>

   <jdoc:include type="component" style="xhtml" />
</div><!-- #conteudo -->

só é preciso dá uma porcentagem na barra e mandar flutar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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