Salve a tutti, mi trovo a scrivere a mano il mio primo template per joomla 1.5 e come era logico aspettarsi, ho riscontrato alcuni piccoli problemi.
In poche parole, non riesco a far ripetere un'immagine lungo tutta la lunghezza di un div, dettata principalmente dai contenuti dell'articolo e dell'ipotetica colonna destra.
Per farmi capire meglio, allego codice e immagine:
INDEX.PHP<?php
/*
* @copyright
* @license GNU/GPL, see LICENSE.php
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="top">
<div id="menu">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
</div>
<div id="contenitore-top">
</div>
<div id="contenitore-c">
<div id="contenuto">
<div id="articolo">
<jdoc:include type="component" />
</div>
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
</div>
</div>
<div id="contenitore-bot">
</div>
</div>
</body>
</html>
CSShtml {
height: 100%;
margin-bottom: 1px;
}
form {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana,Arial,sans-serif;
font-size: 12px;
color: #fff;
background-color:#000;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
}
a:hover {
text-decoration: underline;
font-weight: normal;
}
input.button { cursor: pointer; }
p { margin-top: 0; margin-bottom: 5px; }
img { border: 0 none; }
/*** Elementi del Template ***/
div#container {
margin-left: auto;
margin-right: auto;
width: 910px;
}
#top {
height: 100px;
}
#contenitore-top{
height:86px;
background:url(../images/bg-top.png) no-repeat;
}
#contenitore-c{
background:url(../images/bg-c.gif) repeat-y;
border: 1px solid red;
}
#contenitore-bot{
background:url(../images/bg-bot.gif) no-repeat;
height:88px;
clear: both;
}
#contenuto{
width: 830px;
margin-left: auto;
margin-right: auto;
}
#articolo{
width: 550px;
border: 1px solid #fff;
float:left;
}
#right{
width:250px;
border:1px solid #fff;
float: left;
margin-left: 10px;
}
/*** Gestione Menu ***/
#mainlevel-nav
{
margin: 0 auto;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
float: right;
margin-top:80px;
}
#mainlevel-nav ul, #mainlevel-nav li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#mainlevel-nav a:link, #mainlevel-nav a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#mainlevel-nav a:link#current, #mainlevel-nav a:visited#current, #mainlevel-nav a:hover
{
border-bottom: 4px solid #fff;
padding-bottom: 2px;
background: transparent;
color: #fff;
}
#mainlevel-nav a:hover { color: #ccc; }
La linea rossa che si vede nell'immagine è ovviamente per indicare il div che non segue il contenuto.
Evitando i float e dando una misura in px ovviamente non ci sono problemi, ma non è il risultato che voglio ottenere.
A questo punto aiutatemi a capire e scusate se sarà già il centesimo topic dedicato a questo problema; cercando da ieri notte non ho trovato nulla che riuscisse ad aiutarmi, sicuramente sbaglio i termini di ricerca.
