Sujets similaires

Bonjour & merci à la personne qui prendra en charge ma demande.

Je cherche à créer une page d'accueil de ce style là (sans les onglets) : http://www.vulnera-samento.com/forum

Je sais faire une page cliquable, mais je ne sais pas comment rajouter ces cadres où le texte défile.

Voilà le forum en question où la page d'accueil est déjà installé : http://ad-vitam-aeternam.forumgratuit.be/

Le detail que je souhaite avoir :

Spoiler:

Salut!

Ce que tu appelles une ''page cliquable" est en fait une image réactive Razz

Tu peux aller voir ce tutoriel qui t'expliquera comment faire Wink

Pour le texte qui défile, on utilise la balise

Code:: <marquee> ... </marquee>

mais le plus simple selon moi est de taper sur google ''générateur de marquee'' ou ''marquee generator", tu entre le sens et tes préférences et il te sort le code automatiquement.

Maintenant, pour mettre le texte ''sur'' ton image, je te conseil de l'écrire dans des balises

Code:: <div> </div>

soit avant le code de ton image réactive ou après, tu donne une class à ses div, et puis tu indique dans ton css, où tu veux que le texte se trouve sur la page de cette façon:

Code:: .class {
position: relative ;
top: Xpx;
left: Xpx;
}

Dans le fond, tu regardes où arrive ton texte sur ta PA, puis, tu calcules avec une règle à pixel de combien tu veux descendre ta zone et la tasser. Tu peux aussi, dépendant où elle est située, utiliser les propriétés

Code:: bottom: Xpx;
right: Xpx;

C'est à ta guise.

Si tu as d'autres questions n'hésite pas, bonne chance!

Edit : Doublée par Fire-Fly mais mes explications complètent donc je laisse.

Bonsoir,

En fait, tu peux placer des cadres sur ton image de la même façon que tu places les liens. Il y a juste une astuce à avoir :

Code:: <div class="MessAccueil">
<img src="URL_IMAGE" usemap="NOMDEMAP" class="ImgAccueil" />
<div class="BoiteAccueil1">TEXTE TEXTE TEXTE</div>
<div class="BoiteAccueil2">TEXTE TEXTE TEXTE</div>
</div>
(Et le reste, <map blablabla>)

Côté CSS :

Code:: .MessAccueil {
position:relative; /* On fixe la div comme 'point de repère' */
width:LARGEUR-IMAGE;
height:HAUTEUR-IMAGE;
}

.ImgAccueil {
/* tout ce que t'as mis dans l'attribut "style" de l'image */
}

.BoiteAccueil1 {
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:NOMBRE DE PIXELS PAR RAPPORT AU BORD GAUCHE DE L'IMAGE;
top : NOMBRE DE PIXELS PAR RAPPORT AU HAUT DE L'IMAGE;
width:LARGEUR DU BLOC;
height:HAUTEUR DU BLOC;
}

.BoiteAccueil2 {
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:NOMBRE DE PIXELS PAR RAPPORT AU BORD GAUCHE DE L'IMAGE;
top : NOMBRE DE PIXELS PAR RAPPORT AU HAUT DE L'IMAGE;
width:LARGEUR DU BLOC;
height:HAUTEUR DU BLOC;
}

Je pense qu'avec ça et en faisant quelques essais tu finiras par y arriver.

Alors j'ai essayer, ça fonctionne mais j'ai quelques raté !

1.Tout d'abord mon deuxième texte déborde ! Alors que j'ai mit la bonne largeur de cadre. Je ne comprend pas pourquoi cela ne marche pas.

2. Comment et où placer mes modification pour le texte de chaque cadre (couleur, police, taille)

Spoiler:

Mon CSS :

Code:: /*page d accueil*/

.MessAccueil {
position:relative; /* On fixe la div comme 'point de repère' */
width:835px;
height:800px;
}

.ImgAccueil {
/* tout ce que t'as mis dans l'attribut "style" de l'image */
}

.BoiteAccueil1 {
overflow : auto;
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:114px;
top : 319px;
width:343px;
height:87px;
}

.BoiteAccueil2 {
overflow : auto;
position:absolute; /* positionnement absolu par rapport à notre repère précédemment établi */
left:533px;
top : 297px;
width:200;
height:67;
}

Mon code PA :

Code:: <div class="MessAccueil">
<img src="http://img11.hostingpics.net/pics/467643pagedaccueilfinalcopie.png" usemap="#accueil" class="ImgAccueil" />
<div class="BoiteAccueil1">Soixante longues années se sont écoulées depuis le départ d'Elena Gilbert. Ayant décidé de protéger les gens qui l'entouraient, elle quitta Mystic Falls pour une ville inconnue au bataillon pour y faire des études. Afin qu'on ne le retrouve jamais, elle changea de nom de famille, de prénom, bref d'identité. Après ses études, elle s'est bien entendue marié et a eu trois beaux enfants: deux filles et un garçon, le petit dernier. Evidemment, elle grandit, murit, et vieillit. Elle fut aussi l'heureuse grand-mère de sept petits-enfants dont une petite fille qui répondait au doux prénom de Joyce. Malheureusement, comme toute vie a une fin, Elena la perdit à l'âge de soixante-dix-huit ans, en mai 2072 et atteinte d'une leucémie généralisée.

En ce mois ensoleillé de juillet 2072, Mystic Falls accueillit de nouveaux habitants dont une jeune fille âgée d'une vingtaine d'années. Elle était de taille moyenne, brune et élancée. Elle venait tout juste d'arriver dans cette nouvelle ville et voulait commencer une nouvelle vie. Les études ? Très peu pour elle. Elle voulait son indépendance et avoir son chez-elle. Débrouillarde, elle s'était déjà trouvé un petit appartement avant de partir. Mais que faisait-elle donc à Mystic Falls ? Enfant, sa grand-mère lui racontait des tas d'histoires sur cette ville étrange qu'était Mystic Falls: des histoires de vampires, de loups-garous, de sorcières et cette fameuse famille qu'elle appelait les Originels. Aussi petite qu'elle était, Joyce, c'était le nom de cette fille, croyait à ce genre d'histoires. Elle en était même passionnée. Joyce était tout bonnement venue à Mystic Falls pour connaître toutes les histoires que sa grand-mère Elena lui racontaient et aussi, pour marcher sur ses pas. Mais, Joyce n'est pas au bout de ses surprises.... SUITE </div>

<div class="BoiteAccueil2">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</div>
</div>
<map name="accueil">
<area shape="rect" coords="x,x,x,x" href="LIEN" alt="Stonefolm">
<area shape="rect" coords="x,x,x,x" href="LIEN" alt="Stonefolm">
<area shape="rect" coords="x,x,x,x" href="LIEN" alt="Stonefolm">
<area shape="rect" coords="x,x,x,x" href="LIEN" alt="Stonefolm">
</map>

Merci d'avance ! Créer une PA cliquable et interactif en même temps! 1688815589

Bonjour,

Pour la deuxième boite il manque la valeur en pixels de la largeur et de la hauteur ^^'

Pour la mise en forme du texte, c'est toujours dans le CSS, dans BoiteAccueil1 et BoiteAccueil2 naturellement '_'

Merci ^^

C'est qu'a force de chercher on voit plus les "petits" détails !

Ça marche !!!!

J’aurais au moins une grande chose aujourd'hui !!!

Bonsoir, peut-on considérer le problème comme résolu ?

Bonjour sabritheducks_79 !

Apparemment ton problème semble résolu. J'archive ton sujet.
La prochaine fois, pense à préciser que ton problème est définitivement résolu.
Merci de ta compréhension. Smile

Créer une PA cliquable et interactif en même temps!

Créer une PA cliquable et interactif en même temps!

Sujets similaires

Sujets similaires

Partenaires Or