Bouton CSS - commentairesBouton CSS2016-10-09T04:27:15Zhttps://openweb.eu.org/articles/bouton_css#comment28682016-10-09T04:27:15Z<p>Bonjour,</p>
<p>Peux tu m'aider stp,</p>
<p>Je viens de créer un sous menu horizontal sur joomla 2.5 (beez_20) mais il y a toujours un décalage entre le menu et le sous menu.</p>
<p>voilà le code,</p>
<p>#header ul.menu<br class="autobr">
<i></i></p>
<p>/* top:62px ; */<br class="autobr">
top:5em ;</p>
<p>padding : 0px 0px 0px 0 ;<br class="autobr">
background :#e0e0e0 url(../images/personal/ecke.gif) top left repeat-x ;<br class="autobr">
border:0 ;<br class="autobr">
text-align:left ;<br class="autobr">
left:0px ;<br class="autobr">
display:block ;<br class="autobr">
margin:0px 10px 0 10px ;<br class="autobr">
border-top:solid 1px #ddd ;</p> <p>#header ul.menu li<br class="autobr">
<i>border:0 ; margin:0 !important ; </i><br class="autobr">
#header ul.menu li a:link,<br class="autobr">
#header ul.menu li a:visited<br class="autobr">
<i></i></p>
<p>color :#333 ;<br class="autobr">
border:0 ;<br class="autobr">
border-right:solid 1px #ddd ;<br class="autobr">
margin:0px 0 0 0 ;<br class="autobr">
padding:12px 15px ;<br class="autobr">
position:relative ;<br class="autobr">
background : #e0e0e0 url(../images/personal/ecke.gif) repeat-x top left ;<br class="autobr">
display:inline-block</p>
<p><br class="autobr">
#nav ul.menu <i> font-size : 20px ;</i><br class="autobr">
#header ul.menu li a:hover,<br class="autobr">
#header ul.menu li a:active,<br class="autobr">
#header ul.menu li a:focus<br class="autobr">
<i><br class="autobr">
background :#0d4c89 ;<br class="autobr">
color :#fff ;<br class="autobr">
</i></p>
<p>#header ul li.active a:link,<br class="autobr">
#header ul li.active a:visited<br class="autobr">
<i><br class="autobr">
color :#FF0000 ;<br class="autobr">
background:url(../images/personal/navi_active.png) ;<br class="autobr">
text-shadow : 1px 1px 1px #000 ;<br class="autobr">
</i></p>
<p>#header ul.skiplinks<br class="autobr">
<i><br class="autobr">
width:100% ;<br class="autobr">
text-align:left ;<br class="autobr">
background:none ;<br class="autobr">
z-index:20000 ;<br class="autobr">
top:0 ;<br class="autobr">
display:inline ;<br class="autobr">
padding:0<br class="autobr">
</i></p>
<p>#header ul.skiplinks li a.u2:active,<br class="autobr">
#header ul.skiplinks li a.u2:focus</p>
<p><i><br class="autobr">
background :#095197 !important ;<br class="autobr">
color :#fff !important ;<br class="autobr">
border:solid 1px ;<br class="autobr">
top:0 !important ;<br class="autobr">
z-index:10000 ;<br class="autobr">
right:auto ;<br class="autobr">
left:0 !important ;<br class="autobr">
display:block<br class="autobr">
</i></p>
<p>/* ++++++++++++++ fontsize ++++++++++++++ */</p>
<p>#fontsize<br class="autobr">
<i><br class="autobr">
display:inline ;</i></p> <p>#fontsize p a:link,<br class="autobr">
#fontsize p a:visited<br class="autobr">
<i><br class="autobr">
color :#222 ;<br class="autobr">
border-right:solid 1px #ccc<br class="autobr">
</i></p>
<p>#fontsize p a.larger,<br class="autobr">
#fontsize p a.reset,<br class="autobr">
#fontsize p a.smaller<br class="autobr">
<i><br class="autobr">
padding-left:5px ;<br class="autobr">
padding-right:5px ;<br class="autobr">
text-decoration:none ;<br class="autobr">
margin:0 ;<br class="autobr">
</i></p>
<p>#fontsize p a:hover,<br class="autobr">
#fontsize p a:active,<br class="autobr">
#fontsize p a:focus<br class="autobr">
<i><br class="autobr">
background :#095197 !important ;<br class="autobr">
color :#fff<br class="autobr">
</i></p>
<p>#fontsize h5<br class="autobr">
<i><br class="autobr">
color :#222 ;<br class="autobr">
font-weight:bold<br class="autobr">
</i></p>
<p>/* ++++++++++++++ search ++++++++++++++ */</p>Bouton CSS2015-04-02T22:19:43Zhttps://openweb.eu.org/articles/bouton_css#comment27002015-04-02T22:19:43Z<p>Bonjour,<br class="autobr">
J'ai crée 2 boutonnière verticales et j'aimerais les mettre cote à cote sur la meme ligne.</p>
<p>Comment faire.</p>
<p>Cordialement.</p>Bouton CSS2013-01-31T19:54:20Zhttps://openweb.eu.org/articles/bouton_css#comment14462013-01-31T19:54:20Z<p>personnellement j'ai bien cette interface dépouillée aller à l'essentiel le contenu surtout<br class="autobr">
puis un temps de chargement tres rapide <br class="autobr">
enfin chacun son truc ya qu'a voir google une interface ....simple mais efficace</p>
<p>a++</p>Bouton CSS2012-11-03T09:48:38Zhttps://openweb.eu.org/articles/bouton_css#comment11482012-11-03T09:48:38Z<p>Bonjour,</p>
<p>Alors, oui c'est peut-être plus simple d'aller directement à la <a href="http://css.mammouthland.net/feuille-de-style-css-debutant.php#record" class="spip_out" rel='nofollow external'>source</a> où toutes les explications détaillées sont données. Cela dit, pour faire court, on peut enregistrer les styles à 3 endroits différents :</p>
<ul class="spip"><li> au sein du code (à n'utiliser qu'exceptionnellement) grâce à l'attribut style</li><li> entre les balises en-tête
</li><li> et surtout dans une feuille de style externe (LA solution à privilégier)</li></ul>
<p>Bonne continuation.</p>Bouton CSS2012-11-02T22:07:44Zhttps://openweb.eu.org/articles/bouton_css#comment11472012-11-02T22:07:44Z<p>Bonjour Georges,</p>
<p>Impossible de répondre en quelques mots, je vous invite donc à découvrir <a href="http://css.mammouthland.net/" class="spip_out" rel='nofollow external'>CSS Débutant</a>, le site de l'auteure de cet article.</p>
<p>Amicalement, <br class="autobr">
Monique</p>Bouton CSS2012-11-02T21:57:08Zhttps://openweb.eu.org/articles/bouton_css#comment11462012-11-02T21:57:08Z<p>Bonjour,<br class="autobr">
Totalement débutant je me demande ce que l'on fait du code CSS ? <br class="autobr">
Merci<br class="autobr">
Bien amicalement</p>Bouton CSS2011-12-23T18:32:46Zhttps://openweb.eu.org/articles/bouton_css#comment5722011-12-23T18:32:46Z<p>bonjour et merci pouèr ce tuto. <br class="autobr">
je cherche a faire également un menu vertical mais uniquement pour des images ( le texte y est inclus) je n'y arrive absolument pas...</p>Bouton CSS2011-12-12T18:03:05Zhttps://openweb.eu.org/articles/bouton_css#comment5662011-12-12T18:03:05Z<p>Pratiquement excellent !! Pas autre mot qu'excellent !!</p>Bouton CSS2011-05-16T20:26:13Zhttps://openweb.eu.org/articles/bouton_css#comment4602011-05-16T20:26:13Z<p>Un grand merci pour ces explications claires, détaillées et très pratiques. L'article a beau dater de 2003, il est encore parfaitement d'actualité. Nous nous sommes d'ailleurs largement reposé dessus pour la mise en forme des boutons sur notre site de <a href="http://www.autoperfs.com/" rel='nofollow'>comparateur de mandataires automobile</a>. Merci !</p>Bouton CSS pour les boutons submit2010-11-29T04:06:32Zhttps://openweb.eu.org/articles/bouton_css#comment3582010-11-29T04:06:32Z<p>dans css</p>
<p>#submit<br class="autobr">
color : #b3000f ;<br class="autobr">
text-align : center ;<br class="autobr">
font-size : 12px ;<br class="autobr">
font-weight : bold ;<br class="autobr">
background :#FFFFFF ;<br class="autobr">
width : 160px ;<br class="autobr">
/* Defini le changement lors du passage de la souris sur le bouton du sous menu */<br class="autobr">
#submit2<br class="autobr">
color : #FFFFFF ;<br class="autobr">
text-align : center ;<br class="autobr">
font-size : 12px ;<br class="autobr">
font-weight : bold ;<br class="autobr">
background-color :#b3000f ;<br class="autobr">
width : 160px ;</p>
<p>dans page html (je suis obligé d'enlever l'accolade de input pour afficher le code du bouton, n'oublier pas de la remettre...)</p>
<p>input id="submit" type="submit" onmouseout="id='submit'" onmouseover="id='submit2'" value="Créer"/></p>Bouton CSS2010-11-29T04:01:18Zhttps://openweb.eu.org/articles/bouton_css#comment3572010-11-29T04:01:18Z<p>dans css</p>
<p>#submit<br class="autobr">
color : #b3000f ;<br class="autobr">
text-align : center ;<br class="autobr">
font-size : 12px ;<br class="autobr">
font-weight : bold ;<br class="autobr">
background :#FFFFFF ;<br class="autobr">
width : 160px ;<br class="autobr">
/* Defini le changement lors du passage de la souris sur le bouton du sous menu */<br class="autobr">
#submit2<br class="autobr">
color : #FFFFFF ;<br class="autobr">
text-align : center ;<br class="autobr">
font-size : 12px ;<br class="autobr">
font-weight : bold ;<br class="autobr">
background-color :#b3000f ;<br class="autobr">
width : 160px ;</p>
<p>dans page html (je suis obligé d'enlever l'accolade de input pour afficher le code du bouton, n'oublier pas de la remettre...)</p>
<p>input id="submit" type="submit" onmouseout="id='submit'" onmouseover="id='submit2'" value="Créer"/></p>Bouton CSS2010-11-29T03:58:50Zhttps://openweb.eu.org/articles/bouton_css#comment3562010-11-29T03:58:50Z<p>dans css</p>
<p>#submit <i><br class="autobr"> color : #b3000f ;<br class="autobr"> text-align : center ;<br class="autobr"> font-size : 12px ;<br class="autobr"> font-weight : bold ;<br class="autobr"> background :#FFFFFF ;<br class="autobr"> width : 160px ;<br class="autobr">
</i><br class="autobr">
/* Defini le changement lors du passage de la souris sur le bouton du sous menu */<br class="autobr">
#submit2 <i><br class="autobr"> color : #FFFFFF ;<br class="autobr"> text-align : center ;<br class="autobr"> font-size : 12px ;<br class="autobr"> font-weight : bold ;<br class="autobr"> background-color :#b3000f ;<br class="autobr"> width : 160px ;<br class="autobr">
</i></p>
<p>dans page html (je suis obligé d'enlever l'accolade de input pour afficher le code du bouton, n'oublier pas de la remettre...)</p>
<p>input id="submit" type="submit" onmouseout="id='submit'" onmouseover="id='submit2'" value="Créer"/></p>Bouton CSS2010-11-06T15:47:11Zhttps://openweb.eu.org/articles/bouton_css#comment3472010-11-06T15:47:11Z<p>Bonjour,</p>
<p>J'ai trouvé l'article très intéressant. En revanche, si l'on veut utiliser cette technique pour un bouton "Submit" de formulaire, comment fait-on ?</p>
<p>Merci de votre réponse.</p>