inserer une ligne verticale ! [Résolu]

Eureka · Message par **Eureka** » 02 avr. 2010, 20:01

Bonjour tout le monde

j'ai besoin d'insérer une ligne verticale dans le bloc texte .Mais il n'y a que la ligne horizotale !

Pouvez-vous m'indiquer comment le faire.

Merci de votre aide

Eureka.

Message par **Ymai** » 02 avr. 2010, 23:09

Bonjour
Pour le bloc de texte en question, il faut définir une règle CSS du type

Code : Tout sélectionner

#bloc {border-left: 2xp solid red}

Soit, dans l'éditeur CSS, établir une règle de style pour le bloc #bloc
Dans l'onglet "Bordures", choisir une bordure à gauche (ou à droite?) avec les caractéristiques voulues.

Eureka · Message par **Eureka** » 03 avr. 2010, 03:07

Bonjour

je crois que je me suis mal expliquée; je veux dire par bloc texte <<< div id="texte" >>>

Et je veux mettre à l'intérieur une ligne verticale !

Merci Ymai.

Eureka.

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 03 avr. 2010, 08:40

Ce n'est pas + clair

Il est possible de mettre (encadrer) un élément html et son contenu par des bordures (en haut, à droite, en bas et à gauche), comme :

Code : Tout sélectionner

cet élément est entouré de bordures

Il n'existe pas de possibilité pour glisser une bordure de séparation au milieu d'un élément.

Si c'est pour séparer 2 colonnes dans ton texte, il te faut 2 blocs différents, par exemple p. Une alternative qui ne fonctionnera que sur les navigateurs à moteur gecko et webkit, c'est d'utiliser la future propriété CSS, à coder à la main.

Code : Tout sélectionner

.colonneX2 { /* affiche le bloc sur 2 colonnes */
  -moz-column-count:2;
  -moz-column-gap:2em;
  -webkit-column-count:2;
  -webkit-column-gap:2em;
}

Eureka · Message par **Eureka** » 03 avr. 2010, 10:51

Bonjour tout le monde

J'ai cru que se serait simple et qu'il y aura une solution à ma porté pour ça !

Mais,je vois que c'est un peu fort pour moi

je crois que je vais laisser tomber cette fameuse ligne verticale pour une autre solution

.

Merci Fabrice.Tres.Net ; Merci Ymai.

Eureka

Message par **chinon37** » 03 avr. 2010, 10:58

Pour une ligne verticale dans un bloc, Il y a aussi l'image de fond du bloc, de 2 px, centrée et répétée verticalement (pour une ligne de 2 px)

Eureka · Message par **Eureka** » 03 avr. 2010, 22:22

Bonsoir chinon37

J'ai beau essayé avec ta proposition ; Mais ,j'ai réalisé que je ne peux pas la concrétiser .

A vraie dire ,je ne suis qu'une débutante qui fait un effort pour monter son site.

S'il ya une explication "plus explicite ",je serais ravie de l'essayer.

Merci beaucoup de votre aide.

Eureka

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 03 avr. 2010, 23:51

Explique ce que tu veux, un croquis parfois fait office d'un très bon discours.

Eureka · Message par **Eureka** » 04 avr. 2010, 00:29

Bonsoir;

Voilà ce que je veux :: une ligne verticale qui divise la page en deux (disons deux colonnes)

merci de me l'expliquer un peu en détails étape par étape.

Eureka

GAUNCE · Message par **GAUNCE** » 04 avr. 2010, 11:33

Bonjour,
En fait, il suffit que tu fasses 2 div, droite et gauche qui remplissent ta page et tu mets une bordure droite, par exemple, sur le div de gauche de la taille et la couleur que tu désires et tu obtiens une ligne verticale qui sépare ta page en deux.
Donc dans l'éditeur CSS, si tu as mis un "id" à ton div de gauche, dans l'onglet bordures tu choisis "bordure droite", tu sélectionnes taille, couleur etc...

Eureka · Message par **Eureka** » 04 avr. 2010, 15:04

Bonjour GAUNCE

J'ai plusieurs fois essayé de faire 2 div;mais ,je n'ai pas pu.

Peut-tu me dire comment je procède un peu plu en détails .

merci

Eureka.

Message par **Ymai** » 04 avr. 2010, 18:07

Bonjour
Quelques éléments de réponse.
Pour bien comprendre, je pense qu'il est tout d'abord indispensable d'avoir potassé des choses comme:
http://josar.free.fr/tutoKompozer/miseEnForme2.html ou même l'ineffable http://info.sio2.be/kpz/3/1.php
Je me suis aussi basé sur http://www.alsacreations.com/xmedia/tut ... sign_css2/

1. Créer un bloc <div> à l'aide de la liste déroulante des structures, à gauche et en haut de la fenêtre de KompoZer. C'est la liste où figure initialement la mention "Corps de texte". Le dernier item permet d'obtenir un <div> dans la page.
Ce <div> est matérialisé par un liseré rouge autour du bloc.
2. Dans la barre d'état, au bas de la fenêtre, cliquer droit sur la balise <div> qui vient de s'ajouter dans la série <html><body><div> et sélectionner "Styles en ligne", dans le menu contextuel
3. Dans la boîte de dialogue des styles, choisir l'onglet "Boîte", fixer la largeur à 1000px. Ce qui permettra à tous ceux qui disposent d'un écran d'au moins 1024px de voir la page dans toute sa largeur. Si une partie du public risque de ne disposer que de 800px, ajuster en conséquence.
Dans le même onglet, fixer les marges gauche et droite à la valeur "auto" pour centrer ce bloc.
Cette opération permet d'obtenir un conteneur qui restera fixé à la taille demandée.
Dans ce conteneur, nous allons définir deux zones qui resteront côte à côte.
4. Malheureusement, il semble que KompoZer soit rétif à définir deux nouveaux blocs <div> immédiatement. Il faudra un peu ruser...
* cliquer dans le bloc <div> centré créé à l'étape 3
* frapper deux fois Enter pour créer deux lignes vides
* remonter sur la première ligne et créer un nouveau bloc <div> comme à l'étape 1
* passer sur la deuxième ligne et créer encore un bloc <div>
A ce moment, on doit avoir un bloc <div> centré contenant deux autres blocs qui sont superposés.
Nous allons maintenant procéder à la mise en page de ces deux blocs internes.
5. Cliquer dans le premier bloc interne et y écrire le mot "gauche"; Cliquer dans le deuxième et y écrire le mot "droite".
Recliquer dans le bloc gauche puis, dans la barre d'état, clic droit dans la balise <div> correspondante. Remarquer que la balise du bloc <div> principal est en italique, preuve que nous y avons introduit des directives de style.
Dans le menu contextuel, sélectionner "Styles en ligne" . Dans l'onglet "Boîte", choisir une largeur de 499px (explication de cette valeur plus loin) et choisir "Flottant à gauche". => OK
Remarquer que la balise du deuxième bloc <div> interne est toujours en caractères "normaux" et que ce bloc est venu se positionner à droite du premier.
Cliquer dans ce deuxième bloc <div>
Clic droit dans la balise <div> correspondante de la barre d'état. C'est bien la deuxième (la première correspondant au conteneur centré).
Sélectionner "Styles en ligne". Dans l'onglet "boîte",
* fixer la largeur à 499px
* rendre le <div> flottant (à gauche ou à droite, peu importe)
* dans l'onglet "Bordures", décocher la case supérieure qui rend la quatre bordures identiques
* Sur la ligne "Gauche", choisir une bordure "Solide", de largeur 2px et de couleur au choix.
=> OK
C'est terminé.
C'est la hauteur de la zone droite qui détermine la hauteur de la ligne verticale. N'y voir aucune allusion à mes opinions politiques.

Pourquoi 499px?
La zone gauche mesure 499px; la zone droite mesure 499px; la bordure mesure 2px. Total: 1000px, soit la largeur de la zone "conteneur".

Devoir pour le prochain cours: réaliser la même opération mais pour des écrans de 800px. Ce doit être le bloc de gauche qui fixe la hauteur de la ligne verticale.
Élève Eureka, vous passerez au tableau noir pour expliquer votre résolution à vos camarades.
L'étape suivante consistera à sortir les directives de styles "en ligne" pour les mettre dans une feuille de style. Ce sera pour la prochaine leçon.
Vous pouvez aller en récréation.

GAUNCE · Message par **GAUNCE** » 04 avr. 2010, 18:23

Pour la pédagogie, c'est quand même mieux un Professeur, de qualité, de surcroît...et Belge par dessus le marché.
Il est incroyable ce forum.

Message par **Ymai** » 04 avr. 2010, 18:24

Barman, vous mettrez une Chimay Bleue à mon camarade...

et un Perrier pour moi

Eureka · Message par **Eureka** » 04 avr. 2010, 21:22

Bonjour "" Prof""

Ce que j'ai fais ::J'ai commencé à l'étape 4. (L'étape 1,2 et 3 sont déjà en place = entete +texte +pied ).

Tout a bien marcher,div gauche en place,div droite en place;

Mais pour div droite ,lorsque on veut lui indiquer un largeur les deux div se chevauchent et se mêlent à l'interieur du div "pied" !

Je l'ai laissé sans largeur .

J'ai mis une bordure à div gauche (solid,2px) , ça a bien marché.

Maintenant ,lorsque j'écris dans div gauche ,l'écriture marche au dessu du pied et le dépasse.

Voilà ,le résultat de l'exercice .

Maitre ,je ne passerai au tableau que lorsque je comprendrai bien la leçon

.

D'ailleurs ,à mon age j'ai ... du tableau noir !!

Merci

Eureka

Geckozone

inserer une ligne verticale ! [Résolu]

inserer une ligne verticale ! [Résolu]

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Re: inserer une ligne verticale !

Qui est en ligne ?