HTML interesse |
|
Ik heb een template waarbij de maincolumn veel te ver naar onder komt. Als ik dit probeer op te lossen door deze div een margin-top met een flinke min-waarde meegeef is de positie wel prima maar werkt het horizontale menu niet meer doordat de maincolumn daar in de weg zit. Als ik de div sitebar gelijk afsluit(</div>) komt het ook niet goed en rekt de sitebar niet mee met de variabele hoogte van de maincolumn. Wie weet hoe ik dit op zou kunnen lossen.
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 17px;
background: #8800FF;
color: #000000;
margin:0;
padding: 0;
height: 100%;
width: 100%;
background-image: url(achtergrond.png);
background-repeat: no-repeat;
background-position: 50% 0%;
}
#container {
position: absolute;
left:50%;
margin-left:-450px;
min-height: 770px;
width: 900px;
background: #CCCCCC;
border: 10px solid #FFFFFF;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
border-bottom-width: 0px;
}
#header {
height: 80px;
}
#menu {
width: 900px;
height: 53px;
margin-top: 60px;
background: #FFFFFF;
text-align: center;
}
#home
{
background-image: url(http://localhost/collectie/menu/menu1.png);
height: 43px;
width: 140px;
float: left;
margin-right: 12px;
margin-top: 2px;
}
#footer {
float: left;
width: 900px;
height: 17px;
font-size: 12px;
text-align: left;
padding-left: 5px;
background: #FFFFFF;
}
#maincolumn,
#maincolumn_full {
float: left;
margin-left: 146px;
margin-top: 0px;
width: 740px;
}
#maincolumn_full {
margin-left: 0;
padding: 0;
width: 100%;
}
body { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 17px; background: #8800FF; color: #000000; margin:0; padding: 0; height: 100%; width: 100%; background-image: url(achtergrond.png); background-repeat: no-repeat; background-position: 50% 0%; } #container { position: absolute; left:50%; margin-left:-450px; min-height: 770px; width: 900px; background: #CCCCCC; border: 10px solid #FFFFFF; border-bottom-style: solid; border-bottom-color: #FFFFFF; border-bottom-width: 0px; } #header { height: 80px; } #menu { width: 900px; height: 53px; margin-top: 60px; background: #FFFFFF; text-align: center; } #home { background-image: url(http://localhost/collectie/menu/menu1.png); height: 43px; width: 140px; float: left; margin-right: 12px; margin-top: 2px; } #footer { float: left; width: 900px; height: 17px; font-size: 12px; text-align: left; padding-left: 5px; background: #FFFFFF; } #maincolumn, #maincolumn_full { float: left; margin-left: 146px; margin-top: 0px; width: 740px; } #maincolumn_full { margin-left: 0; padding: 0; width: 100%; }
<?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/rhuk_milkyway/css/stijlblad.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
</head>
<body>
<div id="container">
<div id="header">
<img src="kop/titel.png" width="900" height="140" alt="">
</div>
<div id="menu">
<a id="home" href="http://localhost/collectie/index.html"></a>
<a id="col" href="http://localhost/collectie/col.html"></a>
<a id="bestel" href="http://localhost/collectie/bestel.html"></a>
<a id="sale" href="http://localhost/collectie/sale.html"></a>
<a id="contact" href="http://localhost/collectie/contact.html"></a>
<a id="links" href="http://localhost/collectie/links.html"></a>
</div>
<div id="sidebar">
<a id="arm" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a>
<a id="ket" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a>
<a id="oor" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a>
<a id="ring" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a>
<a id="tas" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a>
<?php if($this->countModules('left')) : ?>
<div id="maincolumn">
<?php else: ?>
<div id="maincolumn_full">
<?php endif; ?>
<?php if($this->countModules('user1 or user2')) : ?>
<table class="nopad user1user2">
<tr valign="top">
<?php if($this->countModules('user1')) : ?>
<td>
<jdoc:include type="modules" name="user1" style="xhtml" />
</td>
<?php endif; ?>
<?php if($this->countModules('user1 and user2')) : ?>
<td class="greyline"> </td>
<?php endif; ?>
<?php if($this->countModules('user2')) : ?>
<td>
<jdoc:include type="modules" name="user2" style="xhtml" /> </td>
<?php endif; ?>
</tr>
</table>
<div id="maindivider"></div>
<?php endif; ?>
<table class="nopad">
<tr valign="top">
<td>
<jdoc:include type="component" />
<jdoc:include type="modules" name="footer" style="xhtml"/>
</td>
<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
<td class="greyline"> </td>
<td width="170">
<jdoc:include type="modules" name="right" style="xhtml"/>
</td>
<?php endif; ?>
</tr>
</table>
</div> </div>
<div id="footer">Footer</div>
</div>
</div></div>
</body>
</html>
<?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; ?>" > <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/stijlblad.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template.css" type="text/css" /> <!--[if lte IE 6]> <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" /> <![endif]--> <?php if($this->direction == 'rtl') : ?> <link href="<?php echo $this->baseurl ?>/templates/rhuk_milkyway/css/template_rtl.css" rel="stylesheet" type="text/css" /> <?php endif; ?> <img src="kop/titel.png" width="900" height="140" alt=""> <a id="home" href="http://localhost/collectie/index.html"></a> <a id="col" href="http://localhost/collectie/col.html"></a> <a id="bestel" href="http://localhost/collectie/bestel.html"></a> <a id="sale" href="http://localhost/collectie/sale.html"></a> <a id="contact" href="http://localhost/collectie/contact.html"></a> <a id="links" href="http://localhost/collectie/links.html"></a> <a id="arm" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a> <a id="ket" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a> <a id="oor" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a> <a id="ring" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a> <a id="tas" href="http://localhost/collectie/index.php/collectie?func=viewcategory&catid=1"></a> <?php if($this->countModules('left')) : ?> <?php else: ?> <div id="maincolumn_full"> <?php endif; ?> <?php if($this->countModules('user1 or user2')) : ?> <table class="nopad user1user2"> <?php if($this->countModules('user1')) : ?> <jdoc:include type="modules" name="user1" style="xhtml" /> <?php endif; ?> <?php if($this->countModules('user1 and user2')) : ?> <td class="greyline"> </td> <?php endif; ?> <?php if($this->countModules('user2')) : ?> <jdoc:include type="modules" name="user2" style="xhtml" /> </td> <?php endif; ?> <?php endif; ?> <jdoc:include type="component" /> <jdoc:include type="modules" name="footer" style="xhtml"/> <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?> <td class="greyline"> </td> <jdoc:include type="modules" name="right" style="xhtml"/> <?php endif; ?>
|