Aller au contenu

Ajouter code dans un CSS complexe ?

Par FrenchyNeo
dans Programmation et Lignes de code

Featured Replies

Posté(e)

Bonjour à tous.

Voilà je comprends de mieux en mieux le CSS avec les différents aides sur internet, seulement je tombe sur un os au niveau de l'intégration du célébre script d'image "lightbox".

J'ai sur une page les balises liens déjà personnalisés et j'aimerais personnaliser les liens qui utilise l'attribut class="light" seulement impossible de trouver comment...

Et voilà une partie de ma page : 

<META NAME="robots" CONTENT="index,follow">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.pack.js"></script>
<script type="text/javascript">
$(function() {
$("a.light" ).lightBox();
});
</script>
</head>
<body>
<a href="monimage.jpg" title="description de l'image" class="light">Cliquez ici</a>
</body>
</html>

Voilà ma feuille de style (j'ai enlevé l'inutile...) : 

a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff9900;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ff9900;
}
a:hover {
text-decoration: underline;
color: #FFB340;
}
a:active {
text-decoration: none;
color: #ff9900;
}
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}

Merci infiniment de votre petit coup de main

A plus tard

  • Citer

    • Archivé

    Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

    Aller sur la liste des sujets