Ajouter code dans un CSS complexe ?

FrenchyNeo · le 3 avril 2008

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

Sentinel · le 3 avril 2008

Styler les liens de classe "light" ?

a.light
{
  ... style ...
}

Connexion

Ajouter code dans un CSS complexe ?

Messages recommandés

FrenchyNeo

Lien vers le commentaire

Partager sur d’autres sites

Sentinel

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité