Insérer des images dans header.php (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 48)
  • Auteur
    Messages
  • #495806
    Tonks84
    Membre
    Chevalier WordPress
    220 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 3.1
    – Version de PHP/MySQL : /
    – Thème utilisé : Bueno
    – Extensions en place : Aucune
    – Nom de l’hebergeur : OVH
    – Adresse du site : http://www.arles-avignon.com/

    Problème(s) rencontré(s) :

    J’aimerais insérer les 3 images suivantes à la droite de la barre de recherche, mais quand j’essaye de le mettre quelque part, soit elles sont au dessus de tout donc la barre noire est trop grosse, soit elles sont juste au dessus de ma bannière.

    <img class="title" src="http://www.arles-avignon.com/fr.gif" alt="Arles-Avignon.com">
    <img class="title" src="http://www.arles-avignon.com/uk.gif" alt="Arles-Avignon.com">
    <img class="title" src="http://www.arles-avignon.com/es.gif" alt="Arles-Avignon.com">

    Merci !

    #774386
    Tonks84
    Membre
    Chevalier WordPress
    220 contributions

    S’il vous plait, c’est important.

    #774387
    luciole135
    Participant
    Maître WordPress
    13714 contributions

    Je ne suis pas spécialiste du HTML, ils se reconnaîtront, mais je doute fort qu’avec ce simple code qui que ce soit puisse vous aider.

    Il faudrait au moins le code de page où se trouve votre barre de recherche.

    Déjà, sur les fichiers de votre thème, recherchez cette page (où se trouve cette barre de recherche), quand vous l’avez trouvé postez-là.

    #774388
    Tonks84
    Membre
    Chevalier WordPress
    220 contributions







    <title></title>


    <link rel="stylesheet" type="text/css" href=" » media= »screen » />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php if ( get_option('woo_feedburner_url') «  » ) { echo get_option(‘woo_feedburner_url’); } else { echo get_bloginfo_rss(‘rss2_url’); } ?> » />
    <link rel="pingback" href=" » />

    <!--[if IE 6]>-->
    <script type="text/javascript" src="/includes/js/pngfix.js »>
    <script type="text/javascript" src="/includes/js/menu.js »>
    <link rel="stylesheet" type="text/css" media="all" href="/css/ie6.css » />


    <!--[if IE 7]>-->
    <link rel="stylesheet" type="text/css" media="all" href="/css/ie7.css » />











    <body >

    <div id="container">

    <div id="navigation">

    <div class="col-full">
    ‘menu_order’, ‘container’ => ‘ul’, ‘menu_id’ => ‘catnav’, ‘menu_class’ => ‘nav fl’, ‘theme_location’ => ‘secondary-menu’ ) );
    } else {
    ?>
    <ul id="catnav" class="nav fl">



    </ul><!-- /#nav -->

    <div id="topsearch" class="fr">
    <form method="get" id="searchform_top" action=" »>
    <input type="text" class="field" name="s" value=" » onfocus= »if (this.value ==  ») {this.value =  »;} » onblur= »if (this.value ==  ») {this.value =  »;} » />
    <input type="submit" class="submit" name="submit" value=" » />
    </form>
    </div><!-- /#topsearch -->

    </div><!-- /.col-full -->

    </div><!-- /#navigation -->

    <div id="header" class="col-full">

    <div id="logo">

    <a href=" » title= » »><img class="title" src="<?php if ( get_option('woo_logo') «  » ) { echo get_option(‘woo_logo’); } else { bloginfo(‘template_directory’); ?>/images/logo.png » alt= » » /></a>


    <span class="site-title"><a href=" »></a></span>

    <h1 class="site-title"><a href=" »></a></h1>


    <span class="site-description"></span>

    </div><!-- /#logo -->

    <div id="pagenav" class="nav fr">
    ‘menu_order’, ‘container’ => ‘ul’, ‘theme_location’ => ‘primary-menu’ ) );
    } else {
    ?>
    <ul>


    <li class="b « ><a href=" »></a></li>


    <li class="rss"><a href="<?php if ( get_option('woo_feedburner_url') «  » ) { echo get_option(‘woo_feedburner_url’); } else { echo get_bloginfo_rss(‘rss2_url’); } ?> »></a></li>
    </ul>

    </div><!-- /#pagenav -->

    </div><!-- /#header -->

    J’ai essayé de le mettre à toutes les positions, impossible :(

    #774389
    Anonyme
    Invité
    Maître WordPress
    34072 contributions

    Ce message a été supprimé suite à la demande de l’auteur.

    #774390
    Tonks84
    Membre
    Chevalier WordPress
    220 contributions

    Et bien alors à gauche.

    #774391
    wasicu
    Membre
    Maître WordPress
    2752 contributions

    C’est pourquoi faire les images ?

    Si c’est un menu avec des liens, alors il faut encadrer ça dans un :

    • Arles-Avignon.com
    • Arles-Avignon.com
    • Arles-Avignon.com

    (Au passage les alt devraient être plus pertinents. Arles-Avignon.com United-Kingdom)

    Si c’est juste pour faire joli tu remplace l’ ul par un div par exemple et puis les Li par des span.

    Après tu les positionne en css et joue avec le z-index pour qu’elles s’affichent devant l’image de ton header. et

  • présentent l’avantage de pouvoir être placés inline (pas les uns au-dessus des autres.)
#774392
Tonks84
Membre
Chevalier WordPress
220 contributions

Non, ce sont de vraies images pour un lien direct vers le site de la langue.
Et je suis d’accord avec toi pour la description, mais c’est juste que là c’est pour tester le truc.

Pour en revenir au problème, les images sont toujours un « étage » au dessus de la ligne …

#774393
Guy
Participant
Maître WordPress
14817 contributions

il faut le placer juste avant

Si c’est mal placé, c’est qu’il faut renseiger les styles css. Mais c’est la bonne place pour le mettre à la gauche de la recherche.

<ul id="langues">
<li><a href=""><img class="title" src="http://www.arles-avignon.com/fr.gif" alt="Arles-Avignon.com"></a></li>
<li><a href=""><img class="title" src="http://www.arles-avignon.com/uk.gif" alt="Arles-Avignon.com"></a></li>
<li><a href=""><img class="title" src="http://www.arles-avignon.com/es.gif" alt="Arles-Avignon.com"></a></li>
</ul>
<div id="topsearch" class="fr">
<form method="get" id="searchform_top" action=" »>
<input type="text" class="field" name="s" value=" » onfocus= »if (this.value ==  ») {this.value =  »;} » onblur= »if (this.value ==  ») {this.value =  »;} » />
<input type="submit" class="submit" name="submit" value=" » />
</form>
</div><!-- /#topsearch -->

#774394
Tonks84
Membre
Chevalier WordPress
220 contributions
#774395
Guy
Participant
Maître WordPress
14817 contributions

ok, c’est bien la bonne place, il faut adapter les styles. Je suis pas super bon la dedans, je vais essayer de voir ce qu’il faut mettre., mais si quelqu’un connait la solution….

#774396
Tonks84
Membre
Chevalier WordPress
220 contributions

Oui, si quelqu’un passe par là, je suis preneur !

#774397
shamateur
Membre
Padawan WordPress
82 contributions

C’est à gauche de la barre de recherche que tu veux placer tes drapeaux c’est bien ça ?

Si c’est ça je verrais bien un positionnement absolu de la balise

    , et les

  • qui flottent à gauche avec une taille fixe…

    Ce qui donnerais à peu près pour le CSS (à vu de nez):

    div.col-full {position: relative}

    ul#langues {position:absolute;right:400px;top:35px;}
    ul#langues li {float:left; margin-right: 5px; width:24px; height:24px; }

    Tout dépend de la taille des images en fait…

#774398
Tonks84
Membre
Chevalier WordPress
220 contributions
#774399
Guy
Participant
Maître WordPress
14817 contributions

hihi, chacun va donner son petit truc

à la meme place que le précédent, le

et donc le

de la fin ne sont peut être pas nécéssaires.

<div class="flag_div">
<ul class="nav">
<li class="flag_btn"><a href=""><img src="http://www.arles-avignon.com/fr.gif" alt="Arles-Avignon.com"></a></li>
<li class="flag_btn"><a href=""><img src="http://www.arles-avignon.com/uk.gif" alt="Arles-Avignon.com"></a></li>
<li class="flag_btn"><a href=""><img src="http://www.arles-avignon.com/es.gif" alt="Arles-Avignon.com"></a></li>
</ul>
</div>

et dans styles.css

.flag_div{ float:left; margin:10px; }
.flag_btn { margin:5px; }

15 sujets de 1 à 15 (sur un total de 48)
  • Vous devez être connecté pour répondre à ce sujet.