Le DVD vidéo de Florent V. :

Elephorm apprendre XHTML et CSS
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» CSS: text-align:right ne marche pas dans mon menu navigation.....
Auteur
midiweb
# 21 May 2008 - 18:43:33
Citer
62 Posts
 salut,

j'utilse le CMS Website Baker qui possède plusieurs gabarits en css dont le "Industry1" qui est celui de mon site.
Tout marche bien SAUF la barre de menu de navigation dont je n'arrive à mettre les entrées alignées à droite:

Exemple fictif: HOME - CONTACT - RÉGLEMENT - À PROPOS DE NOUS - LIENS

Je peux utiliser la propriété:



Float: right;




mais dans ce cas mes entrées sont inversées: LIENS - A PROPOS,..............



text-align: right;


devrait marcher mais mon menu ne s'aligne pas à droite.Je ne comprends pas pourquoi.

Je voudrais ceci:




                                                                                     HOME - CONTACT - RÉGLEMENT - À PROPOS DE NOUS - LIENS

Voici mon css avec des lignes décommentées pour ce qui ne me sert pas



body

{

	background-color: #fdfffc;

	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;

    font-size: 10pt;

	padding: 0px;

	margin-top: 20px;

}



#nav

{

	width: 980px;

	height: 25px;

	border-top: 5px solid black;

	background-color:#990000;

	/*opacity: 0.8;

	-moz-opacity: 0.8;

	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);*/

	position: relative;

	top: 0px;

	margin: 0px;	

	/*left: 50%;*/	

	margin-top: 0px;

	margin-bottom:0px;

	padding-left: 0px;

	text-align:right;

	

}



#nav li

{

	display: block;

	float: left;

	height: 20px;

	width: auto;

	line-height: 25px;

}



#nav li a

{



	display: block;

	padding-left: 12px;

	padding-right: 12px;

	color: white;

	text-decoration: none;

	font: normal normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;

}







#nav li a:hover

{

	background-color:;

	color: grey;

}



#main

{

	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;

    font-size: 9pt;

	width: 980px;

	margin-left: auto;

	margin-right: auto;

	border-right: 1px solid #666666;

	border-left: 1px solid #666666;

}



#hero

{

	margin: 0px;

	width: 200px;

	height: 92px;

	background-image: url(../../media/banner2.jpg);

	background-repeat: no-repeat;

	float: left;

	

}



/*#hero1

{

	margin: 0px;

	width: 200px;

	height: 92px;

	margin-left: 160px;

	background-image: url(../../media/banner.png);

	background-repeat: no-repeat;

	float: left;

	

	}*/



#hero2

{

	margin: 0px;

	margin-left: 220px;

	height: 85px;

	background-image: url(../../media/top-banner.jpg);

	background-repeat: no-repeat;

	

	}





/*#header

{

	background-image:;

	height: 79px;

	padding-top: 1px;

	position: relative;

}*/



.gear

{

	width: 970px;

	height: 2px;

	margin-top: 0px;

	margin-left: 5px;

/*

	border-bottom: 2px dotted #000;



*/}



#header h1

{

	position: absolute;

	left: 74px;

	top: 8px;

	color: white;

	font-size: 48px;

	font-weight: bold;

	margin: 0px;

}



#header h1.shad

{

	left: 76px;

	top: 10px;

	color: black;

	opacity: 0.7;

	-moz-opacity: 0.7;

	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}



#header em

{

	font-style: normal;

	text-decoration: underline;

}



#wrapper

{

	padding-top:0px;

	background-color: white;

	position: relative;

}

#wrapper:after {

	content: '.';

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;

}

#wrapper {

display: inline-block;

}



#wrapper {

display: block;

}



#sidebar

{

	float:left;

	text-align: center;

	margin-left: 0;

	margin-top: 0px;

	position: relative;

	background-position: bottom left;

	padding: 10px 10px 20px 10px;;

	background-color:white;

	width: 160px;

	height: 450px;

	border-right: 1px inset grey ;

	

}



#aktuelles

{

	float:right;

	text-align: center;

	margin-left: 0px;

	margin-top: 0px;

	position:relative;

	background-position: bottom left;

	padding: 10px 10px 20px 10px;

	background-color:white;

	width: 160px;

	height: 450px;

	border-left: 1px inset grey;

	

}





#aktuelles h4

{

	

	background-color: #ae8055;

	color: #fff6fd;

}



#sidebar h3

{

	font-size: 18px;

	border-bottom: 1px solid black;

	margin-bottom: 4px;

	margin-top: 16px;

	clear: both;

}



#sidebar ul

{

	margin-left: 1em;

	padding-left: 0px;

}



#sidebar p

{

	margin-bottom: 8px;

}

#sidebar div.subtabs ul{

	list-style: none;

	width: 155px; 

	margin: 0;

	padding: 0;

	}

#sidebar div.subtabs ul ul{

	list-style: none;

	width: 130px;

	margin: 0;

	padding: 0 0 0 5px;

	}

#sidebar div.subtabs ul ul ul{

	list-style: none;

	width: 125px;

	margin: 0;

	padding: 0 0 0 5px;

	}

#sidebar div.subtabs ul a{

	width:100%;

	margin: 3px; 

	text-align:left; 

	font-size: 0.9em; 

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-weight: normal; 

	text-decoration:none; 

	word-wrap:normal; 

	color:; 

	display:block; 

	padding:3px 3px 3px 5px; 

	/*background:#f4f4f4;*/ 

	/*border-top:1px solid #d8d8d8;*/ 

	/*border-right:1px solid #d8d8d8;*/ 

	border-bottom:1px solid #d8d8d8; 

	border-left:4px solid #cccccc; 

	}

#sidebar div.subtabs ul a:hover {

	text-decoration:none; 

	background:#eaeaea url(img/menubg2.gif) bottom left repeat-x; 

	color:#A31E00; 

	/*border-top:1px solid #b0b0b0; 

	border-right:1px solid #b0b0b0; 

	border-bottom:1px solid #b0b0b0;*/ 

	border-left:4px solid #A31E00; 

	}

	

#content

{

	margin: 0 0 0 180px; 

	min-height:310px;

	height:auto !important;

	height:300px;

	width:600px;

	display: block;  

	position: relative;

	padding: 0px 3px 20px 10px;

	color: #333333;

	

}



#content h1

{

	font-size: 20px;

	/* 18px is the default minimum font size for which anti-aliasing will occur. */

	margin: 0px;

	text-decoration: underline;

}



#content h2

{

	font-size: 18px;

	/* 18px is the default minimum font size for which anti-aliasing will occur. */

	margin: 0px;

	text-decoration: underline

}



#content .date

{

	float: right;

}



#content .postedBy

{

	float: left;

}



#content .meta

{

	height: 1em;

}



#content p

{

	text-align: justify;

	text-indent: 1em;

	line-height: 1.3em;

}



.comments

{

	border-top: 1px dotted #666666;

	border-bottom: 1px dotted #666666;

	padding: 4px;

	text-align: right;

	margin-bottom: 2em;

	background-image: url(images/comment_edit.gif);

	background-repeat: no-repeat;

	background-position: center left;

}



a

{

	color: #666666;

}



.pullout

{

	background-color: #eeeeee;

	padding: 5px;

	float: right;

	margin: 8px;

}









#footer

{

	width: 980px;

	height:45px;

	padding-top: 0px;

	padding-bottom: 0px;

	margin-left: auto;

	margin-right: auto;

	color: #b0b0b0;

	text-align: center;

}



/*.left

{

	float: left;

}*/



.right

{

	float: right;

}



.csskeyword

{

	color: blue;

}



.cssvalue

{

	color: red;

}



p.caption

{

	text-align: center;

}



small.super

{

	vertical-align: top;

	font-size: 0.75em;

	line-height: 1.3em;

}



.nodisplay

{

	display: none;

}


Qui peut m'aider? Merci
icq msn 
^
Shunkin
# 21 May 2008 - 20:40:19
Citer
88 Posts
 Bonsoir,

Je pense qu'en remplaçant :
#nav li

{

	display: block;

	float: left;

	height: 20px;

	width: auto;

	line-height: 25px;

}


par

#nav li {display:inline;}


ça devrait fonctionner.
Peut-être qu'il faudra rajouter "height: 20px;" aux propriétés de "#nav li a"
Modifié par Shunkin (21 May 2008 - 20:42)
http://www.jlpp.com 
^
Florent V.
# 21 May 2008 - 21:45:48
Citer
Administrateur
15864 Posts
 Bonjour,

Deux solutions:
1. UL en text-align:right et LI et A en display: inline et float: none;
2. UL en width:auto et float:right et LI en float:left.
«Je déteste les animaux préhistoriques partouzeurs de droite.»
http://fvsch.com 
^
midiweb
# 21 May 2008 - 23:21:19
Citer
62 Posts
 merci bcq. Je viens d'essayer la méthode de Shunkin:


#nav

{

	width: 980px;

	height: 25px;

	border-top: 5px solid black;

	background-color:#990000;

	/*opacity: 0.8;

	-moz-opacity: 0.8;

	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);*/

	position: relative;

	top: 0px;

	margin: 0px;	

	/*left: 50%;*/	

	margin-top: 0px;

	margin-bottom:0px;

	padding-left: 0px;

	text-align: right;

	

}



#nav li

{

	display: inline;

	height: 20px;

	/*width: auto;*/

	/*line-height: 25px;*/

}

}



#nav li a

{



	display: inline;

	padding-left: 19px;

	padding-right: 12px;

	color: white;

	text-decoration: none;

	font: normal normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;

	list-style-type: none;

}







#nav li a:hover

{

	background-color:;

	color: whitesmoke;

}


C'est déjà mieux. Mes entrées s'alignent bien à droite mais la couleur des liens a disparu et ils sont soulignés. L'espace entre les entrées ont disparus et ils collent les uns aux autres. Mais on est sur la bonne voie.

je cherche à remédier à ces dernières petites anicroches.


biggrin

icq msn 
^
Florent V.
# 21 May 2008 - 23:30:15
Citer
Administrateur
15864 Posts
midiweb a écrit :
Mes entrées s'alignent bien à droite mais la couleur des liens a disparu et ils sont soulignés.

C'est parce que tu as une erreur de syntaxe dans ton code CSS, qui fait que tous tes styles après cette erreur sont ignorés.

Si tu ne repères pas cette erreur à l'oeil nu, le validateur CSS du W3C devrait la trouver.
«Je déteste les animaux préhistoriques partouzeurs de droite.»
http://fvsch.com 
^
midiweb
# 22 May 2008 - 00:04:34
Citer
62 Posts
 Voilà ce que cela donne avec le Validator de W3C:



Résultats de la validation W3C CSS de file://localhost/industry.css (CSS niveau 2.1)
Désolé ! Les erreurs suivantes ont été trouvées : (13)
URI : file://localhost/industry.css
37 Parse error - Unrecognized }
54 #nav li a:hover Propriété érronée : background-color Erreur lors de l'analyse grammaticale. :
55 #nav li a:hover Propriété érronée : color whitesmoke n'est pas une valeur de color : whitesmoke
138 #header h1.shad La propriété opacity n'existe pas en CSS niveau 2.1. mais existe en css3 : 0.7
139 #header h1.shad La propriété -moz-opacity n'existe pas : 0.7
140 #header h1.shad impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
140 #header h1.shad La propriété progid n'existe pas : DXImageTransform
140 #header h1.shad Erreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Alpha(opacity=70);
141 #header h1.shad Parse error - Unrecognized }
182 #sidebar Propriété érronée : border-right grey n'est pas une valeur de color : 1px inset grey
198 #aktuelles Propriété érronée : border-left grey n'est pas une valeur de color : 1px inset grey
255 #sidebar div.subtabs ul a La propriété word-wrap n'existe pas : normal
256 #sidebar div.subtabs ul a Propriété érronée : color Erreur lors de l'analyse grammaticale. :

↑ Top
Avertissements (6)
URI : file://localhost/industry.css
44 La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #sidebar et #nav li a
44 La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #aktuelles et #nav li a
44 La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #wrapper et #nav li a
127 La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #wrapper et #header h1
127 La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #sidebar et #header h1
127 La même couleur est utilisée en tant que couleur et couleur de fond dans les deux contextes #aktuelles et #header h1

↑ Top
Votre feuille de style CSS validée :


body {

background-color : #fdfffc;

font-family : Verdana, Geneva, Arial, helvetica, sans-serif;

font-size : 10pt;

padding : 0;

margin-top : 20px;

}

#nav {

width : 980px;

height : 25px;

border-top : 5px solid black;

background-color : #990000;

position : relative;

top : 0;

margin : 0;

margin-top : 0;

margin-bottom : 0;

padding-left : 0;

text-align : right;

}

#nav li {

display : inline;

height : 20px;

}

#nav li a {

padding-left : 19px;

padding-right : 12px;

color : white;

text-decoration : none;

font : normal normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;

}

#main {

font-family : Verdana, Geneva, Arial, helvetica, sans-serif;

font-size : 9pt;

width : 980px;

margin-left : auto;

margin-right : auto;

border-right : 1px solid #666666;

border-left : 1px solid #666666;

}

#hero {

margin : 0;

width : 200px;

height : 92px;

background-image : url(../../media/jurgschat-banner2.jpg);

background-repeat : no-repeat;

float : left;

}

#hero2 {

margin : 0;

margin-left : 220px;

height : 85px;

background-image : url(../../media/top-banner-effekt.jpg);

background-repeat : no-repeat;

}

.gear {

width : 970px;

height : 2px;

margin-top : 0;

margin-left : 5px;

}

#header h1 {

position : absolute;

left : 74px;

top : 8px;

color : white;

font-size : 48px;

font-weight : bold;

margin : 0;

}

#header em {

font-style : normal;

text-decoration : underline;

}

#wrapper {

padding-top : 0;

background-color : white;

position : relative;

}

#wrapper:after {

content : '.';

display : block;

height : 0;

clear : both;

visibility : hidden;

}

#wrapper {

display : inline-block;

}

#wrapper {

display : block;

}

#sidebar {

float : left;

text-align : center;

margin-left : 0;

margin-top : 0;

position : relative;

background-position : bottom left;

padding : 10px 10px 20px 10px;

background-color : white;

width : 160px;

height : 450px;

}

#aktuelles {

float : right;

text-align : center;

margin-left : 0;

margin-top : 0;

position : relative;

background-position : bottom left;

padding : 10px 10px 20px 10px;

background-color : white;

width : 160px;

height : 450px;

}

#aktuelles h4 {

background-color : #ae8055;

color : #fff6fd;

}

#sidebar h3 {

font-size : 18px;

border-bottom : 1px solid black;

margin-bottom : 4px;

margin-top : 16px;

clear : both;

}

#sidebar ul {

margin-left : 1em;

padding-left : 0;

}

#sidebar p {

margin-bottom : 8px;

}

#sidebar div.subtabs ul {

list-style : none;

width : 155px;

margin : 0;

padding : 0;

}

#sidebar div.subtabs ul ul {

list-style : none;

width : 130px;

margin : 0;

padding : 0 0 0 5px;

}

#sidebar div.subtabs ul ul ul {

list-style : none;

width : 125px;

margin : 0;

padding : 0 0 0 5px;

}

#sidebar div.subtabs ul a {

width : 100%;

margin : 3px;

text-align : left;

font-size : 0.9em;

font-family : Verdana, Arial, Helvetica, sans-serif;

font-weight : normal;

text-decoration : none;

display : block;

padding : 3px 3px 3px 5px;

border-bottom : 1px solid #d8d8d8;

border-left : 4px solid #cccccc;

}

#sidebar div.subtabs ul a:hover {

text-decoration : none;

background : #eaeaea url(img/menubg2.gif) repeat-x bottom left;

color : #a31e00;

border-left : 4px solid #a31e00;

}

#content {

margin : 0 0 0 180px;

min-height : 310px;

height : auto !important ;

height : 300px;

width : 600px;

display : block;

position : relative;

padding : 0 3px 20px 10px;

color : #333333;

}

#content h1 {

font-size : 20px;

margin : 0;

text-decoration : underline;

}

#content h2 {

font-size : 18px;

margin : 0;

text-decoration : underline;

}

#content .date {

float : right;

}

#content .postedBy {

float : left;

}

#content .meta {

height : 1em;

}

#content p {

text-align : justify;

text-indent : 1em;

line-height : 1.3em;

}

.comments {

border-top : 1px dotted #666666;

border-bottom : 1px dotted #666666;

padding : 4px;

text-align : right;

margin-bottom : 2em;

background-image : url(images/comment_edit.gif);

background-repeat : no-repeat;

background-position : center left;

}

a {

color : #666666;

}

.pullout {

background-color : #eeeeee;

padding : 5px;

float : right;

margin : 8px;

}

#footer {

width : 980px;

height : 45px;

padding-top : 0;

padding-bottom : 0;

margin-left : auto;

margin-right : auto;

color : #b0b0b0;

text-align : center;

}

.right {

float : right;

}

.csskeyword {

color : blue;

}

.cssvalue {

color : red;

}

p.caption {

text-align : center;

}

small.super {

vertical-align : top;

font-size : 0.75em;

line-height : 1.3em;

}

.nodisplay {

display : none;

}


icq msn 
^
midiweb
# 22 May 2008 - 20:23:54
Citer
62 Posts
 Merci Florent V et Shunkin, tout marche bien à présent. Ce Validator W3C CSS est un outil magique qui décèle les erreurs ET les corrige.
A+
icq msn 
^
Le sujet est clos.
Aller à
Powered by Phedio v3.8.5 beta in 15.3 ms © dew