bonjour
voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
seulement 1 seul arrondi est ce possible ?
merci de votre aide
EB
Le jeudi, 11 sep 2003, à 18:21 Europe/Paris, man a écrit :
voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
seulement 1 seul arrondi est ce possible ?
Oui.
Si tu as regardé comment sont fait les cadres arrondis de l'interface SPIP, tu auras constaté qu'il s'agit de tableaux dont les cases extérieures sont vides mais ont une image de fond. Ces images définissent la forme du cadre.
La première chose à faire, c'est de créer les 8 images nécessaires :
- en haut à gauche
- en haut
- en haut à droite
- à gauche
- à droite
- en bas à gauche
- en bas
- en bas à droite.
C'est assez fastidieux... et il faut travailler au pixel près pour que ça colle. Ensuite, il faut créer les styles qui utilisent ces images puis le tableau qui utilise ces styles. Le plus simple est de recopier ce qui se fait dans le dossier /ecrire/ de SPIP.
Donc, si l'on veut un seul coin arrondi, il suffit qu'une seule image (coin-haut-droit.gif, par exemple) représente un quart de disque. Les 3 autres images d'angle représentent un coin carré, et le tour est joué.
La méthode utilisée pour l'interface de SPIP fonctionne bien, si tous les fichiers sont "en vrac" à la racine du site.
Si l'on veut organiser un peu tout ça avec un dossier "squelettes", un dossier "styles", etc... je suis coincé!
Où doit-on placer les images utilisées pour définir la forme du cadre? A la racine? Dans le dossier /squelettes/ ? J'ai beau essayer toutes les solutions, rien à faire : les images n'apparaîssent pas.
Si l'on insère une image directement avec la balise HTML <img> ça fonctionne.
Mais si l'on veut définir un style comme ceci :
.hg {
background-image: url('images/coin-haut-gauche.gif');
}
Qu'on utilise ensuite comme ceci :
<td class="hg"> </td>
Eh ben ça marche pas! Et même pas la vignette de remplacement d'images. Rien!
Pourtant la feuille de style est bien prise en compte (les couleurs le prouvent).
Où merdé-je?
Salut,
Donc, si l'on veut un seul coin arrondi, il suffit qu'une seule image (coin-haut-droit.gif, par exemple)
Pourquoi ne pas passer de suite en PNG ? Au moins, il n'y a pas de problème de pseudo-droits.
Sinon, c'est vrai que c'est assez fastidieux...
A+
Valéry
représente un quart de disque. Les 3 autres images d'angle représentent un coin carré, et le tour est joué.
_______________________________________________
liste spip
spip@rezo.net - désabonnement : spip-off@rezo.net
Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.uzine.net/spip
Le Thu 11/09/2003 à 18:21, man a écrit :
bonjour
voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
seulement 1 seul arrondi est ce possible ?
avec un div dont le fond est spécifié comme étant une image en
forme d'arrondi et calée dans un coin.
j'ai pas essayé, mais ça doit être jouable.
d'ailleurs, le code correspondant m'interesse ...
À+, Pif.
Le jeudi, 11 sep 2003, à 19:14 Europe/Paris, Valéry Roché a écrit :
Pourquoi ne pas passer de suite en PNG ? Au moins, il n'y a pas de problème de pseudo-droits.
Tout à fait d'accord sur le principe. Mais j'ai un autre principe (primordial) : qu'un maximum de clients puissent voir le site normalement. Tous les navigateurs "récents" (disons, de moins de 5 ans) savent-ils lire le PNG?
Au fait, que penser du SVG? Je ne parle pas du point de vue compatibilité (il est évident que c'est encore trop récent pour être utilisable sur un site convivial) mais du point de vue des droits. Existe-t-il un format libre équivalent?
Ceci dit, l'exemple du GIF montre la vanité des lois qui sont votées ces derniers temps. Personne n'a le droit d'utiliser du GIF, mais tout le monde le fait...
Enfin c'est tout internet qui est source d'illégalité. Mais c'est trop tard, la machine est lancée. Quand les législateurs l'auront compris, il rigoleront des lois qu'ils votaient au début du 21ème siècle.
Frédéric Poncet a écrit :
La méthode utilisée pour l'interface de SPIP fonctionne bien, si tous les fichiers sont "en vrac" à la racine du site.
Si l'on veut organiser un peu tout ça avec un dossier "squelettes", un dossier "styles", etc... je suis coincé!
Où doit-on placer les images utilisées pour définir la forme du cadre? A la racine? Dans le dossier /squelettes/ ? J'ai beau essayer toutes les solutions, rien à faire : les images n'apparaîssent pas.
Si l'on insère une image directement avec la balise HTML <img> ça fonctionne.
Mais si l'on veut définir un style comme ceci :
.hg {
background-image: url('images/coin-haut-gauche.gif');
}Qu'on utilise ensuite comme ceci :
<td class="hg"> </td>
Eh ben ça marche pas! Et même pas la vignette de remplacement d'images. Rien!
Pourtant la feuille de style est bien prise en compte (les couleurs le prouvent).Où merdé-je?
Un chemin relatif dans une feuille style est relatif à la position de la feuille de style dans l'arborescence, pas à celle du fichier (X)HTML. Je ne sais pas si ça peut expliquer ton problème.
Grégoire
--
> voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
> seulement 1 seul arrondi est ce possible ?
Peut-être une réponse sur
http://biospip.tuxfamily.org/article.php3?id_article=38
Didier
voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
seulement 1 seul arrondi est ce possible ?avec un div dont le fond est spécifié comme étant une image en
forme d'arrondi et calée dans un coin.
j'ai pas essayé, mais ça doit être jouable.
d'ailleurs, le code correspondant m'interesse ...
Le code (X)HTML:
<div id="cadre">
<div id="coin"></div>
<h1>ALLO CHEZ VOUS</h1>
</div>
Le CSS:
#cadre {margin: 24px; background-color: olive;}
#coin
{
background-position: left top;
width: 12px;
height: 12px;
float: left;
background-image: url(coin-haut-gauche.png);
background-color: transparent;
}
h1 { color: #FFF; }
Exemple:
-> http://edu.ca.edu/css-exemples/coin-arrondi/
André V
Un chemin relatif dans une feuille style est relatif à la position de la feuille de style dans l'arborescence, pas à celle du fichier (X)HTML. Je ne sais pas si ça peut expliquer ton problème.
C'est certainement lié à ça. Je vais vérifier.
Merci.
Un chemin relatif dans une feuille style est relatif à la position de la feuille de style dans l'arborescence, pas à celle du fichier (X)HTML. Je ne sais pas si ça peut expliquer ton problème.
C'était exactement ça (information). Merci encore (bavardage... nécessaire).
merci à tous je vais tester différentes méthodes demain.
@+
Emmanuel
"Andre Vincent" <andre@alternatives.ca> a écrit dans le message de
news:BB865FE8.3BBE%andre@alternatives.ca...
voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
seulement 1 seul arrondi est ce possible ?avec un div dont le fond est spécifié comme étant une image en
forme d'arrondi et calée dans un coin.
j'ai pas essayé, mais ça doit être jouable.
d'ailleurs, le code correspondant m'interesse ...
Le code (X)HTML:
<div id="cadre">
<div id="coin"></div>
<h1>ALLO CHEZ VOUS</h1>
</div>
Le CSS:
#cadre {margin: 24px; background-color: olive;}
#coin
{
background-position: left top;
width: 12px;
height: 12px;
float: left;
background-image: url(coin-haut-gauche.png);
background-color: transparent;
}
h1 { color: #FFF; }
Exemple:
-> http://edu.ca.edu/css-exemples/coin-arrondi/
André V
man wrote:
voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
seulement 1 seul arrondi est ce possible ?
j'ai repris le style de Drop Zone City lui meme emprunté a la
partie admin de SPIP. Pour faciliter la mise en place des boite
j'ai créé 2 fonctions, l'une pour ouvrir les boites, l'autre pour fermer.
L'interet de ce code, est de permettre de changer le style des boites
sans avoir a retourcher les squelettes. Si un jour, je veux juste
creer des boites avec un bloc div, c'est possible. Les modifications
étant centralisées.
Ci-dessous, les boites sont toutes incluses dans un bloc div, et
il est possible de donner une classe lors de la création (premier
parametre).
Si le titre n'est pas fourni, il n'y a pas de titre d'affiché, logique.
Pareil pour l'image.
Et voici ce que ca donne :
avant la boite ;
<?php
include_once('Box.php'); // eventuellement avec le chemin d'acces.
?>
<?php box_start('box', 'Titre', 'secteur.gif'); ?>
Voila une jolie boite ;
avec des bors arrondis.
<?php box_close(); ?>
apres la boite ;
et voici le code qui permet de generer les boites.
<?php
// Box.php
//
function box_start($class, $title, $img = ''){
// repertoire qui pointe vers les images de drop-zone.
$img_dir = $GLOBALS['squelette']['img'];
if($img == '')
$img = '';
else
$img = "<img alt=\"\" height=\"24\" width=\"24\" src=\"$img_dir/$img\" />";
echo <<<END
<!-- box start : $title -->
<div class="$class">
<table border=0 cellpadding=0 cellspacing=0 width="100%"><tr>
<td width=5><img alt="" height="24" width="5" src="$img_dir/r-hg.gif" /></td>
<td background="$img_dir/r-h.gif">$img</td>
<td width=5><img alt="" height="24" width="5" src="$img_dir/r-hd.gif" /></td></tr>
<tr><td background="$img_dir/r-g.gif" width="5"> </td><td class="content">
END;
if($title != '')
echo " <h3>$title</h3>\n";
# echo " <div class=\"h3\">$title</div><br>\n";
}
function box_close(){
$img_dir = $GLOBALS['squelette']['img'];
echo <<<END
</td>
<td background="$img_dir/r-d.gif" width="5"> </td><tr>
<td><img alt="" width="5" height="5" src="$img_dir/r-bg.gif" /></td>
<td background="$img_dir/r-b.gif"><img alt="" width="5" height="5" src="$img_dir/rien.gif" /></td>
<td><img alt="" width="5" height="5" src="$img_dir/r-bd.gif" /></td>
</tr>
</table>
</div>
<!-- box close -->
END;
}
?>
Le jeudi, 11 sep 2003, à 19:14 Europe/Paris, Valéry Roché a écrit :
Sinon, c'est vrai que c'est assez fastidieux...
GraphicConverter (un "partagiciel" à 28 €, sur Macintosh) possède une intéressante fonction "Découper" lors de l'enregistrement (du moins la version 4.8).
On peut choisir le nombre de morceaux ou bien le nombre de pixels de chaque morceau.
Fini l'ennui du découpage au pixel près des images pour un site web (pas seulement pour les cadres arrondis).
bonjour à tous
merci de la contribution pour tous ceux qui ont répondu
super sympa et bonne continuation dans vos sites respectifs
EB
"Marc Quinton" <marc.quinton@aviation-civile.gouv.fr> a écrit dans le
message de news:3F616652.7010708@aviation-civile.gouv.fr...
man wrote:
> voilà je souhaite savoir comment faire un cadre mais avec des 4 angles
> seulement 1 seul arrondi est ce possible ?
>j'ai repris le style de Drop Zone City lui meme emprunté a la
partie admin de SPIP. Pour faciliter la mise en place des boite
j'ai créé 2 fonctions, l'une pour ouvrir les boites, l'autre pour fermer.L'interet de ce code, est de permettre de changer le style des boites
sans avoir a retourcher les squelettes. Si un jour, je veux juste
creer des boites avec un bloc div, c'est possible. Les modifications
étant centralisées.Ci-dessous, les boites sont toutes incluses dans un bloc div, et
il est possible de donner une classe lors de la création (premier
parametre).Si le titre n'est pas fourni, il n'y a pas de titre d'affiché, logique.
Pareil pour l'image.Et voici ce que ca donne :
avant la boite ;
<?php
include_once('Box.php'); // eventuellement avec le chemin d'acces.
?><?php box_start('box', 'Titre', 'secteur.gif'); ?>
Voila une jolie boite ;
avec des bors arrondis.<?php box_close(); ?>
apres la boite ;
et voici le code qui permet de generer les boites.
<?php
// Box.php
//
function box_start($class, $title, $img = ''){// repertoire qui pointe vers les images de drop-zone.
$img_dir = $GLOBALS['squelette']['img'];if($img == '')
$img = '';
else
$img = "<img alt=\"\" height=\"24\" width=\"24\"
src=\"$img_dir/$img\" />";
echo <<<END
<!-- box start : $title -->
<div class="$class">
<table border=0 cellpadding=0 cellspacing=0 width="100%"><tr>
<td width=5><img alt="" height="24" width="5" src="$img_dir/r-hg.gif"
/></td>
<td background="$img_dir/r-h.gif">$img</td>
<td width=5><img alt="" height="24" width="5" src="$img_dir/r-hd.gif"
/></td></tr>
<tr><td background="$img_dir/r-g.gif" width="5"> </td><td
class="content">
END;
if($title != '')
echo " <h3>$title</h3>\n";
# echo " <div class=\"h3\">$title</div><br>\n";}
function box_close(){
$img_dir = $GLOBALS['squelette']['img'];
echo <<<END
</td>
<td background="$img_dir/r-d.gif" width="5"> </td><tr>
<td><img alt="" width="5" height="5" src="$img_dir/r-bg.gif" /></td>
<td background="$img_dir/r-b.gif"><img alt="" width="5" height="5"
src="$img_dir/rien.gif" /></td>
<td><img alt="" width="5" height="5" src="$img_dir/r-bd.gif" /></td>
</tr>
</table>
</div>
<!-- box close -->END;
}?>
----------------------------------------------------------------------------
----