28112 sujets

CSS et mise en forme, CSS3

Intégrer 2 balises dans une box-shadow

Bonjour ,

Je ne sais pas si cela est possible mais je pense que si :

je voudrais mettre le titre de ma page (<h1...</h1>) et les liens que j'ai mis juste en-dessous (<a href="...">...</a> ...) dans une seule et même box-shadow.

Dans mon code CSS actuel, j'ai simplement mis la balise box-shadow dans h1.

h1
{
 box-shadow : ... ;
}

.

Donc savez-vous comment dois-je faire pour que mes liens soient dans la même box ?


De plus, après avoir réglé ça en priorité, j'ai une seconde question qui est :

Une fois la box-shadow faite, peut-on modifier la couleur à l'intérieur de la box uniquement ?
Si oui, comment on fait.


Merci beaucoup !!!
Modifié par ahover (20 Aug 2017 - 17:27)
Non non non Smiley ravi pas ça.

<h1>MON TITRE</h1>

<a href="desliens.php">clik!</a>
<a href="nuvolien.html">reclik!</a>
...



h1 { box-shadow: 12px 12px 24px black;
        text-align: center;}

a { text-align: center;}



Voilà en gros rapidement.
En fait, je veux que mes liens soient dans la box-shadow du titre.

Le titre est dans une box-shadow. Et en-dessous il y a des liens les uns à la suite des autres, comme une phrase. Eh bien moi je veux que ces fameux liens soient à l'intérieur de la box shadow.

Je vais essayer de poster un screen d'exemple ça sera peut-être plus clair.

Mais merci quand même de ton aide en tout cas ! Smiley biggrin


Edit :

Voilà comment c'est sur ma page et là normalement tu devras comprendre.
Modifié par ahover (20 Aug 2017 - 19:35)
Par exemple: 


<div>
<h1>MON TITRE</h1>

<a href="desliens.php">clik!</a>
<a href="nuvolien.html">reclik!</a>
</div>
...



div { box-shadow: 12px 12px 24px black;}
h1 { text-align: center;}

a { text-align: center;}

Modifié par Integrator (20 Aug 2017 - 19:35)
Meilleure solution
Quel boulet je suis Smiley smile Mon cerveau y pensait, mais j'ai refusé de l'écouter...

Et d'ailleurs, il y a aussi la balise <span> je crois ?
En tout cas, il me semble qu'il y en a une autre, du coup c'est quoi leurs différences ?
En fait je suis vraiment bête parce que je viens de me rendre compte que t'avais répondu à mon petit souci à ton premier message. J'ai juste pas pris le temps de bien lire le code que tu as écris, je l'ai survolé. Et là je viens de le relire et modifier et je me suis rendu compte que ton premier fonctionne très bien.
Dernière question... La réponse doit être toute bête je le sens.

J'aimerai qu'un seul lien change de couleur lorsqu'on le survole, donc j'ai mis dans sa balise l'attribut class="blabla" puis ensuite dans mon fichier css je bug ; il me semble que c'est :

a.blabla:hover
{
color: orange
}

seulement chez moi ça ne marche pas...

Où je me suis trompé s'il vous plaît ?
<p class="textcatna">
<br /><br /><br />
<a href="affichagetextessvg.php">Enregistrement</a><br /><br />
<a href="affichagetexteprem.html">Primus male</a><br /><br />
<a href="chapitresecond.html">Vulgs liber</a><br /><br />
<a href="deutelaoi.php">Byzantinos liber</a>
</p>






a.textcatna:hover

{
	color: blue;
}


Voilà c'est ça. Je vois pas l'erreur...
Modifié par ahover (20 Aug 2017 - 19:55)
Ce soir j'ai surtout était chiant et je m'en excuse mille fois !!! J'ai trouvé mon erreur...


Désolé et merci infiniment !!

Edit :

L'erreur est que j'avais mis l'attribut class au mauvais endroit. Je l'ai mis dans la balise <p> au lieu de le mettre dans chaque lien...
Modifié par ahover (20 Aug 2017 - 19:58)
Alors, dans ton code il y a trop de <br/> et il y en a aucun d'utile sachant qu'il sert à faire
un retour à la ligne et non un saut de ligne.

Tu devrais faire ton menu sous forme de liste, comme par exemple:

<ul>
  <li><a href="affichagetextessvg.php">Enregistrement</a></li>
  <li><a href="affichagetexteprem.html">Primus male</a></li>
  <li><a href="chapitresecond.html">Vulgs liber</a></li>
  <li><a href="chapitresecond.html">Byzantinos liber</a></li>
</ul>


Ensuite dans ton CSS tu supprime les puces et tu ajoutes des espacements ( padding, margin, etc...) en plus de personnaliser tes liens.

Smiley cligne
Sujet clos
Aller à