28173 sujets

CSS et mise en forme, CSS3

bonjour à tous,

je n'ai pas trouvé de post où se présenter, je le fais donc rapidement.
Ma seule expérience de la publication pour l'instant, se résume à un blog... ou à des pages web qui se font "quasiment" toutes seules gràce à un éditeur...

je suis donc novice dans ce qu'il serait prétentieux de ma part d'appeler "développement"... néanmoins, je me lance dans la création d'un petit site sans prétention pour un ami.

je le souhaiterais le plus accessible possible aussi ais-je essayé de respecter un maximum les règles en vigueur...

je découvre ainsi les div et leur utilisation pas forcément évidente pour moi qui ne créait que des "table" à partir de dreamweaver !!!

J'ai tout écrit grace au fabuleux livre CSS2 de Raphaël Goetter qui m'a permis de réaliser ce que je voulais faire, alors que je n'y connais absolument rien... il est clair, bien expliqué, et l'avantage c'est que l'on peut y voir les réalisations sur Alsacréations !!!!

J'ai cependant un petit problème que je me permets de vous soumettre.

J'ai un menu vertical, que je retrouve sur chaque page de mon site (5 pages maxi) et que je voudrais toujours voir affiché à l'écran, même quand l'ascenceur m'emmène tout en bas de la page alors que le menu ne fait que quelques lignes... (je ne sais pas si je suis claire...)

J'ai bien trouvé la propriété " position:fixed;" que j'ai affecté à mon menu dans la css, mais comme indiqué dans le bouquin, cela ne fonctionne pas sur ie...

quelqu'un aurait il une solution ??

Voici mon code :

css :

[#blue]#menu {
	float:left;
	position:fixed;
	width:15em;
	padding:1em 0 8em 0;
	margin:0 0 0 0;
}
#menu ul{
	list-style-type:none;
	padding:0;
	margin:0 1em;
}
#menu li a {
	display:block;
	text-decoration:none;
	height:2em;
	line-height:3em;
	color:#333333;
	font-size:12px;
	text-indent:1em;
}
#menu li a:hover {
	background:#ffffff;
	color:#4E606E;
	font-weight:bold;
}


et sur ma page html :

<!--bloc menu -->
[#green]<div id="menu">
<ul>
<li><a href="index.htm" accesskey="1">Accueil</a></li>
<li><a href="centre/tarifs.htm" title="tarifs">Tarifs</a></li>
<li><a href="centre/contacts_acces.htm" title="pour nous contacter et nous rejoindre">
Contacts-Accès</a></li>
<li><a href="centre/balades_decouvertes.htm" title="balades et découvertes aux rapailles et aux environs">Balades-Découvertes</a></li>
<li><a href="environs.htm" title="loisir et tourisme aux environs">
Dans les environs</a></li>
<li><a href="pratique.htm" title="quelques liens amis et infos pratiques">
Liens/Infos pratiques</a></li>
<li><a href="album.htm" title="notre album photo">Album photos</a></li>
</ul>
</div>


Merci du temps que vous passerez à me lire... et je l'espère... à m'aider !!!

Ps : pour voir le rendu final, c'est par ici
Modifié par la chicane (26 Nov 2007 - 18:04)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.
Tu y trouveras d'ailleurs un lien vers le sujet des présentations. Smiley smile

Bonne continuation !

upload/1-code.gif
la chicane a écrit :
J'ai bien trouvé la propriété " position:fixed;" que j'ai affecté à mon menu dans la css, mais comme indiqué dans le bouquin, cela ne fonctionne pas sur ie...

C'est pourtant le seul moyen fiable et relativement peu couteux en temps/connaissances pour obtenir cet effet. De plus, position: fixed est supporté par Internet Explorer 7.

Il suffirait donc d'utiliser position: fixed, et de dégrader ce positionnement sous IE 6 en position: absolute.

Pour obtenir un résultat correct, il faudra donc:
- positionner le menu en fixe, en top: 100px et left: 0;
- lui retirer sa hauteur fixe, inutile;
- utiliser la technique dite des «colonnes factices» avec une image de fond sur body ou div.contenu, ou bien donner une couleur de fond grise à div.contenu et une couleur de fond blanche à div#global;
- via un commentaire conditionnel pour IE 6 et inférieurs, corriger le style de div#menu en position: absolute (avec les mêmes valeurs pour le positionnement, à priori).
Julien Royer a écrit :
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.
Tu y trouveras d'ailleurs un lien vers le sujet des présentations. Smiley smile

Bonne continuation !

upload/1-code.gif


oup's... et bien on dirait que j'ai fait une entrée fracassante... Smiley confused Smiley confused

désolée;.. j'édite de suite mon code pour le republier dans les règles... Smiley confused

et te prie de bien vouloir m'excuser...

en revanche, pour ce qui est du post "nouveau sur le forum", je l'ai vu... et parcouru... peut être un peu rapidement il est vrai... Smiley confused

j'ai utilisé le moteur de recherche et ai consulté les posts parlant des menus mais n'ai pas trouvé la réponse à ma question...

pour ce qui est de l'espace réservé à la présentation, je reconnais que je ne l'ai pas vu... désolée...

bref... je vais essayer de faire mieux à l'avenir...
allez, je file éditer mon code et je prendrai connaissance des réponses ce soir à la maison... Smiley confus
Modifié par la chicane (26 Nov 2007 - 18:05)
Florent V. a écrit :

C'est pourtant le seul moyen fiable et relativement peu couteux en temps/connaissances pour obtenir cet effet. De plus, position: fixed est supporté par Internet Explorer 7.

Il suffirait donc d'utiliser position: fixed, et de dégrader ce positionnement sous IE 6 en position: absolute.

Pour obtenir un résultat correct, il faudra donc:
- positionner le menu en fixe, en top: 100px et left: 0;
- lui retirer sa hauteur fixe, inutile;
- utiliser la technique dite des «colonnes factices» avec une image de fond sur body ou div.contenu, ou bien donner une couleur de fond grise à div.contenu et une couleur de fond blanche à div#global;
- via un commentaire conditionnel pour IE 6 et inférieurs, corriger le style de div#menu en [i]position: absolute
(avec les mêmes valeurs pour le positionnement, à priori).[/b]


merci Florent pour cette réponse rapide...
si les deux points concernant la position du menu en fixe et la hauteur à retirer ne me posent pas de pb... il n'en n'est malheureusement pas autant pour les deux derniers...
-la technique des "colonnes factices" ?????
-un commentaire conditionnel pour IE6 (et antérieurs je suppose...)

je ne sais pas comment faire ça ...
Smiley confus Smiley confused Smiley decu
Pour les colonnes factices: faire une recherche sur Google ou autre.
Pour les commentaires conditionnels: voir la FAQ du forum.

Bonne continuation. Smiley smile
alors pour les commentaires conditionnels, j'ai bien trouvé dans la faq, merci encore.

pour le reste, je vais fureter sur google...

merci pour tout
et bien... pfffiouuuuu !!
dur dur !!

merci pour vos précieux conseils et pour les liens...
j'ai consulté la FAQ, c'est vrai qu'on y trouve des réponses... mais il n'y a rien à faire... je n'y arrive pas...

j'ai ajouté à ma page index.htm, un commentaire conditionnel pour ie lui demandant de pointer sur une css spécifique
cela fonctionne, car j'ai testé en mettant un background color sur le body...

mais je dois louper quelque chose dans la css au niveau du menu... car le menu reste figé en haut de la page et je ne le vois plus si je descends...

pour ffox, cela fonctionne parfaitement avec la position:fixed; c'est déjà ça...

bref... j'abandonne... Smiley decu
Administrateur
la chicane a écrit :
J'ai un menu vertical, que je retrouve sur chaque page de mon site (5 pages maxi) et que je voudrais toujours voir affiché à l'écran, même quand l'ascenceur m'emmène tout en bas de la page alors que le menu ne fait que quelques lignes... (je ne sais pas si je suis claire...)

Hello et bienvenue,

Est-que par hasard les modèles de gabarit ne pourraient pas t'aider ? Je pense notamment aux modèles 13 et 14.
la chicane a écrit :
mais je dois louper quelque chose dans la css au niveau du menu... car le menu reste figé en haut de la page et je ne le vois plus si je descends...

Comme dit précédemment, IE6 ne comprend pas position: fixed. On peut toujours se lancer dans l'utilisation de Javascript pour obtenir le même type d'effet, mais:
1. le résultat est moins bon;
2. je ne crois pas que ce soit à ta portée pour l'instant, sauf erreur de ma part.

Donc, le compromis est le suivant:
- si le navigateur comprend position: fixed, il l'applique;
- s'il ne le comprend pas, on bascule sur un positionnement absolu, et là effectivement on retrouve un comportement classique de menu qui devient invisible quand la page est longue et qu'on la fait défiler.

L'avantage, c'est que le seul navigateur qui ne comprend pas position: fixed c'est Internet Explorer 6 (parts de marché: dans les 40-45%, et appelé à baisser progressivement). On fait donc quelques adaptations pour IE 6 et inférieurs (commentaire conditionnel visant IE 6 et inférieurs, mais pas IE 7!) et on a:
- un rendu «de base» acceptable dans IE6;
- un rendu qui tire parti des possibilités des navigateurs modernes dans... les navigateurs modernes (IE7, Firefox, et les versions récentes d'Opera, Safari, Konqueror, etc.).

Pas de quoi baisser les bras. Smiley smile
alors... pour répondre à Raphaël :
oui, il y a ce que je veux dans les gabarits, mais cela ne marche pas avec ie 6...

pour répondre à Florent...
j'ai bien regardé la FAQ et ai suivi les explications concernant les commentaires conditionnels, mais rien n'y fait...

voila le commentaire que j'ai mis dans ma page html
<!--[if lte IE 6]>
   <link href="rapailles_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->



et voilà ce que j'ai mis dans la css "rapailles_ie.css" dédiée à IE

#menu {
	position:absolute top:110px left:0px;
	width:16em;
	padding:1em 0 8em 0;
}


c'est sur qu'il n'y a pas de quoi baisser les bras... mais s'arracher les cheveux oui Smiley biggrin Smiley confused Smiley confused

maintenant, des amis à qui j'ai envoyé le lien de mon petit site, me signale un autre problème...
les items du menu gauche qui viennent s'afficher par dessus le texte de la partie centrale...

je leur ai demandé ce qu'ils utilisaient comme navigateur : celui d'orange pour l'un, et je ne sais pas encore pour l'autre...

Smiley confus
Modifié par la chicane (02 Dec 2007 - 19:40)
la chicane a écrit :
c'est sur qu'il n'y a pas de quoi baisser les bras... mais s'arracher les cheveux oui Smiley biggrin Smiley confused Smiley confused

Forcément, quand on ne respecte pas la syntaxe CSS de base, on a des surprises. En l'occurrence, si le code que tu as posté dans le message ci-dessus correspond à celui que tu as en ligne, ça na peut pas marcher.

#menu {
	[b][#red]position:absolute top:110px left:0px;[/#][/b]
	width:16em;
	padding:1em 0 8em 0;
}

Pour la ligne en rouge: combien y a-t-il de déclarations CSS (une déclaration est un couple constitué d'une propriété CSS et d'une valeur) dans cette ligne?
Si tu ne réponds pas trois, il faut réviser les bases de CSS.
Si tu réponds trois mais que tu ne vois toujours pas de problème, il faut réviser les bases de la syntaxe CSS (notamment, le fait que deux déclarations qui se suivent doivent être séparées par un point-virgule). Smiley smile

la chicane a écrit :
les items du menu gauche qui viennent s'afficher par dessus le texte de la partie centrale...

C'est une possibilité si tu as mal positionné ton menu (aussi bien en absolu qu'en fixe). Par exemple, est-ce que tu as testé le rendu avec un écran en 800x600, voire en 1024x768 (si ta propre résolution est supérieure à cette dernière)?

la chicane a écrit :
je leur ai demandé ce qu'ils utilisaient comme navigateur : celui d'orange pour l'un

À priori, il s'agit d'Internet Explorer (avec par dessus une interface Orange), probablement en version 6.0.
bonjour et merci pour ta réponse Florent...

bon c'est vrai que je n'ai pas les bases css... je me suis lancée dans l'aventure en essayant d'acquérir tout doucement, mais il semblerait que j'ai loupé des étapes... Smiley confused Smiley confused

il m'avait pourtant semblé voir dans du code quelque part que si l'on mettait des propriétés l'une à la suite des autres on ne mettait le "point-virgule" qu'après la derniière propriété...

comme ici, dans le header de ma css où cela fonctionne parfaitement :


#header {
	height:100px;
	backgroundurl(images/bandeau.jpg) top left repeat;
	text-align:center;
}


bon... je vais corriger ça ce soir et retester...
et je vais essayer de ne plus poser de question idiote, j'ai l'impression que j'agace... Smiley confused Smiley confused

pour ce qui est du menu qui vient en surimpression du texte, je regarderai aussi en fonction des indications que tu m'as donné...

désolée et merci encore
la chicane a écrit :
il m'avait pourtant semblé voir dans du code quelque part que si l'on mettait des propriétés l'une à la suite des autres on ne mettait le "point-virgule" qu'après la derniière propriété...

comme ici, dans le header de ma css où cela fonctionne parfaitement

Hmm... oui, tu as vraiment loupé des étapes.
(Pour information, la ligne qui fonctionne bien n'est pas une suite de propriétés, mais une propriété unique qui accepte une série de valeurs. Il s'agit d'une propriété «raccourci», il en existe quelques unes en CSS.)

Pour les bases de CSS, on trouve les références qui vont bien ici:
http://css.alsacreations.com/Comment-debuter-et-trouver-l-information
et bien je vais prendre un peu de temps pour consulter tout ça... merci beaucoup...
Smiley cligne

Il était peut être un peu prématuré pour moi de venir ici... d'après ce que je vois dans le lien que tu m'as fourni...

je vais donc commencer par le début...

Smiley confus