Na een avond hoofdpijn en stoeien, zoeken op google kom ik er niet uit.
Ik ben zelf een Joomla template aan het maken voor de voetbalvereniging en wil buiten de normale layout ook 2 achtergrond images gebruiken. Een die op zijn plaats blijft (is geen probleem, en één die met de onderkant mee kan bewegen"(dacht aan een extra div onder de footer).
Het probleem is dat ik onder de footer, geen div bij kan krijgen, ik heb allerlij dingen geprobeerd, maar het probleem zit hem denk ik ergens in een </div>.
Hieronder is de code van van het php bestand en een stukje van het css bestand wat ik nu heb.
Ik hoop dat jullie mij kunnen helpen.
index.php (onderaan moet ergens de div komen met de naam "botom:
Code:
<?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>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="top">
<jdoc:include type="modules" name="topmenu" style=”xhtml” />
</div>
<div id="header">
<img src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ?>/images/header.jpg" alt="header afbeelding" />
</div>
<div id="pathway">
<jdoc:include type="modules" name="breadcrumbs" style=”xhtml” />
</div>
<div id="container">
<div id="left">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<div id="content">
<jdoc:include type="component" />
</div>
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
<?php if ($this->params->get( 'authorCopyright' )) : ?>
<div class="copyright">
Webdesign <a href='http://www.zaan-pix.nl' target='blank'>Peter Arendse</a>
</div>
<?php endif; ?>
</body>
stukje van template.css (onderaan staat de css voor de niewe div "botom".
Code:
body {
/*background: #25A5C4;*/
text-align: center;
background:url(../images/bg.png) center top no-repeat fixed;
}
/* met deze code bepaal je de grote van de koppen voor de hele site*/
H1 {
Font-size: 22px;
Color: #000000;
}
H2 {
Font-size: 20px;
Color: #000000;
}
H3 {
Font-size: 18px;
Color: #000000;
}
H4 {
Font-size: 16px;
Color: #000000;
}
H5 {
Font-size: 14px;
Color: #000000;
}
H6 {
Font-size: 13px;
Color: #000000;
}
/* met deze code bepaal je de hyperlinks (dus niet de menu items) voor de hele site*/
a:link, a:visited {
color: #3B3B3B;
text-decoration: underline;
}
a:hover {
color: #783A17;
}
/**********Lay out**********/
/* met deze code bepaal je het gedeelte waar de content komt te staan voor de hele site*/
#wrapper {
border: solid 3px #000000;
/*background: url(../images/contentbackground.gif) repeat-y;*/
background:#FFFFFF;
text-align: left;
margin: 0px auto;
padding: 0px;
width: 1000px
}
/* met deze code bepaal je het top gedeelte voor de hele site*/
#top {
width: 1000px;
height: 25px;
border-bottom: solid 2px #ffffff;
padding-top: 10px;
background: url(../images/contentbackground.gif) repeat-y;
/*background: #68963e;*/
}
/* met deze code bepaal je het header gedeelte voor de hele site*/
#header {
width: 1000px;
height: 150px;
border-bottom: solid 4px #ffffff;
padding: 0;
}
/* met deze code bepaal je het kruimelpad gedeelte voor de hele site*/
#pathway {
width: 1000px;
height: 35px;
/*background: url(../images/contentbackground.gif) repeat-y;*/
background: #ffffff;
border-bottom: solid 1px #3B3B3B;
padding-top: 0;
}
/* met deze code bepaal je het linkerblok gedeelte voor de hele site*/
#left {
width: 200px;
float: left;
border-right: solid 1px #3B3B3B;
border-bottom: solid 1px #3B3B3B;
}
/* met deze code bepaal je het rechterblok gedeelte voor de hele site*/
#right {
float: right;
width: 200px;
border-left: solid 1px #3B3B3B;
border-bottom: solid 1px #3B3B3B;
}
/* met deze code bepaal je hoe de content er uit ziet voor de hele site*/
#content {
float: left;
width: 57%;
padding: 5px;
border: solid 1px #3B3B3B;
margin: 5px;
}
/* met deze code bepaal je het footer gedeelte voor de hele site*/
#footer {
height: 35px;
/*background: #000000;*/
background: url(../images/contentbackground.gif) repeat-y;
/*border-top: solid 1px #3B3B3B;*/
text-align: center;
clear: both;
}
/* met deze code bepaal je het plaatje van de onder gedeelte voor de hele site*/
#botom {
height: 300px;
background: url(../images/bg_2.png) no-repeat;
}
Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.
Heeft onderwerp gestart
