mercredi 24 septembre 2014

Image d'arrière-plan avec une dimension précise

Je n'ai pas essayé encore et je ne connaissais pas ce truc. Je vais essayer bientôt... Ça me paraît très intéressant.

Trouvé sur http://www.startyourdev.com/css/style-css-background-size

Je développerai cela avec plus de détails quand j'aurai fait des essais


<div style="width:350px; height:80px; border:solid 1px black; padding:10px; border:solid 1px black; 
   background-image:url(exemple.png);"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan sans style spécifique associé 
   </div> 
</div> 

<div style="width:350px; height:80px; border:solid 1px black; padding:10px; 
   background-image:url(exemple.png); background-size:cover;"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan avec la propriété : 
      background-size:cover 
   </div> 
</div> 

<div style="width:350px; height:80px; border:solid 1px black; padding:10px; 
   background-image:url(exemple.png); background-size:contain;"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan avec la propriété : 
      background-size:contain 
   </div> 
</div> 

<div style="width:350px; height:80px; border:solid 1px black; padding:10px; 
   background-image:url(exemple.png); background-size:350px 200px;"> 
    
   <div style="background-color:silver; padding:4px 10px; opacity:0.8;"> 
      Exemple d'arrière plan avec la propriété : 
      background-size:350px 200px 
   </div> 
</div> 

Texte et images dans un cadre (DIV) avec angles arrondis | Encadré

Un simple texte peut être mis facilement dans un cadre aux angles arrondis (c'est-à-dire dans un "encadré"), une fois de plus en utilisant un DIV. On peut y ajouter des images tout simplement, comme d'habitude en utilisant l'Editeur WYSIWYG (mode "rédiger") de Blogger.


<div style="background-color: #91C1D8; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 2px solid rgb(250, 180, 3); height: 100%; padding: 10px; text-align: justify; vertical-align: middle; margin-left: auto; margin-right: auto;">
Votre Texte/contenu ici
</div>


Bon à savoir: On notera que pour éviter l'utilisation de la balise <CENTER> qui n'est pas conforme, j'ai utilisé margin-left: auto; margin-right: auto;

Un blog, anglicisme parfois francisé en blogue et également appelé cybercarnet ou bloc-notes, est un type de site web – ou une partie d'un site web – utilisé pour la publication périodique et régulière d'articles, généralement succincts, et rendant compte d'une actualité autour d'un sujet donné ou d'une profession. À la manière d'un journal de bord, ces articles ou « billets » sont typiquement datés, signés et se succèdent dans un ordre antéchronologique, c'est-à-dire du plus récent au plus ancien....

A blog (a truncation of the expression weblog) is a discussion or informational site published on the World Wide Web and consisting of discrete entries ("posts") typically displayed in reverse chronological order (the most recent post appears first). Until 2009 blogs were usually the work of a single individual, occasionally of a small group, and often covered a single subject...

D'après Wikipedia

dimanche 21 septembre 2014

COINS ou ANGLES ARRONDIS... Ma nouvelle "codebox"

J'appelle cela une "codebox" mais ce n'est rien d'autre qu'un DIV tout-bête avec des angles arrondis permettant d'y afficher du code ou autre chose... Ma précédente "codebox" qui avait été copiée bêtement sur un forum était en effet quelque peu boguée.

<div class="codebox" style="background-color: #3692cf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 0px solid rgb(173, 144, 96); max-height: 100%; overflow: auto; padding: 15px;">
<span style="color: white;">Votre texte ou code ici</span>
</div>

samedi 20 septembre 2014

Image en arrière-plan d'un DIV à coins arrondis (2)

C'est la suite de mon article précédent. Le but premier était d'obtenir un liseret avec un espace autour de mes cadres à angles arrondis. En effet, dans le cas d'une image, cela ne pose pas de problèmes mais quand l'image est en background d'un DIV ou TABLE, il faut user de la propriété background-repeat: no-repeat; sinon l'arrière-plan se répète.



On se rappellera que j'avais un léger problème avec mon image d'arrière-plan dont les angles avaient perdu leur arrondi. J'avais alors suggéré d'envelopper l'ensemble de mon code dans un DIV extérieur. Du coup, je me retrouve avec 3 DIV imbriqués les uns dans les autres. Tout de suite, un problème s'est posé: un décalage des deux DIV d'origine, ce qui m'a obligé à jouer du positionnement: position: relative; top: -200px;


Le DIV principal est en blanc, le second en jaune, le troisième en vert. L'image d'arrière-plan est en noir. En rouge, les nouveautés importantes par rapport au précédent code.


Attention! Les différents paramètres de l'image sont propres à ces images satellite de Wunderground.com. N'en tenez pas compte pour une autre image.

<center>

<div style="background-color: black; padding: 4px; border-radius: 6px; border: 1px solid #07D9FC; height: 400px; text-align: center; width: 550px;">

<div style="position: relative; top: -200px; left: 0px; background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18.1&amp;lon=-63&amp;width=550&amp;height=400&amp;gtt=55&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=3&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); background-repeat: no-repeat; background-position:center center; padding: 0px; border-radius: 6px; border: 0px solid #07D9FC; height: 400px; text-align: center; width: 550px;">

<div style="position: relative; top: 200px; background-color: red; border-radius: 5px; border: 2px solid white; height: 5px; margin-left: auto; margin-right: auto; margin-top: 200px; text-align: center; width: 5px;"></div>

</div>
</div>

</center>


Et ça donne ceci..


Note: ne fonctionne pas si l'image d'arrière-plan est coupée (pour en isoler une partie par exemple). Dans ce cas, il faudrait -s'il s'agit d'une image distante- l'afficher dans un iframe. Par exemple, je veux seulement afficher le ciel de cette webcam (sur mon blog météo):



Code: Pour que l'image ou plutôt l'iframe aie des angles arrondis aussi, il faut donc lui rajouter un style:  <iframe style="border-radius: 6px;" ...
Le DIV est en blanc et l'iframe en noir.

<center>
<center>
<div style="border-radius: 6px; border: 1px solid #07D9FC; height: 205px; padding-bottom: 5px; padding-left: 2px; padding-right: 5px; padding-top: 2px; text-align: center; width: 550px;">
<iframe style="border-radius: 6px; #B7AEAF" frameborder="0" height="230" name="nbbc" scrolling="no" src="http://icons.wunderground.com/webcamramdisk/n/e/nettlebay/4/current.jpg" width="550"></iframe>
</div>
</center>

Image en arrière-plan d'un DIV à coins arrondis

Je n'avais pas encore résolu le problème du padding (espace) entre les images d'arrière-plan de DIV et le cadre. C'est résolu en tâtonnant et cherchant un peu. Ci-dessous, en exemple, une image satellite en arrière-plan et en avant-plan, un petit DIV imbriqué à angles tellement arrondis qu'il apparaît comme un cercle.

En blanc le DIV principal et son CSS, en jaune le DIV imbriqué et son CSS, et en orange l'image de background et ses options. Les éléments nouveaux sont en rouge.

Ce doit être facilement transposable à un tableau (<TABLE>)


<center>

<div style="background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18.1&amp;lon=-63&amp;width=550&amp;height=400&amp;gtt=55&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=3&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); background-repeat: no-repeat; background-position:center center; padding: 4px; border-radius: 6px; border: 1px solid #07D9FC; height: 400px; text-align: center; width: 550px;">
<div style="background-color: red; border-radius: 5px; border: 2px solid white; height: 5px; margin-left: auto; margin-right: auto; margin-top: 200px; text-align: center; width: 5px;">
</div>
</div>

</center>

Malheureusement, on remarque que l'image elle-même n'a plus d'angles arrondis ce qui gâche un peu mon plaisir... Une idée tout de même: supprimer le padding pour cet ensemble et le placer dans un autre DIV avec cette fois un padding de 2 à 4 pixels. À essayer...


vendredi 19 septembre 2014

Texte défilant verticalement pour afficher des news

Chose promise...

Voici un texte défilant via un RSS feed. Ce n'est pas parfaitement au point encore et il y a certainement moyen de faire plus simple... En tous cas, c'est bel et bien possible. Il s'agit ici d'un RSS issu du National Hurricane Center (Centre National des Ouragans, Miami), mais cela pourrait évidemment se faire pour n'importe quel autre RSS de news. Ce texte défilant est en action sur mon blog météo http://nbbcmeteo.blogspot.com/. On peut aussi le faire avec un iframe mais c'est moins pratique car il faut sans cesse changer la hauteur de l'iframe dans le HTML.


  • Le RSS Feed est traité par feedroll.com. C'est un script qui permet d'afficher un flux RSS sur un site ou un blog
  • La balise <MARQUEE> est utilisée pour faire défiler le texte (voir plus bas)
  • Le container <DIV> permet d'avoir une présentation plus sympa avec des angles arrondis (voir plus bas)






Les différentes parties sont colorées en blanc pour le <DIV> (et <CENTER>), en jaune pour <MARQUEE>, vert pour <SPAN> et en noir pour le script issu de feedroll. Bien sûr, de nombreuses valeurs peuvent être modifiées (voir messages précédents).

<center>

<div style="background-color: #333333; border-radius: 6px; border: 1px solid #6F7376; color: white; height: 100%; padding-bottom: 0px; padding-left: -25px; padding-right: -25px; padding-top: 7px; text-align: center; width: 550px;">

<marquee bgcolor="#333333" direction="up" height="100px" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="1" style="text-align: justify;" width="550px">

<span style="font-size: small;">

<script charset="UTF-8" language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&amp;num=3&amp;desc=600&amp;tz=-4&amp;targ=y&amp;utf=y" type="text/javascript"></script><noscript><a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&num=3&desc=600&tz=-4&targ=y&utf=y&html=y">View RSS feed</a></noscript>

</span>
</marquee>
</div>
</center>

jeudi 18 septembre 2014

TEXTE DÉFILANT À PARTIR D'UN FICHIER EXTERNE et DISTANT


Je savais déjà faire un texte défilant et d'ailleurs j'en utilisais un depuis quelques jours sur mon blog météo nbbcmeteo.blogspot.com.

Ne serait-ce que par curiosité, j'ai eu envie d'afficher le texte d'un fichier externe distant, ce qui laisse entrevoir pas mal de possibilités, par exemple, peut-être récupérer des données distantes, météo, news, etc.. (je n'ai pas encore essayé).

J'ai essayé avec <object> mais j'ai eu quelques déboires avec cette fichue scrollbar qui s'affichait systématiquement. Je me suis donc dirigé vers un iframe qui a l'avantage de comporter une option scrolling="no". Attention, la scrollbar s'affiche quand même en édition/mode rédiger mais heureusement disparaît lorsque l'article est publié.

Ci-dessous, le code de la page html externe qui contient le texte externe. Elle est hébergée sur ma Dropbox dans le dossier "Public". En jaune, les valeurs qui peuvent être changées.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<style type="text/css">
a:link {
  text-decoration:none;
  color: #F0F806;
}
a:visited {
  text-decoration:none;
  color: #F0F806;
}
a:hover {
  text-decoration:none;
  color: #F83406;
}
</style>
</head>
<body>
<span style="color: BLACK; background-color: WHITE; font-size: 16px; font-weight: bold;"><strong>BlogNotes: Trucs et Astuces Blogger et HTML, widgets, tools et tips. Aide HTML, modèles, templates, etc...</strong></span>
</body>
</html>

Ci-dessous, le code du texte défilant proprement-dit. Il peut se trouver dans un post, un widget HTML-JAVASRIPT , ou même entre le <body> et le </body> de votre blog (en mode HTML)
<div style="text-align: center;">
<marquee behavior="scroll" direction="left" style="height: 25px; margin-left: -15px; margin-right: -15px; margin-top: 5px; text-align: center; width: 80%;"><iframe frameborder="0" height="25" name="testext" scrolling="no" src="https://dl.dropboxusercontent.com/u/19586410/Blogs/text_defil_blognote.html" width="800px"></iframe></marquee></div>
Je ne garantis pas que tout mon code est parfait, mais ça fonctionne... Il vous faudra peut-être quand même bidouiller et tâtonner pour arriver à votre but.

Il faut notamment modifier width="800px" (longueur de l'iframe) en fonction de la longueur de votre texte. Si vous voulez afficher un texte qui se présente sur plusieurs lignes, il faudra changer les paramètres de hauteur et mettre behavior=up pour avoir un texte qui défile verticalement vers le haut.

Je ferai peut-être un de ces jours un article sur la récupération et le défilement d'un texte via RSS.

lundi 15 septembre 2014

Cadres arrondis pour images, tableaux et autres...

Des cadres arrondis pour toutes sortes "d'objets" par insertion dans un DIV

Je ne détaillerai pas beaucoup le code car les options sont assez nombreuses et évidentes. Prendre garde tout de même de supprimer ou de mettre à zéro les sempiternelles marges par défaut des images de Blogger. J'ai cependant parfois eu des problèmes pour bien centrer mes cadres ce qui explique certaines variantes dans ce code. Le code des cadres arrondis proprement-dit est en jaune. Cela fonctionne aussi avec des vidéos Youtube et des iframes.

Ci-dessous, RSS feed du National Hurricane Center affiché dans un DIV. J'ai utilise parfois la balise <center> pour bien centrer le tout dans mon blog. Mais on peut utiliser d'autres méthodes. De plus, étant très débutant en CSS, je ne garantis pas que mon code soit parfait !
<div style="border-radius: 6px; border: 1px solid #6F7376; height: 100%; text-align: left; width: 100%; margin-left: auto; margin-right: auto;">
<script charset="UTF-8" language="JavaScript" src="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&amp;num=3&amp;desc=600&amp;tz=-4&amp;targ=y&amp;utf=y" type="text/javascript"></script>
<noscript>
<a href="http://www.feedroll.com/rssviewer/feed2js.php?src=http%3A%2F%2Fwww.nhc.noaa.gov%2Findex-at.xml&num=3&desc=600&tz=-4&targ=y&utf=y&html=y">View RSS feed</a>
</noscript>
</div>

Résultat


Ci-dessous, image satellite, mais cela peut fonctionner évidemment avec n'importe quelle image...
<div class="separator" style="clear: both; text-align: center;">
<a href="http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=24&amp;lon=-55&amp;width=750&amp;height=400&amp;gtt=63&amp;num=20&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=1&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=gif&amp;proj=ll" imageanchor="1"><img border="0" src="http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=24&amp;lon=-55&amp;width=750&amp;height=400&amp;gtt=63&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=1&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll" height="293" style="-moz-border-radius: 5px; -moz-box-shadow: 0px 0px 0px transparent; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 0px transparent; background: transparent; border-radius: 5px; border: 1px solid #fdb804; box-shadow: 0px 0px 0px transparent; padding: 2px;" width="550" /></a></div>

Résultat:



Ici, un DIV avec une image satellite en "background", ce qui permet de superposer (imbriquer) un autre mini-DIV à coins arrondis qui marque l'emplacement de mon île (code en noir). Le cadre extérieur est évidemment lui-aussi à coins arrondis. Le DIV principal est une alternative au tableau. Attention, il peut y avoir des problèmes d'arrière-plan si vous mettez un padding à moins peut-être d'utiliser l'attribut no-repeat (pas essayé).
<center>
<div style="background-image: url(http://wublast.wunderground.com/cgi-bin/WUBLAST?lat=18.1&amp;lon=-63&amp;width=550&amp;height=400&amp;gtt=55&amp;num=1&amp;delay=25&amp;key=sat_ir4_bottom&amp;zoom=3&amp;basemap=1&amp;borders=0&amp;theme=WUBLAST_WORLD&amp;extension=jpg&amp;proj=ll); border-radius: 6px; border: 1px solid #07D9FC; height: 400px; text-align: center; text-align: left; width: 550px;">
<div style="background-color: red; border-radius: 5px; border: 2px solid white; height: 5px; margin-left: auto; margin-right: auto; margin-top: 200px; text-align: center; width: 5px;">
</div>
</div>
</center>
Résultat:


Notez que l'on peut tout aussi bien faire cela systématiquement et classiquement pour tous les objets d'un blog avec du CSS et des "class".

Comment changer la couleur du titre des articles ?

La question est rarement posée car les titres d'articles sont des liens et donc ils prennent la couleur des liens....


Pourtant, il arrive parfois que l'on soit obligé d'attribuer une couleur personnalisées pour une raison ou pour une autre. Dans mon cas, sur mon mini-blog météo nbbcmeteo.blogspot.com, le titre est très important dans la mesure où je le considère comme un résumé essentiel de mon article (bulletin météo) mais aussi par sa couleur.

Quand on cliquait sur le titre ou même dans "précédents messages", le titre de mon article apparaissait en blanc comme le texte (plus de lien) et cela occasionnait une rupture dans l'équilibre des couleurs (on aime ou on n'aime pas, mais je les ai voulues comme ça, mes couleurs...). Et ça me tracassait.

J'ai voulu trouver comment changer la couleur pas défaut du titre et j'ai trouvé des réponses "à côté de la plaque" du genre: <<vous n'avez pas besoin d'attribuer une couleur au titre puisque c'est un lien..>> Bon OK, mais ça ne répond pas à la question ! Et comme je suis têtu...


En fait, c'est très simple...

Comme dans l'article précédent, il faut rechercher

h3.post-title, .comments h4 {

et on trouve ceci
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

rajouter color: #afff00; ce qui donne ça
h3.post-title, .comments h4 {
  font: $(post.title.font);
    color: #afff00;
  margin: .75em 0 0;
}
Changez évidemment la couleur #afff00 par ce que vous voulez

#afff00 c'est cette couleur

Pour déterminer et régler mes couleurs, j'utilise Gcolor2 (Linux)

JUSTIFIER UN LONG TITRE d'ARTICLE

Dans un de mes blogs, nbbcmeteo.blogspot.com, j'ai recours à un titre d'article très long, ce qui n'est pas banal, il faut le reconnaître. En fait c'est plutôt un résumé complet qui permet à l'utilisateur de voir d'un coup d’œil la météo du jour. Comme ce mini-blog est de faible largeur (600 px. C'est voulu!), le titre s'étage donc sur plusieurs lignes.

Je voulais donc justifier mon titre pour des raisons esthétiques. Evidemment, pas possible de le faire via l'éditeur de texte ni même en HTML.


Donc, allez dans le modèle HTML de votre blog puis recherchez:
h3.post-title, .comments h4 {
À la fin du code CSS, rajoutez text-align: justify;

Ce qui donne ça:

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
  text-align: justify;

}

Vous pouvez voir ce que ça donne ici nbbcmeteo.blogspot.com

Bien sûr, cela n'a d'intérêt que si vos titres sont longs et s'étagent donc sur plusieurs lignes. Aucun intérêt autrement...

Il est probablement possible de centrer aussi un titre d'article de cette manière (je n'ai pas encore essayé) en tapant text-align: center;



Si vous voulez justifier le texte de vos articles par défaut:

Recherchez
.post-body {
Puis à la fin du code CSS, rajoutez text-align: justify; (comme précédemment)

Ce qui donne ça:

.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
    text-align: justify; 

}

Par contre, méfiez-vous, sur un blog un peu compliqué (notamment avec des listes à puces ou numérotées), la justification peut mettre un peu de pagaïe dans votre mise en page... Personnellement, j'évite...