Autore Topic: proporzioni tra le colonne  (Letto 8703 volte)

Offline mauro85

  • Appassionato
  • ***
  • Post: 220
    • Mostra profilo
Re: proporzioni tra le colonne
« Risposta #20 il: 06 Lug 2007, 15:16:22 »
Allora ho messo il template mint_fresh consigliato da tonicopi.. solo che le proporzioni si sballano ugualmente! La pagina è larga 80%, io vorrei che le due colonne laterali fossero ciascuna del 25% circa, e quella in mezzo del rimanente 50%. Però non riesco a capire quali percentuali devo modificare, il template che avevo prima era gestito con tabelle, questo tutto con div. Mi aiutate?

index.php
Codice: [Seleziona]
<div id="page" align="center">
<div id="mainwrap" style="width:<?php echo $sitewidth ?>;">

<div id="header">

   <div id="headerlogo" align="left">
<a href="index.php">
<img src="<?php echo "templates/$GLOBALS[cur_template]/images/logo.gif"?>" height="100" alt="Semi di Luce" />
</a>

</div>

</div>

<!-- left modules-->
<div id="maincont">

<div id="pathway"><?php mosPathWay(); ?></div>   

<?php if( mosCountModules('user4') ) : ?>

<div id="search">
<?php mosLoadModules('user4',-2); ?>
</div><?php endif; ?>

<div class="clr2">

</div>

<?php if( mosCountModules('left') ) : ?>

<div id="<? echo $mod_left; ?>">
<?php mosLoadModules('left',-2); ?>
</div><?php endif; ?>
<!--end left modules-->

<div id="<? echo $mainbody; ?>">
<!-- main body-->

<div id="<? echo $content; ?>">
<!-- start top shelf modules-->
<?php if (mosCountModules('user2') || mosCountModules('user3')) { ?>
<div id="topshelf">
<?php if( mosCountModules('user2') ) : ?>
<div id="user2" style="width:<?php echo $topwidth ?>;">
<?php mosLoadModules('user2',-2); ?>
</div><?php endif; ?>
<?php if( mosCountModules('user3') ) : ?>
<div id="user3" style="width:<?php echo $topwidth ?>;">
<?php mosLoadModules('user3',-2); ?>
</div><?php endif; ?>

</div><?php ?><!-- end topmshelf modules-->

<?php mosMainBody(); ?>
<div class="clr2">
</div>
<!-- start bottomshelf shelf modules-->
<?php if (mosCountModules('user5') || mosCountModules('user6')) { ?>
<div id="bottomshelf">
<?php if( mosCountModules('user5') ) : ?>
<div id="user5" style="width:<?php echo $bottomwidth ?>;">
<?php mosLoadModules('user5',-2); ?>
</div><?php endif; ?>
<?php if( mosCountModules('user6') ) : ?>
<div id="user6" style="width:<?php echo $bottomwidth ?>;">
<?php mosLoadModules('user6',-2); ?>
</div><?php endif; ?>

</div><?php ?><!-- end bottomshelf modules-->
</div><!-- end content-->
<!--end-->
<!-- right modules-->
<?php if( mosCountModules('right') ) : ?>
<div id="<? echo $mod_right; ?>">

     <?php mosLoadModules('right',-2); ?>

</div><?php endif; ?><!--end right modules-->
</div><!-- end mainbody-->
</div><!-- end maincontainer-->
<div id="footer">
   <div id="footlogo">
      <div id="footmenu">
<?php if( mosCountModules('footer') ) : ?>
<?php mosLoadModules('footer',-2); ?>
<?php endif; ?>
<div id="copy">
      Copyright © 2006 - 2007 Semi di Luce.
<br>Webmaster: Mauro Cappelletti</div>
      </div>
   </div>
</div>
</div><!--end mainwrap-->
</div>

<!--end-->

css:
Codice: [Seleziona]
#page {
width: 100%;

}


#mainwrap{/* define width */
text-align:left;
margin:0 auto;
overflow:hidden;
/*background: #fff url(../images/Bg_body.gif) repeat-x left top;*/
border: 1px solid #000;
}
#header{
height:100px;
background-color:#FFFFFF;
padding:0px;
margin-bottom:10px;
}
#logo{
float: left;
display: inline;
height: 100px;
line-height: 100px;
vertical-align: middle;
overflow: hidden;
margin-left: auto;
margin-right: auto;
/*background: #fff url(../images/Logo.gif) no-repeat top;*/
}
#newsflash{
height:90px;
width:30%;
background:#ffffff;
border:1px solid #5B6654;
float:right;
margin-top:20px;
margin-right:30px;
overflow:hidden;
}

#newsflash h3{
color:#A2D74F;
background: url(../images/h3newsfl.gif) no-repeat left bottom;
margin:0;
padding-left:3px;
}
#newsflash .moduletable{
padding:0px 3px;
margin:0px;
}

#font{
width:70px;
float:right;
text-align:left;
margin-top:2px;
overflow:hidden;
}
#search{
float:right;
height:20px;
overflow:hidden;
margin-top:4px;
margin-right:7px;
}
div.search input {
border: solid #999;
padding: 1px 4px 0px 6px;
width: 140px;
color: #BCE27F;
font-size: 11px;

}
div.search input:hover,
div.search input:focus {
border: 1px solid #BCE27F;
}
#pathway{
height:20px;
float:left;
padding-left:10px;
width:75%;
margin:0;
background: url(../images/bg.gif) repeat-x left top; //
}
#mainbody{
width:75%;
float:left;
overflow:hidden;
margin-right:5px;
padding-left:10px;
}
#mainbody_right{
width:100%;
float:left;
overflow:hidden;
}
#maincont{
margin:0 auto;
text-align:left;
width:100%;
overflow:hidden;
padding-top:10px;
}
#content{
float:left;
width:60%;
}
#content_left{
float:left;
width:100%;
}
#content_full{
float:left;
width:98%;
margin-left:10px;
}
#content_right{
float:left;
width:74%;
margin-left:5px;
}
#topshelf,#bottomshelf{
width:100%;
margin:0 auto;
background:#fff;
padding:5px 0;
overflow:hidden;
margin-bottom:20px;
margin-top:20px;
}
#user2,#user6{
float: left;
margin-right:0px;
margin-top:2px;
margin-bottom:2px;
overflow:hidden;
color:#75B84F;
}
#user2 h3,#user3 h3,#user5 h3,
#user6 h3{
color:#7DBF10;
padding-bottom:8px;
background: url(../images/h3shel.png) no-repeat left bottom;
font: bold 1.3em "Times New Roman", Times, serif;
text-transform: capitalize;
}
#user3,#user5{
float: right;
margin-top:2px;
margin-bottom:2px;
overflow:hidden;
color:#75B84F;
}
#user2 .moduletable,#user3 .moduletable,
#user5 .moduletable,#user6 .moduletable{
margin-right:0px;
margin-top:10px;
margin-bottom:10px;
overflow:hidden;
color:#75B84F;
}
#left .moduletable,#right .moduletable{ //sfondi login, online, ecc
margin-bottom:10px;
margin-left:10px;
border:1px solid #f0f0f0;
}
#left{
float:left;
width:23%;
margin-left:2px;
}
#right{
float:right;
width:35%;
}
#right_r{
float:right;
width:40%;
border:1px solid #f0f0f0;
}
#footer{
height:121px;
margin:0 auto;
text-align:center;
margin-top:5px;
margin-bottom:0px;
background: url(../images/footer.gif) repeat-x left top;
}
#footlogo{
height:121px;
width:100%;
/*background: url(../images/logofoot.gif) no-repeat right top;*/
}
#footmenu{
width:100%;
float:left;
text-align:left;
color:#fff;
height:50px;
margin-top:50px;
margin-left:10px;
}
#footmenu .mainlevel-nav{
color:#BCE27F;
}
#footmenu a.mainlevel-nav:hover {
color:#999;
}
#copy{
color:#CCCCCC;
margin-top:25px;
}
« Ultima modifica: 06 Lug 2007, 15:19:03 da mauro85 »

Offline tonicopi

  • Global Moderator
  • Instancabile
  • ********
  • Post: 12785
  • Sesso: Maschio
    • Mostra profilo
Re: proporzioni tra le colonne
« Risposta #21 il: 11 Lug 2007, 23:49:11 »
Non ho risposto prima perchè ero al mare.
Non è vero che la pagina occupa l'80%, ma il 90%, e le due fascie laterali occupano il restante 10 %
Una domanda: perchè non pubblichi tutto il codice della index.php, rendendoci più facile la vita?
Devi cercare nell'header questa variabile a cambiarne il valore:
$sitewidth = '90%'
Ma ricorda che il valore consigliato dall'autore del template è appunto 90%
Mi domando: come mai hai questa fissa delle colonne? Una volta che il sito viene ben visualizzato con i principali browser che ti frega?
Piuttosto cura un pò meglio la grafica: il verdino fa a pugni con il celestino di google.
Al posto delle foglie di menta io ci metterei dei semini come quelli del logo.
Ciao
T
joomlacsszengarden.com = il giardino dei css di Joomla!
L'attesa del piacere è essa stessa... piacere!

Offline mauro85

  • Appassionato
  • ***
  • Post: 220
    • Mostra profilo
Re: proporzioni tra le colonne
« Risposta #22 il: 15 Lug 2007, 15:48:49 »
Grazie per i consigli, sono molto preso in questi giorni... ti farò sapere!

Offline mauro85

  • Appassionato
  • ***
  • Post: 220
    • Mostra profilo
Re: proporzioni tra le colonne
« Risposta #23 il: 24 Lug 2007, 09:26:39 »
Ho messo a posto tutto... una cosa ancora non capisco: nella lista di template di joomlaos come faccio a capire quelli che sono fatti apposta per variare la dimensione e quali no? devo per forza scaricarli e provarli tutti?

(credo di aver capito che quelli che lo permettono sono quelli fatti in DIV, o sbaglio?)

 

Host

Torna su