Snif... J'étais toute contente d'avoir trouvé ton tuto parce que je voulais faire de onglets pour mes rubriques, c'est quand même bien + joli... Mais, si j'ai bien compris le début, à la fin tu me perds avec ton langage d'initiée !!! C'est quoi une div ? (même quand je saurai ça je vais jamais y arriver *pleure*)

Tout d'abord, bravo, les tutoriels sont toujours aussi rapides et bien expliqués.
Même si pour un début, c'est quand même, un tout petit peu difficile.
Enfin bon, il n'y a pas de problèmes puisque tu es là pour aider aider ceux qui n'ont pas compris...

@okaasan : Une div, c'est un conteneur où il y a des choses à l'intérieur (Texte, images etc...).
Par exemple, l'article, c'est une div il me semble.

Sur des sites tout ce que tu vois est dans des divs.
Il y a la div, dont l'apparence est définie grâce au Css, et son contenu.

Pour mettre une div, sur un code Css tu mets :

#nomdeladiv {
[Propriétés (par ex : border: 5px solid grey)]
}

Et après, avec du HTML, tu mets :

<div id="nomdeladiv">Contenu (images, texte etc...)</div>

Tu vois donc que le sélecteur et l'ID de la div ont le même nom : Le code css va attribuer à la div portant son nom les propriétés dans le code.

Un peu dûr au début, mais c'est logique et très simple.

Ah j'ai été long pour écrire mon roman moi :o

<a href="LIEN">Contenu</a>
Ici, sa fait :

<div class="navigation"><a href="LIEN">CONTENU</a></div>

Tu me sauve toujours Nagi' T___T (le surnom qu eje t'ai donné est bizarre x])

Ah merci Nagalia, je m'y retrouve un peu. Et SUPER SYMPA le code tout prêt aux couleurs de mon blog ♥ (on sent l'artiste là !), ce week end j'essaie !!! Youpiiii ! C'est vraiment super gentil. Mais comment tu fais pour gérer tout ça ? (blogs, créas, études, -vie privée peut-être aussi ^^ - etc...) C'est génial, bravo !

@Tantan Kun : merci de me parler comme si j'avais 4 ans.............. Tu trouves ma question imbécile (je le sens, si si ne nie pas !!!) mais figure toi que dans la vie, on ne peut pas tout savoir !!!! J'admire votre facilité, à  votre âge, à jongler avec les codes css et html comme des pros. Vu que ça m'intéresse, je fais des efforts POUR COMPRENDRE et non pas copier/coller bêtement les codes que vous avez la gentillesse de nous metre à dispo (même quand j'ai copié/collé, genre pour le curseur ou la pluie de flocons, j'ai décortiqué le code pour voir ce qui s'y passait). Alors, pour tout te dire, contrairement à la réponse de Nagalia, ta réponse était plutôt vexante. Moi aussi, il y a des trucs qui me semble évidents, et je suis morte de rire INTERIEUREMENT quand les gens posent une question "bête" (d'ou mon interprétation correcte des ^^ du com de Nagalia XD) mais : 1/pour moi il n'y a pas de question bête (il vaut mieux passer pour un con que de le rester, sans savoir) et

2/ j'essaie de ma rappeler que tout le monde ne pratique pas les mêmes choses que moi (celui qui est nul sur un sujet que je maîtrise, peut être meilleur que moi sur un sujet sur lequel je suis nulle)... (ça fait beaucoup de "sur", ça... enfin bref)

Cela dit je tiens compte de tes explications supplémentaires, grâce auxquelles je vais me coucher moins bête ce soir et pour lesquelles je te remercie.

Désolée mais tu vois Tantan Kun, tu n'es pas le seul à pousser des coups de gueule... Je préfère dire le choses, c'est comme ça. Ce qui me permet de n'être pas rancunière pour un rond.

:o
J'ai dit quelque chose de mal ? :o :o

J'ai dit quelque chose de mal ? :o :o
Je n'ai jamais dit que votre question était "imbécile", au contraire, moi vous devriez voir mes questions il y a 2 ou 3 ans auparavant...

On a tous des difficultés, si j'ai essayé de simplifier au maximum, c'est avant tout pour que vous puissiez mieux comprendre. Je pense que quand j'essaye de vous aider vous, ça doit aussi être utile pour les autres, donc je simplifie au maximum, on ne sait jamais.

Maintenant, si vous pensez que j'estime votre question comme étant "imbécile", sachez que vous vous trompez. Si personne n'avait de questions à poser, je pense que je n'aurais pas fait mon blog que vous conaissez, il me semble.

Pour les codes, moi je vous donnes les codes, après si vous n'en voulez pas, il faudrait me demander de ne plus vous les donner...

Bref, si j'ai dit quelque chose d'inaproprié, je vous de bien vouloir m'en excuser, mais à ce que je saches je n'ai rien fait de mal ^^'

Bon, désolée Tantan kun, j'ai dû mal interpréter la tournure de ton com... Il y a des fois où on est bouché, que veux-tu... Cela dit (au passage, tu peux me tutoyer !!!) ne m'en veux pas, je devais être en mode "susceptible" tout à l'heure... Pourtant c'est pas mon genre en principe. Merci encore pour tes codes, désolée pour tout à l'heure.

Merci , c'est gentil *rougit de sa bêtise d'hier*

Vous savez, le plus réfléchit est toujours le plus idiot, me dit ma prof. de musique...
Le basique et le simple, c'est sûrement mieux que le réfléchit ;)

Oui, mais comment on fait pour qu'il ne se superpose pas??

Bienvenue au club !
Un étudiant n'a plus de vie de nos jours :P

LoL :Pp

Ah oui la primaire O:)
Moi ma prof de maths >> Je dis rien, c'est mieux ;)

Ah ouais carrément...
La pauvre, vous lui faites quoi ? x)

Marrant le coup de "retourner faire du coloriage en maternelle" (je me disais justement pareil ce week-end,  pas à cause des devoirs mais du boulot... En fait c'est pareil sauf qu'il n'y a pas de révisions. Quoique...

il ya pas de coulissant qu'on je fais ca T^T

.. ah alors quelqun m'aide !

sa parle de quoi ce tuto's en général XD ?

L'utilisation du javascript était relativement gênante et inutile...
L'iframe gênait mes visiteurs pour poster des commentaires : Bref, le caca !

J'ai trouvé une solution, un petit mélange d'HTML et de CSS et le tour est joué !
J'ai fait un tuto, pour ceux qui veulent aller voir...

Non à la pub ;D
Tantan-Kun.

Pas de problèmes Nagalia ;P

Mercii j'y suis arrivé *-*

De rrien ;P

alors sur ce coup la je t'adore nagi *w* 

//PAN//

merci infiniment ♥

Âmes Sensibles savent s'abstenir , question débile en vue :

Est-ce-que l'on peut mettre un HTML dans un contenue hors article ? -.-"

Super merci beaucoup !

Il se superpose toujours, je peut savoir ce que je doit rajouter?

CSS:

.onglet {position:fixed;
top: 330px;
left: 835px;
background: black;
border: 3px double white;
box-shadow: 0 0 5px white;
padding: 3px; 
wdth: 150px; }    

HTML:

<div class="onglet">

<p><a href="http://mochiblog.revolublog.com/le-site-c17008951"><img style="-webkit-user-select: none;" src="http://data0.revolublog.com/mochiblog/perso/image%20le%20site.jpg" alt="" /></a></p>

</div>

<div class="onglet">

<p><a href="http://mochiblog.revolublog.com/coin-tsugunaga-momoko-c17033100"><img style="-webkit-user-select: none;" src="http://data0.revolublog.com/mochiblog/perso/image%20coin%20momoko.jpg" alt="" /></a></p>

</div>

Bonsoir,

Pour toi Mochi :
Sur le premier code, ou en tous cas la première image, ajoutes une propriété à la div :

<div class="onglet">

<p><a href="http://mochiblog.revolublog.com/le-site-c17008951"><img style="margin-CÔTE: Xpx; -webkit-user-select: none;" src="http://data0.revolublog.com/mochiblog/perso/image%20le%20site.jpg" alt="" /></a></p>

</div>

Il te suffit de remplacer "CÔTE" et X par certaines caleurs :

1. Pour CÔTE : Le côté où doit être appliqué la marge
   right : pour la droite
   left : pour la gauche
2. Pour X(px) : ajoutes une valeur, à toi de voir laquelle

C'est aussi simple que cela ;)
Et si ton problème vient du code css, au lieu de mettre :

.onglet {position:fixed;
top: 330px;
left: 835px;
background: black;
border: 3px double white;
box-shadow: 0 0 5px white;
padding: 3px; 
wdth: 150px;  

Mets :

#onglet {position:fixed;
top: 330px;
left: 835px;
background: black;
border: 3px double white;
box-shadow: 0 0 5px white;
padding: 3px; 
wdth: 150px; }

Avec le dièse à la place du point ;)

Ouais mais je n'ai pas vraiment compri...je peut avoir un exemple d'un bon code de ce style pour comparé svp?

Bonsoir,

Oui, si le premier onglet est à droite, il va falloir mettre right à la place de CÔTE sur mon code.
Si le premier onglet est à gauche, au contraire, il faudra mettre left.

C'est vrai que c'est parfois très dûr à comprendre, mais pour quelqu'un qui sait ça parait si facile...
Si tu n'as toujours pas compris, n'hésites pas à solliciter mon aide.

J'ai mis ça et sa ne marche toujours pas....

Html:

<div class="onglet">

<p><a href="http://mochiblog.revolublog.com/coin-tsugunaga-momoko-c17033100"><img style="margin-left: 120px;" src="http://data0.revolublog.com/mochiblog/perso/image%20coin%20momoko.jpg" alt="" /></a></p>

</div>

<div class="onglet">

<p><a href="http://mochiblog.revolublog.com/le-site-c17008951"><img style="margin-right: 50px; -webkit-user-select: none;" src="http://data0.revolublog.com/mochiblog/perso/image%20le%20site.jpg" alt="" /></a></p>

</div>

Désoler de vous avoir dérangé, je viens enfin de trouvé et merci beaucoup pour vos aides !

Génial ce tuto, merci Nagalia-san!!!
Bien expliquer et en détaille, c'est super!

D'apres son profil, il a supprimer tout ces blogs ...

La bonne question ...

j'ai rien compris, puis j'ai relu et rerelu et essayer et réessayer et j'ai réussit :O

par contre, comment on fait pour pas qu'on voit le module simple ?

question:

le code a mettre dans un module simple,

c'est a mettre dans un truc comme l icone a mettre une photo ou video ou c'est a mettre comme sa?

o_o ok...

ah ok, merci bcp! =D

Bouhou, y'a un truc qui cloche chez moi T.T En faite, j'ai fait tout mon CSS sur ordi protable, là tout allait bien, mes onglets étaient bien placés... et quand je suis allée sur un ordi normale tout était décalé et mis n'importe comment ToT Comment faire pour que les gens voient la même chose, quel que soit la taille de leur écran? Et aussi comment faut t'il faire pour que les titres des menus ne passent pas au-dessus des onglets? Désolée pour toutes ces question >_<"

Merci Nagalia^^ Mais j'ai une petite questions :

Au début de ce thème (Code Yoko)au bas a gauche tu avait mit un "Sondage", comment as tu fait pour carrement le faire apparaître ? Je m'explique :

Moi, j'ai mit le lien, mais sa n'affiche pas : "Questions?"

                                                          "Reponses"

                                                          "Réponses

                                                           "Ect.."

Moi,il faut cliquer sur le lien pour voir le sondage !

Comment as tu fait ?

Hello j'ai un petit soucis avec ce tutoriel, donc tout marche bien, a part que lorsque j'enlève mon menu (je n'ai mis aucun menu dans mon site c'est pourquoi j'enlève la colone), l'élément que j'ai rajouté disparaît...

nagalia ou autre hein x)  j'ai une question imaginons que pour le fond on souhaiterez mettre une image comment fait on a et si on veux déplacer le contenu dessous l'header on fait comment ?

ah merci ! j'ai compris !

J'ai pas compris comment on faisait pour en mettre deux sans qu'ils se chevauchent... :S

Si ton onglet mesure 100 px + une marge de 10px, tu dois écrire qu'il se trouve à par xemple e100px du bord + 100px pour qu'il ne soit pas au dessus du premier onglet + 10 px pour la marge ^^

J'espère que tu as compris >.<'

hum ... bonjour , 

j'ai une question qui m'embete : comment fait t -on pour personnaliser le desing de ce petit module ( sujet de ce tutos ) ? 

c'est a dire je n'ai pas compris , : 

.navigation {position: absolute;
                  top: Xpx;
                  left: Xpx;} 

dans le code il n'y a pas de propriété donc je ne sais pas ou le mettre 

en fait j'ai mit une video et j'aimerai mettre un contour / bordure pour que ce soit delimité et jolie ^^

ah ok ^^ merci 

Michi du tuto

Je n'y connais vraiment rien au Codes...

Il faut mettre: .navigation  ?

Coucou je voulais savoir comment on fait pour que les modulles soit à coté d'un module s'il te plait ? :) 

http://pandicornkatsu.lo.gs

J'ai une question,qui a peut être déjà été posée,mais 86 coms,c'est un peu long à lire,et ma flemmardise s'en excuse ^^" ..

Quand je fais le code itout,et que je mets une phrase assez longue, le contenu, ou div, s'éllargi automatiquement, mais j'aimerai qu'il ne fasse qu'un certains nombre de pixels de largueur .. Help ;_; !

Edit : Je cherche aussi comment déplacer un menu :3

Merci >< ♥

Merci ! :) 

mais sa marche pas le module reste en haut..

je l'ai mais sa reste toujours en haut ! :/

ok !  

#module_menu2821246 {position: absolute; 
          top: 188px; 
          margin-left: 500px;
    background: none;}
{position: absolute;
                  top: 100px;
                  left: 10px;}​

Bonjour.

Quand je zoome/dézoome sur mon blog, les div gardent leur place mais le contenu se décale vers la gauche, du coup cela ne ressemble plus à rien. Que puis-je faire ? Merci

EDIT : encore une fois, j'ai fini par trouver, désolée xD

On peut en mettre plusieurs sur un blog ? :3

Comment ça ?

Par exemple, en avoir deux situés sur le même blog. Une fois j'avais essayé je crois et ça n'avait pas marché...

Il me semble que c'est possible...

Je vais essayer, pour voir.

Coucou hum aurret tu un code Html pour fair un petit truck d'encadré pour une page d'accueil que je pourret mettre une video decu et image et aussi de lécriture bien sur ^^

Nitsuki, je pense pas que ça soit l'article adapté pour demander ce genres de trucs, mais ce tuto pourrait peut-être t'aider (si j'ai bien compris ce que tu veux ^^') : >clic<
Sinon je vois pas ^^'

Est-ce qu'il est possible, pour placer un élément, de définir directement un endroit de la page (Ex: en dessous du header) au lieu d'utiliser des "px" ou des "%" ?

En faite, j'aimerais placer mon menu déroulant juste en dessous de mon header, sur toute la longueur de la page, mais même avec des %, il serait décalé selon la taille de l'écran, non ? (Je ne sais pas si c'est très clair...)

Bonjour, j'ai essayé de mettre une vidéo sur mon header mais malheureusement ça ne fait pas ce que j'aimerais que ça fasse.

Le problème est que la vidéo n'est pas "accrochée" au header. Lorsque je descends sur mon blog, la vidéo me suit, et je ne pense pas que ce soit cela qui doit se produire... Pouvez-vous m'aider s'il vous plaît ?

C'est bon, finalement j'ai réussi, merci beaucoup pour le code ^^

Bonjour,

Merci pour ce code que je recherchais depuis une éternité et qui, je m'en rend compte maintenant, est super simple à comprendre...T.T Il y a juste une petite chose que j'aimerai savoir. Tu dis clairement dans ton article "Mais vous pouvez également le mettre dans un article, auquel cas il ne sera visible que sur la page de l'article en question". Comment fait-on ? >.</

Merci.

Je m'excuse, ma question était stupide et je viens tout juste de la remarquer....-_-' Merci encore pour ce code!

Au-revoir!

Coucou, j'ai un gros probléme avec mon contenu hors des articles (Mon code quoi) Soit quand je clique dessus sa ne fonctionne pas et il faut que je reinitalise ou soit il part dans une autre dimention du blog alors que j'avais mit trés bien les pixels. Voici mon code.

#element {position: absolute;
             top: 130px;
             left: 340px;
}

Bonsoir,

Excusez-moi de vous déranger, mais je viens de mettre ton code à l'essai et d'ailleurs je te remercie de l'avoir posté !

Cependant, j'ai un peu hic comme on dit en France lol Ce menu donc passe "en dessous" des marges de mes titres...

L'explication en image :   Et ça me fait mal aux yeux, j'aimerais savoir s'il était possible de changer, ce petit désagrément ?

Merci d'avance !

Excusez mon double post, mais c'est pour dire que finalement, j'ai trouvé la réponse à ma question en rajoutant dans le CSS :

z-index: 1

Merci quand même et surtout Big Huge pour le tuto !!

Je ne sais pas si il y a encore du monde ici, mais je vais tester.

Déjà, bonjour tout le monde et désolé du dérangement. 

J'ai un petit souci avec mon code HTML et je n'arrive pas à l'utiliser. Alors voilà, je voudrais mettre une image sur les deux cotés de mon header, j'ai testé le code HTML et mit mon lien de l'image, mais à la place, ça m'a mit un lien au lieu de l'image. Je vous mets donc mon code si dessous et je voudrais savoir ce qui ne va pas. 

<div id="element1">"http://ekladata.com/DHn762qFlfyijF6l_kZIXUFLK_A/Image-de-cote.png"</div>

Est-ce qu'il faut rajouter quelque chose ou pas ? J'ai cherché un peu partout même dans les commentaires si dessus mais il n'y pas d'explication sur mon problème. 

Je vous souhaite à tous une bonne continuation.

• • Nagalia

    Dimanche 1er Août 2021 à 19:49
    

    Je ne suis pas sûre d'avoir bien compris ce que tu cherches à faire, mais pour afficher une image tu as deux options :

    1. HTML

    <div id="element1"><img src="http://ekladata.com/DHn762qFlfyijF6l_kZIXUFLK_A/Image-de-cote.png" /></div>

     

    2. HTML et CSS

    <div id="element1"></div>

    #element1 {background: url("http://ekladata.com/DHn762qFlfyijF6l_kZIXUFLK_A/Image-de-cote.png") no-repeat center / cover }

    (plus d'info sur la propriété "background")

D'accord je vais tester. Mais j'ai d'autre question sur le contenue hors des articles. ou module en faite. Je voulais faire en sorte que j'ai deux fond en couleur sur le côté et l'image cliquable au milieu. Seulement, je voudrais mettre tout mes modules hors des articles sur mes fond de couleur sur les côté, mais mes contenue reste derrière, tel que les visiteurs et tout ce qui est dans le menus. Si tu ne vois pas, je te passe le lien de mon blog pour un aperçu.

http://missshouky.eklablog.com/

Tu verras en haut deux fond en couleur sur les côtés que j'ai réussi à placé, mon déroulant y est aussi, simplement le reste de mes modules reste en arrière, impossible de les positionner devant les fonds.

• • Nagalia

    Dimanche 1er Août 2021 à 20:49
    

    Le blog est protégé par un mot de passe, je ne peux pas voir ce dont tu parles ^^'

  • MissShouky01

    Dimanche 1er Août 2021 à 20:52
    

    Normalement c'est bon maintenant, tu peux y avoir accès. Je suis désolé.

  • MissShouky01

    Dimanche 1er Août 2021 à 21:09
    

    Normalement c'est bon maintenant, tu peux y avoir accès. Je suis désolé.

Edit : Je me suis creusé la tête toute la soirée d'hier afin de trouver une solution à mon problème et j'ai trouvé. Merci pour ton aide. Je reviendrais vers toi dans si j'ai besoin de toi dans d'autre circonstance.

Bonne journée.

Edit : Je me suis creusé la tête toute la soirée d'hier afin de trouver une solution à mon problème et j'ai trouvé. Merci pour ton aide. Je reviendrais vers toi dans si j'ai besoin de toi dans d'autre circonstance.

Bonne journée.