Aujourd'hui, je casse mon blog :(

    Bon moi j'y arrive pas, mais il y en a d'autres qui y arrivent très bien, eux. Voyez plutôt le blog de Karsanti (pas de lien direct au cas où la plus choupinette des modettes arriverait à le réparer, mais un clic sur la nimage) :



    Alors, comment arriver à ce résultat spectaculairement désastreux ? Ben en collant dans la css des trucs qui n'ont rien à y faire, comme du html ou du Javascript. Un coup d'oeil à la css de Karsanti (bon, juste le début des lignes parce que c'est plein d'espaces insécables et que j'ai la flemme de les enlever) ?

/* @start_terminal */




l Promotions');">Hotel Promotions</a><br />
              <a href="http://mirage.mgmmiragevacations.com/?SPC-Mirage" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Air/Hotel Packages');">Air/Hotel Packages</a><br />
        <a href="/entertainment/index.aspx" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Entertainment');">Entertainment</a><br />
    </td>
  </tr>
</table>


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Las Vegas Hotel - Mirage </title>
<script type="text/javascript" src="../include/commoncode.js"></script>
<link rel="stylesheet" href="../include/styles.css" type="text/css" />
<meta name="Description" content="The Mirage is a Las Vegas hotel like no other. In the heart of Las Vegas, the Mirage has a wide variety of rooms from luxury penthouse to more affordable guest rooms that are anything but standard. Make reservations online." />
<meta name="Keywords" content="Resort, Hotel, Room, Reservations, Las Vegas" />
<LINK rel="alternate" TYPE="application/rss+xml" TITLE="Special Offers" HREF="http://www.mgmmirage.com/feeds/rss/mirage/hotel.xml" />
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
   <td><table width="760" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
     <td width="1"><img src="../images/shared/spacer.gif" width="1" height="97" alt="" /></td>
     <td width="759" valign="top"><table width="759"  border="0" align="center" cellpadding="6" cellspacing="0">
      <tr>
        <td width="239"></td>
        <td width="520" align="right" class="topnavigation"><a href="javascript:RoomWin();" name="&lid=RoomRes_Top" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Hotel Reservations');">Hotel Reservations</a>&nbsp; | &nbsp;<a href="/promotions/index.aspx" name="&lid=Promotions_Top" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Hotel Promotions');">Hotel Promotions</a>&nbsp; | &nbsp;<a href="http://mirage.mgmmiragevacations.com/?SPC-Mirage" onmouseout="return SetStatusbar('');" name="&lid=Air_Top" onmouseover="return SetStatusbar('Air/Hotel Packages');">Air/Hotel Packages</a>&nbsp; | &nbsp;<a href="/entertainment/index.aspx" name="&lid=Entertainment_Top" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Entertainment');">Entertainment</a></td>
      </tr>
      <tr>
        <td width="239"><a href="http://www.mirage.com" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('The Mirage Las Vegas');"><img src="/images/shared/mirage_logo.gif" alt="The Mirage Las Vegas" width="119" height="47" border="0" /></a></td>
        <td width="520" align="right"><img src="/images/shared/remixed.gif" alt="REMIXED" width="138" height="47" /></td>
       </tr>
     </table></td>
  </tr>
</table>

</td>
  </tr>
  <tr>
    <td><table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td> <table border="0" cellpadding="0" cellspacing="0" align="center">
            <tr> <td width="412" align="right" style="background-image:url(/images/hotel/main_back_left.jpg)" class="imageleft"><img src="/images/shared/spacer.gif" width="152" height="155" alt="" /></td>
              <td width="456" style="background-image:url(/images/hotel/hotel_petite_suite.jpg"><span class="imageright"><span class="imageleft"><img src="/images/hotel/hotel_petite_suite.jpg" alt="Hotel" width="456" height="155" /></span></span></td>
              <td width="412" style="background-image:url(/images/hotel/main_back_right.jpg)" class="imageright"><span class="imageleft"><img src="/images/shared/spacer.gif" width="152" height="155" alt="" /></span></td>
              </tr>
          </table>
        </td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="760" border="0" align="center" cellpaddi
      <tr>
        <td width="151"><table width="151" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftnavigation"><a href="javascript:RoomWin();" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Reservations');">Hotel Reservations</a><br />
        <a href="/promotions/index.aspx" onmouseout="return SetStatusbar('');" onmouseover="return SetStatusbar('Hote

    C'est-y pas beau ?
par Le Gros CSS
ajouter un commentaire commentaires (1)   

Aujourd'hui, je resserre mes liens :$

    Bon. « body », c'est fait. On peut encore bidouiller dans cette ligne, mais si on part dans les fioritures on va jamais s'en sortir. Il est temps d'aller voir ce qui se passe dans les lignes suivantes.

    Généralement, sous la ligne « body », on trouve deux lignes énigmatiquement intitulées « a » et « a:hover ». Dedans, il y a, dans la plupart des cas, trois commandes : « text-decoration », « color » et « font-size ».
    Mais à quoi donc qu'elles servent ces deux lignes ? A personnaliser l'apparence des liens présents sur le blog. De tous les liens, à moins que d'autres attributs soient spécifiés plus bas dans la feuille de style. La ligne « a » personnalise l'apparence du lien tel quel, tandis que « a:hover » fera éventuellement évoluer cette même apparence au survol du lien (c'est à dire, pour les vraiment très nuls, quand le pointeur de la souris il passe dessus). Et à quoi ça sert de personnaliser ? Bah, à attirer l'attention sur les liens et à se compliquer l'existence faire joli.

    Pour attirer l'attention sur un lien, on peut donc jouer sur sa couleur. Des beaux liens bien rouges dans un environnement tout vert ou tout bleu, ça l'fait. On peut aussi les souligner. Ou non. Ou leur assigner une police différente (jamais tenté, mais je ne suis pas sûr que le résultat soit très esthétique... mais sait-on jamais). Ou les mettre en gras. Ou en italique. Ou demander à ce qu'ils soient plus gros que le reste du texte. Ou. Ou. Ou. Hoooooooooooooooouuuuuuuuuuuuuuuuuuuu :$

    Pardon, je m'égare.

    Et tout ça, ça se passe dans la ligne « a ».

    Prenons une ligne « a » de base, celle-ci par exemple : a { text-decoration:underline; color:#336699; font-size:110%; } et décryptons-la. Les liens seront soulignés, bleu foncé, et d'une taille légèrement supérieure au reste du texte. Bon, pour la couleur, débrouillez-vous avec ces codes par exemple. Pour la taille aussi, hein. Mais pour le reste, voici quelques trucs :
    Pour souligner : text-decoration: underline;
    Pour ne pas souligner : text-decoration: none;
    Pour mettre en gras : font-weight: bold;
    Pour mettre en italiques : font-style: italic;
    Pour assigner une police différente : font-family: Ma Police;

    La ligne « a:hover », maintenant. Elle marche tout pareil. On peut s'amuser tout pareil dedans. Tiens, une autre commande rigolote :
    Pour faire clignoter : text-decoration: blink;

    Oh, et j'allais oublier... mais c'est que j'ai toujours ma bête main en guise de curseur quand je passe sur un lien... et si je mettais le même curseur que pour le reste du blog ? Celui que j'ai appris à mettre là ?
    Ben c'est tout pareil. Je rajoute dans ma ligne « a » ce bout de code : cursor: url(http//url_de_mon_curseur), auto;. Et, voyez si c'est chouette le css, je peux même choisir un curseur différent !

    Jetons un oeil sur mes lignes « a » et « a:hover » et décryptons-les :
a { text-decoration:underline; color:#CD3333; font-style: italic; font-size:100%; cursor: url(http://idata.over-blog.com/1/99/25/61/kittie2-fixe.gif), auto; }
a:hover { text-decoration:blink; font-weight: bold; font-style: normal; color:#CD3333;}

     Mes liens sont donc 1, soulignés, 2, d'un joli rouge, 3, en italiques, 4, de la même taille que le reste du texte, et 5 le curseur change d'apparence quand il passe dessus.
    Quand je pointe sur mes liens1, le texte clignote, 2 les lettres sont en gras, 3, elles ne sont plus en italique et 4, les liens survolés apparaissent toujours en rouge.

    Bon d'accord c'est très moche comme résultat, mais c'était juste histoire de vous donner un petit aperçu de ce qu'on peut faire dans ces deux lignes...
    Et encore rien cassé... j'en suis à me demander si je vais y arriver un jour...
par Le Gros CSS
ajouter un commentaire commentaires (0)   

Aujourd'hui, je change mon curseur :-)

    Puisque nous sommes dans le « body », restons-y, parce qu'y en a marre de cette bête flèche blanche qui se traîne sur notre écran pour se transformer en une non moins bête main à l'index pointé quand elle croise un lien, l'air de dire, « Oh, un lien ! Vite, titille-le ! ».
    Pfffffff.

    Alors que des curseurs, il y en a de si jolis :-) Des curseurs mitraillette et des curseurs pokemon et des curseurs bonnet de Papa Noël et des curseurs petit papillon qui volette, insouciant, dans les prairies printanières et des curseurs lasagnes hallucinogènes et des curseurs schtroumpf grognon, bref, des curseurs d'un goût qui ne saurait être remis en doute...

    Première étape, trouver son curseur. Faudrait pas s'attendre à ce que je vous file les bonnes zadresses, débrouillez-vous. Deuxième étape, héberger son curseur quelque part et récupérer l'url, le truc en http:// parce que là aussi c'est ça qui va servir.

    INTERLUDE
    Ripite after mi :
    Un curseur en .ani ne sera visible que sous Internet Explorer (pour une fois que c'est Firefox qui fait un caprice, voilà qui se devait d'être signalé).
    Un curseur en .cur se verra sous tous les navigateurs.
    Un curseur en .gif, un coup il marchera, un coup il marchera pas, c'est Over-FAQ qui l'a dit.

    On reprend.

    Donc, j'ai une ligne « body » et une url de curseur. Comme pour mon fond, ne me reste plus qu'à mettre l'un dans l'autre, en respectant la syntaxe propre au css sinon, ben ça marche pas.

    Ma ligne « body » est maintenant la suivante (souligné, ce que je viens de rajouter) :

body    { margin:0px; padding:0px; background-image: url(http://img217.imageshack.us/img217/4303/fondgroscsspalext0.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed; font-family: Courier New, Verdana, Helvetica, Arial, sans-serif; font-size:small; cursor: url(http://img525.imageshack.us/img525/2606/pencilpc5.gif), auto; }

    C'est pas plus joli comme ça ? Franchement ?

    Bon et avec tout ça, j'ai toujours pas réussi à casser mon blog, moi. Mais j'y arriverai, foi de Gros CSS !


par Le Gros CSS
ajouter un commentaire commentaires (1)   

Aujourd'hui, je change mon fond :-)

    Bon.
    Le plus simple c'est encore de prendre un pot de peinture, ou un bout de papier peint de la chambre du petit frère, ou un poster de Richard Clayderman et d'y aller franco.
    Maintenant, si on veut se compliquer la vie, on peut passer par le CSS.

    Et où ça dans le CSS ? Dans le « body ». Bon ça au moins c'est clair.

    Alors. Examinons deux lignes « body » de plus près. Celles du design « American Beauty Red »...

body {margin:0px; padding:0px; background-image:url(./pics/mosaique.png); color:#CC0000; font-family:Verdana, Helvetica,Arial,sans-serif; font-size:x-small;}

    ... et celle de « Funky ».

body    { font-family: Verdana, Helvetica, Arial, sans-serif; font-size:x-small; color:#000; background:#FFF; }

    Dans ces lignes, on trouve :
1, des margin et du padding, pffff. Le genre de truc qui explose qu'on y touche pas.
2, la police par défaut, celle qui apparaîtra lorsqu'aucune autre police (font-family) ni taille de police (font-size) n'est spécifiée (ça généralement on n'y touche pas non plus, on bidouille directement là où on veut changer).
3, la couleur de la dite police par défaut (color). Pas très important non plus.
4, et des background. Ha ben voilà que ça devient intéressant, cette histoire.

Admettons que je veuille, comme ça, sur un coup de tête, que le fond de mon blog soit noir au lieu d'arborer une jolie mosaïque Over-bloguienne dans des tons rouge sombre du plus bel effet (le design « American Beauty Red ») ou au lieu d'être d'un blanc immaculé comme ces neiges hymalayesques où même le yéti n'a pas posé ses pattounes (le design « Funky »). Il me suffit de changer respectivement « background-image:url(./pics/mosaique.png); » et « background:#FFF; » par ça : « background:#000; »

Bon. Ça c'est fait. Maintenant, pour mettre une image de fond. Déjà, deux cas de figure. Soit c'est une grande nimage qui va couvrir tout le fond du bloug, comme chez moi, soit c'est une texture qui va se répéter pour composer un fond en mosaïque, comme le fond d'origine de « American Beauty ». Si le fond l'est grand, pas question de l'héberger chez Over-Blog, qui a une fâcheuse tendance à rapetisser les nimages. Faut passer par un hébergeur extérieur. Si le fond l'est petit, on héberge où on veut. Tout ce qui importe c'est qu'à l'arrivée on ait une url, une adresse quoi, un truc qui commence par http:// et qu'on va précieusement garder dans son presse-papier parce que c'est de ça qu'on va se servir.
J'ai mon url... j'ai ma ligne « body »... ne reste plus qu'à les mettre l'une dans l'autre. En clair, de changer respectivement « background-image:url(./pics/mosaique.png); » et « background:#FFF; » par ça : « background-image: url(http://url_de_mon_image); »
Si mon image est destinée à se répéter façon mosaïque, plus grand chose à faire sinon rajouter éventuellement dans la ligne ça : « background-attachment: fixed; » si j'ai envie que mon fond ne défile pas en même temps que mes articles (comme chez moi, quoi).
Si c'est une grande nimage qui couvre tout le fond du bloug, ça serait peut-être pas mal de penser à ceux qui ont une résolution d'écran supérieure à la mienne et qui la verront se répéter... je vais donc rajouter ça : « background-position: center; background-repeat: no-repeat; » et mon « background-attachment: fixed; » si j'ai envie, na.

C'est aussi dans la ligne « body » qu'il faut travailler pour mettre un joli curseur personnalisé en forme de pokémon ou de cuisse de poulet qui clignote, mais ça, hein, ça sera pour une autre fois.

Moi, je retourne casser mon blog !
par Le Gros CSS
ajouter un commentaire commentaires (1)   

huhu

    J'ai dû faire une erreur quelque part...
par Le Gros CSS
ajouter un commentaire commentaires (1)   

Personnaliser le design de base « Ray »

    Opération qui s'effectue à l'aveuglette, d'où le nom de cette feuille de style.

    Une seule solution :

Configurer > Options globales > Réglages avancés > Supprimer mon blog.

par Le Gros CSS
ajouter un commentaire commentaires (2)   

Merci M'sieur Overblog

    Oui, merci de m'accueillir en votre sein chaleureux...
    De vous je saurai me montrer digne (enfin, on va essayer, hein, parce que le css, j'y comprends rien de rien).
    Merci aussi à vous, premiers visiteurs, me voilà tout zému, à m'en mélanger les colonnes !
par Le Gros CSS
ajouter un commentaire commentaires (6)   
 
Créer un blog sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus