Rechercher : dans
Par :

Image découpée +css

Dernière réponse le 5 déc 2006 à 20:11:04 nov, le 4 déc 2006 à 10:43:48 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « image découpée +css » dans :
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...
[Logiciels] Rassembler un fichier XTM VoirUn fichier XTM est un fichier coupé en morceaux avec le logiciel XtremSplit, téléchargeable à l'adresse suivante : Télécharger Xtremsplit
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...

1

king, le 4 déc 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

nov, le 5 déc 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" 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/getflashplayer" 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" 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/getflashplayer" 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

king, le 5 déc 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

nov, le 5 déc 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

 king, le 5 déc 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