div extensible en image

21 nov. 2006, 16:47

bonjour à tous,
je voudrais savoir si vous aviez en tête un tutoriel pour créer un div extensible en image, un peu comme l'encart news de ce site: http://www.alsacreations.com/livre/
seulement, moi je souhaiterai qu'il soit extensible en hauteur, comme en largeur....
donc si vous avez un petit tuto... merci d'avance!

21 nov. 2006, 16:52

Ne lui assigne pas de dimensions et il s'étendra selon le besoin, tout simplement. Si tu fixes uniquement une hauteur, ça ne l'empêchera pas de s'étendre en largeur, et vice-versa.

21 nov. 2006, 16:55

euh d'accord, je viens le laisser libre de se dimensionner, mais je veux qu'il ai un fond en image, avec les images des coins qui restent dans les coins, en fait c'est pour dessiner un post-it (comme dans le liens donné ci-avant, mais extensible dans les deux sens)

21 nov. 2006, 17:04

Tu as commencé quelque chose qui ne fonctionne pas ou tu ne vois carrément pas du tout comment partir ?? Dans le premier cas, un exemple de code serait utile, un exemple en ligne serait encore mieux, mais dans le second cas, il faudrait plonger dans les tutos sur le positionnement, cherche sur le web à partir de "css coins arrondis" et adaptes.

21 nov. 2006, 20:49

je reviens juste pour une petite question...
je n'ai encore rien codé, mais je me demande une chose après avoir épluché pas mal de tutoriels...
Toutes le méthodes que j'ai vu ont quatre images pour les coins, dont une partie est de la couleur du fond, et l'autre de celle du div, seulement ça me pose un problème, car mes div à moi sont "dragable" (pas comme avec les filles hein

), et le fond n'est pas unis, donc il me faut de la transparence...
alors voilà ce que je pensait faire, mais je préfère votre avis avant de coder, parceque ça va pas être simple, et si c'est pas faisable, je veu pas me lancer pour rien

.
Donc voilà comment je compte faire:
je vais faire deux parties, le cadre, et le contenu comme ceci (on se moque pas de mes talents de dessinateur

)

donc je fait les images I à IV en gif ou png avec transparence donc pour l'image I vous voyez à quoi elle ressemble, pour les trois autre, les pointillés symbolisent le fait que l'image se prolonge vachement beaucoup...
Ensuite, la partie V contient une texture en repeat xy bien calée par rapport à mon cadre...
ça vous semble faisable comme ça?

22 nov. 2006, 19:20

Bonjour,
Tout d'adord c'est je te l'accorde casse pied à mettre en place ce que tu veux faire mais tout à fait réalisable.
En fait pour moi tes images ne sont pas bien découpée. Comme pour le puzzle, il faut séparer les coins (juste les coins) ils constitueront tes images de fond. Le lien entre ces coins, les bords de ta div, sont des couleurs de fond.
Déjà avec ca je pense que tu te simplifieras la vie.
J'espère avoir été assez clair.
Bon courage

23 nov. 2006, 10:50

je sais que je complique un peu la tâche, mais je ne peut pas vraiment utiliser juste quatres images de coins, car mon div n'est pas sur un fond uni comme je l'ai déja précisé plus haut...
La technique des quatres images de coins marche pour une page à fond unis, et à chaque fois que l'on change la couleur de fond, il faut refaire les images des coins ....

23 nov. 2006, 11:52

alors part toujours sur le meme principe que je t'ai dit sauf que tu remplaces la couleur de fond par une petite image (gain de place serveur ) et tu fais un repeat X ou Y

23 nov. 2006, 20:26

tu as un exemple dans ma signature il y a plusieurs façon de faire
sa fonctionne sous ie, opéra et FF, les autres je n'ai pas pu tester
le xhtml :

Code : Tout sélectionner

	
<div id="head1">
		<h1>
			<span>
			</span>
		</h1>
		<h2>
		</h2>
</div>

la css

Code : Tout sélectionner

#head1 {
display:block;
background: transparent url(../img/art_04.png) top left repeat-x;
padding:0 0 0 0;
margin:10px 6px 0 17px;
height:127px;
}
#conteneur>#head1 {
margin:10px 0 0 10px;
}
#head1 h1 {
	padding:0px;
	margin: 0px;
	float: left;
	width: 498px;
	height: 171px;
	background: transparent url(../img/...) top right no-repeat;
}
#head1 h2{
	height: 171px;
	width:120px;
	float: right;
	top: 0px;
	margin: 0px;
	padding: 0px;
	background: transparent url(../img/...) top left no-repeat;
	z-index:4;
}
#head1 h1>span {
margin-top:-1px;
margin-left:1px
}
#head1 h1 span {
position:absolute;
left:95px;
top:10px;
}
#head1 h2 span {
display:none;
}

23 nov. 2006, 20:35

c'est gentil, mais ton div n'est extensible qu'en largeur, non ?
j'ai peut-être mal compris

23 nov. 2006, 20:49

tu n'as pas compris.
tu as trois images dans mon cas, toutes de même hauteur
1/ à gauche
2/ au centre de 1px de largeur répété en x, qui est en background
3/ à droite, qui elle se déplace en fonction de ton conteneur, qui lui s'adapte à la largeur de la fenêtre.
la 1 et la 3 sont au dessus de la deux.
Donc dans toshop tu dois construire d
tes images en fonction de sa ( tu les fais le plus petit possible) et tu gagne 50% en poids.

23 nov. 2006, 20:50

ha oui dsl ce n'est qu'en largeur, j'avais mal lu, mais l'exemple que tu donnes aussi.
Là c'est plus complexe du moins avec image, n'espère pas trouvé des tuto, je me suis casser les dents sur de problème, quoi que...

23 nov. 2006, 20:56

le problème c'est pour écrire du texte par dessus cet effets spécial.
Tu ne pourra résolument qu'utiliser le positionnement "absolute".
Autrement c'est possible qu'en image.
Donc si tu as du dynamisme, c'est chocolat...

23 nov. 2006, 21:11

Bonjour,

Un coup d'oeil sur cette page http://articles.e-t172.net//round/ peux t'aider.

EDIT :

Celui-ci aussi (en anglais) http://css-discuss.incutio.com/?page=RounderedCorners

23 nov. 2006, 23:18

merci à toi ajoloca, le deuxième lien ne marche pas (n'a plus de contenu), mais dans le premier y a tout ce qu'il faut..!
à si ça marche, c'était la mauvaise adresse: http://css-discuss.incutio.com/?page=RoundedCorners

div extensible en image

Qui est en ligne