28173 sujets

CSS et mise en forme, CSS3

Les classes <div> [Résolu]

Bonjour je voudrai savoir pour les classes <div>
J'ai une classe elements de menu:
.element-de-menu
{
	color: #758642;
	margin-top: 20px;
	margin-left: 20px;
	border-top: 0 none;
	border-right: 0 none;
	border-bottom: 1px dotted #758642;
	border-left: 0 none


Ensuite pour mes liens qui sont sur cette page :

je mets : une div
<div class="col-gauche">

.col-gauche
	{
	text-align: right;
	width: 20%;
	float: left
	}



Et ensuite dans les liens :
<div class="element-de-menu"> plus le lien qui va avec : <a href="#"><a href=".

Mon problème c'est que j'ai fait 5 liens et si je veux mettre un 6ème lien en précisant la div :<div class="element-de-menu">, tout est décallé sur la page Smiley decu
Le texte du milieu passe en dessous les liens qui eux prennent alors toute la largeur de la page.

Si j'enlève :<div class="element-de-menu">, mon problème est résolu bien entendu mais le lien ne fait plus parti de ce bloc et c'est moins joli.

Comment faire pour insérer ce 6ème lien en rajoutant la div
en espérant que je me suis bien expliqué
Merci pour vos réponses
Modifié par darcy (28 Aug 2006 - 18:43)
Salut.

J'ai l'impression que tu nous fais une divite aïgue compliquée d'une surexposition aux classes Smiley lol

Sérieusement, il n'est pas nécessaire d'utiliser des divisions pour chaque lien, ni de définir une classe particulière.

Je te conseille de (re ?)lire attentivement quelques tutoriels, notamment en ce qui concerne les différences entre classes & id ...

<edit de mpop : correction d'une URL mal formée />
Modifié par mpop (26 Aug 2006 - 15:55)
merci pour ta réponse
Mais tu proposerai quoi alors?
en fait je demandais pourquoi je ne peux pas rajouter une div class sans mettre en l'air toute la page
Smiley rolleyes
Modifié par darcy (26 Aug 2006 - 15:53)
Pour un menu de navigation, on utilise couramment une liste non-ordonnée <ul>.

Dans ton cas, on aurait ceci : 
<div id="col-gauche">
    <ul>
        <li><a href="#" title="">accueil</a></li>
    </ul>
</div>


Pour pouvoir styler les différents éléments du menu, tu as largement assez de sélecteurs & d'éléments possibles :
- div#col-gauche pour toute la colonne ;
- div#col-gauche ul pour les listes non ordonnées à l'intérieur de la colonne ;
- div#col-gauche ul li pour les éléments des listes citées précédement ;
- div#col-gauche ul li a pour les liens à l'intérieur de ces éléments de liste.

Donc si par exemple tu veux que les liens s'affichent en rouge, tu écris 
div#col-gauche ul li a {
    color: red;
}
darcy a écrit :
en fait je demandais pourquoi je ne peux pas rajouter une div class sans mettre en l'air toute la page Smiley rolleyes

Ça dépend de la page. Et où est la page, ou son code ?...

En attendant de fournir un peu plus de code ou -- bien mieux -- une page de test en ligne, pourrais-tu s'il te plaît éditer ton premier message, pour le mettre en forme conforméménet aux règles du forum ? En particulier, entourer les codes cités par les balises [ code] et [ /code] (sans espaces) qui vont bien ?

Merci d'avance. Smiley smile
a écrit :
en fait je demandais pourquoi je ne peux pas rajouter une div class sans mettre en l'air toute la page


ça je ne saurais pas te le dire sans un exemple en ligne ou, à défaut, le code de la page ...

Mais de toutes façons, utiliser une classe et l'appliquer à tous les éléments de ta liste de menus témoigne d'une mauvaise connaissance ou en tous cas compréhension des règles de sélection en CSS. D'où le lien vers les tutoriels.
a écrit :

Ça dépend de la page. Et où est la page, ou son code ?...

En attendant de fournir un peu plus de code ou -- bien mieux -- une page de test en ligne, pourrais-tu s'il te plaît éditer ton premier message, pour le mettre en forme conforméménet aux règles du forum ? En particulier, entourer les codes cités par les balises [ code] et [ /code] (sans espaces) qui vont bien ?

Merci d'avance. Smiley smile 





#en-tete 
	{
	background-color: #2cc936;
	text-align: center;
	visibility: visible;
	position: relative;
	height: 86px
	}

body 
	{
	font-size: small;
	font-family: "Lucida Console", Times, serif;
	line-height: 180%;
	background-color: #006600;
	margin: 0
	}

#navigation 
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color:#585158;
	text-align: center;
	letter-spacing: 6px;
	margin-bottom: 15px;
	height: 16px
	}

#logo 
	{
	margin: 0 10px 10px 18%;
	height: 95px
	}

a 
	{
	color:white ;
	text-decoration: none
	}

a:hover 
	{
	color:  #fc0;
	text-decoration: none
	}

	

.element-de-menu
	{
	color: #758642;
	margin-top: 20px;
	margin-left: 20px;
	border-top: 0 none;
	border-right: 0 none;
	border-bottom: 1px dotted #758642;
	border-left: 0 none
	}

.element-de-menu a:link 
	{
	color:#ffb82a ;
	text-decoration: none
	}

.element-de-menu a:hover 
	{
	color: #2cc936;
	text-decoration: none
	}

.col-gauche
	{
	text-align: right;
	width: 10%;
	float: left;
	
	 
	}

.col-milieu
	{
	padding-left: 36px;
	width: 50%;
	float: left;

		
	}



#pied-de-page 
	{
	color: white;
	font-size: 9px;
	line-height: 16px;
	background-color: #6b6c5a;
	text-align: center;
	letter-spacing: 6px;
	height: 16px;
	clear: left


Comme cela?

j'ai mis les codes de la page

(je sais c'est un peu caca vous allez dire...
Modifié par darcy (26 Aug 2006 - 16:16)
a écrit :
Mais de toutes façons, utiliser une classe et l'appliquer à tous les éléments de ta liste de menus témoigne d'une mauvaise connaissance ou en tous cas compréhension des règles de sélection en CSS. D'où le lien vers les tutoriels.


Oui je l'avoue j'ai même acheter CC2 pratique du design web mais
c'est trrès difficile Smiley bawling
Modifié par darcy (26 Aug 2006 - 16:14)
Ah ben, faut souffrir pour y arriver, hein ! si c'est trop facile, c'est pas marrant ! Smiley cligne

Il faut surtout prendre le temps de faire les tutoriels en s'attachant à comprendre le pourquoi de chaque étape.

Une fois que tu auras compris le fonctionnement sur des exemples simples, le reste viendra naturellement.

On peut t'aider à résoudre ton problème dans ce cas-ci, mais ça ne va pas t'aider à progresser, puisqu'on va soit te donner un code tout cuit & prêt à l'emploi, soit coller une rustine sur un code bancal au départ ...

Je ne sais pas si tu as vu, mais y'a quelques tutos pour faire des menus en CSS, aussi Smiley lol
Sopo a écrit :
Ah ben, faut souffrir pour y arriver, hein ! si c'est trop facile, c'est pas marrant ! Smiley cligne

Il faut surtout prendre le temps de faire les tutoriels en s'attachant à comprendre le pourquoi de chaque étape.

Une fois que tu auras compris le fonctionnement sur des exemples simples, le reste viendra naturellement.

On peut t'aider à résoudre ton problème dans ce cas-ci, mais ça ne va pas t'aider à progresser, puisqu'on va soit te donner un code tout cuit & prêt à l'emploi, soit coller une rustine sur un code bancal au départ ...

Je ne sais pas si tu as vu, mais y'a quelques tutos pour faire des menus en CSS, aussi Smiley lol

Je suis d'accord avec toi...
Faut que j'arrive à comprendre...
C'est quand même pas si évident..
Bon j'y retourne
Smiley biggol

Non je n'avais pas vu ces tutos Smiley rolleyes
Merci pour le lien
Modifié par darcy (26 Aug 2006 - 17:09)
Au sujet de donner du grain à moudre : le code CSS ne suffit jamais, car les feuilles de style ne sont pas appliquées sur du vide. Smiley cligne

Pour les problèmes de rendu, il faut donc à la fois le code HTML et le CSS associé. D'où l'intérêt de la page de test en ligne (faute d'hébergement perso, un petit compte pages perso de Free fait très bien l'affaire... c'est d'ailleurs l'occasion d'en apprendre un peu plus sur l'hébergement, le FTP, ce genre de choses).
mpop a écrit :
Au sujet de donner du grain à moudre : le code CSS ne suffit jamais, car les feuilles de style ne sont pas appliquées sur du vide. Smiley cligne

Pour les problèmes de rendu, il faut donc à la fois le code HTML et le CSS associé. D'où l'intérêt de la page de test en ligne (faute d'hébergement perso, un petit compte pages perso de Free fait très bien l'affaire... c'est d'ailleurs l'occasion d'en apprendre un peu plus sur l'hébergement, le FTP, ce genre de choses).

Ok
pas de soucis je vais tenter la mise en ligne et repasse sur le forum
Merci mpop
Je commencerais déjà par corriger les erreurs de syntaxe qui traînent dans la page HTML. Pour cela, tu peux t'aider d'un validateur HTML, par exemple celui du W3C : http://validator.w3.org/
Les erreurs et avertissements qu'il te retournera seront utiles pour corriger ces erreurs de syntaxe.

Ensuite, et c'est à vérifier, mais j'ai peur que la forme courte de doctype que tu utilises ne soit pas valide, et puisse te jouer des tours. Un doctype complet serait un plus.

Commence donc par ça, on verra alors ce que ça donne. Smiley cligne
Merci pour ta réponse :
Une question sur la correction des erreurs sur W3C :


Line 165 column 83: end tag for "A" omitted, but its declaration does not permit this.

...actualites/spanc.html">SPANC</a></div>

Qu'est ce qu'ils veulent dire par là? car j'ai plusieurs erreurs de la sorte
Merci

Et enfin tu dis :
Ensuite, et c'est à vérifier, mais j'ai peur que la forme courte de doctype que tu utilises ne soit pas valide, et puisse te jouer des tours. Un doctype complet serait un plus.
Là aussi pas bien compris..
je suis vraiment désolé mais le doctype c'est le logiciel qui me le met d'office quand je créé une page XHTML... (enfin si j'ai bien compris ce que tu voulais dire)
Il faudrait que je fasse quoi..
Je sdais je suis un peu embêtant, mais toussa est beaucoup moins évident que je le pensais.
Merci pour ta patiente
Modifié par darcy (28 Aug 2006 - 10:37)
Salut

Tu n'as pas bien fermé un ou plusieurs liens, apparemment. Il te manque le "end tag", la balise de fermeture </a>.
a écrit :
je suis vraiment désolé mais le doctype c'est le logiciel qui me le met d'office quand je créé une page XHTML... (enfin si j'ai bien compris ce que tu voulais dire)
Il faudrait que je fasse quoi..


Quel logiciel utilises-tu ? Les seuls doctypes qui devraient être utilisés sont ceux présents sur cette page. Celui qui est présent sur ta page n'en fait pas partie, il faut le remplacer par :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
Sopo a écrit :
je suis vraiment désolé mais le doctype c'est le logiciel qui me le met d'office quand je créé une page XHTML... (enfin si j'ai bien compris ce que tu voulais dire)
Il faudrait que je fasse quoi..


Quel logiciel utilises-tu ? Les seuls doctypes qui devraient être utilisés sont ceux présents sur cette page. Celui qui est présent sur ta page n'en fait pas partie, il faut le remplacer par :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Merci c'est noté Smiley smile
Sujet clos
Aller à