Centrer bouton en html

loulou -  
 loulou -
Bonjour,

j'ai fait des boutons en html le rendu est pas trop mal sauf que je n'arrive pas à les centrer dans ma page ... ils sont tout à gauche et avec les balises <center> et </center> impossible ça ne marche pas que dois je faire ??



<p> <div style="float:left"><button> <font color="#8000ff"><font size ="4"><font color ="#000066"> Accueil</font color></fontsize></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066">Présentation </font color> </font size></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066">Produits et services </font color> </font size></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066"> Infos pratiques </font color> </font size></button></div>

<div style="float:left"><button> <font color="#8000ff"><font size = "4"> <font color ="#000066">Nous contacter </font color> </font size></button></div> </p>







32 réponses

Précédent
  • 1
  • 2
Réponse 21 / 32
loulou
 
on dirait que les liens ne marche pas sur la balise "button" .... qu'en pensez vous ??
0
Réponse 22 / 32
loulou
 
up
0
Réponse 23 / 32
will5555 Messages postés 332 Date d'inscription   Statut Membre Dernière intervention   45
 
pour les liens on utilise la balise <a></a> normalement.

je pense que tu as du faire une erreur quelque part dans ton code.

peut on avoir le code du fichier en question?
0
Réponse 24 / 32
loulou
 
<center>
<a href="Accueil.htm"><button>Accueil</button></a>
<a href="Presentation.htm"><button>Présentation</button></a>
<a href="Produits et services.html"><button>Produits et services</button> </a>
<a href="Infos pratiques.html"> <button>Infos pratiques</button> </a>
<a href="Nous contacter.html"> <button>Nous contacter</button></a>
</center>ça souligne le lien à l'intérieur du bouton mais rien ne se passe ...ça n'ouvre même pas une page ...

par contre j'ai essayé ce code que j'ai trouvé sur internet :


<center><FORM ACTION="Présentation.html">
<INPUT TYPE="SUBMIT" VALUE="Présentation"></FORM>

<FORM ACTION="Produits et services.html">
<INPUT TYPE="SUBMIT" VALUE="Produits et services"></FORM>
<FORM ACTION="Infos pratiques.html">
<INPUT TYPE="SUBMIT" VALUE="Infos pratiques"></FORM>

<FORM ACTION="Nous contacter.html">
<INPUT TYPE="SUBMIT" VALUE="Nous contacter"></FORM></center>là les liens fonctionnent bien ça ouvre la bonne page html mais impossible de mettrel es boutons sur la même ligne..
ça me désespère il n'y a aucune solution à mon problème ou je dois créer des boutons moi même et les mettre comme image ?

une solution svp pour mes deux codes ou l'un deux au moins ? merci ;)
0
fxtaa Messages postés 1050 Date d'inscription   Statut Membre Dernière intervention   74
 
salut, le css3 ? :)

Enleve ton form et tes input et remet des liens <a href="bob.html" class="menu">Go to bob</a> 
.menu{
	-webkit-border-radius:3px 3px 3px 3px;
	-moz-border-radius:3px 3px 3px 3px;
	-webkit-box-shadow:0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px white inset;
	-moz-box-shadow:0 1px rgba(255, 255, 255, 0.4), 0 20px 20px -10px white inset;
	border:1px solid rgba(0, 0, 0, 0.6);
	display:inline-block;
	font:12px/13px "Lucida Grande",sans-serif;
	margin:0 3px;
	padding:3px 6px;
	text-shadow:0 1px rgba(255, 255, 255, 0.4);
	background:none repeat scroll 0 0 #969696;
	margin-bottom : 5px;
}
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 25 / 32
MicroStoretm Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Enfaite, dans 
value="ton texte"
tu peut mettre n'importe quel mot,
apres 
href="tapage.html"
dans "tapage.html" tu met le nom de ton fichier html :
Example:
si ton fichier s'appele "
presentation.html
"
alors tu met a la place de "
tapage.html
" ceci "
presentation.html
" met sa depend le nom de ton fichier,
y'a plus qu'a appuiyer surle boutont ;)
Si ta un pb, n'hesite pas.

ne tinquiete pas au debut tu a un peu de mal en html met apres sa va, moi par example j'ai commencez a 11ans et j'ai 13ans et maintenant je creer des application :D bonne chance.
0
Réponse 26 / 32
MicroStoretm Messages postés 8 Date d'inscription   Statut Membre Dernière intervention  
 
Enfaite, dans 
value="ton texte"
tu peut mettre n'importe quel mot,
apres 
href="tapage.html"
dans "tapage.html" tu met le nom de ton fichier html :
Example:
si ton fichier s'appele "
presentation.html
"
alors tu met a la place de "
tapage.html
" ceci "
presentation.html
" met sa depend le nom de ton fichier,
y'a plus qu'a appuiyer surle boutont ;)
Si ta un pb, n'hesite pas.

ne tinquiete pas au debut tu a un peu de mal en html met apres sa va, moi par example j'ai commencez a 11ans et j'ai 13ans et maintenant je creer des application :D bonne chance.
0
Réponse 27 / 32
loulou
 
Merci fxtaa mais excuse moi mais je n'ai rien compris à ton code !! ;) je suis dsl ....

merci mircosotrem mais en fait ça marche les liens sur mon deuxième code le soucis maintenant c'est d'alligner les boutons sur une seule ligne tu as une solution pour ça ??
bravo si tu as 13 ans bravo !! ;)
0
fxtaa Messages postés 1050 Date d'inscription   Statut Membre Dernière intervention   74
 
C est un ptit code a mettre dans ta feuille de style css pour faire un effet bouton, sans passer par un formulaire ni par des images.
0
Réponse 28 / 32
will5555 Messages postés 332 Date d'inscription   Statut Membre Dernière intervention   45
 
l'utilisation de la balise form ce justifie lorsqu'on envoie des information sur une autre page.

je te conseille d'utiliser ceci pour voir tes erreurs de codages et eventuelles problème http://validator.w3.org/
0
Réponse 29 / 32
loulou
 
merci mais ça corrige les erreurs ? je n'ai pas encre d'hébergeur donc .... :(
je me demande si tu peux me dire si ça serait pas plus facile par ex de faire mes boutons moi meme non et les mettre comme image avec lien comme ça ils seraient où je veux et centrer non?
si ça peut marcher comme ça dis le ou dites le moi car je vais surement faire ça ça m'évitera de perdre trop de temps à essayer et essayer et chercher chercher ...merci ;)
0
Réponse 30 / 32
will5555 Messages postés 332 Date d'inscription   Statut Membre Dernière intervention   45
 
Oui le lien te signal les erreurs, et si tu regard tu as 3 onglets, un pour rentrer l'url de la page, un autre pour uploadé ton fichier et un autre pour copier directement ton code.

Sinon voici le bout de code que j'utilise pour le menu de mon site :

<div id="menu_horizontal">
<ul>
<li> <a href="<?php bloginfo('url'); ?>" onMouseOver="document.home.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_home.png';"
onMouseOut="document.home.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/home.png';">

<img name="home" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/home.png' alt="Home" />
</a> <li>

<li> <a href="http://www.anima-geek.fr/?page_id=12" onMouseOver="document.galerie.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_galeries.png';"
onMouseOut="document.galerie.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/galeries.png';">

<img name="galerie" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/galeries.png' alt="galeries d'images" />
</a> <li>

<li> <a href="http://www.anima-geek.fr/?page_id=59" onMouseOver="document.video.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_videos.png';"
onMouseOut="document.video.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/videos.png';">

<img name="video" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/videos.png' alt="Vidéos" />
</a> </li>

<li id="contact"> <a href="http://www.anima-geek.fr/?page_id=60" onMouseOver="document.contact.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/h_contact.png';" onMouseOut="document.contact.src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/contact.png';">

<img name="contact" src='http://www.anima-geek.fr/wp-content/themes/Willem_Theme/images/contact.png' alt="Contact" /> </a> </li>
</ul>

</div>


Il est un peu complexe car j'utilise javascript pour que l'image du bouton change au passage de la souris.


et voici mon code css :

#menu_horizontal {
float: left;
margin-top:-4px;
}

#menu_horizontal ul{
display : inline;
list-style : none;
padding-left : 6px;
}

#menu_horizontal ul li{
display : inline;
margin-left : -2px;

}

#menu_horizontal ul li a{

}

#menu_horizontal ul li a img {
border : none;

}

le seul hic de mon code css c'est qu'il est décallé d'1px sur la droite sous IE ><
0
Réponse 31 / 32
loulou
 
je vais essayer dans la journée pour voir je te tiens au courant merci ;)
0
Réponse 32 / 32
Breub62 Messages postés 2989 Date d'inscription   Statut Membre Dernière intervention   369
 
Essaie de remplacer float:left par float:center
-1

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
ou est la touche shift sur un clavier
Mathis -
Maelstrom -

4 réponses
Touche "home" sur pc portable.
Mario70 -
Bezulon -

25 réponses