[HTML/CSS] Adaptation d'un cadre au contenu
Fermé
nataly93
Messages postés
67
Date d'inscription
mercredi 21 février 2007
Statut
Membre
Dernière intervention
27 avril 2020
-
23 avril 2007 à 11:55
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 4 sept. 2007 à 15:11
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 4 sept. 2007 à 15:11
A voir également:
- [HTML/CSS] Adaptation d'un cadre au contenu
- Word a trouvé du contenu illisible - Guide
- Editeur html - Télécharger - HTML
- Le fichier à télécharger correspond au contenu brut d’un courrier électronique. de quel pays a été envoyé ce message ? - Guide
- Html download - Télécharger - HTML
- Br html ✓ - Forum Webmastering
5 réponses
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
23 avril 2007 à 12:23
23 avril 2007 à 12:23
salut,
en premier : as-tu réellement besoin d'une image ?
si c'est une bordure que tu peux dessiner grâce au style plus besoin d'image et c'est tout de même beaucoup plus simple!!!
sinon il faut savoir à quoi va ressembler ton cadre pour savoir comment découper le bitmap, quelles parties utiliser où, combien de boites il faudra pour les contenir. le plus simple est que les côtés latéraux soit identiques du haut en bas comme ça il suffit de quelques pixel avec une répétition verticale. bref faut savoir à quoi tu veux que ça ressemble !
ps : tu t'y connais en css ou je te parle chinois ?
en premier : as-tu réellement besoin d'une image ?
si c'est une bordure que tu peux dessiner grâce au style plus besoin d'image et c'est tout de même beaucoup plus simple!!!
sinon il faut savoir à quoi va ressembler ton cadre pour savoir comment découper le bitmap, quelles parties utiliser où, combien de boites il faudra pour les contenir. le plus simple est que les côtés latéraux soit identiques du haut en bas comme ça il suffit de quelques pixel avec une répétition verticale. bref faut savoir à quoi tu veux que ça ressemble !
ps : tu t'y connais en css ou je te parle chinois ?
Vincenzo94
Messages postés
3
Date d'inscription
mardi 4 septembre 2007
Statut
Membre
Dernière intervention
4 septembre 2007
4 sept. 2007 à 11:30
4 sept. 2007 à 11:30
Bonjour,
Je me casse la tête pour faire fonctionner le css du cadre arrondi avec IE, mais je n'y arrive pas.
Quelqu'un pourrait m'aider pour corriger en fonction IE le css ? je suis un débutant en css ;)
Merci d'avance
Je me casse la tête pour faire fonctionner le css du cadre arrondi avec IE, mais je n'y arrive pas.
Quelqu'un pourrait m'aider pour corriger en fonction IE le css ? je suis un débutant en css ;)
Merci d'avance
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
4 sept. 2007 à 12:05
4 sept. 2007 à 12:05
salut,
montre-nous où tu en es, stp (url ou copier/coller).
montre-nous où tu en es, stp (url ou copier/coller).
Vincenzo94
Messages postés
3
Date d'inscription
mardi 4 septembre 2007
Statut
Membre
Dernière intervention
4 septembre 2007
4 sept. 2007 à 13:52
4 sept. 2007 à 13:52
Bonjour,
Je me suis basé sur ce que vous avez fait dans l'url decrivant les cadres (trés bien fait , ca marche nickel sur FireBox, mais j'ai des contraintes avec IE :( )
Le problème se situe en bas du cadre avec IE si on rajoute un element html apres le dernier div par exemple.
LE HTML :
<div class="cadre">
<div class="top">
<div class="right">
<div class="bottom">
<div class="left">
<div class="top-left">
<div class="top-right">
<div class="bottom-right">
<div class="bottom-left">
<div class="contenu">
<p>DU HTML...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br> <- ce BR fout la grouille :)
LE CSS (que vous connaissez déjà :) ) :
div.top{
background-image:url('../img/cadre/h.png');
background-repeat:repeat-x;
background-position:top left;
}
div.right{
background-image:url('../img/cadre/d.png');
background-repeat:repeat-y;
background-position:top right;
}
div.bottom{
background-image:url('../img/cadre/b.png');
background-repeat:repeat-x;
background-position:bottom left;
}
div.left{
background-image:url('../img/cadre/g.png');
background-repeat:repeat-y;
background-position:top left;
}
div.top-left{
background-image:url('../img/cadre/hg.png');
background-repeat:no-repeat;
background-position:top left;
}
div.top-right{
background-image:url('../img/cadre/hd.png');
background-repeat:no-repeat;
background-position:top right;
}
div.bottom-right{
background-image:url('../img/cadre/bd.png');
background-repeat:no-repeat;
background-position:bottom right;
}
div.bottom-left{
background-image:url('../img/cadre/bg.png');
background-repeat:no-repeat;
background-position:bottom left;
}
div.contenu
{
padding:5px 5px 5px 5px;
}
HTML :
Je me suis basé sur ce que vous avez fait dans l'url decrivant les cadres (trés bien fait , ca marche nickel sur FireBox, mais j'ai des contraintes avec IE :( )
Le problème se situe en bas du cadre avec IE si on rajoute un element html apres le dernier div par exemple.
LE HTML :
<div class="cadre">
<div class="top">
<div class="right">
<div class="bottom">
<div class="left">
<div class="top-left">
<div class="top-right">
<div class="bottom-right">
<div class="bottom-left">
<div class="contenu">
<p>DU HTML...</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br> <- ce BR fout la grouille :)
LE CSS (que vous connaissez déjà :) ) :
div.top{
background-image:url('../img/cadre/h.png');
background-repeat:repeat-x;
background-position:top left;
}
div.right{
background-image:url('../img/cadre/d.png');
background-repeat:repeat-y;
background-position:top right;
}
div.bottom{
background-image:url('../img/cadre/b.png');
background-repeat:repeat-x;
background-position:bottom left;
}
div.left{
background-image:url('../img/cadre/g.png');
background-repeat:repeat-y;
background-position:top left;
}
div.top-left{
background-image:url('../img/cadre/hg.png');
background-repeat:no-repeat;
background-position:top left;
}
div.top-right{
background-image:url('../img/cadre/hd.png');
background-repeat:no-repeat;
background-position:top right;
}
div.bottom-right{
background-image:url('../img/cadre/bd.png');
background-repeat:no-repeat;
background-position:bottom right;
}
div.bottom-left{
background-image:url('../img/cadre/bg.png');
background-repeat:no-repeat;
background-position:bottom left;
}
div.contenu
{
padding:5px 5px 5px 5px;
}
HTML :
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
4 sept. 2007 à 13:55
4 sept. 2007 à 13:55
as-tu une balise qui a été placée dans le flottement ?
{float:right;} ou {float:left;}
que veux-tu dire par "ce BR fout la grouille" ?
{float:right;} ou {float:left;}
que veux-tu dire par "ce BR fout la grouille" ?
Vincenzo94
Messages postés
3
Date d'inscription
mardi 4 septembre 2007
Statut
Membre
Dernière intervention
4 septembre 2007
4 sept. 2007 à 14:52
4 sept. 2007 à 14:52
Bonjour,
Je suis sous IE 6.0
Il faudrait que je te montrer le rendu, mais c'est en local, si je peux envoyer une image ?
Sinon je te decris le problème
en bas du cadre, il y a un decalage d'une ligne (dû au <BR>), le visuel c'est que l'image de bas du cadre est decalé d'une ligne vers le bas ?
en fait, le div du bas au milieu et celui du bas à droite sont d'une ligne vers le bas.
c'est que je voulais dire par "ce BR fout la grouille" :)
PS : avec le code HTML et le CSS, tu devrais voir (sous IE :) ) le problème.
Voila.
Merci, si tu as une idée ^^
Je suis sous IE 6.0
Il faudrait que je te montrer le rendu, mais c'est en local, si je peux envoyer une image ?
Sinon je te decris le problème
en bas du cadre, il y a un decalage d'une ligne (dû au <BR>), le visuel c'est que l'image de bas du cadre est decalé d'une ligne vers le bas ?
en fait, le div du bas au milieu et celui du bas à droite sont d'une ligne vers le bas.
c'est que je voulais dire par "ce BR fout la grouille" :)
PS : avec le code HTML et le CSS, tu devrais voir (sous IE :) ) le problème.
Voila.
Merci, si tu as une idée ^^
Dalida
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
920
>
Vincenzo94
Messages postés
3
Date d'inscription
mardi 4 septembre 2007
Statut
Membre
Dernière intervention
4 septembre 2007
4 sept. 2007 à 15:11
4 sept. 2007 à 15:11
je t'ai envoyé un MP.
23 avril 2007 à 12:27
J'avais penser oui décomposer mon cadre en plusieurs images mais je craind que le chargement de la page soit un peu long.
Et oui j'ai besoin d'une image car l'intérieur du cadre est plein.
Je vais me lancer sur la piste de la décomposition de l'image.
Si entre temps tu as une astuce à me soumettre je suis ouverte à tout ;)
Merci
23 avril 2007 à 13:02
on va distinguer deux choses :
- la bordure (tout ce qui est autour du texte)
- l'arrière plan (le reste…)
essaie de dessiner un cadre qui te permette d'avoir une bordure et un arrière plan distincts.
pour la bordure, le plus simple est d'avoir une largeur fixe. comme ça il te suffit d'avoir une image en haut, une en bas et une à gauche et à droite qui ont {background-repeat:repeat-y;}
je t'écris un petit quelque chose et je reviens.
23 avril 2007 à 15:16
En plus j'ai un peu de mal a tout placer et a fair en sorte que sa donne ce que je veux :(
23 avril 2007 à 15:52
regarde ceci.
la taille du paragraphe est proportionnelle au document, donc tu peux la faire varier en dimensionnant la fenêtre de ton navigateur.
est-ce que tu procèdes de la même façon? la taille des images est réduite au maximum, je joue sur la couleur d'arrière plan et la répétition de l'image d'arrière plan.
pour IE tu auras remarqué ma mise en garde.
il ne faut pas utiliser {padding} car IE l'interprète de façon fantaisiste. tu peux jouer sur l'ordre des <div> dans la hiérarchie du document, pour positionner tes arrières plan de façon harmonieuse tu peux utiliser {background-position} ou {position:relative; top:?px; left:?px;}. tu as un exemple de chaque.
de toute façon, travaille d'abord sous Firefox, ensuite tu fera des corrections pour IE. avec l'expérience tu éviteras les propriétés piégeuses.
si tu as besoin d'aide pour corriger en fonction de IE, on est là !
-;o)
23 avril 2007 à 15:55