Discussion fermée Actualité déjà publiée
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 650
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 650
    Points : 91 548
    Points
    91 548
    Billets dans le blog
    20

    Par défaut

    Bonjour à tous,

    Comme vous l'avez certainement remarqué la rubrique CSS dispose d'une Galerie, qui ne demande qu'à être étoffée. Elle est actuellement en ligne avec 18 sources.

    Vous pouvez la parcourir avant de poser une question sur le forum.

    Nous pouvons la faire grandir avec votre collaboration. En effet, pour participer à son évolution, vous pouvez poster dans le forum Contribuez les codes qui peuvent vous paraitre intéressant.

    Merci de mettre les sources sous ce format :
    Titre.
    URL de l'aperçu (si hébergement sur votre site).
    Auteur (ce doit être obligatoirement vous).
    Compatibilité
    Vos remarques (si ça vous parait utile).
    L'url de téléchargement (si hébergement sur votre site)
    L'url de démo (si hébergement sur votre site)
    Pour plus d'informations, vous pouvez me contacter.

    pour votre future participation
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum
      0  0

  2. #2
    Membre émérite Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : octobre 2003
    Messages : 2 880
    Points : 2 953
    Points
    2 953

    Par défaut Contribuez à la galerie CSS

    Titre : Formulaire sans tableau
    Auteur : franculo_caoulene
    Description : Formulaire XHTML 1.0 strict et CSS 2 valide.

    Pour les corrections ou améliorations passez par MP ça évitera de polluer le fil et j'aviserai ensuite.

    formulaire.htm :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    	<title>Formulaire CSS</title>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    	<link rel="stylesheet" href="formulaire.css" type="text/css" />
    	<script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <form id="formulaire" method="post" action="">
    	<fieldset id="info1">
    		<legend>Identité</legend>
    		<p><label for="nom">Nom</label><input type="text" id="nom" value="" /></p>
    		<p><label for="prenom">Prénom</label><input type="text" id="prenom" value="" /></p>
     
    		<p><label for="choix1">Choix 1</label>
    		<select id="choix1">
    			<option value="0">--- choisir ---</option>
    			<option value="1">choix 10</option>
    			<option value="2">choix 11</option>
    			<option value="3">choix 12</option>
    		</select>
    		</p>
     
    		<p><label for="choix2">Choix 2</label>
    		<select id="choix2">
    			<option value="0">--- choisir ---</option>
    			<option value="1">choix 20</option>
    			<option value="2">choix 21</option>
    			<option value="3">choix 22</option>
    		</select>
    		</p>
    	</fieldset>
     
    	<fieldset id="info2">
    		<legend>Informations détaillées</legend>
    		<p><label for="jour">Date de naissance</label>
    			<input type="text" id="jour" value="" size="2" maxlength="2" /> /
    			<input type="text" id="mois" value="" size="2" maxlength="2" /> /
    			<input type="text" id="an" value="" size="4" maxlength="4" />&nbsp;(01/05/1987)
    		</p>
    		<p><label for="lieu_nais">Lieu de naissance</label><input type="text" id="lieu_nais" value="" /></p>
    		<p><label for="nationalite">Nationalité</label><input type="text" id="nationalite" value="" /></p>
    		<p><label for="profession">Profession</label><input type="text" id="profession" value="" /></p>
    		<p><label for="adresse">Adresse</label><input type="text" id="adresse" value="" /></p>
    		<p><label for="cp">Code postal</label><input type="text" id="cp" value="" size="5" /></p>
    		<p><label for="ville">Ville</label><input type="text" id="ville" value="" /></p>
    		<p><label for="email">Email</label><input type="text" id="email" value="" /></p>
    		<p><label for="tel">Téléphone</label><input type="text" id="tel" value="" /></p>
    	</fieldset>
     
    	<fieldset id="info3" class="FormCourt">
    		<legend>Les checkbox</legend>
    		<p><label for="PK_PRA1">Aaaaaa AAAAA </label><input type="checkbox" id="PK_PRA1" value="" checked="checked" /></p>
    		<p><label for="PK_PRA2">Bbbbbbbb BBBBBBBBB </label><input type="checkbox" id="PK_PRA2" value="" checked="checked" /></p>
    		<p><label for="PK_PRA3">Ccccc CCCCC </label><input type="checkbox" id="PK_PRA3" value="" checked="checked" /></p>
    		<p><label for="PK_PRA4">Dddddd-Dddd DDDDDDD</label><input type="checkbox" id="PK_PRA4" value="" checked="checked" /></p>
    		<p><label for="PK_PRA5">Eeeeee EEEEEEEEE</label><input type="checkbox" id="PK_PRA5" value="" checked="checked" /></p>
    		<p><label for="PK_PRA6">Fff FFFFF</label><input type="checkbox" id="PK_PRA6" value="" checked="checked" /></p>
    	</fieldset>
    </form>
    </body>
    </html>
    formulaire.css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    form {
    	margin: 2em 0em 0em 2em;
    	padding: 1em;
    	width: 40em;
    	font-family: Verdana, Helvetica, Arial, sans-serif;
    	font-size: 0.8em;
    	top: 0;
    }
     
    fieldset {
    	margin: 1.5em 0em;
    	padding: 1em 0em;
    	background-color: #E0E8F2;
    	border: 1px solid #2E62AA;
    	color: black;
    	/* Truc pour contenir le background du fieldset dans le cadre IE*/
    	position: relative;
    	/* Truc pour contenir le background du fieldset dans le cadre IE*/
    }
     
    legend {
    	margin: 0em 1em;
    	padding: 0em 1em;
    	font-weight: bold;
    	color: black;
    	background-color: #EDF1F7;
    	border: 1px solid #2E62AA;
    	/* Truc pour contenir le background du fieldset dans le cadre IE*/
    	position: absolute; 
    	top: -0.6em;
    	/* Truc pour contenir le background du fieldset dans le cadre IE*/
    }
     
    input[type] {
    	border: 1px solid #2E62AA;
    }
     
    label {
    	margin: 0em;
    	padding: 0em .5em;
    	float: left;
    	width: 30%;
    	text-align: right;
    }
     
    fieldset.FormCourt {
    	width: 25em;
    }
     
    fieldset.FormCourt label{
    	margin: 0em;
    	padding: 0em .5em;
    	clear: right;
    	width: 80%;
    	text-align: left;
    }
    Penser à la recherche et au bouton
      0  0

  3. #3
    Membre expérimenté
    Avatar de Anduriel
    Homme Profil pro
    Ingénieur intégration
    Inscrit en
    février 2004
    Messages
    2 287
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur intégration

    Informations forums :
    Inscription : février 2004
    Messages : 2 287
    Points : 1 475
    Points
    1 475

    Par défaut

    Titre: Lien de style submit
    Auteur: Anduriel
    Nécessaire: Images en pièce jointes.
    Description: Des liens avec le style des boutons submit pour une dimension de 146*31px. Dézippez les images dans le même dossier que la page html.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <html>
    <head>
       <title>Test</title>
       <style type="text/css">
       a.button {
          font-family: Verdana;
          color: black;
          font-size: 11px;
          text-decoration: none;
          background-image: url(bg.gif);
          height: 31px;
          width: 146px;
          padding-top: 4px;
          text-align: center;
       }
       a.button:hover {
          background-image: url(bg-hover.gif);
       }
       a.button:active {
          color: white;
          padding-top: 3px;
          background-image: url(bg-active.gif);
       }
       img {
          vertical-align: middle;
       }
       </style>
    </head>
    <body>
    <center>
       <a class="button" href="#"><img src="1.gif" border="0" alt="" /> Actualiser</a> 
       <a class="button" href="#"><img src="2.gif" border="0" alt="" /> Réparer</a> 
       <a class="button" href="#"><img src="3.gif" border="0" alt="" /> Continuer</a> 
    </center>
    </body>
    </html>
    Fichiers attachés Fichiers attachés
      0  0

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 229
    Points
    16 229

    Par défaut

    Titre : Menu déroulant
    Auteur : Bisûnûrs
    Description : Menu déroulant centré fixe un niveau XHTMl/CSS/Javascript compatible IE6 et Firefox1.5, non testé sur Opera et Safari.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    <?xml version="1.0" encoding="iso-8859-15"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
       <title>Mon titre</title>
       <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-15" />
       <style type="text/css">
          *{
             margin:0;
             padding:0;
          }
          body{
             overflow:hidden;
             text-align:center;
          }
          html > body {
             overflow:auto;
          }
          #centre{
             margin-left:auto;
             margin-right:auto;
             text-align:center;
             width:800px;
          }
          #fixedmenu{
             position:fixed;
             top:0; 
             left:0;
             right:0;
             width:100%;
             position:expression("absolute"); 
             width:expression("100%"); 
             top:expression(document.body.scrollTop + this.offsetHeight - this.offsetHeight); 
             left:expression("0");
          }
          .menu{
             float:left;
             width:190px;
             border:1px solid #aabbcc;
             background:#d4dde6;
             margin:0 4px;
             font-family:arial,sans-serif;
             font-size:12px;
          }
          .menu a{
             display:block;
             height:20px;
             padding-top:3px;
             color:#000;
          }
          .sousmenu{
             display:none;
             height:20px;
             padding-top:3px;
          }
          .menu ul li{
             list-style:none;
             background:#d4dde6;
             height:23px;
             padding-top:3px;
          }
          #maincontent{
             overflow:auto;
             width:100%;
             height:100%;
          }
          #site{
             margin-top:40px;
          }
       </style>
       <script language="Javascript">
          function affsousmenu(id){
             document.getElementById(id).style.display = "block";
          }
          function cachsousmenu(id){
             document.getElementById(id).style.display = "none";
          }
       </script>
    </head>
    <body>
     
    <div id="fixedmenu">
       <div id="centre">
          <div class="menu" onmouseover="affsousmenu('sousmenu1')" onmouseout="cachsousmenu('sousmenu1')">
             <a href="#">Menu 1</a>
             <ul class="sousmenu" id="sousmenu1">
                <li><a href="#">Sous-Menu 1.1</a></li>
                <li><a href="#">Sous-Menu 1.2</a></li>
             </ul>
          </div>
          <div class="menu" onmouseover="affsousmenu('sousmenu2')" onmouseout="cachsousmenu('sousmenu2')">
             <a href="#">Menu 2</a>
             <ul class="sousmenu" id="sousmenu2">
                <li><a href="#">Sous-Menu 2.1</a></li>
                <li><a href="#">Sous-Menu 2.2</a></li>
             </ul>
          </div>
          <div class="menu" onmouseover="affsousmenu('sousmenu3')" onmouseout="cachsousmenu('sousmenu3')">
             <a href="#">Menu 3</a>
             <ul class="sousmenu" id="sousmenu3">
                <li><a href="#">Sous-Menu 3.1</a></li>
                <li><a href="#">Sous-Menu 3.2</a></li>
             </ul>
          </div>
          <div class="menu">
             <a href="#">Menu 4</a>
          </div>
       </div>
    </div>
     
    <div id="maincontent">
       <div id="site">
          <!-- contenu du site ici -->
       </div>
    </div>
     
    </body>
    </html>
    Une page de test est disponible ici : http://josselin.willette.free.fr/cod...menuderoulant/

    Je ne vous cache pas que le CSS n'est pas valide étant donné le hackIE utilisé et que j'ai volontairement mis le CSS et le Javascript dans le même fichier pour ne pas à avoir à vous en présenter plusieurs.

    Toute idée d'amélioration de ce menu est la bienvenue. =) (par MP si possible)
      0  0

  5. #5
    Inactif
    Avatar de Kerod
    Profil pro
    Inscrit en
    septembre 2004
    Messages
    11 674
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2004
    Messages : 11 674
    Points : 20 384
    Points
    20 384

    Par défaut

    Il y a un petit soucis lors du hover sur FF. Le contour se place à la fin du deuxième lien au lieu de faire tout le menu vertical
      0  0

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 229
    Points
    16 229

    Par défaut

    Citation Envoyé par Kerod
    Il y a un petit soucis lors du hover sur FF. Le contour se place à la fin du deuxième lien au lieu de faire tout le menu vertical
    Je l'ai vu aussi, mais je n'ai pas réussi à m'en défaire.

    Suffit de ne pas mettre de bordure au menu pour que ça passe inaperçu.
      0  0

  7. #7
    Membre habitué Avatar de Roromix
    Profil pro
    Inscrit en
    décembre 2005
    Messages
    182
    Détails du profil
    Informations personnelles :
    Âge : 30
    Localisation : France, Calvados (Basse Normandie)

    Informations forums :
    Inscription : décembre 2005
    Messages : 182
    Points : 144
    Points
    144

    Par défaut

    Quand on diminue la taille de notre fenêtre de navigateur (IE), il n'y a pas d'apparition de scrollbar horizontale et on ne peut pas acceder au menu hors de la page.
      0  0

  8. #8
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 229
    Points
    16 229

    Par défaut

    Citation Envoyé par Roromix
    Quand on diminue la taille de notre fenêtre de navigateur (IE), il n'y a pas d'apparition de scrollbar horizontale et on ne peut pas acceder au menu hors de la page.
    Je l'ai vu aussi mais on ne peut rien y faire quand c'est en position:fixed ...
      0  0

  9. #9
    Inactif Avatar de CR_Gio
    Profil pro
    Inscrit en
    septembre 2005
    Messages
    1 195
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : septembre 2005
    Messages : 1 195
    Points : 1 186
    Points
    1 186

    Par défaut

    Titre : Cadre
    Auteur : Moi :p
    Description : Cadre au bordure arondi sans tableau.
    Commentaire : J'utilise cette methode pour beaucoup de chose. C'est une methode qui permet de faire facilement des conteneur flexible. Ce n'est pas le cadre en soit qui est important a mes yeux, mais la facon de faire.
    Compatibilité : testé sur FF 1.5, et IE6
    cadre.zip
      0  0

  10. #10
    Membre confirmé Avatar de Strix
    Inscrit en
    novembre 2006
    Messages
    632
    Détails du profil
    Informations forums :
    Inscription : novembre 2006
    Messages : 632
    Points : 604
    Points
    604

    Par défaut

    Titre : Menu CSS
    Auteur : Strix + Discussion blueice/MasterOfChakhaL (ici)
    Description : Menu basé sur des images/liens avec état "current" et sans Javascript. En démo ici
    Commentaire: Ne marche pas avec un lien externe. Non tester avec des frames.
    Il est possible de rajouter des a:focus et a:visited mais long à configurer.
    Je vous conseille de créer des images à la taille du menu ça évitera d'avoir à mettre des no-repeat pour les backgrounds.
    Je suis assez fier car on m'avait dit que ce n'était pas possible Mais avec un peu de recherche...
    Encore merci pour votre discussion blueice & MasterOfChakhaL !
    Compatibilité : FF 2.0 & IE6&7
    W3C : Validé
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    /* CSS Document */
    /* --- Menu : Général --- */
    #menu {
    	width:150px;
    	height:385px;
    	float: left;
    }
    #menu ul {
    	list-style-type: none; 
    }
    #m1 a, #m2 a, #m3 a { 
    	display: block;
    	width: 200px;
    	height: 60px;
    	/* texte pour l'exemple, donc vous pourrez le supprimer par le suite.   */
    	font-size:60px;
    	color:#FFFFFF;
    	text-decoration: none;
    	text-align:center;
    	margin: 20px;
    }
     
    /*
    Pour la suite :
    #m? a : image que l'on verra si le lien est totalement inactif 
    #m? a#current, #m? a:hover : image que l'on verra si le lien est survolé ou "current"
    */
     
    /* --- Menu 1 --- */
    #m1 a {
    background-image: url(images/m1_01.jpg);
    }
    #m1 a#current, #m1 a:hover { 
    background-image: url(images/m1_03.jpg);
    }
     
    /* --- Menu 2 --- */
    #m2 a {
    background-image: url(images/m2_01.jpg); 
    }
    #m2 a#current, #m2 a:hover {
    background-image: url(images/m2_03.jpg);
    }
     
    /* --- Menu 3 --- */
    #m3 a {
    background-image: url(images/m3_01.jpg);
    }
    #m3 a#current, #m3 a:hover, #m3 a:active {
    background-image: url(images/m3_03.jpg);
    }
     
    /*
    Voilà ! Bien sûr, vous pouvez rajouter autant de "#m" que vous le souhaitez.
    Penser à le(s) rajouter à la suite de " #m1 a, #m2 a, #m3 a".
    Une fois votre menu établi, pensez à bien rajouter id="current" dans vos pages pour chaque lien concerné !
    */

    Code html pour menu1.html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="menu">
     <ul> 
      <li id="m1"><a href="menu1.html" id="current">menu 1</a></li> <!-- Ici, c'est le menu 1 qui est en "current" -->
      <li id="m2"><a href="menu2.html">menu 2</a></li>
      <li id="m3"><a href="menu3.html">menu 3</a></li>
     </ul>
    </div>
    Code html pour menu2.html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="menu">
     <ul> 
      <li id="m1"><a href="menu1.html">menu 1</a></li>
      <li id="m2"><a href="menu2.html" id="current">menu 2</a></li> <!-- Ici, c'est le menu 2 qui est en "current" -->
      <li id="m3"><a href="menu3.html">menu 3</a></li>
     </ul>
    </div>
    Code html pour menu3.html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="menu">
     <ul> 
      <li id="m1"><a href="menu1.html">menu 1</a></li>
      <li id="m2"><a href="menu2.html">menu 2</a></li>
      <li id="m3"><a href="menu3.html" id="current">menu 3</a></li> <!-- Ici, c'est le menu 3 qui est en "current" -->
     </ul>
    </div>

    Pour finir, un zip comprenant : menu.css, menu1.html, menu2.html, menu3.html et 6 fonds de couleurs prêts à être tester et reconfigurer !
    menu.zip
    N'hésitez pas à y faire des corrections s'il y a des erreurs mais merci de me tenir au courant
    On appelle le Dr Freud aux urgences !!
    ------------
    Quelques règles simples qui font la différence :
    Rechercher - FAQ - Dire bonjour - Écrire en français - Balises [code] - Dire merci - Tag
      0  0

  11. #11
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 229
    Points
    16 229

    Par défaut

    Titre : Arrondi sans image
    Auteur : Trouvé en regardant un code source sur le net
    Description : Permet de faire des bords arrondis sans image
    Compatibilité : Pas de problème de compatibilité connu

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <div style="background:#fff; width:220px;">
       <div style="margin:0 17px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 14px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 11px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 10px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 8px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 7px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 6px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 5px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 4px;  height:2px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 2px;  height:3px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 1px;  height:3px; background:#e5e5e5; overflow:hidden;"></div>
    </div>
    <div style="width:220px; height:200px; background:#e5e5e5; text-align:center">
       plein de texte ici
    </div>
    <div style="background:#fff; width:220px;">
       <div style="margin:0 1px;  height:3px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 2px;  height:3px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 4px;  height:2px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 5px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 6px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 7px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 8px;  height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 10px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 11px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 14px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
       <div style="margin:0 17px; height:1px; background:#e5e5e5; overflow:hidden;"></div>
    </div>
      1  0

  12. #12
    Membre régulier
    Homme Profil pro
    Inscrit en
    juin 2007
    Messages
    130
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Haute Loire (Auvergne)

    Informations forums :
    Inscription : juin 2007
    Messages : 130
    Points : 124
    Points
    124

    Par défaut

    Sympa ton truc d'arrondi sa ma plu et j'en cherchais justement un. Mais C'est un peu lourd comme code si pour changer les dimensions et la couleur faut que tu ressaisisse dans toutes les balises div.
    J'ai donc modifier quelques peu en associant le tout a une feuille de style.
    Voila le résultat:

    code html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
     
    	<head>
    		<title>arrondis perso</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    		<link rel="stylesheet" media="screen" type="text/css" href="arrondis.css" />
    	</head>
     
    	<body>	
     
    	<div title="zone de texte du cadre arrondi" class="arr">
     
      			<div title="" class="arr2" style="margin:0 17px; height:1px;">
      			</div>
     
      			<div title=""class="arr2" style="margin:0 14px; height:1px;">
      			</div> 
     
      			<div title="" class="arr2" style="margin:0 11px; height:1px;">
      			</div> 
     
      			<div title="" class="arr2" style="margin:0 10px; height:1px;">
     			 </div>  
     
    		  	<div title="" class="arr2" style="margin:0 8px; height:1px;">
      			</div> 
     
     		 	<div title="" class="arr2" style="margin:0 7px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 6px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 5px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 4px; height:2px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 2px; height:3px;">
     	 		</div>
     
      			<div title="" class="arr2" style="margin:0 1px; height:3px;">
      			</div>
     
    		</div>
                    <div title="" id="ct" class="arr2">
                             plein de texte ici 
                    </div>
    		<div class="arr">
     
      			<div title="" class="arr2" style="margin:0 1px; height:3px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 2px; height:3px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 4px; height:2px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 5px; height:1px;">
     	 		</div>
     
      			<div title="" class="arr2" style="margin:0 6px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 7px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 8px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 10px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 11px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 14px; height:1px;">
      			</div>
     
      			<div title="" class="arr2" style="margin:0 17px; height:1px;">
      			</div>
     
    		</div>
     
    	</body>
    </html>
    Code css:
    (arrondis.css)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    #arr					/* Ensemble Cadre Arrondi */
    {
       background-color: #ffffe0;			/* Couleur de fond */			
       margin: 0px;					/* Marges extérieures */
    }
     
     
    .arr2					/* Partie Ensemble effet arrondi du cadre */
    {
       background-color: gray;				/* Couleur de fond #ffffe0*/
       overflow: hidden;					
    }
     
     
    #ct					/* Partie zone texte du cadre arrondi */
    {
       text-align: center;				/* Alignement du texte */
       height: 220px;				/* Hauteur du cadre */
    }
    Voila ! désolé si ça prend un peu de place mais je fais comme sa pour que ce soit plus clair.
    Juste une question:
    Le "overflow: hidden;" c'est bien pour cacher les coins au bout des arrondis?
      1  0

  13. #13
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 229
    Points
    16 229

    Par défaut

    Titre : Bordure personnalisée en CSS2
    Auteur : Bisûnûrs
    Compatibilité : FF2 & IE6, pas testé les autres


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="fond">
       <p>
          Plein de texte ici
          Plein de texte ici
          Plein de texte ici
          Plein de texte ici
          Plein de texte ici
          Plein de texte ici
       </p>
    </div>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #fond{
       background:url(fond-test.gif);
       width:400px;
       height:300px;
       padding:5px;
    }
    #fond p{
       background:#fff;
       height:100%;
       padding:0 2px;
       margin:0;
    }
    Url de test : http://josselin.willette.free.fr/codessources/bordure/
      0  0

  14. #14
    Membre actif
    Avatar de jlb59
    Homme Profil pro
    Retraité
    Inscrit en
    août 2004
    Messages
    747
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Industrie

    Informations forums :
    Inscription : août 2004
    Messages : 747
    Points : 210
    Points
    210

    Par défaut Menus et sous-menus horizontal compatible IE et FF

    Bonjour à tous,

    C'est un simple menu avec des sous-menus qui, j'espère, servira de modèle.

    L'avantage est que chaque menu développe des sous-menus qui lui développe encore d'autres sous-menus.

    Ce qui fait que l'on peut mettre pas mal de rubriques attachées à un menu.
    Elle peuvent s'afficher soit dans le menu, soit dans le sous-menu, soit dans le sous-sous-menu.

    Bref, on peut aller loin comme ça mais y a des limites quand même. Ce n'est pas la peine de surcharger un menu.

    La démo se trouve ici.
    Nota : Ce menu fonctionne mieux avec IE. Va savoir pourquoi ???

    Le code Css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    #mainMenu1 {
      background-color: #800000;
      color: #FFFFFF; 
      margin: 0 0 0.8em;
      padding: 0;
      font-family:verdana;
      font-size:70%;
      /* Si le menu horizontal est 'position: static'
          ne pas mettre 'margin-top' à zéro.
         'padding-top' et ce menu sont 'static' c'est en raison du bug Opéra 7
       */
      z-index: 1;
      position: static;
      /* Si ce menu est horizontal, mettre 'position: static'
      	 Si ce menu est vertical, mettre 'position: absolute (ou fixed)'
      */
    }
     
    #menuList1 {
      border: 0px solid white; /* cadre général du menu */
      margin: 0;
      padding: 0 6px;
      /* N'utilisez pas de position autre que 'statique' ici */
    }
     
    #menuList1 li {
      /* Ne changez pas ces règles */
      display: inline;
      margin: 0;
      padding: 0;
      list-style: none;
    }
     
    #menuList1 li a {
      background-color: transparent;
      color: #FFFFFF;
      display: inline;
      line-height: 1.8em;
      border: 0px solid #ffffff; /* Cadre des rubriques */
      margin: 0;
      padding: 2px 15px;
      /* Toujours mettre 'margin: 0' */
      /* Win/IE5.0 ignorera 'border' et la remplissage si l'affichage est 'inline' */
      text-decoration: none;
    }
     
    #menuList1 li a:hover, #menuList1 li a:focus {
      background-color: #d2691e;
      color: #ffffff;
      border-color: #CCCccc;
    }
     
    /* Comme Win/IE5.0 n'applique pas de remplissage sur des éléments inline, 
       des images de fond doivent en être cachées, autrement elles seront montrées derrière le texte
    */
    #menuList1 li a.actuator {
      width: auto; 
      background: transparent url("./css/images/fleche-bas-blanc.gif") no-repeat 100% 50%;
      color: #ffffff;
      padding-right: 20px;
    }
     
    #menuList1 li a.actuator:hover, #menuList1 li a.actuator:focus {
      width: auto; 
      background: #d2691e url("./css/images/fleche-bas-noir.gif") no-repeat 100% 50%;
      color: #ffffff;
    }
     
    #menuList1 .menu {
      background-color: #800000;
      color: #ffffff;
      border: 0px solid #CCCccc; /* Cadre de sous-menus */
      margin: 0;
      padding: 2px;
      /* Seulement 'magin' à 0 ou un nombre négatif */
      /* 'padding' doit avoir la même dimension pour les quatre côtés ('px') */
      z-index: 1;
      position: absolute;
      visibility: hidden;
      /* Toujours 'position: absolute' and 'visibility: hidden' */
    }
     
    #menuList1 .menu .menu {
      margin-left: 2px;
      /* Si un padding n'est pas à 0 dans '.menu', mettre margin-left to margin-left + padding */
    }
     
    #menuList1 .menu li a {
      display: block;
      line-height: normal;
    }
     
    #menuList1 .menu li a.actuator {
      /* Images du menu sélectionné */
      background: transparent url("./css/images/fleche-droit-noir.gif") no-repeat 100% 50%;
    }
     
    #menuList1 .menu li a.actuator:hover, #menuList1 .menu li a.actuator:focus {
      background: #d2691e url("./css/images/fleche-droit-blanc.gif") no-repeat 100% 50%;
    }
    Le code Html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
        <div id="mainMenu1">
          <ul id="menuList1">
            <li><a href="#" onclick="return false">Menu1</a></li>
            <li>
              <a class="actuator" href="#" onclick="return false">Menu2</a>
              <ul class="menu">
                <li><a href="#" onclick="return false">Lien 1</a></li>
                <li><a href="#" onclick="return false">Lien 2</a></li>
                <li><a href="#" onclick="return false">Lien 3</a></li>
                <li><a href="#" onclick="return false">Lien 4</a></li>
              </ul>
            </li>
     
            <li>
              <a class="actuator" href="#" onclick="return false">Menu3</a>
              <ul class="menu">
                <li>
                  <a class="actuator" href="#" onclick="return false">Sous-Menu3-1</a>
                  <ul class="menu">
                    <li><a href="#" onclick="return false">Lien 1</a></li>
                    <li><a href="#" onclick="return false">Lien 2</a></li>
                    <li><a href="#" onclick="return false">Lien 3</a></li>
                    <li><a href="#" onclick="return false">Lien 4</a></li>
                    <li><a href="#" onclick="return false">Lien 5</a></li>
                  </ul>
                </li>
    			<li>
                  <a class="actuator" href="#" onclick="return false">Sous-Menu3-2</a>
                  <ul class="menu">
                	<li><a href="#" onclick="return false">Lien 1</a></li>
                	<li><a href="#" onclick="return false">Lien 2</a></li>
                	<li><a href="#" onclick="return false">Lien 3</a></li>
                	<li><a href="#" onclick="return false">Lien 4</a></li>
                  </ul>
                </li>
    			<li>
                  <a class="actuator" href="#" onclick="return false">Sous-Menu3-3</a>
                  <ul class="menu">
                	<li><a href="#" onclick="return false">Lien 1</a></li>
                	<li><a href="#" onclick="return false">Lien 2</a></li>
                  </ul>
                </li>
    			<li>
                  <a class="actuator" href="#" onclick="return false">Sous-Menu3-4</a>
                  <ul class="menu">
                	<li><a href="#" onclick="return false">Lien 1</a></li>
                  </ul>
                </li>
    			<li>
                  <a class="actuator" href="#" onclick="return false">Sous-Menu3-5</a>
                  <ul class="menu">
                	<li><a href="#" onclick="return false">Lien 1</a></li>
                	<li><a href="#" onclick="return false">Lien 2</a></li>
                  </ul>
                </li>
    			<li>
                  <a href="#" onclick="return false">Lien 1</a>
                </li>
              </ul>
            </li>
     
            <li>
              <a class="actuator" href="#" onclick="return false">Menu4</a>
              <ul class="menu">
                <li><a href="#" onclick="return false">Lien 1</a></li>
                <li><a href="#" onclick="return false">Lien 2</a></li>
                <li><a href="#" onclick="return false">Lien 3</a></li>
                <li><a href="#" onclick="return false">Lien 4</a></li>
                <li><a href="#" onclick="return false">Lien 5</a></li>
              </ul>
            </li>
     
            <li>
              <a class="actuator" href="#" onclick="return false">Menu5</a>
              <ul class="menu">
                <li><a href="#" onclick="return false">Lien 1</a></li>
                <li><a href="#" onclick="return false">Lien 2</a></li>
    			<li>
                  <a href="#" onclick="return false">Lien 3</a>
                </li>
    			<li>
                  <a class="actuator" href="#" onclick="return false">Sous-Menu5-1-1</a>
                  <ul class="menu">
                	<li><a href="#" onclick="return false">Lien 1</a></li>
                	<li><a href="#" onclick="return false">Lien 2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
     
            <li>
              <a href="#" onclick="return false">Menu6</a>
            </li>
     
            <li>
              <a href="#" onclick="return false">Menu7</a>
            </li>
          </ul>
        </div>
    Cordialement.
    JLB59

    Analyse de la mémoire
      0  0

  15. #15
    Membre expérimenté
    Profil pro
    Inscrit en
    mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 45
    Localisation : France

    Informations forums :
    Inscription : mars 2002
    Messages : 1 132
    Points : 1 413
    Points
    1 413

    Par défaut

    Citation Envoyé par Bisûnûrs Voir le message
    Je l'ai vu aussi, mais je n'ai pas réussi à m'en défaire.

    Suffit de ne pas mettre de bordure au menu pour que ça passe inaperçu.
    C'est height:20px sur .sousmenu qui pose problème (et n'est pas utile)


    devYan.
      1  0

Discussions similaires

  1. Probleme galerie CSS
    Par yorke dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/07/2007, 13h19
  2. Contribuez à la FAQ CSS
    Par Bovino dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 29/03/2007, 13h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo