Aller au contenu
View in the app

A better way to browse. Learn more.

Next

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Ajouter code dans un CSS complexe ?

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

Archivé

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

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.