A voir également:
- Image de fond dans Dreamweaver 6
- Image iso - Guide
- Nero 6 - Télécharger - Gravure
- Enlever le fond d'une image - Guide
- Comment mettre une vidéo en fond d'écran - Guide
- Belote a 6 - Forum Graphisme
8 réponses
Voici le lien www.mariage -era.be
J'ai fais des tests sur la page index, il y normalement une image au-dessus des boutons de navigation mais je ne la vois pas.
Sur les autres pages, les boutons de navigation sont dans un tableau fait dans la bannière du dessus, mais l'image de fond ne s'affiche pas !
J'ai fais des tests sur la page index, il y normalement une image au-dessus des boutons de navigation mais je ne la vois pas.
Sur les autres pages, les boutons de navigation sont dans un tableau fait dans la bannière du dessus, mais l'image de fond ne s'affiche pas !
De plus, l'habillage autour des boutons de navigations est nrmalement transparent, et là, ils sont blancs
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Caracteres accentues dans l'url ... on a dis et repeter partout, PAS de caracteres accentués, Pas d'espace Pas de majuscule...
Oups, oui juste.
Concernant l'habillage autour des boutons de navigations qui s'affiche en blanc, tu as une solution ?
Concernant l'habillage autour des boutons de navigations qui s'affiche en blanc, tu as une solution ?
SInon pour ton site tu dois rajouter une ligne de css :
Dans ton body{}; ligne 53, tu dois rajouter :
Dans ton body{}; ligne 53, tu dois rajouter :
background-image: url(dossier/image_de_fond.jpeg);
Tu a dans ton css un hack css pour ie qui dit background:#fff ... simple suffit de regarder...
@un_neurone vérifie donc ce que je dis avant de critiquer mon information. Quand à être sur firefox, il à un problème sur ie
Quand au hack, il est dans le fichier http://www.mariage-era.be/SpryAssets/SpryMenuBarHorizontal.css
à la ligne 185 comprise dans le block de la ligne 179:
Apprend à coder t'est classique, on verra après si tu est aussi cross-browser que tu le prétend en restant sous un seul navigateur et seulement sur firebug qui élimine et corrige beaucoup de partie du code qui ne correspondent pas aux standards et/ou au navigateur.
Cordialement.
Quand au hack, il est dans le fichier http://www.mariage-era.be/SpryAssets/SpryMenuBarHorizontal.css
à la ligne 185 comprise dans le block de la ligne 179:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background-color: #fff; } }
Apprend à coder t'est classique, on verra après si tu est aussi cross-browser que tu le prétend en restant sous un seul navigateur et seulement sur firebug qui élimine et corrige beaucoup de partie du code qui ne correspondent pas aux standards et/ou au navigateur.
Cordialement.
Bonjour, voici le code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
.template_era {
background-image: url(Templates/essai.jpg);
background-repeat: no-repeat;
}
body {
background-color: #000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<table align="center" width="1100" height="707" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="707" class="template_era"><table width="1100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="199" height="100"><p> </p></td>
<td colspan="2"><table width="875" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50"> </td>
</tr>
<tr>
<td><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Accueil</a> </li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Tarifs</a> </li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Partenaires</a>
<ul>
<li><a href="#">Robes et costumes</a></li>
<li><a href="#">Parcs</a></li>
<li><a href="#">Traiteurs</a></li>
<li><a href="#">Fleuristes</a></li>
<li><a href="#">Divers</a></li>
</ul>
</li>
<li><a href="#">Map</a></li>
</ul></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="450"><p>450</p>
<p> </p></td>
<td width="850"> </td>
<td width="51"> </td>
</tr>
<tr>
<td height="150"> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Voici le css des spry :
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #000;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
background-color: #323232;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 9em;
float: left;
background-color: #000;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-color: #000;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
background-color: #000;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
background-color: #000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #CCC;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
background-color: #000;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #333;
color: #000000;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #333;
color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background-color: #545454;
}
}
Que dois-je modifier pour que l'habillage des boutons de navigation soient transparent ??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
.template_era {
background-image: url(Templates/essai.jpg);
background-repeat: no-repeat;
}
body {
background-color: #000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<table align="center" width="1100" height="707" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="707" class="template_era"><table width="1100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="199" height="100"><p> </p></td>
<td colspan="2"><table width="875" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50"> </td>
</tr>
<tr>
<td><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Accueil</a> </li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Tarifs</a> </li>
<li><a href="#">Contact</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Partenaires</a>
<ul>
<li><a href="#">Robes et costumes</a></li>
<li><a href="#">Parcs</a></li>
<li><a href="#">Traiteurs</a></li>
<li><a href="#">Fleuristes</a></li>
<li><a href="#">Divers</a></li>
</ul>
</li>
<li><a href="#">Map</a></li>
</ul></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="450"><p>450</p>
<p> </p></td>
<td width="850"> </td>
<td width="51"> </td>
</tr>
<tr>
<td height="150"> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Voici le css des spry :
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #000;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
background-color: #323232;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 9em;
float: left;
background-color: #000;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-color: #000;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
background-color: #000;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8em;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
background-color: #000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #CCC;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
background-color: #000;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #333;
color: #000000;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #333;
color: #FFF;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background-color: #545454;
}
}
Que dois-je modifier pour que l'habillage des boutons de navigation soient transparent ??