28172 sujets

CSS et mise en forme, CSS3

Remplacer un <a></a> par un <div>

bonjour à tous Smiley smile
voici mon deuxième problème sur la même ligne

<td class="border_principal "><a rel="shadowbox;width=892;height=613;" href="toto.php">toto</a></td>


j'ai besoin de remplacer le lien toto par une class="toto" j'ai essayé avec des <p> des <div> le mettre à différents endroits dans la ligne mais impossible

si quelqu'un à encore une idée je lui fait une grosse bise Smiley biggrin

merci d'avance
bonjour,

je sais pas peut-être en ajoutant la class dans ton <a>


<td class="border_principal "><a rel="shadowbox;width=892;height=613;" href="toto.php" class="toto" >toto</a></td>

Modifié par slamjoker (30 Nov 2020 - 14:20)
Modérateur
Peut-être devrait tu savoir à quoi sert l'attribut rel : https://www.alsacreations.com/article/lire/1400-attribut-rel-relations.html

Pour appliquer des styles en ligne c'est style="/* styles */" , pour donner une ou plusieurs class c'est class="maClass monAutreClass" sinon les attribut height et width existent aussi et peuvent être utiliser sur des éléments de type <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> (tous des boites en lignes pouvant incorporer d'autres contenus ) et <input> , mais sont obsolètes en HTML5 pour les autres éléments même si ils peuvent paraitre fonctionner.

...
Modifié par gcyrillus (01 Dec 2020 - 00:29)
merci de vos réponses, mais je crois qu'il faut que je vous explique ce que j'essaie de faire 

<td class="border_principal "><a rel="shadowbox;width=892;height=613;" href="toto.php">toto</a></td>

celà marche très bien
mais si je fais: 

<td class="border_principal "><a rel="shadowbox" href="toto.php"><div>toto</div></a></td>

pour être plus propre enlever " ;width=892;height=613;" " et le mettre dans un fichier css

.shadowbox {
    width:    592px;
    height:   613px;
}

cela ne marche pas, et je ma retrouve avec un shadowbox aui fait l'écran complet

le <div class="toto"> me sert à aller chercher sa traduction dans un fichier css

j'espère que je me suis bien expliqué car j'ai l'esprit tortueux

et merci encore
totoche89 a écrit :

<td class="border_principal "><a rel="shadowbox;width=892;height=613;" href="toto.php">toto</a></td>

celà marche très bien


Mouais, ça m'étonne Smiley biggol

Déja il faut bien comprendre qu'un TD c'est un élément d'un TABLE donc si tu met quelque chose dans ton TD ça sera un enfant de TD, bien en tenir compte pour le dimensionnement.
En effet si ton TD fait 20x30 tu auras du mal à lui faire contenir sans erreur un élément de 592x613.
Admettons que niveau taille ce soit ok, tu n'as pas écouté les suggestions plus haut:
Il faut un sélecteur pour utiliser un style !!
Ici 'shadowbox' n'est ni une CLASS ni un ID ...
à la rigueur, un sélecteur imaginaire comme ceci je comprendrais que tu l'ai imaginé:

/* ceci ne fonctionne pas c'est pour l'exemple */
a[rel=shadowbox] { }

Essai de comprendre comment ça fonctionne, regarde quelques tutos.
Voici un sélecteur qui fonctionne ( enfin, qui fait ce qu'on lui demande, je suis curieux de voir le code complet )

/* on sélectionne les a enfants des éléments de class border_principal */
.border_principal>a {
    width:    592px;
    height:   613px;
}


Peut-être nous donner un code plus complet afin de mieux t'aider ?
je veux bien te donner un code mais tout c'est pas possible il y en a 709 pour le moment mais je pense qu'un html et 2 css devraient faire l'affaire Smiley smile 


<tr class="backgtext">
                    <td class="border_principal">
                        <img src="Icons/Machinegun.gif" alt="" />
                    </td>
                    <td class="border_principal "><a rel="shadowbox;width=892;height=613;" href="Machinegun_Optimizations.php"><div>toto</div></a></td>
                    <td class="border_principal">6</td>
                    <td class="border_principal">17</td>
                    <td class="border_principal">150/min</td>
                    <td class="border_principal">75</td>
                    <td class="border_principal Price color_P">$10</td>
                    <td class="border_principal">00:00:35</td>
                    <td class="border_principal ANTI_PERSONNEL"></td>
                    <td class="border_principal Can_Attack_VTOLs"></td>
                </tr>



@import url("index.css");
@import url("menu1.css");
@import url("menu2.css");
@import url("table.css");
@import url("Optimisations.css");
@import url("shadowbox.css");
body 
{
	background-color:   #2f4f4f ; /*gray green*/
    font-family:        sans-serif;
    text-align:         left;
}
/*-------------all widths-------------*/
.container {
   width :     1220px;
}
.width_princip,
.container2
{
    max-width:  1200px;
}
.width_footer 
{
    max-width:  1210px;
}
/*.menu1 {
	width :         1190px;
}
/*-------------COMMON to multiple css files----------*/
/*-------------BACKGROUND-------------*/
.backg 
{
    background:     #a9a9a9;
}
.backg_logo 
{
     background:    #a9a9a9 url('http://192.168.0.33/site/banner1.png')no-repeat center/100% ;   
}
.backgmenu1,
.backgtable 

{   
    background:transparent url(../Icons/back.gif) repeat-x left top; 
}
.backgsutitle 
{
    background:     #a9a9a9 url('../Icons/back.gif');
}
.backgtable 
{
    margin-top:         1px;
    margin-left:        10px;
    padding-left:       3px;
    padding-right:      3px;
    height:             35px; 
    color:              #888;
    text-decoration:    none;
    font-weight:        bold;
}
.backgtext 
{
 	background:     #f4f4f4;
    color:          #196b91;
}    
.shadow
{
    -moz-box-shadow:      6px 6px 12px #666;  
    -webkit-box-shadow:   6px 6px 12px #666;  
    box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7); 
}
.shadowbox {
    width:592px;
    height:613px;
}
/*-------------BORDER-------------*/
.border_principal,
.border_top, 
.border_bot, 
.border_left, 
.border_right 
{
     border:     1px solid #000;
}   
.corner
{
    border-top-left-radius:     10px;
    border-top-right-radius:    10px;                
    border-bottom-left-radius:     10px;
    border-bottom-right-radius:    10px;                
}
.corner_top
{
    border-top-left-radius:     10px;
    border-top-right-radius:    10px;                
}
.corner_bottom
{
    border-bottom-left-radius:     10px;
    border-bottom-right-radius:    10px;                
}
.corner_top_left
{
    border-top-left-radius:     10px;
}
.corner_top_right 
{
    border-top-right-radius:    10px;                
}
/*-------------TEXT-------------*/
.text_le,
.text_le2, 
.text_ce,
.text_ri,
.menu1
{
    font-size:      11px;
}
.text_le,
.text_le2 
{
    text-align:     left;
}    
.boxarmure2,
.boximpact2,
.boxconstruction2,
.text_le 
{
    padding-left:   20px;
}    
.text_ce 
{
    text-align: center;
}    
.text_ri 
{
    text-align:     right;
    padding-right:  10px;
}    
.text_hei 
{
    height:             40px; 
    line-height:        35px; 
    color:              #888;
    text-decoration:    none;
    font-weight:        bold;
    text-align:         center;
}    
a
{
    color:              #015b86; 
    text-decoration :   underline;
}
td_hov:hover
{ 
	background: #FFFFFF;
    cursor:     pointer;
}
.color_bl 
{
    background: #000;
    color:      #fff;
}
.color_wh 
{
    color: #aaa;
}
/*-------------SIZE-------------*/
.marg_auto 
{
    margin-left:    auto;
    margin-right:   auto;
}
.marg_top_bot
{
    margin-top:     10px;
    margin-bottom:  10px;
}
.marg_top
{
    margin-top:     10px;
}
.marg_bot 
{
    margin-bottom:  10px;
}
.marge-le_ri 
{
    margin-left:    -1px;
    margin-right:   -1px;
}

j'espère que c'est compréhensible, car j'essaie de faire pour que n'importe qui puisse le modifier
Modérateur
apparemment tu ne veux pas comprendre que rel="shadowbox;width=892;height=613;" est invalide et ne peut rien faire d'autre qu'être ignoré par le navigateur.

Si tu ne veut pas te plier aux exigences du langage HTML pour produire un code cohérent et valide, on ne pourra pas t'aider.

cdt
gcyrillus
j'ai bien compris que tu me dit que rel="shadowbox;width=892;height=613;" est obsolètes en HTML5) dit moi quoi chercher ou comment faire pour me plier aux exigences du langage HTML5 pour produire un code cohérent et valide. n'oublie pas que je suis inculte en css

et merci pour t'on engueulade Smiley smile
Modérateur
totoche89 a écrit :
gcyrillus
j'ai bien compris que tu me dit que rel="shadowbox;width=892;height=613;" est obsolètes en HTML5) dit moi quoi chercher ou comment faire pour me plier aux exigences du langage HTML5 pour produire un code cohérent et valide. n'oublie pas que je suis inculte en css

et merci pour t'on engueulade Smiley smile


Je t'en prie Smiley cligne , non ce n'est pas obsolète mais invalide.
A quoi sert l'attribut rel et quelles sont les valeurs d'attribut possible pour chacune de ces utilités : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel

d'où :
gcyrillus a écrit :
Peut-être devrait tu savoir à quoi sert l'attribut rel : https://www.alsacreations.com/article/lire/1400-attribut-rel-relations.html

Pour appliquer des styles en ligne c'est style="/* styles */" , pour donner une ou plusieurs class c'est class="maClass monAutreClass" sinon les attribut height et width existent aussi et peuvent être utiliser sur des éléments de type &lt;canvas&gt;, &lt;embed&gt;, &lt;iframe&gt;, &lt;img&gt;, &lt;input&gt;, &lt;object&gt;, &lt;video&gt; (tous des boites en lignes pouvant incorporer d'autres contenus ) et &lt;input&gt; , mais sont obsolètes en HTML5 pour les autres éléments même si ils peuvent paraitre fonctionner.

...


pour que .shadowbox{} soit utilisé il te faut coté html class="shadowbox"

Cdt
Modifié par gcyrillus (02 Dec 2020 - 13:37)
voila ce que j'ai fait:

<td class="border_principal "><a class="shadowbox" href="Machinegun_Optimizations.php"><div class="Machine_Gun"></div></a></td>

tout marche sauf.....class="shadowbox" j'ai rajouter dans le css
display:block; ou display:inline-block;
cela agrandit tout mon tableau et ouvre shadowbox dans une autre page donc j'ai encore rien compris Smiley decu
Modérateur
totoche89 a écrit :
voila ce que j'ai fait:

&lt;td class="border_principal "&gt;&lt;a class="shadowbox" href="Machinegun_Optimizations.php"&gt;&lt;div class="Machine_Gun"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/td&gt;

tout marche sauf.....class="shadowbox" j'ai rajouter dans le css
display:block; ou display:inline-block;
cela agrandit tout mon tableau et ouvre shadowbox dans une autre page donc j'ai encore rien compris Smiley decu


shadowbox donne une taille de 592 x 613 , si c'est trop grand , réduit les dimensions.

si tu clique sur le lien, tu vas sur la page Machinegun_Optimizations.php

A priori il n'y a pas d'erreurs.

Que veut tu faire en fait ? transformer ton a en div ?

Alors :
<td class="border_principal "><a class="shadowbox" href="Machinegun_Optimizations.php"><div class="Machine_Gun"></div></a></td>

deviens
<td class="border_principal "><div class="shadowbox"  ><div class="Machine_Gun"></div></div></td>

sans href bien entendu Smiley smile

Ou pour revenir au debut, pour styler un lien a partir de la valeur de son href 
<td class="border_principal "><a class="shadowbox" href="toto.php"><div>toto</div></a></td>

le selecteur CSS est 
a[href="toto.php"] {/* styles */}

Modifié par gcyrillus (03 Dec 2020 - 20:04)
Sujet clos
Aller à