Besoin d'aide diverses en CSS [note en bas de page]

Besoin d'aide diverses en CSS [note en bas de page] - HTML/CSS - Programmation

Marsh Posté le 30-06-2005 à 15:57:40    

Bonjour,
Je me relance dans la création d'un site internet pour des amis qui ont une compagnie de théâtre, je me suis donc proposé pour leur refaire tout leu site mais cela fait bien longtemps que je n'ai pas touché à tout cela.
 
Je suis vraiment au tout début de la reprise. Je crée donc ce topic dans lequel je poserais toutes les questions pour la création de ce site.
Je mettrais entre [ ] la dernière question :)
 
Merci à vous tous pour votre aide
 
 
EDIT : je reprend ce topic après un long moment d'abscence car je dois me remettre à la mise en place de ce site.
Merci de jeter un petit coup d'oeil sur mon dernier post.
Je cherche à positionner un texte en bas de page.


Message édité par Jinroh le 19-09-2005 à 11:39:38
Reply

Marsh Posté le 30-06-2005 à 15:57:40   

Reply

Marsh Posté le 30-06-2005 à 16:00:50    

Ma première question consiste à essayer de placer un texte en bas de page.
J'ai une page simple avec 1 image et je cherche à afficher du texte (les reférences de la compagnie) de manière à ce que ce texte soit écrit en petit et soit positioné en abs de la page.
D'après ce que j'ai compris il y a soit l'utilisation des tableaux, mais apparement aps très propre.
Soit l'utilisation des styles csss.
Les problèmes sont :  
-je ne epnse pas avoir trouvé la "balise" (mais ça doit avoir un autre nom) pour demander un placement en abs de page.
-2° qui peut paraitre très bête : je n'arrive pas à mettre 2 lignes dans ce cadre de css. (je n'ai que 3 mots par ligne donc évidement pas de lignes complète)
 
Merci pour votre aide à tous

Reply

Marsh Posté le 30-06-2005 à 16:05:23    

Reply

Marsh Posté le 30-06-2005 à 16:09:49    

Si tu pouvais nous montrer un bout de code car là on a que le long discours
 
Pierre

Reply

Marsh Posté le 30-06-2005 à 16:23:43    

Merci pour le site d'alsacréation, je suis dessus en ce moment.
 
Je vous met un bout de code mais plez ne rigolez, pas trop alors  [:nybbas]  
 
Le css

Code :
  1. .bas_de_page {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 9px;
  4. position: relative;
  5. text-align: center;
  6. display: block;
  7. white-space: pre;
  8. line-height: 7pt
  9. }


 
 
la source

Code :
  1. <body>
  2. <p><img src="./images_commun/logo_sarment_noir.JPG" width="368" height="175"></p>
  3. <p>&nbsp;</p>
  4. <p class="bas_de_page">compagnie du <em>sarment</em>
  5. 59 boulevard menilmontant 75011 Paris
  6. Code APE : 923 A.  SIRET : 444 1355 602 000 19
  7. </p>
  8. </body>


 
 
EDIT : c'est bon le passage à la ligne fonctionne.
mais d'après ce que je vois il n'aligne aps encor en bas de page
 
EDIT 2 : modification du css et de la source


Message édité par Jinroh le 30-06-2005 à 16:35:14
Reply

Marsh Posté le 30-06-2005 à 16:52:09    

C'est bon j'ai réussi à trouver.
je ne sais aps si c'est le plus propre amis ça me parait pas trop mal.
 
Source

Code :
  1. <body>
  2. <p><img src="./images_commun/logo_sarment_noir.JPG" width="368" height="175"></p>
  3. <p class="bas_de_page">compagnie du <em>sarment</em>
  4. 59 boulevard menilmontant 75011 Paris
  5. Code APE : 923 A.  SIRET : 444 1355 602 000 19
  6. </p>
  7. </body>


 
Css

Code :
  1. .bas_de_page {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 9px;
  4. position: relative;
  5. text-align: center;
  6. display: block;
  7. white-space: pre;
  8. line-height: 7pt;
  9. width: 20%;
  10. position: absolute;
  11. bottom: 10px;
  12. margin-left: 40%; margin-right: 40%;
  13. }


 
A très bientôt pour la prochaine question.
Désolé de poser les questions et trouver en même temps mais je cherche quelque chose pendant un bon moment, à force de recherche non frutueuse je pose ma question amis je continue toujours à chercher.
Merci pour votre aide en tout cas si vous pouvez jetez un coup d'oeil ici de temps en temps.
 
Merci

Reply

Marsh Posté le 30-06-2005 à 16:53:23    

Pour ton p class="bas_de_page", vu que c'est l'adresse de la boîte, met plutôt un address :

<address>
  compagnie du <em>sarment</em>
  59 boulevard menilmontant 75011 Paris
  Code APE : 923 A.  SIRET : 444 1355 602 000 19
</address>

Reply

Marsh Posté le 30-06-2005 à 17:34:30    

Lorsque je me le <address> il me sort le texte de mon cadre css :(

Reply

Marsh Posté le 30-06-2005 à 17:51:25    

tu renomme .bas_de_page en address
 
et là ca sera appliqué

Reply

Marsh Posté le 30-06-2005 à 18:12:36    

Ok merci

Reply

Marsh Posté le 30-06-2005 à 18:12:36   

Reply

Marsh Posté le 30-06-2005 à 18:25:59    

fois-ci j'essaye de mettre une image de fond, sur un cadre gauche qui me sert de menu, ais je souhaite que cette image de fond ne  se replique pas mais qu'en cas de vide sous l'image, une couleur de fond soit appliquée.
 
Merci pour votre aide

Reply

Marsh Posté le 30-06-2005 à 18:34:20    

ben ok
admettons que cadregauche a un id
<div id="cadregauche"></div> (normalement on ne nomme pas les éléments selon leur position car cadre gauche peut etrès bien etre à droite
 
ton css sera : (css tres detaillé pour toi)
 
#CadreGauche{
background-image: url(monimage.gif);
background-repeat:none;
background-position:top; /*(pour le placer en haut)*/
background-color:white;
}

Reply

Marsh Posté le 30-06-2005 à 18:42:08    

Jinroh a écrit :

fois-ci j'essaye de mettre une image de fond, sur un cadre gauche qui me sert de menu, ais je souhaite que cette image de fond ne  se replique pas mais qu'en cas de vide sous l'image, une couleur de fond soit appliquée.
 
Merci pour votre aide


propriété CSS "background"
 
background: color url(image) no-repeat scroll top left;
 
color -> à remplacer par ta couleur de fond, laisser vide si tu veux une couleur transparente (va utiliser la couleur de fond de la boite contenant ton truc)
 
url(image) -> remplacer "image" par le chemin vers l'image à appliquer en fond
 
no-repeat -> c'est le background-repeat, 4 valeurs possibles: repeat (répétition dans les deux directions), repeat-x (répétition horizontale), repeat-y (verticale) et no-repeat (pas de répétition)
 
scroll -> background-attachement. On peut utiliser soit scroll (le fond est attaché à l'objet et défile avec) soit "fixed" (le fond est attaché à l'écran et reste fixe par rapport à celui ci). MS Internet Explorer ne gère correctement "fixed" que sur le body.
 
top et left -> background attachement, permet de définir quelle partie du fond d'écran est placée à quelle endroit du bloc. C'est probablement la propriété des fonds la plus difficile à utiliser, mais bien maîtriser elle permet des effets très sympas.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-06-2005 à 19:04:45    

Merci à vous deux, ça fonctionne très bien.
TRès sympa le background-attachement :):)

Reply

Marsh Posté le 30-06-2005 à 19:05:32    

Jinroh a écrit :

Merci à vous deux, ça fonctionne très bien.
TRès sympa le background-attachement :):)


Très, mais buggé sous MSIE


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-06-2005 à 19:21:02    

Ok j'y ferais attention.
 
j'ai commencé à faire les body assez sallement, en mettant les infos de style  directement sur la source de chaque frame

Code :
  1. <title>menu</title>
  2. <style type="text/css">
  3. <!--
  4. body {
  5. background-color: #F5F5DD;
  6. background-image: url(./images_commun/logo_coupe_rouge.jpg);
  7. background-repeat: no-repeat;
  8. background-attachment: fixed;
  9. }
  10. -->
  11. </style></head>


Mais j'aimerais les mettre dans mon fichier css en créant un body.menu et 1 body.acceuil
 
Tout d'abord est ce qu'il est possible de mettre les 2 body dans le meme .css ? et comment y faire appel ?
car pour mes autres appels au .css c'était pour du texte pour le moment donc avec un  
<p class="class_appelée">texte à afficher</p>
 
Merci encore pour votre grande aide mas je promet de m'améliorer rapidement, une fois que j'aurais bien assimilé la base d'utilisation de ces feuille de style, qui me sont complétement inconnue pour le moment.
Merci encore

Reply

Marsh Posté le 30-06-2005 à 20:15:48    

Jinroh a écrit :

Tout d'abord est ce qu'il est possible de mettre les 2 body dans le meme .css ? et comment y faire appel ?


Oui, suffit de leur donner des classes ou des ids différents (habituellement on réserve l'id pour les signatures CSS mais bon)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-06-2005 à 20:30:31    

Mais je n'arrive pas à y faire appel :(
Dans ma source je met un

Code :
  1. <p class="body_acceuil"></p>


maisça ne semble aps être ça
 
et dans ma feuille de style  

Code :
  1. .body_acceuil {
  2. background-image: url(../images_commun/fond%20acceuil2.jpg);
  3. background-color: #000000;
  4. background-repeat: no-repeat;
  5. background-attachment: fixed;
  6. }


 
je suis désolé, ça à l'air tout simple mais il doit me manquer un petit quelque chose.

Reply

Marsh Posté le 30-06-2005 à 20:47:48    

C'est bon j'ai réussi à trouver.
c'était effectivement évident !!
Il fallait mettre l'appel à la classe dans la balise body !!

Reply

Marsh Posté le 30-06-2005 à 21:17:48    

le mot iframe me fait peur, tu peux pas passer par une solution PHP avec des includes ??? ca serait plus propre je pense

Reply

Marsh Posté le 30-06-2005 à 21:24:05    

Tu parles de quoi en parlant des iframe ?
Il ne me semble pas en avoir parlé.

Reply

Marsh Posté le 30-06-2005 à 21:26:43    

Jinroh a écrit :

Ok j'y ferais attention.
 
j'ai commencé à faire les body assez sallement, en mettant les infos de style  directement sur la source de chaque frame


 
 
la tu parles de frame
 
je commence à avoir encore plus peur
 
les frames c'est caca et capuducu

Reply

Marsh Posté le 30-06-2005 à 21:31:36    

Même aps un tout petit frameset comme celui-ci

Code :
  1. <frameset rows="*" cols="180,*" framespacing="0" frameborder="no" border="0">
  2.   <frame src="./menu.htm" name="menu" scrolling="auto" noresize>
  3.   <frame src="./acceuil.htm" name="main" scrolling="auto" noresize>
  4. </frameset>

 [:hotshot 2 le retour]

Reply

Marsh Posté le 30-06-2005 à 21:42:31    

non


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 30-06-2005 à 21:53:42    

nan c'est deja trop

Reply

Marsh Posté le 30-06-2005 à 22:12:27    

humm le passage au php ne vas pas se faire de suite malheureusement :(:(
je me rends compte que j'ai déjà beaucoup à apprendre sur cess feuilles de style.
Le passage est bien prévue mais mes connaissance en PHP se sont limitées assez vite malheureusement

Reply

Marsh Posté le 30-06-2005 à 23:43:47    

Je suis en train de me rendre compte que je met tout mes moindres textes dans des cadres de style différent pour les positionner exactement comme je veux, c'est grave docteur ?

Reply

Marsh Posté le 30-06-2005 à 23:57:27    

ben il nous faudrait le code CSS et le code HTML pour voir ou tu en es et on te dira ce qu'il faut faire.
 
Nous coopérons facilement avec les gens comme toi qui se donne la peine et les moyens.
 
PS : ya pas que les div dans la vie, ya P UL et tous pleins d'autres.
 
aller : "le code ou la vie!!"

Reply

Marsh Posté le 01-07-2005 à 00:16:26    

Merci beaucoup pour votre aide à tous, ça fait vraiment plaisir d'avoir du monde prêt à aider comme cela, même si mes questions epuvent paraitre déplacé de temps en temps.
Voici des morceau du code.
 
La feuille de style complète

Code :
  1. .bas_de_page {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 9.5px;
  4. text-align: center;
  5. display: block;
  6. white-space: pre;
  7. line-height: 7pt;
  8. width: 30%;
  9. position: absolute;
  10. bottom: 3px;
  11. margin-left: 35%; margin-right: 35%;
  12. }
  13. .titre1 {
  14. font-family: "Times New Roman", Times, serif;
  15. font-size: 24px;
  16. font-weight: bolder;
  17. text-align: right;
  18. color: #B80C0C;
  19. }
  20. .body_menu {
  21. background-color: #F5F5DD;
  22. background-image: url(../images_commun/logo_coupe_rouge.jpg);
  23. background-repeat: no-repeat;
  24. background-attachment: fixed;
  25. }
  26. .body_acceuil {
  27. background-image:  url("../images_commun/fond_acceuil2.jpg" );
  28. background-color: #F5F5DD;
  29. background-repeat: no-repeat;
  30. background-attachment: fixed;
  31. }
  32. .presentation_01 {
  33. font-family: Verdana, Arial, Helvetica, sans-serif;
  34. font-size: 14px;
  35. font-style: italic;
  36. color: #B80C0C;
  37. text-align: right;
  38. white-space: normal;
  39. max-width: 400pt;
  40. position: absolute;
  41. right: 15px;
  42. top: 40px;
  43. }
  44. .presentation_citation {
  45. font-family: Arial, Helvetica, sans-serif;
  46. font-size: 16px;
  47. font-weight: bolder;
  48. color: #B80C0C;
  49. text-align: right;
  50. position: absolute;
  51. width: 300pt;
  52. right: 25px;
  53. top: 150px;
  54. }
  55. .presentation_02 {
  56. font-family: Verdana, Arial, Helvetica, sans-serif;
  57. font-size: 20px;
  58. color:#000000;
  59. white-space: normal;
  60. position:absolute;
  61. width: 50%;
  62. margin-left: 25%; margin-right: 25%;
  63. top:300pt;
  64. text-align: center;
  65. }


Il y a pas mal de nettoyage à faire dedans mais je vais me coucher, je me lève tôt demain pour allez bosser :(
 
page "d'acceuil"

Code :
  1. <link href="./css/style01.css" rel="stylesheet" type="text/css">
  2. <body class="body_acceuil">
  3. <p class="titre1">La compagnie du <em>sarment </em></p>
  4. <p class="titre1">plate forme d'&eacute;changes</p>
  5. </body>


 
 
Page de présentation

Code :
  1. <link href="../css/style01.css" rel="stylesheet" type="text/css">
  2. </head>
  3. <body>
  4. <p class="presentation_01">La compagnie du sarment est une plate-forme d’échanges, un lieu de travail et de réflexion sur la création scénique. L’intérêt est de pouvoir accueillir des créateurs : metteurs en scène, scénographes, musiciens, acteurs, auteurs…, pour investir différentes propositions artistiques </p>
  5. <p class="presentation_citation">« laisser la porte ouverte, l’âme en ouverture »</p>
  6. <p class="presentation_02">Basée à Paris, elle souhaite sortir des schémas habituels pour s’enrichir au contact d’un autre public, chaque fois singulier, d’une autre terre, chaque fois différente. A travers créanopopus : Création Nomade pour Public Sédentaire ; elle fait voyager depuis 2001 ses spectacles en France.</p>


 
le tout est visualisable ici pour le moment, amis attention le simages ne sont pas les bonnes, trop grandes etc.. elles vont etre changées, je fais juste des essais "technique" pour le moment.
D'ailleurs si vous connaissez un petit hébergeur gratuit pour mettre tout ça en ligne je veux bien, j'irais faire un tour demain sur l'autre aprtie du forum pour chercher ça.
 
Merci encore


Message édité par Jinroh le 01-07-2005 à 21:30:09
Reply

Marsh Posté le 01-07-2005 à 20:00:29    

J'ai une petite question à propos du style : bas_de_page.
Il est bon lorsque je n'ai pas à faire défiler la page, lorsqu'il n'y a aps de scroll.
LEN fait il se place en bas de la page visible, même si il y a un scroll de possible, ce qui fait qu'elle ne bouge pas et se retrouve au milieu de la page lorsque l'on descend la fenetre.
 
Je suis en rtain de regarder avec les différentes variable, mais je ne trouve aps encore la combianaison adéquate entre :  
position -> si je ne met pas sur absolute, en cas de page normal elle est mal placé mais elle se retrouve au milieu en cas de scroll.
Pourtant j'ai l'impression qu'il faut que je change ce absolute en autre chose, genre static mais dans ce cas pour une page normal je ne vois aps quoi utilsier d'autre comme variable pour bien la placer.
J'essaye avec bottom, border-bottom, margin-bottom mais je ne trouve aps encore comment bien la placer.
 
Merci pour votre aide.

Reply

Marsh Posté le 01-07-2005 à 21:37:33    

Je suis toujours dans mes essais mais rien à faire, je n'arrive pas à le palcer correctement :(

Code :
  1. .bas_de_page {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 9.5px;
  4. text-align: center;
  5. display: block;
  6. white-space: pre;
  7. line-height: 7pt;
  8. position:absolute;
  9. bottom: 3px;
  10. width: 40%;
  11. margin-left: 30%; margin-right: 30%;
  12. }


 
Soit il se place en dessous du dernier texte (en relative je crois)
soit il se place bien en bas de page, avec absolute mais c le bas de page visible lorsque l'on ouvre la page donc si elle défile il reste mal placé. Et je ne veux pas le voir sur la page si je ne l'ai pas défilée jusqu'en bas.

Reply

Marsh Posté le 05-07-2005 à 23:16:57    

Est-il possible d'utiliser une même class pour 2 cadres de textes différents pour lequel je veux un espacement en hauteur d'une ceraine taille ?
Ou est ce que je déclare 2 styles différent avec chacun une place précise ?
 
Merci

Reply

Marsh Posté le 05-07-2005 à 23:18:43    

C'est le principe même d'une classe, pouvoir l'utiliser sur plusieurs éléments différents :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 05-07-2005 à 23:33:10    

Vi c'est bien ce que je pensais mais je n'arrive pas à pouvoir choisir le placement ds différents cadre :(
Je m'embrouille dans les positions relative, absolue etc..
A priori il vaut mieux donner les valeur de placment en pourcentage ?
merci pour tous ces petits détails :)

Reply

Marsh Posté le 05-07-2005 à 23:45:46    

Pourquoi ne pas utiliser le positionnement statique de base? [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-07-2005 à 07:42:22    

Si j'utilise la positionnement statique,  les balises top, left etc.. ne fonctionne pas pour positionner mon texte par rapport aux coté de la page :(

Reply

Marsh Posté le 06-07-2005 à 07:43:33    

et alors? [:pingouino]
Tu veux mettre tous tes textes les uns à côté des autres? [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-07-2005 à 07:47:38    

Non mais là j'essaye de placer 2 textes l'un en dessous de l'autre, sans els collé sur les coté de la page, non centrés non plus et ave un espace entre les deux relativeemnt précise

Reply

Marsh Posté le 06-07-2005 à 07:49:44    

http://plaies.degypte.free.fr/UP/clubic/page_presentation.jpg

Reply

Marsh Posté le 06-07-2005 à 07:54:56    

ben suffit d'utiliser des marges [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed