Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : cuordileone 20 Feb 2010, 13:22:07
-
Salve. Per il mio sito http://informazionepura.it (http://informazionepura.it) stavo cercando di creare un nuovo template tutto da capo.
Tra il Logo e il 3top c'è però una distanza (come mostra la foto) che non mi spiego, e vorrei sapere da voi come faccio a ridurla ad un solo pixel.
Grazie.
Vi allego il codice che ho scritto sinora:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFF99;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: center;
color: #000000;
}
.classetutto #contenitore {
width: 980px;
background: #FFFFCC;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.classetutto #header {
background: #DDDDDD;
width: 980px;
padding: 0 0 0 0;
}
.classetutto #header h1 {
margin: 0;
padding: 0 0;
}
.classetutto #headermetasx {
margin: 1px 1px 1px 1px;
background: #FF0000;
padding: 0 0px 0 0px;
float: left;
height: 282px;
width: 338px;
}
.classetutto #headermetadx {
margin: 1px 1px 1px 1px;
background: #0000FF;
padding: 0 0px 0 0px;
float: right;
height: 282px;
width: 638px;
}
.classetutto #logo {
background: #DDDDDD;
margin: 1px 1px 1px 1px;
padding: 0 0px 0 0px;
float: none;
height: 115px;
width: 636px;
}
.classetutto #tretop {
background: #99FF33;
margin: 1px 1px 1px 1px;
padding: 0 0px 0 0px;
float: none;
height: 163px;
width: 636px;
}
.classetutto #sidebar1 {
float: left;
width: 150px;
background: #EBEBEB;
padding: 0px 0px 0px 0px;
}
.classetutto #sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
padding: 0px 0px 0px 0px;
}
.classetutto #mainContent {
margin: 0 200px;
padding: 0 0px;
}
.classetutto #footer {
padding: 0 0px 0 0px;
background:#DDDDDD;
}
.classetutto #footer p {
margin: 0;
padding: 0px 0;
}
.fltrt {
float: right;
margin-left: 1px;
}
.fltlft {
float: left;
margin-right: 1px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
[allegato vecchio più di un anno eliminato automaticamente]
-
Ci vorrebbe anche l'html, ma così a occhio vedo un sacco di codice inutile e/o ripetuto.
-
Io vedo un ...
.classetutto #headermetasx
... ed un ...
.classetutto #headermetadx
1) Dov'è che è doppio?
2) In che senso html?
-
Infatti avevo visto male io e avevo già cancellato.
In codice inutile è in tutte le dichiarazioni di margin e padding a zero.
Invece di
padding: 0 0px 0 0px;
basta mettere
padding: 0;
per l'html bisognerebbe vedere come hai nidificato i vari elementi e che tipo di elementi sono.
-
Ecco le nidificazione del file index.php ...
Dimmi te:
<body class="classetutto">
<div id="contenitore">
<div id="header">
<div id="headermetasx">
<h3>Contenuto headermetasx</h3>
</div>
<div id="headermetadx">
<div id="logo">
<h5>Logo</h5>
</div>
<div id="tretop">
<h5>3top</h5>
</div>
</div>
<!-- end #header --></div>
<div id="sidebar1">
<?php if($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="" />
<?php endif; ?>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Contenuto Sidebar2</h3>
<p>BLA BLA BLA BLA BLA. </p>
<p>BLA BLA BLA BLA BLA. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Contenuto principale</h1>
<p>BLA BLA BLA BLA BLA. </p>
<h2>Titolo di livello H2 </h2>
<p>BLA BLA BLA BLA BLA. </p>
<!-- end #mainContent --></div>
<!-- Questo elemento di clearing deve seguire immediatamente il div #mainContent al fine di forzare il div #container a contenere tutti i float di livello inferiore --><br class="clearfloat" />
<div id="footer">
<p>Piè di pagina</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
-
Togli quei due <h5> (o metti nel css "h5 {margin:0}") e hai risolto il problema.
Quello è lo spazio che di default viene messo nei tag titolo.
-
Non ho ben capito.
Lo dovrei scriver così?
/* Headers */
h1, h2, h3, h4 {
margin: 0;
font: bold 1em/1.5em Arial, Helvetica, sans-serif;
color: #000;
padding: 0px 0px;
}
h1 { font-size: 150%; font-weight: normal; margin: 0; }
h2 { font-size: 175%; font-weight: bold; margin: 0; }
h3 { font-size: 200%; font-weight: bold; margin: 0; }
h4 { font-size: 225%; margin: 0; }
Non ho ottenuto il risultato sperato ... Come mai?
-
Per forza non funziona... non hai messo l'unico tag che ti avevo detto di mettere... H5.
E non continuare a ripetere codice inutile (vedi "margin")
Te lo riscrivo, anche se non ho capito perchè al diminuire dell'importanza del titolo, ne fai aumentare il carattere font-size:
/* Headers */
h1, h2, h3, h4, h5 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: #000;
padding: 0px 0px;
}
h1 { font-size: 150%; font-weight: normal;}
h2 { font-size: 175%; font-weight: bold;}
h3 { font-size: 200%; font-weight: bold;}
h4 { font-size: 225%;}
h5 { font-size:250%; }
-
Ottimo .. ps. Secondo te come grandezza vanno bene questi?
h1 { font-size: 200%; font-weight: bold; }
h2 { font-size: 160%; font-weight: bold; }
h3 { font-size: 140%; font-weight: bold; }
h4 { font-size: 120%; font-weight: bold; }
h5 { font-size: 100%; font-weight: bold; }
h6 { font-size: 90%; font-weight: bold; }
-
In primis togliere quel "bold". Di default i titoli sono già in bold.
Poi la grandezza va a gusto e dipende anche dal contesto della grafica. Devi provare e vedere come ti piace di più o come sta meglio.
Comunque studiati meglio la struttura dell'html che così com'è mi sa ti darà molti problemi.
Ciao.
-
Grazie mille. Se mi sai dare una mano anche qui: http://forum.joomla.it/index.php/topic,95907.msg422554.html#msg422554 (http://forum.joomla.it/index.php/topic,95907.msg422554.html#msg422554)
;D