Contribuez à la galerie CSS [Sources]

Bovino · 19/01/2006, 13h55

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 posterdans le forumContribuez les codes qui peuvent vous paraitre intéressant.

Merci de mettre les sources sous ce format :

Citation:

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

franculo_caoulene · 19/01/2006, 13h55

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;
}

Anduriel · 08/05/2006, 18h30

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>

Bisûnûrs · 05/11/2006, 14h24

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)

Kerod · 05/11/2006, 17h00

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

Bisûnûrs · 05/11/2006, 17h04

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.

Roromix · 05/11/2006, 19h18

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.

Bisûnûrs · 05/11/2006, 22h42

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 ...

CR_Gio · 11/11/2006, 13h17

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

Strix · 18/01/2007, 14h07

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

Bisûnûrs · 31/01/2007, 14h12

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>

Xann_71 · 14/06/2007, 11h00

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?

Bisûnûrs · 01/11/2007, 11h32

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/

jlb59 · 12/01/2008, 10h41

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>

devyan · 31/10/2008, 15h10

Citation:

Envoyé par Bisûnûrs

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)

05/11/2006, 17h00	#5
Kerod Inactif Inscription : septembre 2004 Messages : 11 753 Détails du profil Informations forums : Inscription : septembre 2004 Messages : 11 753 Points : 14 585 Points : 14 585	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
	00

05/11/2006, 19h18	#7
Roromix Membre habitué Inscription : décembre 2005 Messages : 182 Détails du profil Informations personnelles : Âge : 25 Localisation : France, Calvados (Basse Normandie) Informations forums : Inscription : décembre 2005 Messages : 182 Points : 119 Points : 119	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.
	00

11/11/2006, 13h17	#9
CR_Gio Inactif Inscription : septembre 2005 Messages : 1 196 Détails du profil Informations forums : Inscription : septembre 2005 Messages : 1 196 Points : 1 201 Points : 1 201	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email