RSS

Tutoriaux

Améliorer la pagination de votre blog avec CSS, un must!

Tutoriaux - CSS

Voici aujourd'hui un petit cours de design pour vos paginations à l'aide de CSS. Depuis l'arrivée des blogs, que ce soit avec Wordpress, Dotclear, Joomla ou tout autres services en ligne tel Blogspot, les systèmes de pagination on fait une entré fracassante sur le web. En fait, ce système existait déjà bien avant, par contre, leur utilisations était beaucoup plus discrète. Voici donc aujourd'hui, une série d'exemple code inclus pour améliorer la présentation de vos paginations.

Digg Style

HTML

<div class="digg">
    <span class="disabled"> < </span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2"> > </a>
</div>

CSS

DIV.digg {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    TEXT-ALIGN: center;
}
DIV.digg A {
    BORDER-RIGHT: #aaaadd 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #aaaadd 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #aaaadd 1px solid;
    COLOR: #000099;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #aaaadd 1px solid;
    TEXT-DECORATION: none;
}
DIV.digg A:hover {
    BORDER-RIGHT: #000099 1px solid;
    BORDER-TOP: #000099 1px solid;
    BORDER-LEFT: #000099 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #000099 1px solid;
}
DIV.digg A:active {
    BORDER-RIGHT: #000099 1px solid; B
    ORDER-TOP: #000099 1px solid;
    BORDER-LEFT: #000099 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #000099 1px solid;
}
DIV.digg SPAN.current {
    BORDER-RIGHT: #000099 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #000099 1px solid;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px; MARGIN: 2px;
    BORDER-LEFT: #000099 1px solid;
    COLOR: #fff;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #000099 1px solid;
    BACKGROUND-COLOR: #000099;
}
DIV.digg SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #eee 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #eee 1px solid;
    COLOR: #ddd;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #eee 1px solid;
}

Yahoo Style

HTML

<div class="yahoo">
    <span class="disabled"> < </span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2"> > </a>
</div>

CSS

DIV.yahoo {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    TEXT-ALIGN: center;
}
DIV.yahoo A {
    BORDER-RIGHT: #fff 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #fff 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #fff 1px solid;
    COLOR: #000099;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #fff 1px solid;
    TEXT-DECORATION: underline;
}
DIV.yahoo A:hover {
    BORDER-RIGHT: #000099 1px solid;
    BORDER-TOP: #000099 1px solid;
    BORDER-LEFT: #000099 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #000099 1px solid;
}
DIV.yahoo A:active {
    BORDER-RIGHT: #000099 1px solid;
    BORDER-TOP: #000099 1px solid;
    BORDER-LEFT: #000099 1px solid;
    COLOR: #f00;
    BORDER-BOTTOM: #000099 1px solid;
}
DIV.yahoo SPAN.current {
    BORDER-RIGHT: #fff 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #fff 1px solid;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #fff 1px solid;
    COLOR: #000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #fff 1px solid;
    BACKGROUND-COLOR: #fff;
}
DIV.yahoo SPAN.disabled {
    BORDER-RIGHT: #eee 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #eee 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #eee 1px solid;
    COLOR: #ddd;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #eee 1px solid;
}

New Yahoo Style

HTML

<div class="yahoo2">
    <span class="disabled"> < Prev</span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2">Next > </a>
</div>

CSS

DIV.yahoo2 {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    FONT-SIZE: 0.85em;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    FONT-FAMILY: Tahoma,Helvetica,sans-serif;
    TEXT-ALIGN: center;
}
DIV.yahoo2 A {
    BORDER-RIGHT: #ccdbe4 1px solid;
    PADDING-RIGHT: 8px;
    BACKGROUND-POSITION: 50% bottom;
    BORDER-TOP: #ccdbe4 1px solid;
    PADDING-LEFT: 8px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #ccdbe4 1px solid;
    COLOR: #0061de;
    MARGIN-RIGHT: 3px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #ccdbe4 1px solid;
    TEXT-DECORATION: none;
}
DIV.yahoo2 A:hover {
    BORDER-RIGHT: #2b55af 1px solid;
    BORDER-TOP: #2b55af 1px solid;
    BACKGROUND-IMAGE: none;
    BORDER-LEFT: #2b55af 1px solid;
    COLOR: #fff;
    BORDER-BOTTOM: #2b55af 1px solid;
    BACKGROUND-COLOR: #3666d4;
}
DIV.yahoo2 A:active {
    BORDER-RIGHT: #2b55af 1px solid;
    BORDER-TOP: #2b55af 1px solid;
    BACKGROUND-IMAGE: none;
    BORDER-LEFT: #2b55af 1px solid;
    COLOR: #fff;
    BORDER-BOTTOM: #2b55af 1px solid;
    BACKGROUND-COLOR: #3666d4;
}
DIV.yahoo2 SPAN.current {
    PADDING-RIGHT: 6px;
    PADDING-LEFT: 6px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    COLOR: #000;
    MARGIN-RIGHT: 3px;
    PADDING-TOP: 2px;
}
DIV.yahoo2 SPAN.disabled {
    DISPLAY: none;
}
DIV.yahoo2 A.next {
    BORDER-RIGHT: #ccdbe4 2px solid;
    BORDER-TOP: #ccdbe4 2px solid;
    MARGIN: 0px 0px 0px 10px;
    BORDER-LEFT: #ccdbe4 2px solid;
    BORDER-BOTTOM: #ccdbe4 2px solid;
}
DIV.yahoo2 A.next:hover {
    BORDER-RIGHT: #2b55af 2px solid;
    BORDER-TOP: #2b55af 2px solid;
    BORDER-LEFT: #2b55af 2px solid;
    BORDER-BOTTOM: #2b55af 2px solid;
}
DIV.yahoo2 A.prev {
    BORDER-RIGHT: #ccdbe4 2px solid;
    BORDER-TOP: #ccdbe4 2px solid;
    MARGIN: 0px 10px 0px 0px;
    BORDER-LEFT: #ccdbe4 2px solid;
    BORDER-BOTTOM: #ccdbe4 2px solid;
}
DIV.yahoo2 A.prev:hover {
    BORDER-RIGHT: #2b55af 2px solid;
    BORDER-TOP: #2b55af 2px solid;
    BORDER-LEFT: #2b55af 2px solid;
    BORDER-BOTTOM: #2b55af 2px solid;
}

Flickr Style

HTML

<div class="flickr">
    <span class="disabled"> < </span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2"> > </a>
</div>

CSS

DIV.flickr {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    TEXT-ALIGN: center;
}
DIV.flickr A {
    BORDER-RIGHT: #dedfde 1px solid;
    PADDING-RIGHT: 6px;
    BACKGROUND-POSITION: 50% bottom;
    BORDER-TOP: #dedfde 1px solid;
    PADDING-LEFT: 6px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #dedfde 1px solid;
    COLOR: #0061de;
    MARGIN-RIGHT: 3px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #dedfde 1px solid;
    TEXT-DECORATION: none;
}
DIV.flickr A:hover {
    BORDER-RIGHT: #000 1px solid;
    BORDER-TOP: #000 1px solid;
    BACKGROUND-IMAGE: none;
    BORDER-LEFT: #000 1px solid;
    COLOR: #fff;
    BORDER-BOTTOM: #000 1px solid;
    BACKGROUND-COLOR: #0061de;
}
DIV.meneame A:active {
    BORDER-RIGHT: #000 1px solid;
    BORDER-TOP: #000 1px solid;
    BACKGROUND-IMAGE: none;
    BORDER-LEFT: #000 1px solid;
    COLOR: #fff;
    BORDER-BOTTOM: #000 1px solid;
    BACKGROUND-COLOR: #0061de;
}
DIV.flickr SPAN.current {
    PADDING-RIGHT: 6px;
    PADDING-LEFT: 6px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    COLOR: #ff0084;
    MARGIN-RIGHT: 3px;
    PADDING-TOP: 2px;
}
DIV.flickr SPAN.disabled {
    PADDING-RIGHT: 6px;
    PADDING-LEFT: 6px;
    PADDING-BOTTOM: 2px;
    COLOR: #adaaad;
    MARGIN-RIGHT: 3px;
    PADDING-TOP: 2px;
}

Sabros.us Style

HTML

<div class="sabrosus">
    <span class="disabled"> < </span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2"> > </a>
</div>

CSS

DIV.sabrosus {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    TEXT-ALIGN: center;
}
DIV.sabrosus A {
    BORDER-RIGHT: #9aafe5 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #9aafe5 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #9aafe5 1px solid;
    COLOR: #2e6ab1;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #9aafe5 1px solid;
    TEXT-DECORATION: none;
}
DIV.sabrosus A:hover {
    BORDER-RIGHT: #2b66a5 1px solid;
    BORDER-TOP: #2b66a5 1px solid;
    BORDER-LEFT: #2b66a5 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #2b66a5 1px solid;
    BACKGROUND-COLOR: lightyellow;
}
DIV.pagination A:active {
    BORDER-RIGHT: #2b66a5 1px solid;
    BORDER-TOP: #2b66a5 1px solid;
    BORDER-LEFT: #2b66a5 1px solid;
    COLOR: #000;
    BORDER-BOTTOM: #2b66a5 1px solid;
    BACKGROUND-COLOR: lightyellow;
}
DIV.sabrosus SPAN.current {
    BORDER-RIGHT: navy 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: navy 1px solid;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: navy 1px solid; COLOR: #fff;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: navy 1px solid;
    BACKGROUND-COLOR: #2e6ab1;
}
DIV.sabrosus SPAN.disabled {
    BORDER-RIGHT: #929292 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #929292 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #929292 1px solid;
    COLOR: #929292;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #929292 1px solid;
}

Black-Red Style

HTML

<div style="padding-top:10px;padding-bottom:10px;background-color:#313131;">
    <div class="black-red">
        <span class="disabled"> < </span>
        <span class="current">1</span>
        <a href="#?page=2">2</a>
        <a href="#?page=3">3</a>
        <a href="#?page=4">4</a>
        <a href="#?page=5">5</a>
        <a href="#?page=6">6</a>
        <a href="#?page=7">7</a>...
        <a href="#?page=199">199</a>
        <a href="#?page=200">200</a>
        <a href="#?page=2"> > </a>
    </div>
</div>

CSS

DIV.black-red {
    FONT-SIZE: 11px;
    COLOR: #fff;
    FONT-FAMILY: Tahoma, Arial, Helvetica, Sans-serif;
    BACKGROUND-COLOR: #3e3e3e;
}
DIV.black-red A {
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    COLOR: #fff;
    PADDING-TOP: 2px;
    BACKGROUND-COLOR: #3e3e3e;
    TEXT-DECORATION: none;
}
DIV.black-red A:hover {
    COLOR: #fff;
    BACKGROUND-COLOR: #ec5210;
}
DIV.black-red A:active {
    COLOR: #fff;
    BACKGROUND-COLOR: #ec5210;
}
DIV.black-red SPAN.current {
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    COLOR: #fff;
    PADDING-TOP: 2px;
    BACKGROUND-COLOR: #313131;
}
DIV.black-red SPAN.disabled {
    PADDING-RIGHT: 5px;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    COLOR: #868686;
    PADDING-TOP: 2px;
    BACKGROUND-COLOR: #3e3e3e;
}

Blue Style

HTML

<div class="manu">
    <span class="disabled"> < Prev</span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2">Next > </a>
</div>

CSS

.manu {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    TEXT-ALIGN: center;
}
.manu A {
    BORDER-RIGHT: #eee 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #eee 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #eee 1px solid;
    COLOR: #036cb4;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #eee 1px solid;
    TEXT-DECORATION: none;
}
.manu A:hover {
    BORDER-RIGHT: #999 1px solid;
    BORDER-TOP: #999 1px solid;
    BORDER-LEFT: #999 1px solid;
    COLOR: #666;
    BORDER-BOTTOM: #999 1px solid;
}
.manu A:active {
    BORDER-RIGHT: #999 1px solid;
    BORDER-TOP: #999 1px solid;
    BORDER-LEFT: #999 1px solid: #666;
    BORDER-BOTTOM: #999 1px solid;
}
.manu .current {
    BORDER-RIGHT: #036cb4 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #036cb4 1px solid;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #036cb4 1px solid;
    COLOR: #fff;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #036cb4 1px solid;
    BACKGROUND-COLOR: #036cb4;
}
.manu .disabled {
    BORDER-RIGHT: #eee 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #eee 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    MARGIN: 2px;
    BORDER-LEFT: #eee 1px solid;
    COLOR: #ddd;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #eee 1px solid;
}

Gray Style

HTML

<div class="quotes">
    <span class="disabled"> < </span>
    <span class="current">1</span>
    <a href="#?page=2">2</a>
    <a href="#?page=3">3</a>
    <a href="#?page=4">4</a>
    <a href="#?page=5">5</a>
    <a href="#?page=6">6</a>
    <a href="#?page=7">7</a>...
    <a href="#?page=199">199</a>
    <a href="#?page=200">200</a>
    <a href="#?page=2"> > </a>
</div>

CSS

DIV.quotes {
    PADDING-RIGHT: 3px;
    PADDING-LEFT: 3px;
    PADDING-BOTTOM: 3px;
    MARGIN: 3px;
    PADDING-TOP: 3px;
    TEXT-ALIGN: center;
}
DIV.quotes A {
    BORDER-RIGHT: #ddd 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #ddd 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #ddd 1px solid;
    COLOR: #aaa;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #ddd 1px solid;
    TEXT-DECORATION: none;
}
DIV.quotes A:hover {
    BORDER-RIGHT: #a0a0a0 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #a0a0a0 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #a0a0a0 1px solid;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #a0a0a0 1px solid;
}
DIV.quotes A:active {
    BORDER-RIGHT: #a0a0a0 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #a0a0a0 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #a0a0a0 1px solid;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #a0a0a0 1px solid;
}
DIV.quotes SPAN.current {
    BORDER-RIGHT: #e0e0e0 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #e0e0e0 1px solid;
    PADDING-LEFT: 5px;
    FONT-WEIGHT: bold;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #e0e0e0 1px solid;
    COLOR: #aaa;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #e0e0e0 1px solid;
    BACKGROUND-COLOR: #f0f0f0;
}
DIV.quotes SPAN.disabled {
    BORDER-RIGHT: #f3f3f3 1px solid;
    PADDING-RIGHT: 5px;
    BORDER-TOP: #f3f3f3 1px solid;
    PADDING-LEFT: 5px;
    PADDING-BOTTOM: 2px;
    BORDER-LEFT: #f3f3f3 1px solid;
    COLOR: #ccc;
    MARGIN-RIGHT: 2px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #f3f3f3 1px solid;
}


Ajouter cette page à votre réseau social favoris
Digg! Reddit! Del.icio.us! Mixx! Free and Open Source Software News Google! Live! Facebook! Technorati! StumbleUpon! Spurl! Furl! Blogmarks! Yahoo! Mister-Wong! DZone! Free Joomla PHP extensions, software, information and tutorials.

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (1)

Flux RSS pour les commentaires
Page de navigation
0
je voudrais mettre sur mon blogger tu peux m'aider stp
Prince Turk , juin 13, 2009

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy

Navigation

Publicités

Nos services

Programmation Web
Programmation Web
Programmation Web

Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.

La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.

Suite ...
Programmation Desktop
Programmation Desktop
Programmation Desktop

Quel que soit votre projet, nous pouvons le réaliser pour vous !

Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.

Suite ...
Autres ...
Autres ...
Autres ...

Quel que soit vos projets ou vos idées, contactez nous!

Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.

Suite ...

Connexion