High-Tech Santé Médecine Droit-Finances

Connecter

la Wii à Internet

Rechercher : dans
Par :

[HTML/CSS] Adaptation d'un cadre au contenu

Dernière réponse le 4 sep 2007 à 15:11:13 nataly93, le 23 avr 2007 à 11:55:08 
 Signaler ce message aux modérateurs

Bonjour,

Voila je fais un site internet en HTML et CSS, pour une petite entreprise. Mon commanditaire souhaite que le contenu (les textes) soit dans un cadre (réaliser grâce à une image).
Pour une plus grande facilité de réalisation, je souhaiterais que mon cadre (en l'occurence l'image) s'adapte à la taille de mon texte. Plus le texte est long et plus mon cadre s'allonge.
Je crois bien qu'il est possible de réaliser ça grâce au CSS mais je ne connais pas le code.
Pouvez-vous m'aider ?
Merci d'avance

Configuration: Windows XP
Firefox 2.0.0.3

Meilleures réponses pour « [HTML/CSS] Adaptation d'un cadre au contenu » dans :
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Les Frames VoirPrésentation des frames Grâce à la technologie des frames (en français "cadres") il est désormais possible d'afficher plusieurs pages HTML dans différentes zones (ou cadres). Les frames ne font pas partie de la spécification du HTML 3.x, il faut...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Posez votre question Répondre

1

Dalida, le 23 avr 2007 à 12:23:28

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 ?
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...

   
Répondre à Dalida

2

nataly93, le 23 avr 2007 à 12:27:37

Si si je m'y connais en CSS.

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

   
Répondre à nataly93

3

Dalida, le 23 avr 2007 à 13:02:41

Re,

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.
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...

   
Répondre à Dalida

4

nataly93, le 23 avr 2007 à 15:16:51

Le soucis est la réaction sous IE.
En plus j'ai un peu de mal a tout placer et a fair en sorte que sa donne ce que je veux :(

   
Répondre à nataly93

5

Dalida, le 23 avr 2007 à 15:52:48

Re,

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)
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie...

   
Répondre à Dalida

6

nataly93, le 23 avr 2007 à 15:55:11

Je te remercie ça va m'aider à avancer ;)

   
Répondre à nataly93

7

Vincenzo94, le 4 sep 2007 à 11:30: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

   
Répondre à Vincenzo94

8

Dalida, le 4 sep 2007 à 12:05:35

Salut,

montre-nous où tu en es, stp (url ou copier/coller).
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

9

Vincenzo94, le 4 sep 2007 à 13:52:10

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 :

   
Répondre à Vincenzo94

10

Dalida, le 4 sep 2007 à 13:55:46

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" ?
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida

11

Vincenzo94, le 4 sep 2007 à 14:52:57

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 ^^

   
Répondre à Vincenzo94

12

 Dalida, le 4 sep 2007 à 15:11:13

Je t'ai envoyé un MP.
[ Mathieu ] 

Il y a surement des pandas pour ne dépendre de rien

   
Répondre à Dalida
Posez votre question Répondre
Ils ont besoin de votre aide