Ça fait déjà plusieurs fois que je regarde ta découpe d'image et pour être franc, je ne sais pas par où commencer pour te guider
Partir d'une découpe comme celle-ci témoigne souvent d'une vision tabulaire du design CSS.
En fait, les découpes 1, 2 et 3 devraient être la même image (fusion) en background d'un <h1>. Je remplacerais la partie « LOGIN » par la portion de l'image que l'on verrait s'il n'y avait pas ce « LOGIN ». Pour le moment, laisse de côté les images de remplacement de texte ; ce qui exclut aussi les découpes 6 (un simple fond noir via CSS) et 18 (un simple fond gris).
La découpe 4 va servir de séparateur <hr /> auquel tu vas appliquer l'image en background. Pour y arriver, tu peux t'inspirer de ce post :
http://forum.alsacreations.com/topic.php?pid=5012&tid=493&fid=4&p=1#p5012
La découpe 15 peut servir comme «
colonnes factices ».
Pour les découpes 9, 11, 12 et 13, là ça se complique. Je te suggère d'abbord de créer un menu avec ces images en background, puis voir comment elles réagissent au redimensionnement du texte (taille inférieure - taille supérieure). Les bordures peuvent être facile à réaliser via CSS. La taille relativement petite de ces images laisse supposer que le texte du menu va rapidement déborder au delà des images en background quand l'utilisateur va augmenter la taille des caractères dans son navigateur favori.
Puisqu'il est plus aisé de partir avec un réel contenu, je te suggère du «
dummy text » (texte de remplissage).
Un titre :
<h1>Ma quande lingues coalesce, li.</h1>
Des paragraphes :
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>
<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilita; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>
<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
Des listes de liens :
<h3>Li europan</h3>
<ul>
<li><a href="#">Epsum factorial</a></li>
<li><a href="#">Non deposit</a></li>
<li><a href="#">Pro</a></li>
<li><a href="#">Quo hic</a></li>
<li><a href="#">Olypian</a></li>
<li><a href="#">Quarrels et</a></li>
</ul>
<h3>Lingues es</h3>
<ul>
<li><a href="#">Congolium</a></li>
<li><a href="#">Sic ad</a></li>
<li><a href="#">Souvlaki</a></li>
<li><a href="#">Ignitus carborundum</a></li>
<li><a href="#">Pluribus</a></li>
<li><a href="#">Unum defacto</a></li>
</ul>
<h3>Del</h3>
<ul>
<li><a href="#">Est</a></li>
<li><a href="#">Igpay atinlay</a></li>
<li><a href="#">Selectus</a></li>
<li><a href="#">Non provisio</a></li>
<li><a href="#">Feline</a></li>
<li><a href="#">Nolo contendre</a></li>
</ul>
Reste à te trouver un « layout » qui correspond à tes besoins...
)
