Barre de séparation... Bouton_activeBarre de séparation... Bouton_hoverBarre de séparation... Fb-hoverBarre de séparation... Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Barre de séparation... EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Barre de séparation... EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Barre de séparation... EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Barre de séparation... EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Barre de séparation... EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Barre de séparation... EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Barre de séparation... EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Barre de séparation... EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
Smartphone Xiaomi 14 – 512 Go- 6,36″ 5G ...
Voir le deal
599 €

Partagez
 

Barre de séparation...

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://hopeless.forumsrpg.com/index.htm
Krypt0.
Krypt0.
{ Membre }
{ Membre }

Masculin Messages : 101



Barre de séparation... Empty
[sub]Bonjour, bonsoir à tous!

En premier lieu, je tiens à m'excuser si la question a été posée précédemment. Neutral

Bref, mon problème est réellement simple; j'aimerais être capable de créer une ligne comme ça :

Barre de séparation... Juste_10

Tout ce que j'aimerais que l'on me donne, c'est le code de base, c'est-à-dire sans les couleurs imposées, sans une image de fond imposée, sans texte et sans grandeur imposée (dans le fond, juste comme ça :

Code:
a{
color:
size:
background: le fond ici.png

(ceci est un exemple, je sais que ça n'a pas de sens!). (:

Merci d'avance.
KRYPT0.
MessageSujet: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 12:47
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Barre de séparation... Empty
Bonjour.

Il suffit d'ajouter des bordure à l'élément contentent ainsi qu'un marge à gauche pour une meilleur lecture :
Code:
div {
  border-left : solid 1px #000000 ;
  border-bottom : solid 1px #000000 ;
  padding-left : 10px ;
}
Code:
<div>Pour ce résulta</div>
Pour ce résulta


A vous d'adaptez l'épaisseur et la couleur.
Celà peut être appliquer à tout les éléments (div, span, a, img...), classes ou identifiants.

Encore plus d'info ici.
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 14:53
Revenir en haut Aller en bas
http://hopeless.forumsrpg.com/index.htm
Krypt0.
Krypt0.
{ Membre }
{ Membre }

Masculin Messages : 101



Barre de séparation... Empty
Ça fonctionne! MERCI. (:

Comment on fait pour rajouter un fond?
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 16:06
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Barre de séparation... Empty
backgroung : #FFFFFF ; pour une couleur
background : url("adresse_image") ; pour une image

Et toujours plus d'info sur la même page que je vous est donnée.
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 18:05
Revenir en haut Aller en bas
http://hopeless.forumsrpg.com/index.htm
Krypt0.
Krypt0.
{ Membre }
{ Membre }

Masculin Messages : 101



Barre de séparation... Empty
Merci! (:

Mon code est donc..

Code:
<div style="background-image:url(http://i69.servimg.com/u/f69/10/09/40/22/xdddd11.jpg); background-repeat:repeat;-moz-border-radius-bottomright:10px;-moz-border-radius-topleft:10px;">TEXTE</div>

ce qui donne...

TEXTE


Toutefois, dans un message, les codes commencent à prendre beaucoup de place. Pour contrer ce problème, je sais qu'il est possible de leur donner des noms et de les mettre dans le CSS du forum, mais je ne me souviens plus comment. Quelqu'un aurait-il la solution?
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 18:32
Revenir en haut Aller en bas
http://kiss-university.forumactif.org/
Ikø'
Ikø'
Pika'Ghøst~ Maîtresse des pelles ~
Pika'Ghøst
~ Maîtresse des pelles ~

Féminin Messages : 3193



Barre de séparation... Empty
Si ton code de div est à l'origine celui donné par Vpeybernes, donc celui-ci:
Code:

div {
  border-left : solid 1px #000000 ;
  border-bottom : solid 1px #000000 ;
  padding-left : 10px ;
}

Met ceci à la place:
Code:
.titre_de_la_class {
  border-left : solid 1px #000000;
  border-bottom : solid 1px #000000;
  padding-left : 10px ;
  background-image:url('http://i69.servimg.com/u/f69/10/09/40/22/xdddd11.jpg');
  background-repeat: repeat;
  -moz-border-radius: 10px 0px 10px 0px;
  -webkit-border-radius: 10px 0px 10px 0px;
  border-radius: 10px 0px 10px 0px;
}

Dans le html:
Code:
<div class="titre_de_la_class">Blablabla</div>
Tu remplaces titre_de_la_class par le nom que tu veux~


Dernière édition par Ikø' le Dim 09 Mai 2010, 19:25, édité 1 fois
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 18:56
Revenir en haut Aller en bas
http://zonescript.forumactif.fr
VPeybernes
{ Membre actif }
{ Membre actif }

Masculin Messages : 563



Barre de séparation... Empty
Et je redonne encore le lien de la même page ou tout est très bien expliqué si seulement on ce donne la peine de lire.

http://fr.selfhtml.org/navigation/css.htm

Au début il y a les différentes manières de définir les éléments puis toute les propriété CSS. Même celle qu'on aurai pas imaginé. Même si c'est pas sensé être pour débutant, ça reste très accessible.


Dernière édition par VPeybernes le Dim 09 Mai 2010, 19:27, édité 1 fois
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 19:22
Revenir en haut Aller en bas
http://hopeless.forumsrpg.com/index.htm
Krypt0.
Krypt0.
{ Membre }
{ Membre }

Masculin Messages : 101



Barre de séparation... Empty
Code:
<div id="subtitle">xxxxxx</div>

ça ne fonctionne pas...

Code:
.subtitle {
  border-left : solid 1px #000000;
  border-bottom : solid 1px #000000;
  padding-left : 10px ;
  background-image:url('http://i69.servimg.com/u/f69/10/09/40/22/xdddd11.jpg');
  background-repeat: repeat;
  -moz-border-radius: 10px 0px 10px 0px;
  -webkit-border-radius: 10px 0px 10px 0px;
  border-radius: 10px 0px 10px 0px;
  border-bottom : solid 1px #5F5F5F ;
}
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 19:23
Revenir en haut Aller en bas
http://kiss-university.forumactif.org/
Ikø'
Ikø'
Pika'Ghøst~ Maîtresse des pelles ~
Pika'Ghøst
~ Maîtresse des pelles ~

Féminin Messages : 3193



Barre de séparation... Empty
C'est parce que tu as marqué "id", il faut marquer "class"

J'avais oublié un / dans mon précédent post, c'est pour ça que tu n'as sans doute pas du voir~
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 19:25
Revenir en haut Aller en bas
http://hopeless.forumsrpg.com/index.htm
Krypt0.
Krypt0.
{ Membre }
{ Membre }

Masculin Messages : 101



Barre de séparation... Empty
MERCI. Very Happy Very Happy Very Happy
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyDim 09 Mai 2010, 19:26
Revenir en haut Aller en bas
http://nin-gai.forum2ouf.com/
Imari
Imari
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1538



Barre de séparation... Empty
Bonjour ^^

Puis-je classer ? Wink
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyLun 10 Mai 2010, 05:55
Revenir en haut Aller en bas
http://hopeless.forumsrpg.com/index.htm
Krypt0.
Krypt0.
{ Membre }
{ Membre }

Masculin Messages : 101



Barre de séparation... Empty
Bien évidemment. Smile
MessageSujet: Re: Barre de séparation...   Barre de séparation... EmptyLun 10 Mai 2010, 08:18
Revenir en haut Aller en bas
Contenu sponsorisé




Barre de séparation... Empty
MessageSujet: Re: Barre de séparation...   Barre de séparation... Empty
Revenir en haut Aller en bas
 

Barre de séparation...

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Barre de séparation
» Changement de barre de séparation.
» Problème avec la barre de séparation.
» séparation, barre dans le sujet. [résolu]
» Image en fond de barre de navig + barre sur toute la longueur (résolu)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit | Informatique et Internet | Internet