Impossible d'afficher mes images et ma feuille de style
Bonjour, je suis en train de crée mon propre thème et j'ai un souci, ma feuille de style ne se charge pas, elle est introuvable et mes images aussi. Voici le code de mon header.php et de ma feuille de style, tous dans le même dossier et les images sont au bon endroit.
Header.php :
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet"media="all"type="text/css" href="style.css">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="header">
<div id="logo"><img src="images\header_logo.png" height='26'width='163'/></div>
<div id="rubrique"><ul>
<li>Acceuil</li>
<li>Acceuil</li>
<li>Acceuil</li>
</ul></div>
</div>Style.css :
@charset "utf-8";
/*
Theme Name: 2DI
Theme URI:
Description:
Version: 1.0
Author: 2DI | Codec from Dunk
Author URI:
Tags:
*/
body {
background-color: #ededed;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
#header{
background-image:url(images/header_bg.png);
height: 58px;
}
#logo{
position: absolute;
margin-left: 33px;
margin-top: 15px;
height: 26px;
width: 163px;
background-image:url(images/header_logo.png);
}J'ai besoin d'aide SVP !
7 réponses
Bonjour ,
Tes images ne se chargent pas car ton css ne se charge pas c'est normal!
Après pour ta feuille de style il faut qu'elle soit à la racine de ton thème et qu'elle soit appelé avec le "langage" propre à wordpress donc remplace
<link rel="stylesheet"media="all"type="text/css" href="style.css"par :
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />9a devrait marcher si ta feuille css est placé au bon endroit ( à la racine du thème).
Salut,
Pour les images il faut que tu y mette le chemin complet.
Pour le moment toi tu doit avoir cela :
images/logo.pnget il faut le remplacer par l’arborescence complète de Wordpress, c'est à dire :
wp-content/themes/ton_themes/images/logo.pngOu alors avec le "Bloginfo" :
<img src="<?php bloginfo('template_directory'); ?>/images/toto.png" />Au passage dans ta div avec l'id logo tu n'est pas obliger de mettre une image sachant qu'elle est en background dans cette même div ;)
Merci beaucoup pour votre aide !, ca fonctionne le css est bien la mais les image fait par html ne se charge pas.. Y-a-t'il aussi un methode special de wordpress pour charge une image ?
Bonjour à tous !!
Je débute complétement dans le web et ses langages, je suis tomber sur l'un de vos tuto sur votre chaine, qui ma bien aider a concevoir mon site! Vraiment merci beaucoup ! vous êtes de super pédagogue en la matière !
Bref revenons en à nos moutons, l'info reste l'info ! je suis confronté au problème cité ci dessus, j'ai fais les essais dont vous parlez mais rien ne change pour moi... toutes les images que j'ai dans mon dossier /images de mon thèmes ne s'affichent pas...
Je vous fournit donc le lien : Mr/mlle
Une image de rèf du site que j'ai construit en local avant de le publier : Lien
La feuille de style (qui est bien relier aussi car tous mes paramètres sont prix en compte niveau mise en page)
...*/
/* Template index */
/*HEAD*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,from,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; text-decoration:none; color:#000000;}
h1{ font-size:17px; margin-bottom:5px;}
a{ text-decoration:none; color:#000000;}
#head{ background:url(/wp-content/themes/Maxthem/images/fond_head.png) repeat-x; height:379px; }
#head #paysage{ position:relative; width:1200px; margin:0 auto; background:url(/wp-content/themes/Maxthem/images/header.png) top left no-repeat; height:379px; }
#head #paysage #menu{ position:absolute; top:342px; left:0px; }
#head #paysage #menu ul{}
#head #paysage #menu ul li{float:left; width:auto; height:35px; list-style:none; }
#head #paysage #menu ul li a{ text-decoration:none; color:#f5e8f7; float:left; margin-left:40px; width:inherit; font-size:14px; font-family:futura; text-transform:uppercase; }
#head #paysage #menu ul li a:hover {color:#c77972;}
#head #paysage #menu ul li a span{ display:block; font-size:10px; text-transform:lowercase; text-decoration:overline }
#head #paysage #menu ul #search { width:auto; height:35px; list-style:none; text-decoration:none; margin-left: 20px; margin-top:7px; }
body{ text-align:center; }
.son{ display:block; background:#FFF; height:800px; width:1200px; margin-left:300px; }
.son .img{background:url(/wp-content/themes/Maxthem/images/enter.gif); height:800px; width:613px; margin-top:120px; margin-left:360px;}
#base { background:#c77972; margin:0 auto; text-align:left; }
#col21{ background:url(/wp-content/themes/Maxthem/images/Fond.png) repeat-y top left; width:1200px; margin-top:0px; margin-left:360px; }
#col21 .post-top{ background:url(/wp-content/themes/Maxthem/images/post_top.png); width:1150px; top:15px; position:relative; height:30px; }
#col21 .post-top h1{ text-decoration:none; text-align:center; font-family:Futura; font-size:21px; font-weight:bold; text-transform:uppercase; height:44px; line-height:70px; padding-top:40px; color:#000000 !important; }
#col21 .post-cat{ position:absolute; top:35px; left:100px; font-size:13px; color:#FFF; }
#col21 .post-top .post-date{ text-decoration:none; position:absolute; top:35px; left:1050px; color:#FFF !important; font-size:13px; }
#col21 .post-top.articles{background-color:#8420a1;}
#col21 .post-top.articles h1 a, #col21 .post-top.articles .post-cat a,#col21 .post-top.articles{ color:#8420a1; }
#col21 .post-top.news{background-color:#3a22ec;}
#col21 .post-top.news h1 a, #col21 .post-top.news .post-cat a,#col21 .post-top.news{ color:#3a22ec; }
#col21 .post-top.sortie{background-color:#f6ef3b;}
#col21 .post-top.sortie h1 a, #col21 .post-top.sortie .post-cat a,#col21 .post-top.sortie{ color:#f6ef3b; }
#col21 .post-top.RbrauC{background-color:#d5b2a9;}
#col21 .post-top.RbrauC h1 a, #col21 .post-top.RbrauC .post-cat a,#col21 .post-top.RbrauC{ color:#d5b2a9; }
#col21 .post-top.plans{background-color:#f8c14a;}
#col21 .post-top.plans h1 a, #col21 .post-top.plans .post-cat a,#col21 .post-top.plan{ color:#f8c14a; }
#col21 .post-content{ width:1150px; color:#000000 !important; text-decoration:none; padding-top:90px; margin-left:25px; text-align:center;}
#col21 .post-content .box{ height:800px;}
#col21 .post-content .box .post-show1 { float:left; margin-left:150px; }
#col21 .post-content .box .post-show2 { float:left; margin-left:150px; }
#col21 .post-content .box .post-show3 { float:left; margin-left:150px; margin-top:100px; }
#col21 .post-content .box .post-show4 { float:left; margin-left:150px; margin-top:100px; }
#col21 .post-bot{ background-image:url(/wp-content/themes/Maxthem/images/post_top.png); height:25px; width:1150px; margin-bottom:10px;}
.nopost { line-height:60px; height:700px; text-align:center;}
/*FOOTER*/
#footer { background:url(/wp-content/themes/Maxthem/images/Fond.png) repeat-y top left; width:1200px; margin-top:0px; }
.foot { text-decoration:none; color:#FFF; margin-left:360px; margin-top:40px; list-style:none; }Et le header :
<?php
/**
* @package Mr/mlle
* @subpackage Mbd3d.com
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives(array('type' => 'monthly', 'format' => 'link')); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
<div id="head">
<div id="paysage" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;">
<div id="menu">
<ul>
<li><a class="intro" href="http://mbd3d.com/?page_id=92">La Casa<span>...</span></a></li>
<li><a class="tmc" href="http://mbd3d.com/?cat=647">The magic Column<span>Of Romain Brau</span></a></li>
<li><a class="fmh" href="http://mbd3d.com/?cat=8">From My Heart<span>Articles</span></a></li>
<li><a class="yb" href="http://mbd3d.com/?cat=658>">Yo Bitches!<span>News flash</span></a></li>
<li><a class="edit" href="http://mbd3d.com/?cat=224">Editorials<span>photoshoot</span></a></li>
<li><a class="mg" href="http://mbd3d.com/?cat=930">Mauvais gout<span>Sorties</span></a></li>
<li><a class="lf" href="#">La familla<span>Le staff</span></a></li>
<li><a class="cm" href="#">Call me<span>contact us</span></a></li>
<li id="search">
<label for="s"><?php _e(); ?></label>
<form id="searchform" method="get" action="<?php bloginfo('url'); ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
</div>
</form>
</ul>
</div>
</div>
</div>
</head>
<body <?php body_class(); ?>>
<div id="base">
<div id="col21">
<div id="content">
<!-- end header -->Me voila un peu perdus après avoir chercher et tester plusieurs tentative de différent lien, manière d'appeler l'image etc je m'en remet a vos idées et surtout
iLikeDesign
Tu semble avoir trouver une solution a ton problème, mais elle n'apparait pas dans les commentaires si tu pouvais me dire ce que tu as fait pour remédier a ce problème ?