Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1650 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement d'un menu

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionnement d'un menu

n°1802998
mathieu34
Débute
Posté le 22-10-2008 à 00:08:39  profilanswer
 

Bonjour à tous,
Voila j'ai installé un template sur joomla et j'au un petit pb...  
Le menu principal est à droite et j'aimerai qu'il soit à gauche (c'est tout con mais ca bloque)
Voici le template css

Spoiler :

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
 margin: 0.5em 0;
}
li,dd {
 margin-left: 1em;
}
.contentpane li {
 list-style-position: inside;
}
fieldset {
 padding: .5em;
}
img {
 border: 0;
}
a img {
 border: 0;
}
table {
 font-size: 1em;
/* This helps fix the relative font sizing problem with tables in IE */
}
.hidden {
 display: none;
}
 
/* Structural CSS
*****************************************/
body {
 line-height: 1.5;
 margin: 0;
}
#wrapper {
 width: 960px;
 margin: 0 auto;
}
#top {
 width: 100%;
 clear: both;
 margin-bottom: 15px;
}
div#top h1 a {
 padding: 0;
 margin: 20px 0 0 24px;
 text-indent: -7887px;
 display: block;
 float: left;
}
div#top h1 {
 margin: 0;
 padding: 0;
}
.content {
 position: relative;
}
#pathway .content {
 padding: 0;
}
#footer-shelf .content {
 padding: 9px 0pt 18px 10px;
}
#pathway {
 margin-top: 15px;
 display: block;
 float: left;
 width: 100%;
}
#footer-shelf {
 float: left;
 width: 100%;
}
span.pathway {
 display: block;
 padding: 10px;
 font-family: Arial;
 font-size: 11px;
}
 
div.black-20 {
 background: transparent url(../images/black-20.png) repeat top left;
}
div.black-30 {
 background: transparent url(../images/black-30.png) repeat top left;
}
div.black-40 {
 background: transparent url(../images/black-40.png) repeat top left;
}
div.black-50 {
 background: transparent url(../images/black-50.png) repeat top left;
}
div.black-60 {
 background: transparent url(../images/black-60.png) repeat top left;
}
div.black-70 {
 background: transparent url(../images/black-70.png) repeat top left;
}
div.white-04 {
 background: transparent url(../images/white-04.png) repeat top left;
}
div.white-06 {
 background: transparent url(../images/white-06.png) repeat top left;
}
div.white-08 {
 background: transparent url(../images/white-08.png) repeat top left;
}
div.white-10 {
 background: transparent url(../images/white-10.png) repeat top left;
}
div.white-16 {
 background: transparent url(../images/white-16.png) repeat top left;
}
div.white-25 {
 background: transparent url(../images/white-25.png) repeat top left;
}
div.white-40 {
 background: transparent url(../images/white-40.png) repeat top left;
}
div.white-50 {
 background: transparent url(../images/white-50.png) repeat top left;
}
div.white-70 {
 background: transparent url(../images/white-70.png) repeat top left;
}
div.white-90 {
 background: transparent url(../images/white-90.png) repeat top left;
}
 
/*This forces the very lite modules to have a dark text so easier to read*/
div.module-sfx.white-40,
div.module-sfx.white-50,
div.module-sfx.white-70,
div.module-sfx.white-90 {
 color: #333;
}
 
/*This forces the very dark modules to have white text so easier to read*/
div.module-sfx.black-40,
div.module-sfx.black-50,
div.module-sfx.black-60,
div.module-sfx.black-70,
#footer-shelf.black-40 div.moduletable,
#footer-shelf.black-50 div.moduletable,
#footer-shelf.black-60 div.moduletable,
#footer-shelf.black-70 div.moduletable {
 color: #fff;
}
 
/* Footer Section  
*****************************************/
#footer {
 margin: 0 auto;
 clear: both;
 height: 46px;
 font-size: 11px;
 padding: 15px 2px;
}
#nav-and-credits {
 overflow: auto;
}
#nav-and-credits .left,
#copyright .left {
 float: left;
 clear: right;
 padding-left: 10px;
}
#nav-and-credits .right,
#copyright .right {
 float: right;
 padding-right: 10px;
}
#copyright {
 overflow: auto;
}
#copyright .right a {
 text-decoration: underline;
}
#copyright .right a:hover {
 color: #fff;
}
a.w3c-valid-xhtml,
a.w3c-valid-css,  
a.footer-rss {
 padding-left: 30px;
 text-transform: uppercase;
}
#nav-and-credits a.w3c-valid-xhtml {
 background: url(../images/red-tick.gif) no-repeat 12px 3px;
 color: #CC3333;
}
#nav-and-credits a.w3c-valid-css {
 background: url(../images/blue-tick.gif) no-repeat 12px 3px;
 color: #A8D5FC;
}
#nav-and-credits a.footer-rss {
 background: url(../images/orange-tick.gif) no-repeat 12px 3px;
 color: #E68C05;
}
 
/* Footer Menu */
#footer ul#mainlevel-footer {
 margin: 0;
 padding: 0;
 width: 485px;
 height: 20px;
}
ul#mainlevel-footer li {
 list-style-type: none;
 float: left;
 margin: 0;
 padding: 0;
 padding-right: 10px;
}
ul#mainlevel-footer li a:link, ul#mainlevel-footer li a:visited {
 text-decoration: none;
 font: normal 11px Arial, serif;
 padding: 2px 2.5px 2px 2.5px;
}
ul#mainlevel-footer li a:hover {
}
 
/* Collapsable and configurable columns
*****************************************/
#wrapper.scheme_2 #column-2 .content {
 padding: 20px;
}
#wrapper.scheme_2 #column-1 .content {
 padding: 10px 0 20px 0;
}
 
/**** Sidebar on the Left ****/
#wrapper.scheme_2 #column-1.first-in-scheme {
 float: right;
 width: 220px;
 display: inline;
}
#wrapper.scheme_2 #column-2.second-in-scheme {
 display: inline;
 float: left;
 width: 725px;
}
 
/**** Sidebar on the Right ****/
#wrapper.scheme_2 #column-1.second-in-scheme {
 width: 220px;
 float: right;
 display: inline;
}
#wrapper.scheme_2 #column-2.first-in-scheme {
 display: inline;
 float: left;
 width: 725px;
}
 
/**** No Sidebar ****/
#wrapper.scheme_1 #column-2 .content {
 padding: 10px 20px 20px 20px;
}
#wrapper.scheme_1 .first-in-scheme {
 width: 960px;
 margin: 0 auto;
 display: block;
}
 
/* Intelli Mods Code
*****************************************/
.content #span1 div.moduletable,
.content #span2 div.moduletable,
.content #span3 div.moduletable,
.content #span4 div.moduletable,
.content #span5 div.moduletable,
.content #span6 div.moduletable,
.content #span1 div.module,
.content #span2 div.module,
.content #span2 div.module,
.content #span3 div.module,
.content #span4 div.module,
.content #span5 div.module,
.content #span6 div.module {
 float: left;
 margin: 0 0.9%;
 display: inline;
}
#span1 div.module,
#span1 div.moduletable {
 width: 98%;
}
#span2 div.module,
#span2 div.moduletable {
 width: 48%;
}
#span3 div.module,
#span3 div.moduletable {
 width: 31.2%;
}
#span4 div.module,
#span4 div.moduletable {
 width: 23%;
}
#span5 div.module,
#span5 div.moduletable {
 width: 18%;
}
#span6 div.module,
#span6 div.moduletable {
 width: 14.6%;
}
 
/* Clear Fix */
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 overflow: hidden;
}
/*
.clearfix {
 display: inline-table;
}
*/
/* Hides From IE Mac \*/
* html .clearfix {
 height: 1%;
}
.clearfix {
 display: block;
}


 
 
Et le menu.css
 

Spoiler :

#top{
 position: relative;
 z-index: 999;
}
#nav{
 float: left;
 margin: 37px 0 0 0;
 padding: 0;
 width: 380px;
}
#jjNav {
    height: auto;
    width: auto;
}
#jjNav ul#jjSuperfish {
    padding: 0;
    margin: 0;
    list-style: none;
    float: right;
}
/*FIRST LEVEL*/
ul#jjSuperfish li {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#jjSuperfish li.separator {
    font-weight: bold;
    line-height: 34px;
    cursor: default;
 display:block;
 padding:0 10px;  
}
ul#jjSuperfish li.separator span {
 position:relative;
}
ul#jjSuperfish li#sfhover a.active:hover {
 border:none; /*ie7*/
}
ul#jjSuperfish li a:link,
ul#jjSuperfish li a:visited,
ul#jjSuperfish li a:hover {
    overflow: hidden;
 font: bold 15px Arial, serif;
 display: block;
 padding: 5px 10px;
 background: none transparent;
 text-decoration: none;
}
ul#jjSuperfish li a:link span,
ul#jjSuperfish li a:visited span,
ul#jjSuperfish li a:hover span {
    width: auto;
    padding: 0 10px;
 position:relative;
 cursor:pointer;/*opera*/
}
ul#jjSuperfish li#sfhover,  
ul#jjSuperfish li.sfHover,
ul#jjSuperfish li.jjNav-child-active,
ul#jjSuperfish li.jjNav-last-child-active,
ul#jjSuperfish li.jjNav-first-child-active,
ul#jjSuperfish li#sfhover.jjNav-child-active,
ul#jjSuperfish li#sfhover.jjNav-last-child-active,
ul#jjSuperfish li#sfhover.jjNav-first-child-active,
ul#jjSuperfish li.jjNav-first-active,
ul#jjSuperfish li.jjNav-last-active,
ul#jjSuperfish li.jjNav-active,
ul#jjSuperfish li#sfhover.jjNav-first-active,
ul#jjSuperfish li#sfhover.jjNav-last-active,
ul#jjSuperfish li#sfhover.jjNav-active,
ul#jjSuperfish li#sfhover.jjNav-child-active,
ul#jjSuperfish li#sfhover.jjNav-last-child-active,
ul#jjSuperfish li#sfhover.jjNav-first-child-active,
ul#jjSuperfish li#sfhover.jjNav-active{
    position: relative;
}
/*white arrow on with childs*/
ul#jjSuperfish li.jjNav-child a,
ul#jjSuperfish li.jjNav-first-child a,  
ul#jjSuperfish li.jjNav-last-child a {
background: url(../images/subchild_light.gif) no-repeat 50% 23px;
display:block;
}
/*dark arrow ond hover and active with childs*/
ul#jjSuperfish li#sfhover.jjNav-child-active span,  
ul#jjSuperfish li#sfhover.jjNav-first-child-active span,  
ul#jjSuperfish li#sfhover.jjNav-last-child-active span,  
ul#jjSuperfish li#sfhover.jjNav-child span,  
ul#jjSuperfish li#sfhover.jjNav-first-child span,  
ul#jjSuperfish li#sfhover.jjNav-last-child span,
ul#jjSuperfish li.jjNav-child-active a.active span,
ul#jjSuperfish li.jjNav-first-child-active a.active span,
ul#jjSuperfish li.jjNav-last-child-active a.active span{
    background: url(../images/child.gif) no-repeat 50% 25px;
 display:block;
}
ul#jjSuperfish li#sfhover span {
 display:block;
}
/*NEXT LEVELS*/
ul#jjSuperfish ul {
    display: none;
    position: absolute;
    top: 22px;
    left: 0px;
    float: none;
    width: 200px;
    line-height: 30px;
}
ul#jjSuperfish li ul li ul {
    display: none;
    top: -1px;
    left: 200px;
}
ul#jjSuperfish li ul li {
   margin: 0;
    line-height: 30px;
    display: block;
    width: 200px;
 float:left;
 background: none transparent;
 cursor:pointer;/*opera*/
}
ul#jjSuperfish li#sfhover ul li a.active:hover,
ul#jjSuperfish li.sfHover ul li a.active:hover{
 text-decoration:none; /*reset txt decoration for submenus*/
}
ul#jjSuperfish li#sfhover ul li a:link,  
ul#jjSuperfish li#sfhover ul li a:visited,  
ul#jjSuperfish li.sfHover ul li a:link,  
ul#jjSuperfish li.sfHover ul li a:visited {
    display: block;
    background: none transparent;
    line-height: 30px;
  padding:0 10px;
    font-weight: normal;
    font-size: 13px;
}
ul#jjSuperfish li ul li#sfhover {
 background: none transparent;
}
ul#jjSuperfish li#sfhover ul li.separator span,
ul#jjSuperfish li#sfhover ul li#sfhover.separator span,
ul#jjSuperfish li.sfHover ul li#sfhover.separator span,
ul#jjSuperfish li.sfHover ul li.separator span{
 line-height: 30px;
 background:none;
 width:180px;
 display:block;
}
ul#jjSuperfish li#sfhover ul li.separator,
ul#jjSuperfish li#sfhover ul li#sfhover.separator,
ul#jjSuperfish li.sfHover ul li#sfhover.separator,
ul#jjSuperfish li.sfHover ul li.separator{
 line-height: 30px;
 background:none;
 width:180px;
 display:block;
 font-weight:normal;
}
ul#jjSuperfish li.sfHover ul li {
 line-height: 30px;
 background:none;
}
/*arrows for subchilds*/
ul#jjSuperfish li.sfHover ul li.jjNav-first-subchild,  
ul#jjSuperfish li.sfHover ul li.jjNav-subchild,  
ul#jjSuperfish li.sfHover ul li.jjNav-last-subchild {
background: url(../images/subchild.gif) no-repeat 180px 50%;
}
/* Side Nav */
#column-1 .content ul.menu {
 padding: 0;margin-top: -9px;
}
#column-1 .content ul.menu li {
 list-style-type: none;
 list-style-position: outside;
 margin: 0;
 padding: 0;
}
#column-1 .content ul.menu li a:link,  
#column-1 .content ul.menu li a:visited {
 text-decoration: none;
 padding: 0;
 padding: 5px 0 5px 10px;
 display: block;


 
 
Si quelqu'un a la solution svp je galère depuis quelques jours (15 pour etre exact et j'arrive pas a trouver une aide)
 
Merci d'avence

mood
Publicité
Posté le 22-10-2008 à 00:08:39  profilanswer
 

n°1803013
gatsu35
Blablaté par Harko
Posté le 22-10-2008 à 07:36:51  profilanswer
 

d'abord tu remplaces les balises spoiler par les balises code s'il te plait car là c'est reloud à lire. Merci.

 

un exemple :
[ code=html]
tu met pas l'espace bien sur
[/code ]
et t'aurais pas un lien vers ce site en question, car là on te repondrait en 30s
car sinon on passe 300ans à lire le HTML et la CSS
mais sinon file nous aussi le code HTML


Message édité par gatsu35 le 22-10-2008 à 07:37:51
n°1803014
ionik
Posté le 22-10-2008 à 07:38:44  profilanswer
 

remplace tes float:left par des float:right


---------------
Recette cookeo Recette de cuisine
n°1803332
mathieu34
Débute
Posté le 22-10-2008 à 20:38:14  profilanswer
 

Salut,
 Voici les lignes qu'il fallait modifier
 
#wrapper.scheme_2 #column-1.first-in-scheme {
 float: left;
 width: 220px;
 display: inline;
}
#wrapper.scheme_2 #column-2.second-in-scheme {
 display: inline;
 float: right;
 width: 725px;
}
 
#wrapper.scheme_2 #column-1.second-in-scheme {
 width: 220px;
 float: left;
 display: inline;
}
#wrapper.scheme_2 #column-2.first-in-scheme {
 display: inline;
 float: right;
 width: 725px;
 
Pfff suis trop bete il fallait juste inverser les valeurs left par right et right par left...
En tout cas merci de votre aide c'est trop cool je vais pouvoir bien avencer


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionnement d'un menu

 

Sujets relatifs
"Menu" séparé de mes fichier HTMLmenu cascade incompatible IE
Menu html CSS (ul li) [resolu]positionnement du menu effet dock
Positionnement d'un texte dans une DIV suite à menu déroulantproblème de positionnement de "slide menu"
Probleme positionnement de menu a ongletsPositionnement de calques dans menu généré automatiquement
[CSS] Positionnement d'un menu pas rapport a une image!Positionnement de menu déroulant
Plus de sujets relatifs à : Positionnement d'un menu


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR