Alignement des catégories

Question

jefl

4 Nov 2008 à 12:58

bonjour a tous et merci pour votre aide voila je fait appel a vous car je n'arrive pas a aligner les catégories de mon site sur la page d'accueil (je voudrai avoir les petits triangle bleu aligné sur 2 colones. pour voir mon site http://www.services-sud-ouest.com/ (vous pouvez le visité je prend toute les remarques bonne ou mauvaise pour améliorer mon site )et je le met a jour avec dreamweaver que je maitrise pas encore bien car je débute dans se domaine qui a l'air passionnant quand on le maitrise alors j'apprend avec vous tous sur le forum et avec des livres

je vous met si besoin le code de la page index merci a tous

Felipe

Administrateur

4 Nov 2008 à 13:20

Bonjour et bienvenue,

ton texte est centré car le div parent qui a pour id pub a l'instruction "text-align: center;" (ligne 117 de style.css à peu près) ce qui va centrer tout le texte contenu dans ce div (en l'absence d'indication contraire text-align: autrechose; pour l'un des éléments HTML enfants)
Si tu alignes le texte à gauche comme ci-dessous, les puces seront alignées


#pub {
text-align:left;
}

Mais tu pourrais écrire cette instruction pour #action ou bien #action table ou bien donner un identifiant à cette table (et euh pourquoi utiliser une table plutôt que deux listes côte à côte?)

jefl

4 Nov 2008 à 13:54

bonjour felipe et merci pour ton aide je vien de faire se que tu m'as dit sa ne marche pas sa me met toute la page aligné a gauche moi il me faudrai que les catégories

Felipe

Administrateur

4 Nov 2008 à 17:03

Il faudrait donc que tu indiques un identifiant (id, je sais pas comment Dreamweaver appelle cela?) pour la table qui contient tes liens avec triangle devant, disons "liens" par exemple.
Et dans ta feuille de style, tu rajoutes:

#liens {

text-align:left;

}

Tout le div #pub aura le texte centré SAUF la table #liens où c'est aligné à gauche (et d'autres existants mais j'ai pas regardé)

jefl

5 Nov 2008 à 09:59

bonjour et merci felipe pour ton aide .vu que je débute dans se domaine et que je comprend pas trop je te donne la page style pour que tu voi mieu

#container{
width:900px;
margin-left:auto;
margin-right:auto;
background-color: #FFFFFF;
background-image: url(img/ombre.jpg);
background-repeat: repeat-y;
background-position: right;

}

#action{
width:720px;
float:left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left:10px;
background-repeat: no-repeat;
background-position: center center;
}

#top { width:900px; height:157px; background-image:url(img/top.jpg); }

#bas {
width:900px;
height:15px;
background-image:url(img/bas.jpg);
background-repeat: no-repeat;
}

#meteo {width:150px; float:right;}

#menu1 {
width:130px;
float:left;
margin-left:4px;
background-image: url(img/annuaire.gif);
background-repeat: no-repeat;
background-position: top;
margin-top:15px
}

#menu2 {
width:130px;
float:left;
margin-left:2px;
margin-top:5px;
background-image: url(img/services.gif);
background-repeat: no-repeat;
background-position: top;

}

#tv {
width:550px;
height:600px;
float:left;
border: thin solid #B7F0FF;
margin-left:10px;
}

#annu{
width:130px;
float:right;
background-image:url(img/cat.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #FFEFDF;
margin-right:5px;
padding-top:15px;

border-right: 2px solid FFCC99;

}

#gauche { width: 130px; float:left; }

#bas_d {
width:130px;
height:14px;
background-image:url(img/bas_d.jpg);
background-repeat: no-repeat;
background-position: top;
}

#bas_g {
width:130px;
height:14px;
background-image:url(img/basmenu.gif);
background-repeat: no-repeat;
background-position: top;
}

#alea {
width: 500px;
margin-right:auto;
margin-left:auto;
float: left;
}

#ephemeride { width:130px; float:left;}

#pub {
width:880px;
text-align: center;
background-repeat: repeat-y;
background-position: right;
background-color: #FFFFFF;
}

#pub2 {
width:120px;

}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
font-weight: bold;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
background-color: #0066CC;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #888BFF;
text-decoration: none;
}

#gauche a:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
line-height: 20px;
background-image: url(img/bullet1.gif);
background-repeat: no-repeat;
background-position: left;

text-decoration: none;
padding:0px 0px 0px 20px;
}

#gauche a:hover{
background-image: url(img/bullet2.gif);
background-repeat: no-repeat;
background-position: left;
text-decoration: none;
padding:0px 0px 0px 20px;
background-color: #84CEFF;
}

#gauche a:visited{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
line-height: 20px;
background-image: url(img/bullet1.gif);
background-repeat: no-repeat;
background-position: left;

text-decoration: none;
padding:0px 0px 0px 20px;

}

.description_site_annuaire {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif; }

body {
background-image: url(../IMG/fond.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
}

.text_before_field_add_annuaire { font-family: Arial; font-size: 12px; }
#sep {clear:both; }

.url_site_annuaire { font-size: 10px; color: dimgray }

body {
background-image: url(img/fond.jpg);
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
color: #FFCC00;
}

Igor

5 Nov 2008 à 10:30

Bonjour,

Pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.

jefl

5 Nov 2008 à 10:40

bonjour et merci felipe pour ton aide .vu que je débute dans se domaine et que je comprend pas trop je te donne la page style pour que tu voi mieu

#container{
	width:900px;
	margin-left:auto;
	margin-right:auto;
	background-color: #FFFFFF;
	background-image: url(img/ombre.jpg);
	background-repeat: repeat-y;
	background-position: right;
	
		
	}
	
	#action{
	width:720px;
	float:left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-left:10px;
	background-repeat: no-repeat;
	background-position: center center;
	}
	
	
	#top {  width:900px; height:157px; background-image:url(img/top.jpg); }
	
	#bas {
		width:900px;
		height:15px;
		background-image:url(img/bas.jpg);
		background-repeat: no-repeat;
	}
	
	#meteo {width:150px; float:right;}
	
	
	#menu1 {
	width:130px;
	float:left;
	margin-left:4px;
	background-image: url(img/annuaire.gif);
	background-repeat: no-repeat;
	background-position: top;
	margin-top:15px
	}
	
	
	

	
	
		#menu2 {
	width:130px;
	float:left;
	margin-left:2px;
	margin-top:5px;
	background-image: url(img/services.gif);
	background-repeat: no-repeat;
	background-position: top;

	}
	
	#tv {
	width:550px;
	height:600px;
	float:left;
	border: thin solid #B7F0FF;
	margin-left:10px;
}
	
	#annu{
	width:130px;
	float:right;
	background-image:url(img/cat.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #FFEFDF;
	margin-right:5px;
	padding-top:15px;
	
	border-right: 2px solid FFCC99;
	

	
	
	}
	
#gauche { width: 130px; float:left; }
	
	#bas_d {
	width:130px;
	height:14px;
	background-image:url(img/bas_d.jpg);
	background-repeat: no-repeat;
	background-position: top;
}

	#bas_g {
	width:130px;
	height:14px;
	background-image:url(img/basmenu.gif);
	background-repeat: no-repeat;
	background-position: top;
}



#alea {
	width: 500px;
	margin-right:auto;
	margin-left:auto;
	float: left;
}

#ephemeride { width:130px; float:left;}


#pub {
	width:880px;
	text-align: center;
	background-repeat: repeat-y;
	background-position: right;
	background-color: #FFFFFF;
}
	
	#pub2 {
	width:120px;

}
	
	a:link {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #000000;
		font-weight: bold;
	}
	a:hover {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		font-weight: bold;
		color: #FFFFFF;
		text-decoration: underline;
		background-color: #0066CC;
	}
	a:visited {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #888BFF;
	text-decoration: none;
	}
	
	
	#gauche a:link{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #000000;
	line-height: 20px;
		background-image: url(img/bullet1.gif);
		background-repeat: no-repeat;
		background-position: left;
		

		text-decoration: none;
		padding:0px 0px 0px 20px;
		}
		
			#gauche a:hover{
	background-image: url(img/bullet2.gif);
	background-repeat: no-repeat;
	background-position: left;
	text-decoration: none;
	padding:0px 0px 0px 20px;
	background-color: #84CEFF;
		}
		
		
				#gauche a:visited{
				
					font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: #000000;
	line-height: 20px;
		background-image: url(img/bullet1.gif);
		background-repeat: no-repeat;
		background-position: left;
		

		text-decoration: none;
		padding:0px 0px 0px 20px;

		}

		

	
	.description_site_annuaire {
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif; }

	
	body {
	background-image: url(../IMG/fond.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: justify;
	}
	
	.text_before_field_add_annuaire { font-family: Arial; font-size: 12px; }
	#sep {clear:both; }
	
	
	.url_site_annuaire { font-size: 10px; color: dimgray }
	
body {
	background-image: url(img/fond.jpg);
}
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #FFCC00;
}

jefl

5 Nov 2008 à 20:42

re bonjour je ne sais pas si je me suis conformer à cette règle de mise en forme ? j'ai essayé de faire comme m'as dit igor ;si quelqun pouvai m'aider car je ne trouve toujours pas la solution merci a tous

Heyoan

5 Nov 2008 à 20:57

Hello,

La mise en forme est bonne (même si le mieux aurait été d'éditer ton message plutôt que d'en refaire un... et que ton code est inutile puisque tu nous a déjà donné le lien vers ta page et que nous y avions déjà accès Smiley cligne

).

Pour ce qui est de ta question Felipe t'avait donné la solution : il suffit d'affecter un id à la table qui contient les rubriques :

html

<table id="liens">

css

#liens {
   text-align:left;
}

Il ne serait peut-être pas inutile de reprendre du début. Un petit tour sur cet article : comment débuter et trouver l'information ?, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

Bonne continuation Smiley smile

.

jefl

6 Nov 2008 à 08:05

bonjour a tous ici toujour la pluie et moi mon code ne marche toujours pas je vien de mettre le code css au niveau de la ligne 130 de mon code pas de changement .pas de crainte sa ne vien pas de vous mais de moi je débute et c'est pas simple que faire merci a tous

Sujet clos

Questions générales et questions de débutants

Alignement des catégories