28172 sujets

CSS et mise en forme, CSS3

Où sont mes boutons ?

Hello !

Voilà mon souci : dans l'interface d'une page, j'essaye de placer 3 boutons (pour le moment, ils ne sont pas en balises <a> mais en <div>) et de les aligner horizontalement malheureusement un seul d'entre-eux apparait (à noter : je suis sous IE7) ! Et là, je me demande comment ça se fait car je ne situe pas l'erreur dans le code css et html !

Voici les fichiers de la page : http://www.lne-art.be/site.rar

Si vous pouviez m'aider à pointer le problème du doigt, ce serait super, merci !
Hello Gizmil,

N'aurais-tu pas une page en ligne plutôt qu'une archive à nous proposer ?
salut,
tu ne ferme pas tes div.
remplace :
		<div id="mb_espace_gauche">
		<div id="mb_espace_infos">
		<div id="mb_espace_contact">
		<div id="mb_espace_droit">


	<div id="mb_espace_gauche"></div>
		<div id="mb_espace_infos"></div>
		<div id="mb_espace_contact"></div>
		<div id="mb_espace_droit"></div>
Doit y avoir une erreur a ton codage, mais cici ne me semble pas tellement sémantique. Tu souhaite faire un menu mais tu utilise des div que tu repositionne. Du moins c'est se que j'en déduit en voyant ta page.


Voici ton code pour facilité la lecture a tous ainsi q'une capture de ton projet.

<body>
<div id="content">
	<div id="espace1">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
	<div id="en-tete"></div>
	<div id="espace2"></div>
	<div id="menu_bas">
		<div id="mb_espace_gauche">
		<div id="mb_espace_infos">
		<div id="mb_espace_contact">
		<div id="mb_espace_droit">
	</div>
</div>
</body>



/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* FICHIER INDEX.HTML
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
html{
	width:100%;
	height:100%;
	border:0;
}
body {
	background-color:#ffffff;
	background-image:url(images/background.jpg);
	width:100%;
	text-align: center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	margin:0;
	padding:0;
}
/*---------------------------------------------------------------------------------------------*/
#keywords {
	margin:auto;
	color:#ffffff;
	font-size:5px;
}
#content {
	width:760px;
	height:auto;
	margin:auto;
	text-align:center;
	background-image:url(images/accueil_temp.jpg);
	background-repeat:no-repeat;
	background-position:top;
}
#espace1 {
	width:100%;
	height:32px;
	margin-top:30px;
	background-color:#ffffff;
	color:#ffffff;
}
#en-tete {
	width:100%;
	height:84px;
	background-image:url(images/en-tete_accueil.gif);
}
#espace2 {
	width:100%;
	height:454px;
	background-color:#ffffff;
}
#menu_bas {
	width:100%;
	height:26px;
	background-color:#fbfaf5;
	border-top:2px solid #f1ede4;
}
/*---- menu_bas - debut ----*/
#mb_espace_gauche {
	float:left;
	width:240px;
	height:26px;
	background-color:#fbfaf5;
}
#mb_espace_accueil {
	float:left;
	width:102px;
	height:26px;
	background-image:url(images/menu_bas_accueil.gif);
}
#mb_espace_infos {
	float:left;
	width:76px;
	height:26px;
	background-image:url(images/menu_bas_infos.gif);
}
#mb_espace_contact {
	float:left;
	width:102px;
	height:26px;
	background-image:url(images/menu_bas_contact.gif);
}
#mb_espace_droit {
	float:right;
	width:240px;
	height:26px;
}
/*---- menu_bas - fin ----*/
a {
	display:block;
	width:70px;
	margin:4px auto 0 auto;
	text-align: center;
	font-family:Arial;
	font-size:11px;
	font-weight:bold;
	color:#000000;
	text-decoration:none;
}
a:link {
	color:#000000;
	text-decoration:none;
}
a:visited{
	color:#8db6b0;
	text-decoration:none;
}
a:hover {
	color:#6699cc;
	text-decoration:underline;
}

upload/16347-Sanstitre-.jpg

Sémentiquement il te faudrait utiliser les balises ul .

Peut etre que j'me trompe aussi . Tiens nous au jus et essai si tu peu de mettre une page en ligne. bye
Modifié par worms30 (03 Aug 2009 - 19:04)
Effectivement, comme l'as dit fabrice88 tu as omit la fermeture de certaines de tes balises.

Ensuite, dans ton post tu nous parles d'insérer trois boutons dans ta page or ta page et ton code sont dénuées de tout bouton.
Modifié par jQz (03 Aug 2009 - 19:19)
Houla, je devais être plus fatigué que je pensais ! Finalement, c'est souvent sur des erreurs bêtes que je calle ! Smiley sweatdrop

En tous cas, merci à tous pour votre aide et à Worms30 pour son boulot d'affichage !!

Oui, sémantiquement, je sais que je ne suis pas vraiment juste et qu'un <ul> serait plus approprié. Pour jQz, si tu lis plus haut, je disais que, pour l'instant, je n'ai pas placé les images de mes boutons dans des balises <a></a>. En fait, j'ai simplement oublié de le faire en contruisant ma page et hier, je saturais un peu, j'avais pas le courage de changer et de réécrire mon css à ce moment-là !

Bref, merci encore, je vais fermer mes div !! Smiley rolleyes Smiley cligne
Gizmil, j'ai bien lu ton topic du début jusqu'à la fin.

Néanmoins quand, au début, tu parles d'images de bouton je m'attendais à voir ceci :


<input type="image" src="ton_image.extension" alt="Valider" name="Valider" value="Valider" title="Valider" />

Modifié par jQz (04 Aug 2009 - 14:55)
Heu, je n'utilise jamais input, j'ignore même à quoi ça sert !


Puisqu'on en parle, je rencontre encore un souci, toujours avec mes boutons ! J'utilise des balises <a></a> pour ceux-ci que je formate en css et je place les images de mes boutons en background.

Problème : les boutons ne fonctionnent pas !! Et là, je me demande à quoi c'est dû... Bon, y a un moment que j'ai pas touché aux css donc il y a certainement quelque chose qui m'échappe...

<div id="content">
	<div id="espace2"></div>
	<div id="en-tete"></div>
	<div id="espace3"></div>
	<div id="menu_bas">
		<div id="mb_espace_gauche"></div>
		<a id="mb_espace_accueil" alt="Accueil"></a>
		<a id="mb_espace_infos" alt="Informations"></a>
		<a id="mb_espace_contact" alt="Contact"></a>
		<div id="mb_espace_droit"></div>
	</div>
</div>



#mb_espace_accueil {
	float:left;
	width:102px;
	height:26px;
	background-image:url(images/menu_bas_accueil.gif);
}
#mb_espace_infos {
	float:left;
	width:76px;
	height:26px;
	background-image:url(images/menu_bas_infos.gif);
}
#mb_espace_contact {
	float:left;
	width:102px;
	height:26px;
	background-image:url(images/menu_bas_contact.gif);
}

Les fichiers : http://www.lne-art.be/site.rar
Modifié par Gizmil (04 Aug 2009 - 17:45)
Ici, il est normal que tes liens ne fonctionne pas car tu as omis l'attribut href de la balise <a>.

Par exemple, si je reprends ton code XHTML :


<div id="content"> 
    <div id="espace2"></div> 
    <div id="en-tete"></div> 
    <div id="espace3"></div> 
    <div id="menu_bas"> 
        <div id="mb_espace_gauche"></div> 
        <a id="mb_espace_accueil" alt="Accueil"></a> 
        <a id="mb_espace_infos" alt="Informations"></a> 
        <a id="mb_espace_contact" alt="Contact"></a> 
        <div id="mb_espace_droit"></div> 
    </div> 
</div>


Il faut que tu spécifies l'attribut href, ce qui devient.


<div id="content"> 
    <div id="espace2"></div> 
    <div id="en-tete"></div> 
    <div id="espace3"></div> 
    <div id="menu_bas"> 
        <div id="mb_espace_gauche"></div> 
        <a href="liens_vers_une_page.extension" id="mb_espace_accueil" alt="Accueil"></a> 
        <a href="liens_vers_une_page.extension" id="mb_espace_infos" alt="Informations"></a> 
        <a href="liens_vers_une_page.extension" id="mb_espace_contact" alt="Contact"></a> 
        <div id="mb_espace_droit"></div> 
    </div> 
</div>


Pour plus d'informations, consulter ce tutoriel.
Modifié par jQz (04 Aug 2009 - 18:14)
Ah oui, bien sûr...

Je pensais que le lien devenait interactif même sans le href mais c'est logique... je ne comprenais pas qu'il n'y avait pas d'interactivité sur mes boutons !

Ok, merci !
Sujet clos
Aller à