28172 sujets

CSS et mise en forme, CSS3

CSS background-image

Bonjour à tous!

Je sollicite votre aide car j'ai une erreur d'affichage en utilisant background-image pour appeler l'image et je n'arrive pas à trouver d'où le problème provient malgrès la lecture du forum et vous nombreux conseils que j'ai pu y trouver.

Je débute avec le CSS et utilise wordpress sous wamp pour préparer mon site web, et j'ai donc créé une page test pour essayer de mettre en place un menu qui change d'aspect au survol en utilisant le code suivant directement sur la page dans wordpress:

La partie html:

<body>
  <div class="container">
     <ul id="sti-menu" class="sti-menu">
	<li data-hovercolor="#37c5e9">
		<a href="http://localhost/electroportatif/">
			<h2 data-type="mText" class="sti-item">electroportatif</h2>
			<h3 data-type="sText" class="sti-item">Some more text</h3>
			<span data-type="icon" class="sti-icon sti-icon-electroportatif sti-item"></span>
		</a>
	</li>
	<li data-hovercolor="#ff395e">
		<a href="#">
			<h2 data-type="mText" class="sti-item">soudage</h2>
			<h3 data-type="sText" class="sti-item">Some more text</h3>
			<span data-type="icon" class="sti-icon sti-icon-soudage sti-item">
			</span>
		</a>
	</li>
	<li data-hovercolor="#37c5e9">
		<a href="http://localhost/electroportatif/">
			<h2 data-type="mText" class="sti-item">coupage</h2>
			<h3 data-type="sText" class="sti-item">Some more text</h3>
			<span data-type="icon" class="sti-icon sti-icon-coupage sti-item"></span>
		</a>
	</li>
	<li data-hovercolor="#ff395e">
		<a href="#">
			<h2 data-type="mText" class="sti-item">rechargement de métaux</h2>
			<h3 data-type="sText" class="sti-item">Some more text</h3>
			<span data-type="icon" class="sti-icon sti-icon-rechargement sti-item">
			</span>
		</a>
	</li>
	<li data-hovercolor="#ff395e">
		<a href="#">
			<h2 data-type="mText" class="sti-item">vêtements & protections</h2>
			<h3 data-type="sText" class="sti-item">Some more text</h3>
			<span data-type="icon" class="sti-icon sti-icon-protections sti-item">
			</span>
		</a>
	</li>
</ul>
</div>


La partie style, à la suite directe de la partie html:

<style type="text/css">
.sti-menu{
	width:1010px;
	position:relative;
	margin:80px auto 0 auto;
}
.sti-menu li{
	float:left;
	width:200px;
	height:300px;
	margin:1px;
}
.sti-menu li a{
	display:block;
	overflow:hidden;
	background:#fff;
	text-align:center;
	height:100%;
	width:100%;
	position:relative;
	-moz-box-shadow:1px 1px 2px #ddd;
	-webkit-box-shadow:1px 1px 2px #ddd;
	box-shadow:1px 1px 2px #ddd;
}
.sti-menu li a h2{
	color:#000;
	font-family: 'Wire One', arial, serif; 
	font-size:18px;
	font-weight:bold;
	text-transform:uppercase;
	position:absolute;
	padding:10px;
	width:180px;
	top:140px;
	left:0px;
	text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
	font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif; 
	font-size:15px;
	font-style:italic;
	color: #111;
	position:absolute;
	top:248px;
	left:0px;
	width:180px;
	padding:10px;
}
.sti-icon{
	width:100px;
	height:100px;
	position:absolute;
	background-position:top left;
	background-repeat:no-repeat;
	background-color:transparent;
	left:50px;
	top:30px;
}
.sti-icon-electroportatif{background-image:url(images/electroportatif.png);}
.sti-icon-soudage{background-image:url(./electroportatif.png);}
.sti-icon-coupage{background-image:url(./../electroportatif.png);}
.sti-icon-rechargement{background-image:url('./wp-content/Themes/Access_Parallax_Pro/css/images/electroportatif.png');}
.sti-icon-protections{background-image:url('/wp-content/Themes/Mon_Theme/css/images/electroportatif.png');}
</style>


Comme vous pouvez le constater j'ai tenté toutes sortes de chemins sous différentes formes pour les url de chaque background-image, et ce en plaçant les images sources à différents endroit de l'arborescence du serveur local, sans succès.

Merci de m'avoir lu, et pour votre aide éventuelle Smiley smile

Spirule
Modifié par Spirule (28 Jul 2017 - 19:49)
Bonsoir,

Initialement le style, quand il n'est pas placé dans un fichier à part, doit être mis dans les balises <head></head>. J'avoue ne jamais avoir testé de mettre du style ailleurs, donc peut-être que ça ne change en rien la lecture, mais la manière "propre" de le faire c'est de placer tout le code CSS dans le head. (toujours quand pas de fichier à part)

Passé cela, quand je lis survol, je cherche de suite le "hover" mais je n'en vois pas dans ton CSS.
Je vois bien les data-hover, mais en cherchant sur google rapidement, je ne vois rien dessus, donc dur de savoir comment ça fonctionne pour t'aider.
<div class="survol">
     <p>Div qui changera de couleur au survol.</p>
</div>


.survol{
     background-color: green;
}
.survol:hover{
     background-color: red;
}


Ensuite, tu dis avoir un problème avec tes background-images, et avoir fait plein de test. Je travaille actuellement sur un site WP, si le background-image est appelé via la page html je dois mettre le chemin en dur car wordpress, colle l'url en cours devant tout ce qui ne commence pas par http:// (/assets/img/bg.jpg donnera http://MON_SITE.fr/la_page_sur_laquelle_je_suis/assets/img/bg.jpg).
Donc :
<html>
<head>
<style>
.survol {
background-image: url('http://MON_SITE/wp-content/themes/NOM_DE_MON_THEME/assets/img/bg.jpg');
}
</style>
</head>
<body>

Si par contre je l'appelle via le fichier CSS (chemin NOM_DE_MON_THEME/style.css), je peux l'écrire comme ça :

.survol {
background-image: url('assets/img/bg.jpg');
}

Et juste une question par acquis de conscience. Es-tu sur de ton chemin ? (les dossiers images qui est dans le dossier CSS ?)
Ne mettez jamais de chemins en dur dans wordpress mais utilisez les fonctions appropriées comme get_template_directory.

Sinon Spirulle tes tests laissent penser que tu ne sais pas toi même où sont les fichiers, pourquoi différents noms de thème ?

Pour les chemins :
images/electroportatif.png /* Dossier image relatif à la css (ce qui est le plus proche de la vérité dans ce que tu as écris je dirai) */
./electroportatif.png /* Image relative à la css (./ inutile) */
./../electroportatif.png /* Dossier parent à la css (./ inutile) */
./wp-content/Themes/Access_Parallax_Pro/css/images/electroportatif.png /* Dossier /wp-content/Themes/Access_Parallax_Pro/css/images/ relatif à la css (./ inutile) */
/wp-content/Themes/Mon_Theme/css/images/electroportatif.png /* Chemin absolu brisera les liens si le site est déplacé donc ne jamais utiliser ça, vraiment. Et m'étonnerai que le dossier Themes soit écrit de cette manière avec une majuscules comme cela. Ca fonctionnera sous windows mais pas avec unix qui est sensible à la case donc évitez simplement les majuscules */

Aussi si tu débutes apprend à utiliser la console/les outils de développement de ton navigateur, tu y trouveras les ressources qui ne sont pas chargé et ça t'aidera à corriger tes erreurs de saisies.
Modifié par bzh (29 Jul 2017 - 11:14)
Merci à tous pour vos réponse!

@chouchine: il y avait les data-hovercolor dans le html, c'est pour ca que tu ne les trouvais pas dans le css.

En fait j'utilise un thème que je n'ai pas conçu entièrement et c'est la première fois pour moi que j'essaie de créer de l'animation sur un site web... en mettant le le <style> dans la page directement je ne comprenais pas comment retrouver le chemin puisque mon css était directement dans la page et non dans le style.css du thème.

En ce qui concerne le changement de couleur de l'image, j'ai précisé "background-color: transparent; " pour la partie Hover et elle s'est finalement affichée comme il fallait au survol.

Aujourd'hui j'ai abandoné l'idée d'utiliser cette méthode d'affichage d'icones et ai opté pour une font-icon avec @font-face (en affichant un menu différent pour le coup, vous verrez ca dans le code qui va suivre) que je n'arrive pas à installer/utiliser malgrès les différents tutos sur le sujet que j'ai trouvé.

Voici le code actuelle:

HTML

<ul class="ca-menu">
                    <li>
                        <a href="#">
                            <span class="ca-icon"><i aria-hidden="true" class="icon-electroportatif">e</i></span>
                            <div class="ca-content">
                                <h2 class="ca-main">Electroportatif</h2>
                                <h3 class="ca-sub">Personalized to your needs</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">S</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Soudage</h2>
                                <h3 class="ca-sub">Advanced use of technology</h3>
                            </div>
                        </a>
                    </li>
</ul>


CSS

.ca-menu li{
    width: 200px;
    height: 300px;
    overflow: hidden;
    position: relative;
    float: left;
    border: none;
    background: transparent;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
    margin-right: 1px;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-right: 1px;
}
.ca-icon{
    color: #000;
    font-size: 90px;
    text-shadow: none;
    line-height: 150px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 0px;
    text-align: center;
    transition: all 200ms linear;
}
.ca-content{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 50%;
    text-align: center;
}
.ca-menu{
    padding: 0;
    margin: 20px auto;
    width: 1000px;
    text-align: center;
}
.ca-sub{
    text-align:center;
    font-size: 10px;
    color: #666;
    line-height: 40px;
    opacity: 0.8;
    position: absolute;
    bottom: 0;
    width: 100%; 
    transition: all 200ms linear;
}
.ca-menu li:hover{
    background-color: #000;
}
.ca-menu li:hover .ca-icon{
    color: #ff2020;
    animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-main{
    color: #ff2020;
    animation: smallToBig 300ms ease;
}
.ca-menu li:hover .ca-sub{
    color: #000;
    background-color: #ff2020;
    animation: moveFromBottom 500ms ease;
}
@keyframes smallToBig{
    from {
        transform: scale(0.1);
    }
    to {
        transform: scale(1);
    }
}


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?6bbppl');
  src:  url('fonts/icomoon.eot?6bbppl#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?6bbppl') format('truetype'),
    url('fonts/icomoon.woff?6bbppl') format('woff'),
    url('fonts/icomoon.svg?6bbppl#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-electroportatif:before {
  content: "\65";
  color: #000
  background-color: transparent;
}


A noter que je suis toujours sous WAMP, et que les fichiers du font icon (*.oet, *.ttf, etc) sont placé dans le répertoire "fonts" lui même placé dans le répertoire "css" de mon thème.

aux admins: le sujet s'écarte finalement un peu du titre original, si c'est gênant je créerai un nouveau topic.

Merci encore pour votre temps et vos conseils!

Spirule
Sujet clos
Aller à