Forum Alsacr�ations : CSS et Standards Web

Appliquer un style � une balise sous conditions

spols — 2009-07-03T23:03:08+00:00

Bonjour � tous,

Je fait en ce moment un menu bas� sur une liste multi dimension de ce type

[code=html]

lien 1

lien 2

lien 3
- souslien1
- souslien2
- souslien3
- lien 4
- lien 5
[/code]

La mise en page est enti�rement css

Je voudrais que la/les balise(s) li qui contienne un sous menu, donc un ul comme enfant ait un style un peu diff�rent. Je voudrais savoir s'il est possible d'avoir de telle instruction.

Pour le moment, j'affecte une classe � ces balises, mais j'aimersi que cela ce fasse automatiquement

un genre de
[code=css]if li.firstChild = ul {
background:...;
}[/code]

mais en css.

Je pense que ce n'est peut �tre pas possible, mais je voudrais en �tre sur

Merci d'avance

D�finir une taille de police pour chaque element de font-family

chrisgal — 2009-07-03T19:05:13+00:00

Bonjour

J'ai un texte original avec des indentations et une police exotique. Je l'ai mis en page web en d�finissant dans ma feuille de style toutes les indentations et la taille de la police. Le hic, c'est que fifrefox ne g�re pas encore les polices embarqu�es. Or les polices par d�faut n'ont pas la meme hauteur d'x ni le meme espacement, donc sous firefox mon texte n'est plus du tout en forme. Comment puis-je d�finir une taille de police pour chaque �l�ment de font-family pour que mes polices par d�faut est � peu pr�s le meme encombrement que ma police embarqu�e. Ou bien y a t'il un autre moyen pour rem�dier � ce probl�me ?

Question de s�mantique/philo

BarbouK — 2009-07-03T17:33:24+00:00

Bonjour � tous,

Dans le cadre d'un projet sur lequel je travaille, je dois r�aliser, entre autres, un gestionnaire de planning pour diff�rentes activit�s. Chacune de ces activit�s se voit associer une couleur au sein du syst�me.

Ma question concerne l'affichage de cette couleur dans les pages de configuration en respectant � la fois la stricte s�paration de l'affichage et des donn�es ainsi que la coh�rence s�mantique (pour l'accessibilit�).

J'ai pour l'heure opt� pour un tag image dans lequel je modifie la couleur en utilisant un attribut [i]"style"[/i] inline. (cf. exemple ci-apr�s)

[code=html][/code]

Bien qu'� l'habitude, je n'utilise pas de style [i]"inline"[/i], la couleur a ici une valeur informative et pas d'affichage. Mon raisonnement sur ce point se tient-il selon vous ?

D'autre-part, si cette solution est visuellement satisfaisante, je me pose la question suivante vis-�-vis des personnes mal-voyantes ou atteintes de cessit� :

Dans la mesure o� ces personnes n'ont de toute fa�on aucune possibilit� de "voir" le carr� de couleur, mon choix se d�grade-t-il correctement en l'absence d'afficheur graphique ? Mon choix de mettre le code couleur hexadecimal dans l'attribut titre est-il pertinent ?

J'ai song� � des solutions alternatives (utiliser un div, g�n�rer un carr� de couleur en PHP, etc.) chacune ayant ses avantages et ses inconv�nients.

Mais vous, qu'en pensez-vous ?

Conformit� entre navigateur

CreaYouz — 2009-07-03T16:38:00+00:00

Bonjour,

Voila je suis en plein recherche pour resoudres mon probl�me sur internet explorer...

Mon site

www.professeurforex.com

Voila j'ai cherch�, essay�, mais j'ai des d�calage �norme sur IE [bawling] . Si quelqu'un peu me donner un d�but de piste, un lien, ou n'importe quel aide, je suis preneur!

Merci d'avance.

CreaYouz

Aide param�tres Dewslider

Fir3d — 2009-07-03T15:16:25+00:00

Bonjour,

Je suis un d�butant en mati�re de cr�ation de site internet et j'ai mis le Dewslider sur mon site et je voudrais simplement savoir comment faire pour :
- enlever le bouton Play/Pause pour qu'on puisse naviguer uniquement avec les fl�ches gauche et droite.
- ne pas pouvoir utiliser la molette pour changer d'image.
- faire en sorte que le d�filement automatique soit d�sactiv�.

Pouvez-vous m'indiquer comment faire svp.

Merci infiniment.

Code source pour la page actualit�s de alsacr�ation.com

nas44 — 2009-07-03T14:38:07+00:00

Bonjour,

Je suis entrain de cr�er mon site web personnel, et j'aimerai int�grer une page qui permet aux connect�s d'ajouter des �v�nements que je souhaites les class�s apr�s par ordre chronologique. J'ai essay� de m'inspirer de la page "actualit�s" de ce site (www.alsacreation.com) parce que j'ai exactement ce que je veux, mais je ne sais pas comment faire pour rendre l'ajout dynamique ( cr�ation automatique de l'icone avec la date dessus...)

Je vous remercie pour l'int�r�t accord� � ma demande

[r�solu]Centrer un bloc texte dans un bloc contenant une image

mikl86 — 2009-07-03T12:31:37+00:00

Bonjour � tous [smile]

Je souhaite incrust� un texte centr� dans un bloc contenant une image qui elle est d�j� centr�e horizontalement et verticalement. Je ne peux mettre ce texte sous l'image mais dans l'image pourdes raisons esth�tique . Je profite de cet exercice pour peaufiner mes connaissances en html / css.
J'ai essay� de le positionner via css, pas de probl�me avec ma resolution d'ecran. Par contre, pour toute autre resolution, tout est d�cal�.
J'ai tent� ca :
[code]#energie {

position: relative;
margin-left: auto;
text-align: center;
width:590;
margin-right: auto;

}
[/code]
Au niveau horizontale, parfait. Par contre au niveau verticale je ne sais pas comment faire.
Avez vous des suggestions svp ?
Merci d'avance

Probl�me d'alignement surpenant

daedale — 2009-07-03T11:55:17+00:00

Bonjour,

Je souhaite mettre du texte sur deux colonnes, l'une align�e sur la gauche (texte justifi�), l'autre � droite (texte align� � droite), les deux d�butant en haut de page. Le code ci-dessous fonctionne :

[code=css]
div.row span.left{
float: left;
background-color: #99CCCC;
width: 70%;
}
div.row span.right{
float: right;
background-color: #99CCCC;
width: 30%;
}
div.row span.left p{
text-align: justify;
margin-left:5px;
}
div.row span.right p{
text-align: right;
margin-right:5px;
}
[/code]

Par contre j'ai tent� de r�duire le nombre de d�clarations en introduisant le formatage des paragraphes dans les div :

[code=css]
div.row span.left{
float: left;
background-color: #99CCCC;
width: 70%;
text-align: justify;
margin-left: 5px;
}

div.row span.right{
float: right;
background-color: #99CCCC;
width: 30%;
text-align: right;
margin-right: 5px;
}
[/code]

et l� je me retrouve avec la colonne de droite bien align�e � droite mais d�butant apr�s la fin de la colonne de gauche ! Le code de ma page php est le suivant :

[code=php]

Blabla

Bliblibli

[/code]

Merci pour vos �claircissements !

Saut d'une ligne

noel keser — 2009-07-03T10:26:10+00:00

Bonjour,

web

.fr

Ecrit comme cela .fr passe en dessous de web

Je ne comprends pas pourquoi ?

Merci d'avance ! !

Qu'est-ce qui ne fonctionne pas

ConceptInterWEB — 2009-07-02T22:08:34+00:00

Bonjour � tous,

J'ai un l�ger probl�me. J'affiche un calendrier, du Dimanche au Samedi. Durant le mois, nous pouvons avoir un �v�nement. Quand l'�v�ment a lieu, soit le Dimanche, Lundi, Mardi, quand nous passons notre souris sur la journ�e une fen�tre s'affiche plus a notre droite, et dans le cas des autres journ�es, plus � notre gauche.

Mais voila, ca ne se passe pas comme ca. L'affichage demeure toujours plus � gauche et ce peu importe la journ�e. Voici un exemple de code, afin que vous puissiez comprendre ce dont je parle, et afin que vous puissiez m'�claircir.

J'utilise IE8, et j'ai �galement test� avec Google Chrome, mais le r�sultat est le m�me.

Voici le code g�n�r� :

MChristian

Locateur : MChristian

D�but Location : Vendredi 10 juillet 2009 0:00

Fin Location : Lundi 13 juillet 2009 0:00

Prive : Non

MChristian

Locateur : MChristian

D�but Location : Vendredi 10 juillet 2009 0:00

Fin Location : Lundi 13 juillet 2009 0:00

Prive : Non

Vous pouvez voir dans la premi�re cellule, vous avez un div class = event, et dans la seconde cellule un div class = eventdebut

Voici le code CSS pour chacun d'eux

table.calTheme1 div.event {
position: absolute;
padding: 5px 5px 5px 5px;
border: 3px solid #ffffff;
background-color: #6f6d56;
background-image:url(../../images/cellpic4.gif);
margin: 5px;
visibility: hidden;
left: 15%;
top: 70%;
width: 350px;
}

table.calTheme1 div.eventdebut {
position: absolute;
padding:5px 5px 5px 5px;
border: 3px solid #ffffff;
background-color: #6f6d56;
background-image:url(../../images/cellpic4.gif);
margin: 5px;
visibility: hidden;
left: 50%;
top: 70%;
width: 350px;
}

Et le code JavaScript permettant d'afficher la boite lorsque on passe notre souris sur celle-ci.

Le tout a deja fonctionn�, mais pour une raison X, je ne sais plus pourquoi ca ne fonctionne plus.

Merci de m'aider
Sylvain Bourdeau

CSS : Centrage vertical

apericube — 2009-07-02T20:24:07+00:00

Salut a tous,

Mon site permet de poster comme dans un blog. Le titre de chaque post apparait a droite d'une image au centre de laquelle il y a la date du jour.

Probleme: Mon titre est verticalement centr� par rapport a l'image quand il est fait juste une ligne, mais pas quand il fait plus d'une ligne :

http://www.balthy.com/truc.jpg

Quelqu'un a une idee ?

Probl�me sous menu css

Ben5back — 2009-07-02T17:55:18+00:00

Salut � tous,

Je voulais int�grer un menu horizontal d�roulant en css + javascript pour mon site. J'ai donc suivi le tr�s bon tuto de Toinouz sur le SDZ : http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html

Il marche tr�s bien, sauf que j'ai bidouill� le css pour l'adapter � mon interface et donc j'ai un petit souci.

Voici un petit sch�ma de la structure :

Accueil - News - M�dias // Menu principal � l'horizontal

> M�dias // Sous-menu d�roulant de M�dias
>>> Wallpapers
>>> Le Site >>>>>>> Contact // Sous-menu d�roulant de Le Site
>>>>>>>>>>>>>>>>> Mentions L�gales
>>>>>>>>>>>>>>>>> Liens

Wallpapers et Le Site devraient �tre l'un en dessous l'autre, mais l� il se retrouve l'un � c�t� de l'autre. Voir ci dessous :
[img]http://www.siteduzero.com/uploads/fr/files/178001_179000/178009.jpg[/img]

Cela fait une bonne 1/2 heure que j'essaye tout et n'importe quoi mais rien � faire...
Pourriez-vous m'aider ?

Merci [cligne]

[code=html]
[/code]

[code=css]@charset "utf-8";
/* CSS Document */

#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge int�rieure */
margin : 0; /* ni ext�rieure */
list-style : none; /* on supprime le style par d�faut de la liste */
line-height : 30px; /* on d�finit une hauteur pour chaque �l�ment */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
font:bold 13px Arial, Helvetica, sans-serif;
margin-left:280px;
}

#menu a
{
display:block;
font:bold 13px Arial, Helvetica, sans-serif;
color:#FFFFFF;
width:65px;
margin-top:0px;
margin-right:auto;
margin-left:auto;
height:30px;
text-decoration:none;
display:table-cell;
vertical-align:middle;
}

#menu a:hover
{
background-color:#000000;
filter: Alpha(Opacity="40");
opacity: 0.4;
}

#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconna�t pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche � droite de chaque �l�ment */
}

/* Sous Menu */

#sous_menu, #sous_menu ul /* Liste */
{
padding : 0; /* pas de marge int�rieure */
margin : 0; /* ni ext�rieure */
list-style : none; /* on supprime le style par d�faut de la liste */
line-height : 15px; /* on d�finit une hauteur pour chaque �l�ment */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#sous_menu /* Ensemble du menu */
{
font:bold 13px Arial, Helvetica, sans-serif;
}

#sous_menu a /* Contenu des listes */
{
display : block; /* on change le type d'�l�ment, les liens deviennent des balises de type block */
padding-left:5px; /* aucune marge int�rieure */
background-color:#111218;
filter: Alpha(Opacity="95");
opacity: 0.95;
color : #fff; /* couleur du texte */
text-decoration : none; /* on supprime le style par d�faut des liens (la plupart du temps = soulign�) */
text-align:left;
width : 150px; /* largeur */
height:18px;
}

#sous_menu a:hover
{
background-color: #3F4869;
filter: Alpha(Opacity="80");
opacity: 0.8;
}

/* IE ne reconnaissant pas le s�lecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente � droite de chaque �l�ment */
}

#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
left: -999em; /* Hop, on envoie loin du champ de vision */
}

#menu li ul li /* �l�ments de sous-listes */
{
/* pour IE qui ne reconna�t pas "transparent" (comme pr�c�demment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque �l�ment d'une sous liste */
}

/* IE ne reconnaissant pas le s�lecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque �l�ment */
}

#menu li ul ul
{
margin : -22px 0 0 144px ; /* On d�cale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconna�t pas "transparent" (comme pr�c�demment) */
border-left : 1px solid #fff ; /* Petite bordure � gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le s�lecteur ">" ... je me r�p�te [cligne] */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque �l�ment */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un �l�ment de liste */
{
left: -999em; /* On exp�die les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un �l�ment de liste ET sous-sous-lites lorsque la souris passe sur un �l�ment de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
[/code]

Inverser l'ordre de deux lignes dans un tableau

rob44 — 2009-07-02T17:08:11+00:00

Bonjour � tous,

J'expose mon probl�me:
J'ai un tableau classique avec un libell�, une petite fl�che montante et une autre descendante.
En gros:
[code]

Lib1

+

-

Je voudrais que lorsqu'on clique sur le + par exemple ce tr passe au dessus de l'autre.
J'utilise la librairie prototype.

Je cherche quelque chose le plus simple possible.
Apr�s moult recherche, je n'ai rien trouv� de concr�s ou qui me plaisait.

Merci de votre aide.

Affichage des menus qui bug a cause de margin/padding

joboy — 2009-07-02T14:37:13+00:00

Bonjour,

J ai un petit probleme pour l integration d'une marque blanche...

J'utilise dans ma feuille de style:

[code]* {
margin: 0px;
padding: 0px;
}[/code]

Ceci me pose aucun probleme sur le site jusqu'a pr�sent, mais la je souhaite int�grer une marque blanche zylom et les images des jeux sont coll� les unes au autres, c'est d�gueux.

Le probl�me vient de mon code cit� ci-dessus. En effet, en enlevant ce dernier, l'affichage est a�r�, mais mes menus bug...

Apercu avec: http://www.voilou.fr/detenteTest.php?s=1&c=2
Apercu sans: http://www.voilou.fr/detenteTest.php?s=2&c=2

Je me suis donc dis que je vais faire un css uniquement pour cette page pour r�gler le prob, mais je ne vois pas ou est le probl�me des menus...

Voici le code css des menus:

[code]#menu-de-gauche
{
float: left;
width: 185px;
}

.block-menu-gauche /* contours de menus gauche */
{
border-left: 1px solid #5CB3BE;
border-right: 1px solid #5CB3BE;
border-bottom: 1px solid #5CB3BE;
margin-bottom: 8px;
width:176px; /*#055E92 */
margin-left:6px;
/*margin-top:0px;*/
background-image:url(/images/design/fondMenu.jpg);
background-repeat: repeat-x;
}

.element_menu ul
{
list-style-image: url(/images/icones/icone-liste-puce.gif); /* On change l'apparence des puces */
padding-top:6px; /* Placement a l interieur du menu...espace haut */
padding-bottom:12px;/* et espace bas */
padding-left:25px;
}

.element_menu li
{
margin-top:5px; /* On cr�e un espacement de 5px entre chaque lien */
font-weight: bold;
}

.imageTitreMenusLeft
{
background-image: url(/images/design/rubrique-menus.PNG);
background-repeat: no-repeat;
height: 26px;
width: 178px;
margin-left:6px;
}

.textecentre
{
text-align:center;
padding-top:8px;
}
[/code]

Sinon est il possible d'attribuer le

[code]* {
margin: 0px;
padding: 0px;
}[/code]

Juste au block du menu?

Merci pour votre aide!
Jo

AJAX / URL et r�f�rencement

flothi27 — 2009-07-02T14:35:11+00:00

Bonjour � tous,

Je parcours les forums � la recherche d'informations sur AJAX et son r�f�rencement.

Etat actuel de mes recherches:
1- il faut pouvoir naviguer sur le site sans javascript pour �tre r�f�renc� correctement.
2- r��criture de l'url sans rafra�chir la page, seul le hash est possible.

Le point num�ro 2 est mon soucis car je souhaiterais que la navigation en AJAX comme sans javascript aient des url identiques et pouvant �tre r�f�renc�es donc le '#' dans l'url il faut que je l'oubli.

Quelqu'un aurait une solution pour pallier � ce probl�me sans �crire l'url souhait�e dans la page ?

Bonne journ�e � tous.