Bouton CSS - commentaires Bouton CSS 2016-10-09T04:27:15Z https://openweb.eu.org/articles/bouton_css#comment2868 2016-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 CSS 2015-04-02T22:19:43Z https://openweb.eu.org/articles/bouton_css#comment2700 2015-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 CSS 2013-01-31T19:54:20Z https://openweb.eu.org/articles/bouton_css#comment1446 2013-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 CSS 2012-11-03T09:48:38Z https://openweb.eu.org/articles/bouton_css#comment1148 2012-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 CSS 2012-11-02T22:07:44Z https://openweb.eu.org/articles/bouton_css#comment1147 2012-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 CSS 2012-11-02T21:57:08Z https://openweb.eu.org/articles/bouton_css#comment1146 2012-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 CSS 2011-12-23T18:32:46Z https://openweb.eu.org/articles/bouton_css#comment572 2011-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 CSS 2011-12-12T18:03:05Z https://openweb.eu.org/articles/bouton_css#comment566 2011-12-12T18:03:05Z <p>Pratiquement excellent !! Pas autre mot qu'excellent !!</p> Bouton CSS 2011-05-16T20:26:13Z https://openweb.eu.org/articles/bouton_css#comment460 2011-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 submit 2010-11-29T04:06:32Z https://openweb.eu.org/articles/bouton_css#comment358 2010-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 CSS 2010-11-29T04:01:18Z https://openweb.eu.org/articles/bouton_css#comment357 2010-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 CSS 2010-11-29T03:58:50Z https://openweb.eu.org/articles/bouton_css#comment356 2010-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 CSS 2010-11-06T15:47:11Z https://openweb.eu.org/articles/bouton_css#comment347 2010-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>