0
Je travaille actuellement sur un modèle Joomla en utilisant des div CSS. J'ai un en-tête mis en place avec notre image de logo dans un div flottant vers la gauche, un espace publicitaire flottant vers la droite, et la barre de menu sur le fond.Contenu Conteneur Overlaps Menu?
Mon contenu est divisé en trois colonnes div contenues dans "conteneur": la colonne de gauche est flottante à gauche, le centre n'est pas flottant et le droit est flottant vers la droite.
Le problème est le "conteneur" pour les trois divs contenu chevauche le menu, comme vous pouvez le voir dans cette image: http://www.ndpstudentcouncil.org/images/shot1.png
Voici le code HTML:
> <body> <div id="backdrop"> <div
> id="wrapper"> <div id="header">
> <div id="topimage"> </div>
> <div id="adspace1"><jdoc:include
> type="modules" name="Ad Space #1" />
> This will be the location for our
> "newsflash" items. </div>
>
> <div id="ddtopmenubar"
> class="mattblackmenu">
> <ul>
> <li><a href="http://www.ndpstudentcouncil.org">Home</a></li>
> <li><a href="http://www.dynamicdrive.com/new.htm" rel="ddsubmenu1">DHTML</a></li>
> <li><a href="http://www.dynamicdrive.com/style/"
> rel="ddsubmenu2">CSS</a></li>
> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
> <li><a href="http://tools.dynamicdrive.com/"
> rel="ddsubmenu3">Web Tools</a></li>
> </ul>
> <script type="text/javascript" src="js/ddlevelsmenu.js">
> ddlevelsmenu.setup("ddtopmenubar", "topbar")
> //ddlevelsmenu.setup("mainmenuid",
> "topbar|sidebar")
> </script>
> <ul id="ddsubmenu1" class="ddsubmenustyle">
> <li><a href="#">Item 1a</a></li>
> <li><a href="#">Item 2a</a></li>
> <li><a href="#">Item Folder 3a</a>
> <ul>
> <li><a href="#">Sub Item 3.1a</a></li>
> </ul>
> </li>
> <li><a href="#">Item 4a</a></li>
> <li><a href="#">Item Folder 5a</a>
> <ul>
> <li><a href="#">Sub Item 5.1a</a></li>
> <li><a href="#">Item Folder 5.2a</a>
> <ul>
> <li><a href="#">Sub Item 5.2.1a</a></li>
> <li><a href="#">Sub Item 5.2.2a</a></li>
> </ul>
> </li>
> </ul>
> </a>
> </li>
> <li><a href="#">Item 6a</a></li>
> </ul> </div> </div>
> <div id="container"> <script language="javascript">
> matchHeight=function(){
> var divs,contDivs,maxHeight,divHeight,d;
> // get all <div> elements in the document
> divs=document.getElementsByTagName('div');
> contDivs=[];
> // initialize maximum height value
> maxHeight=0;
> // iterate over all <div> elements in the document
> for(var i=0;i<divs.length;i++){
> // make collection with <div> elements with class attribute
> 'container'
> if(/\bcontainer\b/.test(divs[i].className)){
> d=divs[i];
> contDivs[contDivs.length]=d;
> // determine height for <div> element
> if(d.offsetHeight){
> divHeight=d.offsetHeight;
> }
> else if(d.style.pixelHeight){
> divHeight=d.style.pixelHeight;
> }
> // calculate maximum height
> maxHeight=Math.max(maxHeight,divHeight);
> }
> }
> // assign maximum height value to all of container <div> elements
> for(var i=0;i<contDivs.length;i++){
> contDivs[i].style.height=maxHeight;
> }
> }
> // execute function when page loads
> window.onload=function(){
> if(document.getElementsByTagName){
> matchHeight();
> }
> }
> </script> <div id="left">
> <jdoc:include type="modules" name="left" /> </div> <div
> id="middle">
> <jdoc:include type="component" /> </div> <div id="right">
> <jdoc:include type="modules" name="right" />
> </div>
> </div>
> <div id="footer" class="clear"><jdoc:include
> type="modules" name="footer" />
> © 2010 NDP Student Council<br
> />Website Development Subcommitee
> </div> </div> </div> </body>
Le CSS:
> #backdrop { width:100%; height:100%; background: #FFFFFF
> url(../images/gradient.jpg) repeat-x;
> }
>
> #wrapper { margin:auto; width:95%; height:95%; border-right:thick solid
> black; border-bottom:thick solid
> black; border-top:thick solid black;
> border-left:thick solid black;
> background-color:white; }
>
> #header { height:131px; width:100%; background-color: #FFFFFF;
> border-bottom:thick solid black; }
>
> #topimage { float:left; height:131px; width:63%;
> background-image:
> url("../images/ndps2.png");
> background-repeat:no-repeat; }
>
> #adspace1 { float:right; width:27%; height:131px; }
>
> #container { clear:both; }
> #left{ width:20%; float:left; padding:5px; text-align:center; }
>
> #middle{ width:60%; padding:5px; text-align:center; }
>
> #right{ float:right; width:20%; padding:5px; text-align:right; }
> #footer { border-top:thick solid black; width:100%;
> text-align:center; } .clear {
> clear:both; }
Voici le CSS pour le menu lui-même, qui est de DynamicDrive.com:
> .mattblackmenu ul{ margin: 0; padding:
> 0; font: bold 12px Verdana;
> list-style-type: none; border-bottom:
> 1px solid gray; background: #414141;
> overflow: hidden; width: 100%;
> clear:both; }
>
> .mattblackmenu li{ display: inline;
> margin: 0; }
>
> .mattblackmenu li a{ float: left;
> display: block; text-decoration: none;
> margin: 0; padding: 6px 8px; /*padding
> inside each tab*/ border-right: 1px
> solid white; /*right divider between
> tabs*/ color: white; background:
> #414141;
Merci pour l'aide!
Lorsque je flotte les trois colonnes de gauche, la colonne de droite est placé sous la première colonne. Je ne sais pas pourquoi, étant donné que j'ai été capable de faire flotter à la fois l'image de l'en-tête et le "contenu du flash d'actualité" laissé en haut. En termes de conteneur pour les trois colonnes de contenu, ces propriétés sont-elles correctes? J'ai clear: both et overflow: caché comme propriétés de l'encapsuleur pour les trois colonnes de contenu. Je l'appelle "conteneur" dans le code. Je préférerais sincèrement rendre le site plus fluide que statique. Nous avons aussi des plans pour un site mobile basé sur celui-ci. – Harold
Oui, la colonne irait naturellement au-dessous. Cela sera dû au fait que la largeur totale et les marges des colonnes dépassent la largeur de leur conteneur. Essayez de réduire la largeur et il sera réparé. Encore une fois, méfiez-vous du bug IE6 à double marge, cela va ajouter une largeur cachée aux pages. – theorise