1493 sujets

Web Mobile et responsive web design

Remplacer image par texte

Bonjour,

Je suis en train de monter un site et j'ai utilisé Artisteer (bon, désolé personne n'est parfait!! je débute en HTML et CSS..!!!).
Mon thème est donc responsive, du moins en partie... en fait, sur un écran de portable inf à 480px, l’image du header est trop grande.
J'ai déjà réussi à mettre en place une autre image pour un média dont l'écran est inf à 1024px.
Cependant, arrivé à 480px celà ne convient plus.
Plutôt que de refaire un 3ème header pour média de 480px, je voulais mettre du texte à la place.

Mon site possède donc un fichier style.css et un fichier style.responsive.css.

Mon problème est le suivant, je ne sais pas comment faire...

Je pensais mettre dans le header.php un truc du style
<div id="texthead">Titre du site</div>

mais ensuite???!!!

Merci beaucoup.
Hello

Tu as un peu plus de code que ça ? Le CSS, le HTML qui entoure l'élément ? Voir une page en ligne ?
Sinon pourquoi un div pour un titre, pourquoi pas un H1,2,3, etc ?

Sinon tu peux "tricher", avoir ton texte, le remplacer par une image en 1024 et 480+ et esquiver le remplacement sur petits écrans ?

(ps : je peux déplacer le sujet dans mobilité si tu veux plus de réponses ciblées)
Pas de soucis pour déplacer en partie mobilité!

Pour les parties de codes je vais fournir ça...

Sinon, je voudrais pas de h1 ou h2 etc... car c'est déjà use dans le site et du coup je veux un titre avec un style spécifique.

Ce que tu me proposes c'est ce que je veux en fait^^

Une image qui cache le texte jusqu'au format 480px puis que le texte en dessous.
Donc le code...

Dans le header.php

<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">

...

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />

...

<div id="art-main">

<?php if(theme_has_layout_part("header")) : ?>
<header class="clearfix art-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?></header>
<?php endif; ?>




dans le style.css



#art-main
{
   background: #EFEFEF;
   margin:0 auto;
   font-size: 13px;
   font-family: Ubuntu, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   position: relative;
   width: 100%;
   min-height: 100%;
   left: 0;
   top: 0;
   cursor:default;
   overflow:hidden;
}

header, footer, article, nav, #art-hmenu-bg, .art-sheet, .art-slidenavigator > a, .art-checkbox:before, .art-radiobutton:before
{
   display: block;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.art-header
{
   border:1px solid #C779BB;
   margin:20px auto 0;
   height: 250px;
   background-image: url('images/header2.jpg');
   background-position: left top;
   background-repeat: no-repeat;
   position: relative;
   min-width: 1025px;
   max-width: 1536px;
   width: 80%;
   z-index: auto !important;
}

.responsive .art-header 
{
   background-image: url('images/responsive2.jpg');
   background-position: left center;
}



et pour finir le code du responsive, style.responsive.css




.responsive body

{

   min-width: 240px;

}

  

.responsive .art-content-layout img,

.responsive .art-content-layout video

{

   max-width: 100%;

   height: auto !important;

}



.responsive.responsive-phone .art-content-layout img 

{

   float: none !important;

}

    

.responsive .art-content-layout .art-sidebar0, 

.responsive .art-content-layout .art-sidebar1, 

.responsive .art-content-layout .art-sidebar2 

{

   width: auto !important;

}

    

.responsive .art-content-layout, 

.responsive .art-content-layout-row, 

.responsive .art-layout-cell 

{

   display: block;

}

    

.responsive .image-caption-wrapper 

{

   width: auto;

}



.responsive.responsive-tablet .art-vmenublock,

.responsive.responsive-tablet .art-block

{

   margin-left: 1%;

   margin-right: 1%;

   width: 48%;

   float: left;

   -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

   box-sizing: border-box;

}



.responsive .art-responsive-embed 

{

   position: relative;

   padding-bottom: 56.25%;

   /* 16:9 */

	height: 0;

}



.responsive .art-responsive-embed iframe,

.responsive .art-responsive-embed object,

.responsive .art-responsive-embed embed

{

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

}



.responsive .art-header 

{

   width: auto;

   height: auto;

   min-height: 150px;

   min-width: 1%;

   margin-top: 1%;

   margin-right: 1% !important;

   margin-left: 1% !important;

   background-position: left center !important;

   background-size: cover !important;

   background-repeat: repeat !important;

}



.responsive .art-header .art-headline, 

.responsive .art-header .art-slogan 

{

   display: block !important;

   top: 0 !important;

   left: 0 !important;

   margin: 2% !important;

}

    

.responsive .art-header .art-headline a, 

.responsive .art-header .art-slogan 

{

   white-space: normal !important;

}

    

.responsive .art-header .art-shapes .art-textblock 

{

   padding: 2% !important;

   margin: 2% !important;

   line-height: normal;

   background-image: none;

   background-color: rgba(127, 127, 127, 0.7);

   color: #eee !important;

   display: none;

   top: auto;

   left: auto;

   width: auto;

   height: auto;

}



.responsive .art-header .art-shapes .art-textblock *,

.responsive .art-header .art-shapes .art-textblock a:hover,

.responsive .art-header .art-shapes .art-textblock a:visited,

.responsive .art-header .art-shapes .art-textblock a:link 

{

   color: #eee !important;

}

    

.responsive .art-header .art-shapes .art-textblock>div 

{

   display: none;

   top: auto;

   left: auto;

   width: auto;

   height: auto;

   padding: 0 !important;

}



.responsive .art-header .art-shapes,

.responsive .art-header .art-shapes *

{

   position: relative;

   text-align: center;

   -webkit-transform: none !important;

   -moz-transform: none !important;

   -o-transform: none !important;

   -ms-transform: none !important;

   transform: none !important;

}



.responsive .art-header #art-flash-area,

.responsive .art-header .art-shapes>*

{

   display: none;

}



.responsive #art-header-bg 

{

   background-position: center center !important;

   background-size: cover !important;

   background-repeat: repeat !important;

}


...


@media all and (max-width: 800px)

{

    #art-resp, #art-resp-t { display: block; }

    #art-resp-m { display: none; }

}



@media all and (max-width: 480px)
{

    #art-resp, #art-resp-m { display: block; }

    #art-resp-t { display: none; }

    .responsive .art-header { display: none; }

}
ginger973 a écrit :
Bon j'ai beau essayer des dizaines de façons différentes, rien ne marche... Smiley bawling


Essaye juste celle qui marche. Smiley lol

Si on me cherche je suis dehors.
Pourquoi ne pas fixer une largeur minimum avec un min-width ou une div masquée à largeur fixe, un peu avant que ton problème d'affichage arrive ?
Un écran inférieur à 400 et quelques sera tout de même très rare, je ne pense que ça vaille le coup d'aller chercher plus loin non ?
Modifié par AH_creation_site (05 Jul 2013 - 09:49)
Merci pour cette réponse, je vais étudier le problème. Cependant, des écrans en -400 pix, cela concerne presque tous les mobiles en mode portrait (320px), donc je tiens vraiment à avoir une apparence "propre" (il s'agit d'un site type catalogue de vente en ligne).
Sujet clos
Aller à