5568 sujets

Sémantique web et HTML

Pages :
Bonsoir, je suis un petit nouveau et c'est mon premier message et
mon premier problème à vous exposez.

Voilà, je suis en train de faire un site pour aller avec mon forum (je fait les choses à l'enver).
Pour le moment le site n'est pas héberger.

j'ai voulu installer un accès rapide, comme sur ce site;
'Aller au menu | Rechercher | Aller au contenu'

voici donc mon code html:
<ul id="nav_bar">
<li><a href="#gomenu"><span>Aller au menu</span></a>&nbsp;|&nbsp;</li>
<li><a href="#gorecherche">faire une recherche</a>&nbsp;|&nbsp;</li>
<li><a href="#gocontenu">Aller au contenu</a></li>
</ul>


et voici mes 3 ancres (que je place juste avant le menu le bloc recherche etc..):
<a name="gomenu"></a> 
<a name="gorecherche"></a>
<a name="gocontenu"></a>


et là, quand je clique, ben sa ne descend pas ou je veut,
Comment résoudre ce souci?

Voulez vous que je poste mon template entier?

merci de l'aide que vous pourrez m'apporter Smiley cligne
Modifié par sheitanEB (20 Jan 2008 - 03:23)
j'ai essayé vos deux solutions mais cela ne fonctionne pas avec moi Smiley bawling

je met mon code entier vous y verez peut-être plus clair.
Smiley cligne

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bla bla bla bla bla bla - en construction</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Author" content="" />
<link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="MB.css" media="all" />

<script type="text/javascript" src="styleswitch.js"></script>
<link href="normal.css" rel="stylesheet" type="text/css" title="A">
<link href="medium.css" rel="alternate stylesheet" type="text/css" title="A+">
<link href="large.css" rel="alternate stylesheet" type="text/css" title="A++">
<script type="text/javascript" src="styleswitch.js"></script>

<!--  jQuery library --><script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
<!--  jCarousel library --><script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>

<!-- Jcarousel -->
<script type="text/javascript">
var mycarousel_itemList = [
    {url: 'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg', title: 'Flower1'},
    {url: 'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg', title: 'Flower2'},
    {url: 'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg', title: 'Flower3'},
    {url: 'http://static.flickr.com/77/199481108_4359e6b971_s.jpg', title: 'Flower4'},
    {url: 'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg', title: 'Flower5'},
    {url: 'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg', title: 'Flower6'},
    {url: 'http://static.flickr.com/58/199481218_264ce20da0_s.jpg', title: 'Flower7'},
    {url: 'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg', title: 'Flower8'},
    {url: 'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg', title: 'Flower9'},
    {url: 'http://static.flickr.com/70/229228324_08223b70fa_s.jpg', title: 'Flower10'}
];
function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};
function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};
/* Item html creation helper. */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.title + '" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});
</script>
</head>

<body>

<div id="conteneur">
<div id="Ligne_header">
<ul id="nav_bar">
<li><a href="#gomenu"><span>Aller au menu</span></a>&nbsp;|&nbsp;</li>
<li><a href="#gorecherche">faire une recherche</a>&nbsp;|&nbsp;</li>
<li><a href="#gocontenu">Aller au contenu</a></li>
</ul>
</div>
<!-- haut -->
<div id="haut">
	<h1 id="logo"><a href="" title="Retour Accueil"><img src="images/logo.png" alt="" width="408" height="88" style="border:none;" /></a>
	<h2 id="slogan"><img src="images/logo2.png" width="256" height="88" style="border:none;" /></h2>
<div id="home_msg">
<a href="" title=""><img src="images/gohome.png" width="33" height="51" style="border:none;" /></a>
<a href="" title=""><img src="images/mail_generic.png" width="33" height="50" style="border:none;" /></a></div>

<div id="acces_rapide">
<div id="color_default">Style:&nbsp;<a href=""><img src="images/color_default.png" alt="Modifier le style" width="18" height="15" style="border:none;" /></div></a>
	<div id="font_switch">Taille du texte:
<a href="#" onclick="setActiveStyleSheet('A'); return false;"><font size="2">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A+'); return false;"><font size="3">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A++'); return false;"><font size="5">A</font></a></span>
    </div>
</div>

	<!-- menu -->
	<fieldset id="menu_header">
	  <ul id="gomenu">
		<li class="bouton_gauche"><a href="/">Accueil</a></li>
	    <li class="bouton"><a href="">Articles</a></li>
		<li class="bouton"><a href="">Recherche</a></li>
		<li class="bouton"><a href="">Le Forum</a></li>
	  	<li class="bouton"><a href="">Chattez!</a></li>
	  	<li class="bouton"><a href="">T&eacute;l&eacute;charger</a></li>
	  	<li class="bouton"><a href="">F.A.Q</a></li>
		<li class="bouton"><a href="">Gallerie Photo</a></li>
	  	<li class="bouton"><a href="">Boutique</a></li>
		<li class="bouton"><a href="">Livre D'Or</a></li>
	  	<li class="bouton_droite"><a href="contact.html">Contact</a></li>
	  </ul>
	</fieldset>
	<!-- fin - menu -->
	
	<!-- bloc bienvenue + recherche -->

	<div id="bienvenue_recherche">
			<div id="message_bienvenue">
			<a href="/" id="gorecherche" title="Créer un compte">s'enregistrer</a>&nbsp;|&nbsp;<a href="/" title="Connexion">se connecter</a></div>

		<div id="recherche_haut">	
<script language="javascript" type="text/javascript"> 
function validation() 
{
	// recuperation de la valeur du champ
	champ = document.RechercheArticle.recherche.value;
	
	
	if(champ == "" || parseInt(champ)!=champ && champ.length < 3) 
	{ 
		alert ('Veuillez saisir au minimum 3 caratères.'); 
		// document.formulaire.Recherche.focus(); 
		return false; 
	} 
	else
	{
		return true;
	}
}
</script> 
			<form method="get" action="/recherche.php" name="RechercheArticle" target="_top" onSubmit="return validation();">
				<div id="recherche_icon"><img src="images/recherche_icon.png" /></div><span>Recherche :</span>
				<input id="Recherche_Maillot" name="recherche" class="recherchebox" type="text" value="" />
				<select name="famille" class="catbox">
					<option value="0">Sur cette page</option>
<option value="1">Les esp&egrave;ces</option>
<option value="1">Culture</option>
<option value="1">Entretien</option>
<option value="1">Techniques</option>
<option value="1">Formation</option>
<option value="1">Forum</option>
				</select>
                             <input type="button" class="bttgo"/>

			</form>
		</div>

	</div>
	<!-- bloc bienvenue + recherche -->
</div>
<!-- fin - haut -->

<!-- coeur du site -->
<a name="haut"></a>

<div id="page">
	<div id="barrebas"></div>

<a name="gocontenu"></a>
	<div id="gauche">
		<div id="cat_gauche">
		<ul class="effect_menu">
		<li><a href="" title="">Menu 1</a></li>
		<li><a href="" title="">Menu 2</a></li>
		<li><a href="" title="">Menu 3</a></li>
		<li><a href="" title="">Menu 4</a></li>
		<li><a href="" title="">Menu 5</a></li>
		<li><a href="" title="">Menu 6</a></li>
		<li><a href="" title="">Menu 7</a></li>
		<li><a href="" title="">Menu 8</a></li>
		<li><a href="" title="">Menu 9</a></li>
		<li><a href="" title="">Menu 10</a></li>
		</ul></div>
<div id="sous_menu_gauche">
        <a href=""><b>Introduction</b></a>
</div></div>


	<div id="centre">
		<div>
		   <img src="images/815x76.png" alt="" width="817" height="76" style="margin:1px 0 3px 0;" />
		</div>

		
<div id="nouveautes_accueil">
	<a href=""><b>Culture</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="promotions_accueil">
	<a href=""><b>Entretien</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div> 
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="rares_accueil">
	<a href=""><b>Techniques</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="coupcoeur_accueil">
	<a href=""><b>Formation</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>


		<div id="actu_accueil">
			<a href=""><b>Les esp&egrave;ces</b></a>

			<div id="Liste_especes">
<form id="liste_links" method="post" action="http://www.apple.com/cgi-bin/nph-menu">
<select name="Liste_especes" onChange="location.href=this.form.Liste_especes.options[this.form.Liste_especes.selectedIndex].value">
<option selected value="">Espace Bonsai</option>
						

<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
</select>
</form>
</div>
		</div>

		<div id="expo_accueil">
			<a href=""><b>Gallerie</b></a>
<div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
		</div>

	</div>
</div>
<!-- fin - coeur du site -->

<div id="bas">
	<div id="barrebas"></div>
	<div id="basutile">
	
<div id="image_footer"></div>
		<!-- menu -->
		<fieldset id="menubas">
		  <ul>
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
	  		<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			<li><a href="">Menu 5</a></li>
			<li><a href="">Menu 6</a></li>
			<li><a href="">Menu 7</a></li>
			<li><a href="">Menu 8</a></li>
		  </ul>
		</fieldset>
		<!-- fin - menu -->
		<!-- copyright -->
		<div id="copyright">
			<span>Copyright &copy; 2007 Espace bonsai. Tous droits r&eacute;serv&eacute;s.</span>
		</div>
		<!-- fin - copyright -->
</div>
<div id="Ligne_footer"><div id="xhtml_css"></div></div>
</div>
</body>
</html>
sheitanEB a écrit :
j'ai essayé vos deux solutions

Ah?

Dans ton code, je lis ceci:
<ul id="gomenu">

...

<a href="/" id="gorecherche" title="Créer un compte">s'enregistrer</a>

...

<a name="gocontenu"></a>
	<!-- Ici un menu de navigation -->

Donc:
- la première ancre est correcte, mais n'utilise pas la forme la plus compatible possible;
- la deuxième ancre est un identifiant sur un lien qui pointe ailleurs... pas sûr que ça passe;
- la troisième ancre est correcte, mais mal placée.

On veillera donc à bien placer les ancres, et on pourra utiliser la syntaxe mentionnée par Heyoan par exemple.
Là ça ne bouge plus du tout, j'ai modifié ainsi(je ne me serais pas trompé?):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bla bla bla bla bla bla - en construction</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Author" content="" />
<link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="MB.css" media="all" />

<script type="text/javascript" src="styleswitch.js"></script>
<link href="normal.css" rel="stylesheet" type="text/css" title="A">
<link href="medium.css" rel="alternate stylesheet" type="text/css" title="A+">
<link href="large.css" rel="alternate stylesheet" type="text/css" title="A++">
<script type="text/javascript" src="styleswitch.js"></script>

<!--  jQuery library --><script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
<!--  jCarousel library --><script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>

<!-- Jcarousel -->
<script type="text/javascript">
var mycarousel_itemList = [
    {url: 'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg', title: 'Flower1'},
    {url: 'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg', title: 'Flower2'},
    {url: 'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg', title: 'Flower3'},
    {url: 'http://static.flickr.com/77/199481108_4359e6b971_s.jpg', title: 'Flower4'},
    {url: 'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg', title: 'Flower5'},
    {url: 'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg', title: 'Flower6'},
    {url: 'http://static.flickr.com/58/199481218_264ce20da0_s.jpg', title: 'Flower7'},
    {url: 'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg', title: 'Flower8'},
    {url: 'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg', title: 'Flower9'},
    {url: 'http://static.flickr.com/70/229228324_08223b70fa_s.jpg', title: 'Flower10'}
];
function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};
function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};
/* Item html creation helper. */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.title + '" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});
</script>
</head>

<body>

<div id="conteneur">
<div id="Ligne_header">
<ul id="nav_bar">
<li><a href="#gomenu" name="gomenu" id="gomenu"></a><span>Aller au menu</span></a>&nbsp;|&nbsp;</li>
<li><a href="#gorecherche" name="gorecherche" id="gorecherche">faire une recherche</a>&nbsp;|&nbsp;</li>
<li><a href="#gocontenu" name="gocontenu" id="gocontenu">Aller au contenu</a></li>
</ul>
</div>
<!-- haut -->
<div id="haut">
	<h1 id="logo"><a href="" title="Retour Accueil"><img src="images/logo.png" alt="" width="408" height="88" style="border:none;" /></a>
	<h2 id="slogan"><img src="images/logo2.png" width="256" height="88" style="border:none;" /></h2>
<div id="home_msg">
<a href="" title=""><img src="images/gohome.png" width="33" height="51" style="border:none;" /></a>
<a href="" title=""><img src="images/mail_generic.png" width="33" height="50" style="border:none;" /></a></div>

<div id="acces_rapide">
<div id="color_default">Style:&nbsp;<a href=""><img src="images/color_default.png" alt="Modifier le style" width="18" height="15" style="border:none;" /></div></a>
	<div id="font_switch">Taille du texte:
<a href="#" onclick="setActiveStyleSheet('A'); return false;"><font size="2">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A+'); return false;"><font size="3">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A++'); return false;"><font size="5">A</font></a></span>
    </div>
</div>

	<!-- menu -->
	<fieldset id="menu_header">
<a name="gomenu">
	  <ul>
		<li class="bouton_gauche"><a href="/">Accueil</a></li>
	    <li class="bouton"><a href="">Articles</a></li>
		<li class="bouton"><a href="">Recherche</a></li>
		<li class="bouton"><a href="">Le Forum</a></li>
	  	<li class="bouton"><a href="">Chattez!</a></li>
	  	<li class="bouton"><a href="">T&eacute;l&eacute;charger</a></li>
	  	<li class="bouton"><a href="">F.A.Q</a></li>
		<li class="bouton"><a href="">Gallerie Photo</a></li>
	  	<li class="bouton"><a href="">Boutique</a></li>
		<li class="bouton"><a href="">Livre D'Or</a></li>
	  	<li class="bouton_droite"><a href="contact.html">Contact</a></li>
	  </ul></a>
	</fieldset>
	<!-- fin - menu -->
	
	<!-- bloc bienvenue + recherche -->

	<div id="bienvenue_recherche">
			<div id="message_bienvenue">

<a name="gorecherche">
			<a href="/" title="Créer un compte">s'enregistrer</a>&nbsp;|&nbsp;<a href="/" title="Connexion">se connecter</a></a></div>

		<div id="recherche_haut">	
<script language="javascript" type="text/javascript"> 
function validation() 
{
	// recuperation de la valeur du champ
	champ = document.RechercheArticle.recherche.value;
	
	
	if(champ == "" || parseInt(champ)!=champ && champ.length < 3) 
	{ 
		alert ('Veuillez saisir au minimum 3 caratères.'); 
		// document.formulaire.Recherche.focus(); 
		return false; 
	} 
	else
	{
		return true;
	}
}
</script> 
			<form method="get" action="/recherche.php" name="RechercheArticle" target="_top" onSubmit="return validation();">
				<div id="recherche_icon"><img src="images/recherche_icon.png" /></div><span>Recherche :</span>
				<input id="Recherche_Maillot" name="recherche" class="recherchebox" type="text" value="" />
				<select name="famille" class="catbox">
					<option value="0">Sur cette page</option>
<option value="1">Les esp&egrave;ces</option>
<option value="1">Culture</option>
<option value="1">Entretien</option>
<option value="1">Techniques</option>
<option value="1">Formation</option>
<option value="1">Forum</option>
				</select>
                             <input type="button" class="bttgo"/>

			</form>
		</div>

	</div>
	<!-- bloc bienvenue + recherche -->
</div>
<!-- fin - haut -->

<!-- coeur du site -->

<div id="page">
	<div id="barrebas"></div>

	<div id="gauche">
		<div id="cat_gauche">

<a name="gocontenu">
		<ul class="effect_menu">
		<li><a href="" title="">Menu 1</a></li>
		<li><a href="" title="">Menu 2</a></li>
		<li><a href="" title="">Menu 3</a></li>
		<li><a href="" title="">Menu 4</a></li>
		<li><a href="" title="">Menu 5</a></li>
		<li><a href="" title="">Menu 6</a></li>
		<li><a href="" title="">Menu 7</a></li>
		<li><a href="" title="">Menu 8</a></li>
		<li><a href="" title="">Menu 9</a></li>
		<li><a href="" title="">Menu 10</a></li>
		</ul></a></div>
<div id="sous_menu_gauche">
        <a href=""><b>Introduction</b></a>
</div></div>


	<div id="centre">
		<div>
		   <img src="images/815x76.png" alt="" width="817" height="76" style="margin:1px 0 3px 0;" />
		</div>

		
<div id="nouveautes_accueil">
	<a href=""><b>Culture</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="promotions_accueil">
	<a href=""><b>Entretien</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div> 
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="rares_accueil">
	<a href=""><b>Techniques</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="coupcoeur_accueil">
	<a href=""><b>Formation</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>


		<div id="actu_accueil">
			<a href=""><b>Les esp&egrave;ces</b></a>

			<div id="Liste_especes">
<form id="liste_links" method="post" action="http://www.apple.com/cgi-bin/nph-menu">
<select name="Liste_especes" onChange="location.href=this.form.Liste_especes.options[this.form.Liste_especes.selectedIndex].value">
<option selected value="">Espace Bonsai</option>
						

<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
</select>
</form>
</div>
		</div>

		<div id="expo_accueil">
			<a href=""><b>Gallerie</b></a>
<div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
		</div>

	</div>
</div>
<!-- fin - coeur du site -->

<div id="bas">
	<div id="barrebas"></div>
	<div id="basutile">
	
<div id="image_footer"></div>
		<!-- menu -->
		<fieldset id="menubas">
		  <ul>
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
	  		<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			<li><a href="">Menu 5</a></li>
			<li><a href="">Menu 6</a></li>
			<li><a href="">Menu 7</a></li>
			<li><a href="">Menu 8</a></li>
		  </ul>
		</fieldset>
		<!-- fin - menu -->
		<!-- copyright -->
		<div id="copyright">
			<span>Copyright &copy; 2007 Espace bonsai. Tous droits r&eacute;serv&eacute;s.</span>
		</div>
		<!-- fin - copyright -->
</div>
<div id="Ligne_footer"><div id="xhtml_css"></div></div>
</div>
</body>
</html>

Modifié par sheitanEB (17 Jan 2008 - 23:01)
C'est plutôt :
<ul id="nav_bar">
	<li><a href="#gomenu">Aller au menu</a> | </li>
	<li><a href="#gorecherche">faire une recherche</a> | </li>
	<li><a href="#gocontenu">Aller au contenu</a></li>
</ul>
et plus loin
<a href="#gomenu" name="gomenu" id="gomenu"></a>
Smiley smile
j'ai effectué les modifications et ça ne fonctionne toujours pas.

aller au menu et aller a la recherche bouge mais toujours pas au bon endroit,
et aller au contenu ne bouge pas et il y a deux casses vide qui sont apparues
dans mon menu qui est à gauche du contenu (en fait il y a un menu header et à gauche du contenu).
voici le code: (je commence à me demander si c'est pas un autre de mes codes qui ferait que sa ne fonctionne pas, pourtant je n'ai pas deux fois les même id.
<body>

<div id="conteneur">
<div id="Ligne_header">
<ul id="nav_bar">
<li><a href="#gomenu"><span>Aller au menu</span></a>&nbsp;|&nbsp;</li>
<li><a href="#gorecherche">faire une recherche</a>&nbsp;|&nbsp;</li>
<li><a href="#gocontenu" name="gocontenu" id="gocontenu">Aller au contenu</a></li>
</ul>
</div>
<!-- haut -->
<div id="haut">
	<h1 id="logo"><a href="" title="Retour Accueil"><img src="images/logo.png" alt="" width="408" height="88" style="border:none;" /></a>
	<h2 id="slogan"><img src="images/logo2.png" width="256" height="88" style="border:none;" /></h2>
<div id="home_msg">
<a href="" title=""><img src="images/gohome.png" width="33" height="51" style="border:none;" /></a>
<a href="" title=""><img src="images/mail_generic.png" width="33" height="50" style="border:none;" /></a></div>

<div id="acces_rapide">
<div id="color_default">Style:&nbsp;<a href=""><img src="images/color_default.png" alt="Modifier le style" width="18" height="15" style="border:none;" /></div></a>
	<div id="font_switch">Taille du texte:
<a href="#" onclick="setActiveStyleSheet('A'); return false;"><font size="2">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A+'); return false;"><font size="3">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A++'); return false;"><font size="5">A</font></a></span>
    </div>
</div>

	<!-- menu -->
	<fieldset id="menu_header">
<a href="gomenu" name="gomenu" id="gomenu">
	  <ul>
		<li class="bouton_gauche"><a href="/">Accueil</a></li>
	        <li class="bouton"><a href="">Articles</a></li>
		<li class="bouton"><a href="">Recherche</a></li>
		<li class="bouton"><a href="">Le Forum</a></li>
	  	<li class="bouton"><a href="">Chattez!</a></li>
	  	<li class="bouton"><a href="">T&eacute;l&eacute;charger</a></li>
	  	<li class="bouton"><a href="">F.A.Q</a></li>
		<li class="bouton"><a href="">Gallerie Photo</a></li>
	  	<li class="bouton"><a href="">Boutique</a></li>
		<li class="bouton"><a href="">Livre D'Or</a></li>
	  	<li class="bouton_droite"><a href="contact.html">Contact</a></li>
	  </ul></a>
	</fieldset>
	<!-- fin - menu -->
	
	<!-- bloc bienvenue + recherche -->

	<div id="bienvenue_recherche">
			<div id="message_bienvenue">

<a href="gorecherche" name="gorecherche" id="gorecherche">
			<a href="/" title="Créer un compte">s'enregistrer</a>&nbsp;|&nbsp;<a href="/" title="Connexion">se connecter</a></a></div>

		<div id="recherche_haut">	
<script language="javascript" type="text/javascript"> 
function validation() 
{
	// recuperation de la valeur du champ
	champ = document.RechercheArticle.recherche.value;
	
	
	if(champ == "" || parseInt(champ)!=champ && champ.length < 3) 
	{ 
		alert ('Veuillez saisir au minimum 3 caratères.'); 
		// document.formulaire.Recherche.focus(); 
		return false; 
	} 
	else
	{
		return true;
	}
}
</script> 
			<form method="get" action="/recherche.php" name="RechercheArticle" target="_top" onSubmit="return validation();">
				<div id="recherche_icon"><img src="images/recherche_icon.png" /></div><span>Recherche :</span>
				<input id="Recherche_Maillot" name="recherche" class="recherchebox" type="text" value="" />
				<select name="famille" class="catbox">
					<option value="0">Sur cette page</option>
<option value="1">Les esp&egrave;ces</option>
<option value="1">Culture</option>
<option value="1">Entretien</option>
<option value="1">Techniques</option>
<option value="1">Formation</option>
<option value="1">Forum</option>
				</select>
                             <input type="button" class="bttgo"/>

			</form>
		</div>

	</div>
	<!-- bloc bienvenue + recherche -->
</div>
<!-- fin - haut -->

<!-- coeur du site -->


<div id="page">
	<div id="barrebas"></div>
	<div id="gauche">

<a href="gocontenu" name="gocontenu" id="gocontenu">
		<div id="cat_gauche">
		<ul class="effect_menu">
		<li><a href="" title="">Menu 1</a></li>
		<li><a href="" title="">Menu 2</a></li>
		<li><a href="" title="">Menu 3</a></li>
		<li><a href="" title="">Menu 4</a></li>
		<li><a href="" title="">Menu 5</a></li>
		<li><a href="" title="">Menu 6</a></li>
		<li><a href="" title="">Menu 7</a></li>
		<li><a href="" title="">Menu 8</a></li>
		<li><a href="" title="">Menu 9</a></li>
		<li><a href="" title="">Menu 10</a></li>
		</ul></div></a>
<div id="sous_menu_gauche">
        <a href=""><b>Introduction</b></a>
</div></div>


	<div id="centre">
		<div>
		   <img src="images/815x76.png" alt="" width="817" height="76" style="margin:1px 0 3px 0;" />
		</div>

		
<div id="nouveautes_accueil">
	<a href=""><b>Culture</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="promotions_accueil">
	<a href=""><b>Entretien</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div> 
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="rares_accueil">
	<a href=""><b>Techniques</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="coupcoeur_accueil">
	<a href=""><b>Formation</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>


		<div id="actu_accueil">
			<a href=""><b>Les esp&egrave;ces</b></a>

			<div id="Liste_especes">
<form id="liste_links" method="post" action="http://www.apple.com/cgi-bin/nph-menu">
<select name="Liste_especes" onChange="location.href=this.form.Liste_especes.options[this.form.Liste_especes.selectedIndex].value">
<option selected value="">Espace Bonsai</option>
						

<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
</select>
</form>
</div>
		</div>

		<div id="expo_accueil">
			<a href=""><b>Gallerie</b></a>
<div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
		</div>

	</div>
</div>
<!-- fin - coeur du site -->

<div id="bas">
	<div id="barrebas"></div>
	<div id="basutile">
	
<div id="image_footer"></div>
		<!-- menu -->
		<fieldset id="menubas">
		  <ul>
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
	  		<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			<li><a href="">Menu 5</a></li>
			<li><a href="">Menu 6</a></li>
			<li><a href="">Menu 7</a></li>
			<li><a href="">Menu 8</a></li>
		  </ul>
		</fieldset>
		<!-- fin - menu -->
		<!-- copyright -->
		<div id="copyright">
			<span>Copyright &copy; 2007 Espace bonsai. Tous droits r&eacute;serv&eacute;s.</span>
		</div>
		<!-- fin - copyright -->
</div>
<div id="Ligne_footer"><div id="xhtml_css"></div></div>
</div>
</body>
</html>

Modifié par sheitanEB (17 Jan 2008 - 23:30)
sheitanEB a écrit :
j'ai effectué les modifications et ça ne fonctionne toujours pas.
Et bien non... pas tout à fait : tes ancres sont invalides car il manque le # dans le href et la balise fermante </a> Smiley murf !

D'autre part ton ancre gorecherche est mal placée : elle devrait être juste avant avant le <div id="recherche_haut">

A+ Smiley smile
ah oui j'avais mis les </a> trop loin et oubliez les#,
par contre j'ai modifier mais sa ne fonctionne pas
j'espère que je me suis pas encore trompez Smiley blushie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bla bla bla bla bla bla - en construction</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Author" content="" />
<link rel="shortcut icon" type="images/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="MB.css" media="all" />

<script type="text/javascript" src="styleswitch.js"></script>
<link href="normal.css" rel="stylesheet" type="text/css" title="A">
<link href="medium.css" rel="alternate stylesheet" type="text/css" title="A+">
<link href="large.css" rel="alternate stylesheet" type="text/css" title="A++">
<script type="text/javascript" src="styleswitch.js"></script>

<!--  jQuery library --><script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
<!--  jCarousel library --><script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>

<!-- Jcarousel -->
<script type="text/javascript">
var mycarousel_itemList = [
    {url: 'http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg', title: 'Flower1'},
    {url: 'http://static.flickr.com/75/199481072_b4a0d09597_s.jpg', title: 'Flower2'},
    {url: 'http://static.flickr.com/57/199481087_33ae73a8de_s.jpg', title: 'Flower3'},
    {url: 'http://static.flickr.com/77/199481108_4359e6b971_s.jpg', title: 'Flower4'},
    {url: 'http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg', title: 'Flower5'},
    {url: 'http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg', title: 'Flower6'},
    {url: 'http://static.flickr.com/58/199481218_264ce20da0_s.jpg', title: 'Flower7'},
    {url: 'http://static.flickr.com/69/199481255_fdfe885f87_s.jpg', title: 'Flower8'},
    {url: 'http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg', title: 'Flower9'},
    {url: 'http://static.flickr.com/70/229228324_08223b70fa_s.jpg', title: 'Flower10'}
];
function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
{
    // The index() method calculates the index from a
    // given index who is out of the actual item range.
    var idx = carousel.index(i, mycarousel_itemList.length);
    carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[idx - 1]));
};
function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt)
{
    carousel.remove(i);
};
/* Item html creation helper. */
function mycarousel_getItemHTML(item)
{
    return '<img src="' + item.url + '" width="75" height="75" alt="' + item.title + '" />';
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'circular',
        itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback},
        itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback}
    });
});
</script>
</head>

<body>

<div id="conteneur">
<div id="Ligne_header">
<ul id="nav_bar">
<li><a href="#gomenu"><span>Aller au menu</span></a>&nbsp;|&nbsp;</li>
<li><a href="#gorecherche">faire une recherche</a>&nbsp;|&nbsp;</li>
<li><a href="#gocontenu" name="gocontenu" id="gocontenu">Aller au contenu</a></li>
</ul>
</div>
<!-- haut -->
<div id="haut">
	<h1 id="logo"><a href="" title="Retour Accueil"><img src="images/logo.png" alt="" width="408" height="88" style="border:none;" /></a>
	<h2 id="slogan"><img src="images/logo2.png" width="256" height="88" style="border:none;" /></h2>
<div id="home_msg">
<a href="" title=""><img src="images/gohome.png" width="33" height="51" style="border:none;" /></a>
<a href="" title=""><img src="images/mail_generic.png" width="33" height="50" style="border:none;" /></a></div>

<div id="acces_rapide">
<div id="color_default">Style:&nbsp;<a href=""><img src="images/color_default.png" alt="Modifier le style" width="18" height="15" style="border:none;" /></div></a>
	<div id="font_switch">Taille du texte:
<a href="#" onclick="setActiveStyleSheet('A'); return false;"><font size="2">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A+'); return false;"><font size="3">A</font></a></span>
<a href="#" onclick="setActiveStyleSheet('A++'); return false;"><font size="5">A</font></a></span>
    </div>
</div>

	<!-- menu -->
	<fieldset id="menu_header">
<a href="#gomenu" name="gomenu" id="gomenu"></a>
	  <ul>
		<li class="bouton_gauche"><a href="/">Accueil</a></li>
	        <li class="bouton"><a href="">Articles</a></li>
		<li class="bouton"><a href="">Recherche</a></li>
		<li class="bouton"><a href="">Le Forum</a></li>
	  	<li class="bouton"><a href="">Chattez!</a></li>
	  	<li class="bouton"><a href="">T&eacute;l&eacute;charger</a></li>
	  	<li class="bouton"><a href="">F.A.Q</a></li>
		<li class="bouton"><a href="">Gallerie Photo</a></li>
	  	<li class="bouton"><a href="">Boutique</a></li>
		<li class="bouton"><a href="">Livre D'Or</a></li>
	  	<li class="bouton_droite"><a href="contact.html">Contact</a></li>
	  </ul>
	</fieldset>
	<!-- fin - menu -->
	
	<!-- bloc bienvenue + recherche -->

	<div id="bienvenue_recherche">
			<div id="message_bienvenue">

			<a href="/" title="Créer un compte">s'enregistrer</a>&nbsp;|&nbsp;<a href="/" title="Connexion">se connecter</a></div>

		<div id="recherche_haut">	
<a href="#gorecherche" name="gorecherche" id="gorecherche"></a>

<script language="javascript" type="text/javascript"> 
function validation() 
{
	// recuperation de la valeur du champ
	champ = document.RechercheArticle.recherche.value;
	
	
	if(champ == "" || parseInt(champ)!=champ && champ.length < 3) 
	{ 
		alert ('Veuillez saisir au minimum 3 caratères.'); 
		// document.formulaire.Recherche.focus(); 
		return false; 
	} 
	else
	{
		return true;
	}
}
</script> 
			<form method="get" action="/recherche.php" name="RechercheArticle" target="_top" onSubmit="return validation();">
				<div id="recherche_icon"><img src="images/recherche_icon.png" /></div><span>Recherche :</span>
				<input id="Recherche_Maillot" name="recherche" class="recherchebox" type="text" value="" />
				<select name="famille" class="catbox">
					<option value="0">Sur cette page</option>
<option value="1">Les esp&egrave;ces</option>
<option value="1">Culture</option>
<option value="1">Entretien</option>
<option value="1">Techniques</option>
<option value="1">Formation</option>
<option value="1">Forum</option>
				</select>
                             <input type="button" class="bttgo"/>

			</form>
		</div>

	</div>
	<!-- bloc bienvenue + recherche -->
</div>
<!-- fin - haut -->

<!-- coeur du site -->


<div id="page">
	<div id="barrebas"></div>
	<div id="gauche">

<a href="#gocontenu" name="gocontenu" id="gocontenu"></a>
		<div id="cat_gauche">
		<ul class="effect_menu">
		<li><a href="" title="">Menu 1</a></li>
		<li><a href="" title="">Menu 2</a></li>
		<li><a href="" title="">Menu 3</a></li>
		<li><a href="" title="">Menu 4</a></li>
		<li><a href="" title="">Menu 5</a></li>
		<li><a href="" title="">Menu 6</a></li>
		<li><a href="" title="">Menu 7</a></li>
		<li><a href="" title="">Menu 8</a></li>
		<li><a href="" title="">Menu 9</a></li>
		<li><a href="" title="">Menu 10</a></li>
		</ul></div>
<div id="sous_menu_gauche">
        <a href=""><b>Introduction</b></a>
</div></div>


	<div id="centre">
		<div>
		   <img src="images/815x76.png" alt="" width="817" height="76" style="margin:1px 0 3px 0;" />
		</div>

		
<div id="nouveautes_accueil">
	<a href=""><b>Culture</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="promotions_accueil">
	<a href=""><b>Entretien</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div> 
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="rares_accueil">
	<a href=""><b>Techniques</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>

<div id="coupcoeur_accueil">
	<a href=""><b>Formation</b></a>
	<h1><a href="" title="">Introduction</a></h1>
	<div><img src="images/article_icon.png"/>&nbsp;<a href="" title="">Articles</a></div>
        <div id="frame">
bla bla bla bla bla<hr>bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />
        </div>
<hr id="ts_articles" /> 
&bull;&nbsp;<a href="" title="">Voir tous les articles</a>
</div>


		<div id="actu_accueil">
			<a href=""><b>Les esp&egrave;ces</b></a>

			<div id="Liste_especes">
<form id="liste_links" method="post" action="http://www.apple.com/cgi-bin/nph-menu">
<select name="Liste_especes" onChange="location.href=this.form.Liste_especes.options[this.form.Liste_especes.selectedIndex].value">
<option selected value="">Espace Bonsai</option>
						

<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">-----------------</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
<option value="">Nom de l'espèce</option>
</select>
</form>
</div>
		</div>

		<div id="expo_accueil">
			<a href=""><b>Gallerie</b></a>
<div id="wrap">
  <ul id="mycarousel" class="jcarousel-skin-ie7">
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</div>
		</div>

	</div>
</div>
<!-- fin - coeur du site -->

<div id="bas">
	<div id="barrebas"></div>
	<div id="basutile">
	
<div id="image_footer"></div>
		<!-- menu -->
		<fieldset id="menubas">
		  <ul>
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
	  		<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			<li><a href="">Menu 5</a></li>
			<li><a href="">Menu 6</a></li>
			<li><a href="">Menu 7</a></li>
			<li><a href="">Menu 8</a></li>
		  </ul>
		</fieldset>
		<!-- fin - menu -->
		<!-- copyright -->
		<div id="copyright">
			<span>Copyright &copy; 2007 Espace bonsai. Tous droits r&eacute;serv&eacute;s.</span>
		</div>
		<!-- fin - copyright -->
</div>
<div id="Ligne_footer"><div id="xhtml_css"></div></div>
</div>
</body>
</html>

Modifié par sheitanEB (18 Jan 2008 - 00:08)
Hmm... pourquoi dans ce lien :
a écrit :
<li><a href="#gocontenu" name="gocontenu" id="gocontenu">Aller au contenu</a></li>
y a-t-il toujours un name et un id ?

Peut-être un petit manque d'attention et de relecture, non Smiley cligne ?

A+
exact je suis un peu inatentif Smiley mur

j'ai enlever mais ce n'est toujours pas ça,
les trois liens descendent au même endroit au niveau du header. Smiley decu
sheitanEB a écrit :
exact je suis un peu inatentif Smiley mur

J'aime bien le «un peu». Smiley smile

Plus sérieusement, il y a un petit manque de rigueur ici. Une solution correcte avec un code pour ainsi dire à copier-coller t'a été proposée dès le début de ce sujet, et la mise en place de cette solution s'est faite à tâtons, avec des erreurs criantes comme des éléments a pas refermés, des attributs id et name dont les valeurs ne sont pas uniques dans le document, etc. Peut-être y a-t-il un problème de fond, par exemple une maitrise trop partielle de la syntaxe HTML?

sheitanEB a écrit :
les trois liens descendent au même endroit au niveau du header.

Ils marchent parfaitement de mon côté. Du moins avec le code HTML brut.
Peut-on voir la page en ligne, pour constater le problème tel qu'il se manifeste (apparemment) sur la page complète?
Florent V. a écrit :

J'aime bien le «un peu». Smiley smile
Peut-être y a-t-il un problème de fond, par exemple une maitrise trop partielle de la syntaxe HTML?

En fait je connais le html, j'ai fait mon forum avec ce language,
en fin il ne doit pas vraiment passer les normes mais j'arrive à faire ce que je veut toujours,
pour le xhtml et css, je viens d'apprendre il y a à peine deux mois.
donc je ne suis pas encore au top Smiley ravi

Florent V. a écrit :

Ils marchent parfaitement de mon côté. Du moins avec le code HTML brut.
Peut-on voir la page en ligne, pour constater le problème tel qu'il se manifeste (apparemment) sur la page complète?

Comme je l'ai dit dans mon premier post, je fait ça sur mon pc, le site n'est pas héberger mais je vais le mettre en ligne vite fait pour que vous puissiez juger par vous même, je met le lien dès que c'est bon.

Encore merci de la patience que vous accorder au néofite comme moi
Smiley cligne
Me revoilà sans l'adresse, j'ai mis tout les fichier du site sur mon ftp via fillezilla et quand je vais sur le site voilà ce que j'obtient:
Error 403 - Forbidden

L'accès au fichier requiert une autorisation.


comment faire sur fillezilla pour que tout le monde puisse voir le site et surtout l'administrateur Smiley ohwell
merci à vous.
Il faut régler les permissions des fichiers, en général sur 644 pour les fichiers et 755 pour les dossiers. Si tu as accès à un shell SSH, tu vas dans le bon dossier et tu tape (et valide):
find * -type d -print0 | xargs -0 chmod 755 && find * -type f -print0 | xargs -0 chmod 644


Mais si tu poses la question, je pense que tu n'es pas familier des permissions de fichiers sous les systèmes de type Unix (Linux, Mac OS X, FreeBSD, etc.). Et sans doute encore moins de la ligne de commande, de SSH, etc.

Tu peux changer les permissions sur les fichiers et dossiers directement en utilisant Filezilla. Tu sélectionnes une série de fichiers, tu fais un clic droit et sélectionnes «attributs du fichier» ou quelque chose de similaire. Il faut que les permissions publiques autorisent au moins la lecture.
Modifié par Florent V. (19 Jan 2008 - 00:13)
Florent V. a écrit :

Tu peux changer les permissions sur les fichiers et dossiers directement en utilisant Filezilla. Tu sélectionnes une série de fichiers, tu fais un clic droit et sélectionnes «attributs du fichier» ou quelque chose de similaire. Il faut que les permissions publiques autorisent au moins la lecture.

J'ai mis 644 pour valeur numérique à tout mes fichiers même le dossier parent, les permissions publiques ont donc l'option 'lire' de cocher
et pourtant il me met ça:

Forbidden
You don't have permission to access / on this server.

Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request. 

je doit-être maudit moi Smiley rolleyes
Modifié par sheitanEB (19 Jan 2008 - 04:47)
sheitanEB a écrit :
J'ai mis 644 pour valeur numérique à tout mes fichiers même le dossier parent
...
je doit-être maudit moi Smiley rolleyes

Peut-être que la malédiction en question c'est "Toi ! Tu ne seras pas du tout rigoureux" Smiley lol !

Comme te l'indiquait Florent : les dossiers doivent avoir une valeur de 755... et pas 644.

A+
Modifié par Heyoan (19 Jan 2008 - 14:52)
sheitanEB a écrit :
vous avez des idées du pourquoi du comment que sa marche pas mon accès rapide.

Chez moi ça marche parfaitement : chaque lien me positionne bien juste avant l'élément ciblé et un clic sur la touche TAB me positionne dans l'élément en question Smiley smile .
Pages :