proporzioni tra le colonne

[mauro85]

Forse chiedo qualcosa di scontato o di troppo inerente al css.. comunque ci provo.. uso un template con 3 colonne, di cui quella al centro più larga delle altre due. Ovviamente, dato che la dimensione l'ho fissata io in pixel nel css (e io lavoro a 1280x1024), se si visualizza il sito in 1024x768 le proporzioni tra le colonne non sono più rispettate.. inoltre, ho un logo in alto che mi occupa tutta la larghezza del template a 1280, mentre  a 1024 rimane tagliato l'ultimo pezzo a destra... come faccio?
grazie

[tasto]

per le colonne invece di usare i px usa le percentuali, in questo modo si riducono in base alla risoluzione. per l'immagine ti posso consigliare di farla più piccola e di mettere nella cella dove la fai visualizzare lo stesso sfondo. in questo modo non si vede la differenza tra immagine e sfondo e quando si riduce la risoluzione l'immagine si può spostare liberamente...

[mauro85]

Nel index.php ho questo blocco... è questo che devo modificare?

Codice: [Seleziona]

/*
800 x 600 set $size = 1
1024 x 768 set $size = 2
Full width set $size = 0
*/

// not very good, i'll improve it someday



if ($size == 1) {
$width = "600px";
}
elseif ($size == 2) {
$width = "800px";
}
elseif ($size == 0) {
$width = "1024px";
}

E nel css vedo questo:

Codice: [Seleziona]

#leftsection {
width: 20%;
margin-top: 0px;
}

#rightsection {
width: 20%;
text-align: left;

[tasto]

Full width set $size = 0
è quello che devi cambiare per la tua risoluzione, quindi vai a modificare
elseif ($size == 0) {
      $width = "1024px";
con
elseif ($size == 0) {
      $width = "1280px";

Il css lo modifichi se vuoi le colonne più larghe.

[mauro85]

No aspetta questo l'avevo capito.. il fatto è che il mio template non deve occupare tutta la pagina. Però se fisso le larghezze (che sono minori di quelle indicate da te per quel motivo) non me le visualizza correttamente.

Io vorrei realizzare questo: un template con dei margini fissati, che si mantengano proporzionati alla larghezza del template alle diverse risoluzioni.

[tonicopi]

Vai qui, scegli il layout che vuoi, lo scarichi, lo studi, lo modifichi:

http://blog.html.it/layoutgala/indexIta.html

[mauro85]

Ho guardato, ma sinceramente mi sembrano ripetitivi (forse sono io che non so cogliere le differenze)
Io ho bisogno un layout a 3 colonne, con la centrale più larga delle altre, e ho bisogno che le proporzioni si mantengano alle diverse risoluzioni... come faccio?

[mauro85]

up

[tonicopi]

Questo mi sembra possa fare al caso tuo.
http://www.joomlaos.de/index.php?set_albumName=album03&id=mint_fresh&option=com_gallery&Itemid=37&include=view_photo.php
Altrimenti cercane un altro. Ce ne sono centinaia.
 

[mauro85]

Questo mi sembra possa fare al caso tuo.
http://www.joomlaos.de/index.php?set_albumName=album03&id=mint_fresh&option=com_gallery&Itemid=37&include=view_photo.php
Altrimenti cercane un altro. Ce ne sono centinaia.
 

Forse non mi sono spiegato bene.. il sito è già fatto, il template ho già deciso quale mettere.. il sito è questo http://www.semidiluce.com ma purtroppo explorer mi da dei problemi, e inoltre, cambiando risoluzione, le proporzioni si sfasano... a 1024x768 la pagina esce addirittura dallo schermo e compare la barra sotto.. io vorrei solo che non accadesse questo, avrei bisogno di un aiuto sul css.

[tonicopi]

Per forza ti esce il logo dalla pagina con risoluzione 1024.
Il template è largo appunto 1024 mentre il logo è largo 1280!
Poi è fatto in un modo per me strano, a frame.
Questo tenplate, anche se lo sistemi, non ha le caratteristiche che tu vuoi. Al massimo riuscirai forse a renderlo fluido e ad adattarsi alle due risoluzioni occupando tutto lo schermo.
Ma perchè sei intestardito a mantenere quel template?
Per me fai prima ad installare il template che ti ho suggerito che mi sembra ben fatto. Fai più presto a metterci un logo e ad adattare i colori di quel template che si adatta perfettamente a qualsiasi risoluzione mantenendo le due fasce laterali che è quello che tu vuoi

[mauro85]

Va bene, ci provo, grazie. Volevo sapere questo: come faccio a capire quali sono di questo tipo? Hai detto che ce ne sono molti così, come li trovo?  E poi.. in base a quello che mi hai detto, il logo quanto lo devo fare largo?

[tonicopi]

La larghezza del logo dipende dal tipo di header che ha il template. Nel tuo lo devi fare di un migliaio di pixel.
Per vedere una gran rassegna di template vai qui:
http://www.joomlaos.de/joomla_template_galerie.html
Sono ottimamente presentati e puoi provarli tutti in una demo. Così li puoi testare con firefox e I.E. prima ancora di scaricarli.
 

[mauro85]

Si ma tu hai detto che il template che mi hai segnalato (a differenza di quello installato da me) si adatta alle varie risoluzioni... perchè è così?

[tonicopi]

Perchè è costruito in modo tale che si può adattare a qualsiasi risoluzione, anche di soli 640px, fino anche a 1600px.
Non ha loghi ne altri elementi a misura fissa che lo impediscono.
E mantiene in percentuale le due fascette laterali esterne alla pagina web. Come fai tu a saperlo? Ti guardi la demo con diversi browser e diverse risoluzioni:
http://www.joomlademo.de/index.php?mos_change_template=mint_fresh

[mauro85]

Non ha loghi ne altri elementi a misura fissa che lo impediscono.

Ok, ora ho capito.. io però un logo mio ce lo devo mettere, ma questo significa che non si può adattare?

[tonicopi]

Certo che puoi metterci il logo tuo.
Ma se vuoi esser certo di non "scassare" il template devi metterci un logo esattamente delle stesse misure di quello del template. Così come puoi sostituire tutte le altre immagini con altre della stessa dimensione.
Probabilmente il template che stai usando adesso aveva un logo più piccolo di quello che hai messo tu.
Ciao

[mauro85]

edit

ok sono riuscito.. ora cambiando risoluzione il logo e tutto il sito mantiene le proporzioni.. tutto questo però su firefox, su IE6 no.. il sito rimane largo a risoluzioni più basse, e compare la barra di scorrimento orizzontale.. che faccio?

[mauro85]

help!

[mauro85]

edit

ok sono riuscito.. ora cambiando risoluzione il logo e tutto il sito mantiene le proporzioni.. tutto questo però su firefox, su IE6 no.. il sito rimane largo a risoluzioni più basse, e compare la barra di scorrimento orizzontale.. che faccio?

!

[mauro85]

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;
}

[tonicopi]

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

[mauro85]

Grazie per i consigli, sono molto preso in questi giorni... ti farò sapere!

[mauro85]

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?)