Rozwiązanie. Szablon trzykolumnowy automatyczne dostosowanie kolumn

[prorok83]

Witam

Widziałem że wiele osób szukało tego zagadnienia w internecie dlatego chciałem przedstawić swoje rozwiązanie na ten temat.



Zagadnienie: szablon joomla z trzema kolumnami. Przy braku przypisania modułu do lewej lub prawej strony szablon automatycznie zmienia szerokość. Dostępnje trzy możliwości
lewa - centrum
prawa - centrum
tylko centrum
Na początek instrukcje warunkowe w głównym plik index.php



<?php
$mainwidth=1;
if(($this->countModules('right')>0) || ($this->countModules('left')>0)) $mainwidth=2;
if(($this->countModules('right')>0) && ($this->countModules('left')>0)) $mainwidth=3;
?>
</head>

Póżniej konstrukcja trzech kolumn za pomocą <div>

<?php if($this->countModules('left')) : ?> <!-- start of left column -->
<div id="colleft">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?> <!-- end of left column -->

<?php if($this->countModules('right')) : ?> <!-- start of right column -->
<div id="colright">
<div class="clear"></div> <-- to raczej jest zbędne -->
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?> <!-- end of right column -->

<div id="content<?php echo $mainwidth; ?>"> <!-- start of main content -->
<jdoc:include type="message" />
<jdoc:include type="component" />
<div id="maindivider"></div>
</div> <!-- end of main content -->
<div class="clear"></div> <!-- clearance of three div columns -->

Do tego troche css :)


#general - główny div
{
width: 970px
}
#colright
{
float: right;
width: 180px; /* twoja szerokość */
padding: 0;
margin:0;
overflow: hidden;
position:relative; /* to raczej też jest zbędne, jak się teraz przegląda kod to się człowiek zastanawia po co to wstawiłem :) */
background-color: #808080;
}
#colleft
{
float: left;
width: 180px; /* twoja szerokość */
padding: 0;
margin:0;
background-color: #808080;
}

#content1
{
float:left;
width: auto;
margin: 0;
padding: 20px 20px 10px 20px; /* zależy co potrzebujesz */
text-align: justify;
background-color: #F6F6F6;
}
#content2
{
float:left;
width: 750px;
margin: 0;
padding: 20px 20px 10px 20px; /* zależy co potrzebujesz */
text-align: justify;
background-color: #F6F6F6;
}
#content3
{
float:left;
width: 570px;
margin: 0;
padding: 20px 20px 10px 20px; /* zależy co potrzebujesz */
text-align: justify;
background-color: #F6F6F6;
}

Tu musi zadziałać matma. Piksele muszą być wiliczone z uwzględnieniem paddingów i marginesów itp.

Sorry za tyle kodu, mam nadzieje że ktoś skorzysta. Wiem że są lepsze sposoby aby to zrobić, np poprzez wartości procentowe [%], czyli bardzie uniwersalnie, jednak ja musze mieć na stronie wszystko spasowane co do 1px i muszę mieć dokładne wartości

Pozdrawiam
Prorok83

//kod umieszczamy w specjalnie do tego przeznaczonych znacznikach
@palyga007

[Robster]

Fajnie, że Ci się chciało, ale jaki jest sens powielania czegoś co już jest? - http://wiki.joomla.pl/index.php/Ukrywanie_kolumn

[TLo]

(...)jaki jest sens powielania czegoś co już jest?

I po raz kolejny potwierdziło się, że nie można być @prorokiem we własnym kraju - to żart :-)

[prorok83]

:-). Chciało mi się bo tego artykułu nie znalazłem, Dzięki za linka. A jesli chodzi o prorokowanie to ta ksywka to kierunek zainteresowań. Wiesz Edgar Cayce, Bruno Groening itp. polecam