rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Image découpée +css

Posté par nov, le lundi 4 décembre 2006 à 10:43:48
bonjour,
je voudrais faire un bandeau avec une image découpée et insérer du flash dans le bandeau.Je ne sais pas comment m'y prendre car j'ai vu que pour les feuilles de style,il y a la propriété background-image qui permet d'insérer qu'une seule image ,j'ai une balise div qui me sert d'entete et je voudrai justement y inserer mon image découpée.J'ai essayé d'y mettre un tableau,ça marche pour IE mais pour firefox,il m'explose l'image...faudrait il que je mette plusieurs div?mais en tout cas,j'ai du mal à positionner mon image...
Répondre à nov  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
king, le lundi 4 décembre 2006 à 16:24:13
Reste à savoir comment tu as fait, firefox accepte les tableaux sans souci. C'est même plus simple pour les images, car le positionnement css et IE, c'est pas évident :-)
   
Répondre à king

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
nov, le mardi 5 décembre 2006 à 09:18:33
voici mon code html+css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"­;>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>accueil</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>

<BODY>
<div id="document">
<div id="entete">
<!-- ImageReady Slices (bandeau4.psd) -->
<TABLE WIDTH=759 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD ROWSPAN=2>
<IMG SRC="images/bandeau1_01.gif" WIDTH=92 HEIGHT=108></TD>
<TD COLSPAN=2>
<IMG SRC="images/bandeau1_02.jpg" WIDTH=667 HEIGHT=49></TD>
</TR>
<TR>
<TD WIDTH=226 HEIGHT=59><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quo­t; codebase="http://download.macromedia.com/pub/shockwave/­cabs/flash/swflash.cab#version=7,0,19,0" width="226" height="59">
<param name="movie" value="bandeau.swf">
<param name="quality" value="high">
<embed src="bandeau.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplaye­r" type="application/x-shockwave-flash" width="226" height="59"></embed>
</object></TD>
<TD>
<IMG SRC="images/bandeau1_04.jpg" WIDTH=441 HEIGHT=59></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->
</div>
<div id="colonne1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quo­t; codebase="http://download.macromedia.com/pub/shockwave/­cabs/flash/swflash.cab#version=7,0,19,0" width="143" height="450">
<param name="movie" value="../site2/menu.swf" />
<param name="quality" value="high" />
<embed src="../site2/menu.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplaye­r" type="application/x-shockwave-flash" width="143" height="450"></embed>
</object>
</div>
<div id="colonne2">test1
</div>
<div id="pied">test2
</div>
</div>

</BODY>
</HTML>


la css:
*
{
padding: 0;
margin: 0;
border: 0;
}
body
{
background-color: #CE1D1D;

}
#document
{
width: 759px;
margin: 0 auto;
text-align: center;
background-color: #FFFFFF;
}
#document *
{
text-align: left;
}
#entete
{
height: 7em;
line-height: 7em;
}
#colonne1
{
width: 143px;
float: left;
background-color: #FFCC66;
}
#colonne2
{
width: 616px;
float: left;
background-color: #ECE9D8;
}
#pied
{
clear: left;
height: 1em;
line-height: 1em;
background-color: #006633;
}
p
{
padding: 20px;
}
   
Répondre à nov

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
king, le mardi 5 décembre 2006 à 15:42:31
Vais mâter ça de la nuit, si pas de réponse entre-temps ;-)

Si j'ai tout pigé, tu fais une ban avec plusieurs formats image, dont une en flash?

Y a un apercu on line quelque part? (histoire d'avoir une idée globale plutôt que tout ce blabla de code) :-)
   
Répondre à king

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
nov, le mardi 5 décembre 2006 à 16:02:45
merci d'avoir voulu m'aider mais en fait j'ai résolu une partie du probleme!
il suffisait d'enlever la 1ère ligne du code html c'est à dire:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"­;>
ainsi que d'ajouter une balise <center> et voila maintenant ça marche nickel sous IE et firefox!
si je ne mettais pas <center> mon document n'était pas centré sous IE.Par contre,sous firefox,c'était centré mais maintenant que j'ai rajouté cette balise ,ça marche bien sous IE et firefox!

voilà,par contre,je ne sais pas s'il faut que j'utilise des tableaux pour le contenu de ma page car mon contenu est divisé en 3 partie ,une partie texte à gauche,une image survolée de fleche au 2/3 et enfin une photo à droite,et ceci 3 fois ,au départ j'ai fait 9 cellules...
t'en pense quoi sachant que j'ai eu des probleme de dépassement du cadre de mon document avec les tableaux,ça serait pas mieux avec des div ou span?
   
Répondre à nov

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 king, le mardi 5 décembre 2006 à 20:11:04
Disons qu'avec le css, qui plus est en externe, tu y gagnes en poids sur la page, une meilleur lecture pour les moteurs, une facilité pour les changements etc. et peut-être (pour ne pas dire certainement) quelques embrouilles de compréhension pour IE (mais là, on finit par mâter la bête quand même) :-)

Celat dit, on peut aussi mélanger les 2, les tableaux sont des fois bien utils.
   
Répondre à king
Posez votre question Répondre
Discussions pertinentes trouvées dans le forum
18/07 14h16Image et css4
18/05 16h14Ecrire sur une image en css ? Oo2
15/03 16h52Alternative image en css3
29/01 15h28Placement image sur autre image - html/css1
Plus de discussions sur « image découpée +css »
Logiciels pertinents trouvés dans les téléchargements
Télécharger Image Resizer 1Image Resizer - Petit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger VSO Image Resizer 2.0.1.9VSO Image Resizer - Le logiciel VSO Image Resizer organise vos photos en réduisant leur résolution et en les déplaçant facilement au sein de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger ImageWell 3.5.3ImageWell - ImageWell n'est pas à proprement parler un logiciel de Retouche photo. Il permet plutôt de préparer des images pour le...Catégorie: Retouche photo
Licence: Freeware/gratuit
Télécharger IsoBuster 2.4IsoBuster - IsoBuster est un outil de récupération de CD, DVD, HD-DVD et BD prenant en charge tous les formats et tous leurs système de...Catégorie: Gravure
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « image découpée +css »