Integration HTNL/CSS

[Eagle1]

Bonjour a tous.

Voila je suis un peu curieux de savoir comment chacun transforme ses designs images en HTML/CSS.

En effet Fireworks ou Photoshop sortent un code abominable et affreux, et je me vois mal lance un site sur cette base du code...

Et le truc c'est que quand je decoupe mon image en plein de petite pour cree moi-meme le design avec des div, je perd enormement dans la qualite du dessin...

[Shtong]

Je fais ça à la main (découpage, etc...)

Après la difficulté c'est de bien découper et bien compresser les images !

[Mephisto]

choisis bien ton format de compression

dans le doute: png

mais, à t'entendre, on dirait que tu le fais en JPEG. c'est pas un scoop, pour un skin, c'est voué à l'echec.

[Eagle1]

bah non c'est du psd j'en fait ce que je veux

donc il n'y a pas de secret, pour avoir un code correct, faut tout se taper a la mano ...

[Shtong]

Oué enfin ce qu'il voulait dire je pense c'est d'exporter le PSD en PNG pour le navigateur

Eviter le JPG car ça fait plein d'artifacts et on voit le bord des images si c'est pas en super qualité

Sinon oui aucun outil ne fera du code plus propre que le bloc-notes

[Eagle1]

j'ai reussi a decouper un design (bon assez simpliste) et a en faire un code css en div etc...

ca rend tres bien sous firefox... maintenant je vais m'amuser a adapter ca sous IE...

[Eagle1]

salut !

j'essai cette fois d'integrer un vrai design, et j'ai quelques souci !

	<div id="contenu_conteneur">
	<div id="top_contenu">
	</div>

	<div id="contenu_bordure_gauche">
	</div>

	<div id="contenu">
	</div>

	<div id="contenu_bordure_droite">
	</div>

	<div id="bas_contenu">
	</div>

</div>

Le but c'est d'aficher un rectangle, vous l'aurez compris avec une bordure speciale en haut, a gauche, a droite et en bas.

Si j'ai bien compris, il vaut mieux eviter d'utiliser les floats.

Je n'ai pas de souci pour les bordures du haut et du bas.

En revanche pour les trois du milieu, voici leurs codes css:

#contenu_bordure_gauche{
display:inline;
min-width:37px;
min-height:282px;
background:url('images/contenu_bordure_gauche.png');
}

#contenu_bordure_droite{
display:inline;
width:37px;
min-height:282px;
background:url('images/contenu_bordure_droite.png');
}

#contenu{
display:inline;
width:908px;
min-height:282px;
}

Je pense que de les mettres en inline est la solution... en revanche elle n'apparaissent plus... Firebug me les affiches en grise... bref je suis perdu... je ne sais pas ou elles ont pu passer... car si je met que celle de gauche en inline, on la vois tres bien...

merci de votre aide

[BreizFenrir]

Le problème des floats c'est plus que le comportement est difficile à comprendre, pour le peu dont je me rappelle. Si je me souviens bien, les blocs floats sont positionnés relativement au bloc contenant. De fait, si tes trois div du milieu sont mis dans un autre div, et que tu les mets en float: left, ça devrait pouvoir passer.

Après pour ce genre de problème, peut-être un framework CSS comme le 960 Grid System ou le Yahoo! UI: grid CSS pourrait te faciliter la vie.

[Shtong]

Les float sont en effet bien plus complexes à maîtriser mais au final bien plus pratiques que des blocs inline, ces derniers étant finalement très limités notamment au niveau du contrôle de la taille des blocs !

Donc en fait moi je te conseille les float ! Mais si tu veux faire un layout trois colonnes, perso j'utilise toujours le code présenté dans cette page : http://matthewjamestaylor.com/blog/perfect-3-column.htm. C'est un peu compliqué à mettre en place mais ça fonctionne partout