28172 sujets

CSS et mise en forme, CSS3

Lien menu pas fixe

Bonjour a tous, j'ai crée mon template pour Joomla et j'ai crée un menu, je veux qu'il reste tout simple avec de attribut CSS.

En temps normal quand je n'utilise pas Joomla (c'est ma premiere) pour mettre de l'espace entre mes liens hypertexte je mettai l'attribut word-spacing mais la sa ne fonctionne plus, savez vous lequel je dois utiliser pour avoir le meme rendu?


Le deuxième problème c'est que mon menu reste pas fixe il bouge par raport a la taille de la page, je sais que c'est un truc tout bête mais... Smiley ohwell 


<body>

            <div id="banniere">
            
           
             
                 <div id="newsletter">
                 
                 <div id="date">
                 
             

           		 </div>
                 
                 </div> <div id="menu">
              
             <jdoc:include type="modules" name="banniere" style="xhtml"/>
             
            </div>
                  <div id="bande_noir">
             </div>
                 <div id="logo">
                 
                        
                 </div>
              <div id="newsletter2">
               <jdoc:include type="modules" name="newsletter" style="xhtml"/>
            </div>
            
             </div>
            
            
            
<div id="contenu">
            
            
     <div id="articles">
         <jdoc:include type="component" style="xhtml" />   
                <div id="photos_droit">
                
                </div>

            
     </div>
            
            <div id="dernieres_creations">
            
            </div>
            
           
            
            <div id="module_news">
            
            
            <jdoc:include type="modules" name="module_news" style="xhtml"/>
        
            
            </div>
            
            
            
</div>  

          <div id="barre_milieu">
            
            </div>
            
            <div id="footer">
            
            </div>
            
            <div id="barre_bas">
            
            </div>


</body>




* {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-image: url(../images/fond.png);
	background-position: top left;
	background-repeat: repeat-x;
	}

img {
	border: none;
}

li {
list-style:none;
}

/*-------------Couleur des liens non visité */

a.mainlevel:link {

	text-decoration: none;
	color: #bd1eb4;
	
}

/*-------------Couleur des liens visité */

a.mainlevel:visited {
	text-decoration: none;
	color: #bd1eb4;
	
}

/*-------------Couleur des liens au survol de la souris */

a.mainlevel:hover {
	text-decoration: none;
	color: #ffffff;
	
}

/*-------------Couleur des liens quand il y a le click */

a.mainlevel:active {
	text-decoration: none;
	color: #bd1eb4;

}

#menu {

	text-align: center;
	padding-top: 110px;
	margin-right: 50px;
	
}


#banniere {
	background-image: url(../images/bandeau_noir_haut.png);
	background-repeat: no-repeat;
	height: 230px;  
	margin-left:auto;
	margin-right: auto;
}

/*#bande_noir {
	background-image: url(../images/bande_noir_haut.png);
	background-repeat: repeat-x;

	height: 182px;  
}*/

#newsletter {
	background-image: url(../images/barre_newsletter.png);
	background-repeat: no-repeat;
	height: 31px; 
	margin-left: 225px;
	color: white;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	
}

#newsletter2 {
position: relative;
	left: 800px;
	bottom: 470px;
	
	
	
	
	
}

#date {
	margin-left: 10px;
	padding-top: 10px;
	color: white;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	
}


#logo {
	background-image: url(../images/blason_banniere.png);
	background-repeat: no-repeat;
	width: 223px;
	height: 295px; 
	left: 920px;
	position: relative;
	bottom: 80px;
	
}

#contenu {

	margin-left: 225px 
		
}

#articles {
	
	width: 226px;
	height: 130px; 	
}


#dernieres_creations {
	background-image: url(../images/dernieres_creations.png);
	background-repeat: no-repeat;
	width: 224px;
	height: 217px;
}



#photos_droit {
	background-image: url(../images/image_gif_coter_droit.png);
	background-repeat: no-repeat;
	width: 510px;
	height: 354px; 
position: relative;
	left: 290px;
	bottom: 70px;
}




#module_news {
	/*background-image: url(../images/module_news.png);
	background-repeat: no-repeat;*/
	width: 841px;
	height: 259px; 
	bottom: 350px;
	margin-top: 50px;
}


#barre_milieu {
	background-image: url(../images/barre_milieu.png);
	background-repeat: no-repeat;
	width: 850px;
	height: 1px; 
	margin-top: 15px;
	margin-left: 215px
}

#footer {
	background-image: url(../images/banniere_bas.png);
	background-repeat: no-repeat;
	width: 850px;
	height: 35px; 
	margin-top: 5px;
	margin-left: 215px
}

#barre_bas {
	background-image: url(../images/barre_bas.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 13px; 
	margin-top: 82px;
}



Merci d'avance!!! Smiley cligne
Bonjour,

Ne pourrais-tu pas mettre la page en ligne que l'on ait accès au code complet de la page ?
Chat a écrit :
Non, désolé... Smiley ohwell


Au moins le code html généré, çà tu dois pouvoir le faire.
<!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="fr-fr"
lang="fr-fr">



<head>

<jdoc:include type="head"/>

<link rel="stylesheet" href="/byka/templates/byka/css/template.css" type="text/css" />


<SCRIPT LANGUAGE="JavaScript">

navvers = navigator.appVersion.substring(0,1);
if (navvers > 3)
	navok = true;
else
	navok = false;

today = new Date;
jour = today.getDay();
numero = today.getDate();
if (numero<10)
	numero = "0"+numero;
mois = today.getMonth();
if (navok)
	annee = today.getFullYear();
else
	annee = today.getYear();
TabJour = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
TabMois = new Array("janvier","f&#65533;vrier","mars","avril","mai","juin","juillet","aout","septembre","octobre","novembre","d&#65533;&#65533;embre");
messageDate = TabJour[jour] + " " + numero + " " + TabMois[mois] + " " + annee;
</SCRIPT>


</head>

<body>

            <div id="banniere">
            
           
             
                 <div id="newsletter">
                 
                 <div id="date">
                 
          
<SCRIPT LANGUAGE="JavaScript">

document.write(messageDate);
</SCRIPT>


           		 </div>
                 
                 </div> <div id="menu">

              
             		<div class="moduletable_menu">
					<table width="100%" border="0" cellpadding="0" cellspacing="1"><tr><td nowrap="nowrap"><a href="/byka/index.php?option=com_content&amp;view=frontpage&amp;Itemid=1" class="mainlevel" id="active_menu">Acceuil</a><a href="/byka/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=4" class="mainlevel" >Présentation</a><a href="/byka/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=5" class="mainlevel" >Contact</a></td></tr></table>		</div>
	
             
            </div>
                  <div id="bande_noir">
             </div>
                 <div id="logo">
                 
                        
                 </div>

              <div id="newsletter2">
               
            </div>
            
             </div>
            
            
            
<div id="contenu">
            
            
     <div id="articles">
         <div class="componentheading">
	</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">

					<div>
		
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<h4><font face="comic sans ms,sans-serif">Bienvenue dans le site de <font color="#ff00ff">By KA</font> </font><br /></h4><p><font face="comic sans ms,sans-serif">Bla bla bla bla bla</font></p></td>
</tr>


</table>
<span class="article_separator">&nbsp;</span>
		</div>
		</td>
</tr>


</table>
   
                <div id="photos_droit">
                
                 
                 
                </div>

            
     </div>
            
            <div id="dernieres_creations">
            
            </div>
            
           
            
            <div id="module_news">
            
            
            
        
            
            </div>
            
            
            
</div>  

          <div id="barre_milieu">
            
            </div>
            
            <div id="footer">

             		
	
            </div>
            
            <div id="barre_bas">
            
            </div>


</body>
</html>
J'ai trouver il fallait que je lui mette paramètre "width".


Par contre j'ai toujours pas trouver comment mettre de l'espace entre mes lien hypertexte... Smiley decu
Sujet clos
Aller à