Libre d'esprit » CSS http://libre-d-esprit.thinking-days.net Logiciels libres, joomla, talend, php, virtuemart, templates Joomla Thu, 28 Oct 2010 11:04:51 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 Poste d’intégrateur XHTML/CSS sur Roubaixhttp://libre-d-esprit.thinking-days.net/2009/05/poste-dintegrateur-xhtmlcss-sur-roubaix/ http://libre-d-esprit.thinking-days.net/2009/05/poste-dintegrateur-xhtmlcss-sur-roubaix/#comments Tue, 19 May 2009 21:02:01 +0000 Antoine http://libre-d-esprit.thinking-days.net/?p=298 Mon employeur est à la recherche d’un intégrateur XHTML/CSS sur Roubaix (la silicone ch’ti vallée du nord de la France), c’est pourquoi je transmet cette annonce.

Un bon niveau en XHTML/CSS/Javascript est souhaité.

Internet vous passionne ? Vous rêvez d’intégrer une agence interactive dynamique ?

Si vous êtes intéréssé par l’annonce, ou si vous souhaitez envoyer une candidature spontanée, n’hésitez pas à remplir ce formulaire :

[contact-form] ]]> http://libre-d-esprit.thinking-days.net/2009/05/poste-dintegrateur-xhtmlcss-sur-roubaix/feed/ 0 Une technique CSS sympa de Googlehttp://libre-d-esprit.thinking-days.net/2009/04/une-technique-css-sympa-de-google/ http://libre-d-esprit.thinking-days.net/2009/04/une-technique-css-sympa-de-google/#comments Thu, 16 Apr 2009 20:12:45 +0000 Antoine http://libre-d-esprit.thinking-days.net/?p=242 igooglenoborder1Les feuilles de styles des thèmes iGoogle sont souvent assez innovantes. L’espace horizontal de la page est occupé à 100% quelque soit la résolution de l’écran. Malgré l’absence de fond uni, l’espace est occupé par des images régulièrement espacées avec de légères variations. Il ne s’agit donc pas d’un simple fond répété.

J’ai donc fait un peu « d’ingénierie inverse » sur certains thèmes d’iGoogle pour comprendre comment cela est réalisé. Cette technique ne concerne pas uniquement l’intégration XHTML/CSS. Pour concevoir ce type de page, il faut instaurer un véritable échange créatif entre les artistes, et les techniciens, ce qui manque à mon avis souvent.

La technique consiste à créer une div (appelée « wrap-behind » dans le code présenté ci-dessous) avec comme image de fond une image répétée de façon horizontale (repeat-x), d’une largeur correspondant précisément au tiers de l’image large (300px).

A l’intérieur de cette div, on centre une div (« wrap-front ») occupant la largeur de la page, avec comme image de fond une image non répétée relativement large (900 pixels).

Les deux images ont bien sur été travaillées de façon à ce qu’aucun raccord ne soit visible… Les deux images de fond étant centrées horizontalement, les raccords entre images sont bons quelque soit la largeur de la fenêtre.

igooglewithborders

Voici ci-dessous le code source XHTML/CSS épure d’un thème iGoogle.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
  <head>
    <meta http-equiv="Content-type"
     content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>Technique CSS sympa de google</title>

    <link rel="stylesheet" type="text/css" href="style.css"
    media="screen" title="Normal" />
  </head>
  <body id='global'>
 
    <div id='wrap-behind'>
        <div id='wrap-front'>&nbsp;</div>
    </div>
  </body>
 </html>
#wrap-behind{
background:url('header_tile.jpg') repeat-x top center;
width:100%;
height:250px;
}

#wrap-front{
background:url('header_bg.jpg') no-repeat top center;
height:250px;
z-index:1;
}

html,body{
height:100%;
min-height:100%;
margin:0;
padding:0;
}

PS : Honnêtement, je ne sais pas si cette technique CSS porte un nom. Si c’est le cas, merci de la noter en commentaires … :-)

]]> http://libre-d-esprit.thinking-days.net/2009/04/une-technique-css-sympa-de-google/feed/ 2