- Fórum
- /
- Suporte Joomla
- /
- Templates
- /
- Joomla 1.5
- /
- Problemas de CSS na criação de uma posição no template
Problemas de CSS na criação de uma posição no template
- rldesign
-
Autor do Tópico
- Offline
- JCB! Hero
-
Menos
Mais
14 anos 5 meses atrás #47715
por rldesign
Rafael Santana
Web Designer | R&L Design - Desenvolvimento Gráfico e Sites
rldesign created the topic: Problemas de CSS na criação de uma posição no template
Pessoal,
No meu template percebi que so tinha a posição left e não a right. Ai vasculhei e criei manualmente uma posição no index copiando as configurações da posição left, porem só substiuindo com o nome da nova posição.
A mesma coisa eu fiz no arquivo css. Todas configurações copiadas da posição left, porem com as conf da nova posição.
No css, copiei as conf da posição left e alterei pra margin-right.
O problema que a coluna esquerda está sobrepondo a coluna do meio.
Gostaria que ficasse igual a coluna da direita e a coluna do meio certinho.
Alguem consegue me dar um help do que mais preciso alterar.
Index.php
Coluna Right:
<div id="content">
<div class="wrapper">
<?php if ($this->countModules('left') or $subnav) : ?>
<div id="sidecol">
<div id="side-column">
<div class="padding">
<div class="inner">
<?php if($subnav) : ?>
<div id="sub-menu">
<?php echo $subnav; ?>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
</div>
</div>
<?php endif; ?>
Posição right criada:
<?php if ($this->countModules('right') or $subnav) : ?>
<div id="rightcol">
<div id="right-column">
<div class="padding">
<div class="inner">
<?php if($subnav) : ?>
<div id="sub-menu">
<?php echo $subnav; ?>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
</div>
</div>
<?php endif; ?>
CSS, posição left:
#sidecol {
float: left;
}
#side-column {
background: #E7F9FB;
width: 93%;
}
#side-column ul li {
background: none;
}
#side-column .padding {
padding: 8px;
}
#side-column .inner {
background: #fff;
padding: 8px;
}
#side-column .moduletable-hilite1 {
background: #F2FEFF url(../images/hilite1-bg.png) 0 100% no-repeat;
border: 1px solid #D7EBF0;
padding: 8px;
}
#side-column .moduletable-hilite1 h3 {
background: none;
border: none;
font-family: Tahoma;
font-size: 130%;
color: #02576B;
margin: 0px 0 10px 0;
padding: 0;
text-transform: none;
font-weight: normal;
}
#side-column ul.menu {
margin: 0;
padding: 0;
}
#side-column ul.menu li {
list-style: none;
margin: 0;
padding: 0;
background: none;
}
#side-column ul.menu li.active a {
color: #000;
}
#side-column ul.menu li.active li a {
font-weight: normal;
font-size: 100%;
color: #ab0900;
}
#side-column ul.menu span {
display: block;
}
#side-column ul.menu a {
display: block;
line-height: 25px;
text-indent: 20px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 120%;
color: #ab0900;
}
#side-column ul.menu ul {
margin-left: 35px;
padding: 0;
}
#side-column ul.menu ul ul {
padding: 0;
margin: 0;
}
#side-column ul.menu li li {
padding: 0;
margin: 0;
}
#side-column ul.menu ul a {
background-image: none;
text-indent: 0;
line-height: 25px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 100%;
}
#side-column ul.menu ul ul a {
text-indent: 15px;
}
#side-column ul.menu ul ul ul a {
text-indent: 30px;
}
No meu template percebi que so tinha a posição left e não a right. Ai vasculhei e criei manualmente uma posição no index copiando as configurações da posição left, porem só substiuindo com o nome da nova posição.
A mesma coisa eu fiz no arquivo css. Todas configurações copiadas da posição left, porem com as conf da nova posição.
No css, copiei as conf da posição left e alterei pra margin-right.
O problema que a coluna esquerda está sobrepondo a coluna do meio.
Gostaria que ficasse igual a coluna da direita e a coluna do meio certinho.
Alguem consegue me dar um help do que mais preciso alterar.
Index.php
Coluna Right:
<div id="content">
<div class="wrapper">
<?php if ($this->countModules('left') or $subnav) : ?>
<div id="sidecol">
<div id="side-column">
<div class="padding">
<div class="inner">
<?php if($subnav) : ?>
<div id="sub-menu">
<?php echo $subnav; ?>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
</div>
</div>
<?php endif; ?>
Posição right criada:
<?php if ($this->countModules('right') or $subnav) : ?>
<div id="rightcol">
<div id="right-column">
<div class="padding">
<div class="inner">
<?php if($subnav) : ?>
<div id="sub-menu">
<?php echo $subnav; ?>
</div>
<?php endif; ?>
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
</div>
</div>
<?php endif; ?>
CSS, posição left:
#sidecol {
float: left;
}
#side-column {
background: #E7F9FB;
width: 93%;
}
#side-column ul li {
background: none;
}
#side-column .padding {
padding: 8px;
}
#side-column .inner {
background: #fff;
padding: 8px;
}
#side-column .moduletable-hilite1 {
background: #F2FEFF url(../images/hilite1-bg.png) 0 100% no-repeat;
border: 1px solid #D7EBF0;
padding: 8px;
}
#side-column .moduletable-hilite1 h3 {
background: none;
border: none;
font-family: Tahoma;
font-size: 130%;
color: #02576B;
margin: 0px 0 10px 0;
padding: 0;
text-transform: none;
font-weight: normal;
}
#side-column ul.menu {
margin: 0;
padding: 0;
}
#side-column ul.menu li {
list-style: none;
margin: 0;
padding: 0;
background: none;
}
#side-column ul.menu li.active a {
color: #000;
}
#side-column ul.menu li.active li a {
font-weight: normal;
font-size: 100%;
color: #ab0900;
}
#side-column ul.menu span {
display: block;
}
#side-column ul.menu a {
display: block;
line-height: 25px;
text-indent: 20px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 120%;
color: #ab0900;
}
#side-column ul.menu ul {
margin-left: 35px;
padding: 0;
}
#side-column ul.menu ul ul {
padding: 0;
margin: 0;
}
#side-column ul.menu li li {
padding: 0;
margin: 0;
}
#side-column ul.menu ul a {
background-image: none;
text-indent: 0;
line-height: 25px;
font-family: Tahoma, Helvetica, Arial, sans-serif;
font-size: 100%;
}
#side-column ul.menu ul ul a {
text-indent: 15px;
}
#side-column ul.menu ul ul ul a {
text-indent: 30px;
}
Rafael Santana
Web Designer | R&L Design - Desenvolvimento Gráfico e Sites
Please Entrar ou Registrar to join the conversation.
- kennyroger
-
- Offline
- JCB! Professional
-
- rldesign
-
Autor do Tópico
- Offline
- JCB! Hero
-
14 anos 5 meses atrás #47732
por rldesign
Rafael Santana
Web Designer | R&L Design - Desenvolvimento Gráfico e Sites
rldesign replied the topic: Re: Problemas de CSS na criação de uma posição no template
Acredito que seja isso.
Vou subir até amanha esse projeto em um sub-dominio.
Acho que ficará mais fácil.
Mas por enquanto;;;
Coluna do meio no index.php:
<div id="main-column">
<div class="padding">
<div class="inner">
<?php if ($show_breadcrumbs == "true") : ?>
<jdoc:include type="module" name="breadcrumbs" style="none" />
<?php endif; ?>
<div id="top">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php if ($this->countModules('user1') or $this->countModules('user2')) : ?>
<div id="topmodules" class="spacer<?php echo $topmod_width; ?>">
<?php if ($this->countModules('user1')) : ?>
<div class="block">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user2')) : ?>
<div class="block">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contentpadding">
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('user3') or $this->countModules('user4')) : ?>
<div id="bottommodules" class="spacer<?php echo $bottommod_width; ?>">
<?php if ($this->countModules('user3')) : ?>
<div class="block">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user4')) : ?>
<div class="block">
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="clr"></div>
Arquivo CSS:
#inset {
height: 200px;
background: #C7DCE1 url(../images/inset-banner.jpg) 50% 0 no-repeat;
border-top: 1px solid #D9F3F9;
overflow: hidden;
}
#inset .content {
padding: 20px 0px 10px 20px;
width: 60%;
}
#content {
padding-top: 15px;
padding-bottom: 25px;
background: #F6FCFC url(../images/page-bg.png) 0 0 repeat-x;
}
#main-column {
background: #E7F9FB;
}
#main-column .padding {
padding: 8px;
}
#main-column .inner {
background: #fff;
padding: 4px;
}
#main-column .contentpadding {
padding: 8px;
}
Vou subir até amanha esse projeto em um sub-dominio.
Acho que ficará mais fácil.
Mas por enquanto;;;
Coluna do meio no index.php:
<div id="main-column">
<div class="padding">
<div class="inner">
<?php if ($show_breadcrumbs == "true") : ?>
<jdoc:include type="module" name="breadcrumbs" style="none" />
<?php endif; ?>
<div id="top">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php if ($this->countModules('user1') or $this->countModules('user2')) : ?>
<div id="topmodules" class="spacer<?php echo $topmod_width; ?>">
<?php if ($this->countModules('user1')) : ?>
<div class="block">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user2')) : ?>
<div class="block">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contentpadding">
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('user3') or $this->countModules('user4')) : ?>
<div id="bottommodules" class="spacer<?php echo $bottommod_width; ?>">
<?php if ($this->countModules('user3')) : ?>
<div class="block">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<?php endif; ?>
<?php if ($this->countModules('user4')) : ?>
<div class="block">
<jdoc:include type="modules" name="user4" style="xhtml" />
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="clr"></div>
Arquivo CSS:
#inset {
height: 200px;
background: #C7DCE1 url(../images/inset-banner.jpg) 50% 0 no-repeat;
border-top: 1px solid #D9F3F9;
overflow: hidden;
}
#inset .content {
padding: 20px 0px 10px 20px;
width: 60%;
}
#content {
padding-top: 15px;
padding-bottom: 25px;
background: #F6FCFC url(../images/page-bg.png) 0 0 repeat-x;
}
#main-column {
background: #E7F9FB;
}
#main-column .padding {
padding: 8px;
}
#main-column .inner {
background: #fff;
padding: 4px;
}
#main-column .contentpadding {
padding: 8px;
}
Rafael Santana
Web Designer | R&L Design - Desenvolvimento Gráfico e Sites
Please Entrar ou Registrar to join the conversation.