[CSS 3] Bordure dans le CSS pour le centre du contenu [Résolu]

didouchy · 23/01/2011, 21h25

Bonsoir à tous,

j'ai téléchargé un kit graphique sur internet et je lutte depuis 16h cette après-midi pour mettre une bordure sur le côté droit et fauche du centre.

Je joint mon 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
 
body, html    {background:url(images/fontfont.jpg);margin:0;padding:0;font-family:Arial, sans-serif;text-align:center;color:#FFF;font-weight:bold; background-attachment: fixed;font-size:13px}        
#conteneur    {margin: 0 auto 0;position:relative;width:1023px;}	
#header       {text-align:left;height:234px; background:url(images/header.png);} 	  
.bg        {position:absolute;bottom:0;height:100%;}
#bgcentre  {width:1022px;background-color:#171717;} 
#content, #left, #header, #footer, #centre, #centrer_menu {position:relative; z-index:2;} 	
#pied      {width:1024px;height:34px ;position:relative;margin: 0 auto 0 ; background:url(images/pied.png);clear: both;}
#left img, #right img {margin:3px 0 0 0;}
 
ul.menu_gauche             {list-style:none;width:150px;padding:0;margin:0;text-align:center}
ul.menu_gauche li a        {display: block;height: 27px;color: #fff;text-decoration: none;outline:none;background-image: url(images/menu1.jpg);padding:0 0 0 10px;font:bold 11px tahoma;line-height:27px}
ul.menu_gauche li a:hover  {background-image: url(images/menu2.jpg)}	
 
 
 
#centrer_menu		{margin: 0 auto;padding: 0;text-align:center;width:850px; height:30px}						
table.centre {margin:0px 0px 0px 25px;padding:0; height:30px;border:0;text-align:center}	   
Span		        {color:#FF9933;font-size:15px;font-weight:bold;}	
img, p, h1, h2, h3, h4, h5, h6, Span, object, table, td, tr{border:0;margin:0;padding:0} 
a                   {color:#2e81cc;text-decoration:none;outline:none;font:bold 11px tahoma}	 
a:hover             {color:#fdc638}		
 
.titree		              {padding:5px 0 0 0;width:150px;font:bold italic 13px tahoma;text-decoration: none;list-style: none;background:url(images/hautmenu.png);height:22px;text-align:center;color:#fff}  
 
ul.menu_gauche             {list-style:none;width:150px;padding:0;margin:0px ;text-align:center;height:100%}
ul.menu_gauche li a        {display: block;height: 27px;color: #fff;text-decoration: none;outline:none;padding:0 0 0 10px;font:bold 11px tahoma;line-height:27px;height:100%}
 
 
.footer	            {position:absolute;color:#fff;padding:0;width:480px;height:25px;}
.footer a           {margin: 0;padding: 0;color:#fff;font:  10px/12px Verdana;}
.footer a:hover     {margin: 0;padding: 0;color:#fff;text-decoration: underline;} 
 
.jeuxc {text-align: center;margin:-54px 0px 0px 0px;}
.jeuxd {text-align: right;margin:-54px 0px 0px 0px;}
 
#left {width: 150px;float: left;color:#fff;padding:10px}
#content {margin-left: 160px;margin-right: 160px;color:#205265; line-height:15pt;text-align:left}
 
.contenu_haute   {height:30px;width:850px;margin:0; background:url(images/contenu_haute.jpg) no-repeat bottom;}
.contenu_haut   {height:30px;width:850px;margin:0; background:url(images/contenu_haut.jpg) no-repeat bottom;}
 
.info_h       {background: url(images/info_h.png) no-repeat;width:263px;height:30px;font-size:12px;font-weight:bold;color:#191919;padding:10px 0 0 0}
 
.contenu_fond   {width:810px;margin:0; background:url(images/contenu_fond.jpg);padding:0 20px 0 20px;margin:0;color:#fff;}
.contenu_bas    {height:20px;width:850px;margin:0; background:url(images/contenu_bas.jpg);}		   
 
.copyright           {color:#fff;font-size:10px;font-weight:bold;margin:3px 0 0 0}   
.copyright a         {color:#fff;font-size:10px;font-weight:bold;text-decoration: none;outline:none}
.copyright a:hover   {color: #2e81cc;}

ainsi que deux images pour vous montrer en détail:

Sans modification via photo-filtre > http://jeux-en-reseaux.eu/teste/sans...re-blanche.jpg

Avec modification via photo-filtre > http://jeux-en-reseaux.eu/teste/avec...re-blanche.jpg

J'aurai souhaiter avec une bordure de 1px.

ornitho13 · 23/01/2011, 22h39

je ne vois pas trop où tu veux faire ça mais en utilisant la propriété "border-width" et border-color, tu devrais arriver à faire ce que tu veux:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
border-width: 0px 1px 0px 1px;
border-color: transparent #900 transparent #900;

didouchy · 23/01/2011, 22h50

Pardon, je me suis trompé d'url.

http://jeux-en-reseaux.eu/teste/imag...re-blanche.jpg

http://jeux-en-reseaux.eu/teste/imag...re-blanche.jpg

Et j'aimerai " avec " les bordure blanche sur le côté mais j'ai essayer avec les code que vous m'avais indiqué, c'est pareil :s

ornitho13 · 24/01/2011, 09h37

peux tu rajouter le html qui va avec?

merci

didouchy · 24/01/2011, 09h45

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
<!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>Bientôt disponible</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
</head>
<body> 
 
<div id="conteneur"><!-- Global -->
<div id="header"></div><!-- Header -->	 
 
<div id="left"><!-- Colonne GAUCHE -->
<a href="http://www.facebook.com/pages/Jeux-en-reseaux/112010712196224"> <img src="images/facebook.png"></a><br />  
<div class="titree">.: Navigation :.</div><br /><!-- MENU -->
       <ul class="menu_gauche">
          <li><a href="http://jeux-en-reseaux.eu/" title="">Accueil</a></li>
          <li><a href="http://forum.jeux-en-reseaux.eu/" title="">Forum</a></li> 
          <li><a href="http://jeux-en-reseaux.eu/teamspeak/index.html" title="">TeamSpeak 3</a></li>
          <li><a href="http://jeux-en-reseaux.eu/fps/les-jeux.html" title="">Les jeux</a></li>  
          <li><a href="http://jeux-en-reseaux.eu/bientotdispo2.html" title="">Jeux en ligne</a></li>
		  <li><a href="http://jeux-en-reseaux.eu/team/index.html" title="">Les team</a></li>
		  <li><a href="#">Boutique</a></li> 
          <li><a href="http://jeux-en-reseaux.eu/contact/contact.html" title="">Contact</a></li>
          <li><a href="http://jeux-en-reseaux.eu/partenariat/partenariat.html" title="">Nous aider</a></li>  
       </ul><!-- Fin MENU -->	
<br />
<div class="titree">.: Maintenance :.</div>
       <ul class="menu_gauche">
          <li><a href="http://maintenance.jeux-en-reseaux.eu/" title="">Actualité et maintenances du site.</a></li> 
       </ul>
</div><!-- Fin Colonne GAUCHE -->	
 
<div id="content"><!-- Début centre -->
 
<div class="contenu_haut"></div><div class="contenu_fond"> <!-- NEws --> 
<center><h2>Graphisque de teste</h2></center>
 
<br />
</div><div class="contenu_bas"></div><!-- Fin NEws -->   	    
 
</div><!-- Fin centre -->
 
<!-- Colonne fictive -->
<div id="bgleft" class="bg left"></div>
<div id="bgright" class="bg right"></div>
<div id="bgcentre" class="bg centre"></div>
 
<div id="pied"></div><!-- Pied -->	  
</div><!-- Fin Global -->
<script type="text/javascript">
 
var ID_SITE_STAT    = 356;
var ID_MEMBRE_STAT  = 27620;
 
document.write('<scr'+'ipt type="text/javascript" language="javascript" src="http://stats1.service-webmaster.fr/statistiques/stats.js"><'+'/scr'+'ipt>');
 
</script>
<!-- mention de copyright Ne pas retirer sans autorisation écrite -->
<div class="copyright">©<a href=""> jeux-en-reseaux.eu</a> 2010 - 2011 | Design par<a href="http://www.kitgraphiquegratuit.org" onclick="window.open(this.href); return false;" title="kits gratuits" > Kitgraphiquegratuit.org</a> | Modifier par <a href="http://www.jeux-en-reseaux.eu" onclick="window.open(this.href); return false;" title="jeux en reseaux" >le webmaster</div>
<!-- mention de copyright Ne pas retirer sans autorisation écrite -->	
</body>
</html>

ornitho13 · 24/01/2011, 10h24

j'ai rajouté comme je t'avais dit le border-width et également un border et j'ai modifé le "conteneur" (sa largeur).

Voici ce que donne ton css:

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
58
59
 
	body, html    {background:url(images/fontfont.jpg);margin:0;padding:0;font-family:Arial, sans-serif;text-align:center;color:#FFF;font-weight:bold; background-attachment: fixed;font-size:13px}        
#conteneur    {margin: 0 auto 0;position:relative;width:1024px;}	
 
.bg        {position:absolute;bottom:0;height:100%;}
#bgcentre  {
	width:1022px;background-color:#171717;
	border:1px solid #fff;
	border-width:0px 1px 0px 1px;
} 
#content, #left, #header, #footer, #centre, #centrer_menu {position:relative; z-index:2;} 	
#header       {
	text-align:left;height:234px; background:url(images/header.jpg);
	z-index:200;
	border:1px solid #171717;
}
#pied      {width:1024px;height:34px ;position:relative;margin: 0 auto 0 ; background:url(images/pied.png);clear: both;}
#left img, #right img {margin:3px 0 0 0;}
 
ul.menu_gauche             {list-style:none;width:150px;padding:0;margin:0;text-align:center}
ul.menu_gauche li a        {display: block;height: 27px;color: #fff;text-decoration: none;outline:none;background-image: url(images/menu1.jpg);padding:0 0 0 10px;font:bold 11px tahoma;line-height:27px}
ul.menu_gauche li a:hover  {background-image: url(images/menu2.jpg)}	
 
 
 
#centrer_menu		{margin: 0 auto;padding: 0;text-align:center;width:850px; height:30px}						
table.centre {margin:0px 0px 0px 25px;padding:0; height:30px;border:0;text-align:center}	   
Span		        {color:#FF9933;font-size:15px;font-weight:bold;}	
img, p, h1, h2, h3, h4, h5, h6, Span, object, table, td, tr{border:0;margin:0;padding:0} 
a                   {color:#2e81cc;text-decoration:none;outline:none;font:bold 11px tahoma}	 
a:hover             {color:#fdc638}		
 
.titree		              {padding:5px 0 0 0;width:150px;font:bold italic 13px tahoma;text-decoration: none;list-style: none;background:url(images/hautmenu.png);height:22px;text-align:center;color:#fff}  
 
ul.menu_gauche             {list-style:none;width:150px;padding:0;margin:0px ;text-align:center;height:100%}
ul.menu_gauche li a        {display: block;height: 27px;color: #fff;text-decoration: none;outline:none;padding:0 0 0 10px;font:bold 11px tahoma;line-height:27px;height:100%}
 
 
.footer	            {position:absolute;color:#fff;padding:0;width:480px;height:25px;}
.footer a           {margin: 0;padding: 0;color:#fff;font:  10px/12px Verdana;}
.footer a:hover     {margin: 0;padding: 0;color:#fff;text-decoration: underline;} 
 
.jeuxc {text-align: center;margin:-54px 0px 0px 0px;}
.jeuxd {text-align: right;margin:-54px 0px 0px 0px;}
 
#left {width: 150px;float: left;color:#fff;padding:10px}
#content {margin-left: 160px;margin-right: 160px;color:#205265; line-height:15pt;text-align:left}
 
.contenu_haute   {height:30px;width:850px;margin:0; background:url(images/contenu_haute.jpg) no-repeat bottom;}
.contenu_haut   {height:30px;width:850px;margin:0; background:url(images/contenu_haut.jpg) no-repeat bottom;}
 
.info_h       {background: url(images/info_h.png) no-repeat;width:263px;height:30px;font-size:12px;font-weight:bold;color:#191919;padding:10px 0 0 0}
 
.contenu_fond   {width:810px;margin:0; background:url(http://jeux-en-reseaux.eu/images/contenu_fond.jpg);padding:0 20px 0 20px;margin:0;color:#fff;}
.contenu_bas    {height:20px;width:850px;margin:0; background:url(images/contenu_bas.jpg);}		   
 
.copyright           {color:#fff;font-size:10px;font-weight:bold;margin:3px 0 0 0}   
.copyright a         {color:#fff;font-size:10px;font-weight:bold;text-decoration: none;outline:none}
.copyright a:hover   {color: #2e81cc;}

J'ai testé sur chrome, safari, firefox, IE8 et cela fonctionne

didouchy · 24/01/2011, 10h26

Merci beaucoup ornitho13

didouchy · 24/01/2011, 10h52

Il y a un problème :s

Sa déborde en haut du header en en bas du pied :s

ornitho13 · 24/01/2011, 14h01

je ne rencontre pas ce souci,
aurais tu un imprim-écran du rendu et pourrais tu dire sur quel navigateur tu as ce problème?

didouchy · 24/01/2011, 16h31

Voici le screen > http://jeux-en-reseaux.eu/teste/imag...re-blanche.jpg

J'ai le problème sous chrome, firefox et IE8 :s

Tu pourra le constater via cette adresse
http://jeux-en-reseaux.eu/teste/

ornitho13 · 24/01/2011, 16h56

j'ai remodifié le css en changeant le .bg et #bgcentre. Pour le #bgcentre, j'ai ajouté un top et un bottom qui font respectivement la hauteur du header et du footer afin que le contenu prennent la hauteur nécessaire (j'ai donc supprimé le height:100%)

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
 
body, html    {background:url(images/fontfont.jpg);margin:0;padding:0;font-family:Arial, sans-serif;text-align:center;color:#FFF;font-weight:bold; background-attachment: fixed;font-size:13px}        
#conteneur    {margin: 0 auto 0;position:relative;width:1023px;}	
#header       {text-align:left;height:234px; background:url(images/header.jpg);} 	  
.bg        {position:absolute;bottom:0;}
#bgcentre  {width:1022px;background-color:#171717;top:234px;bottom:34px;
border:1px solid #fff;
	border-width:0px 1px 0px 1px;} 
#content, #left, #header, #footer, #centre, #centrer_menu {position:relative; z-index:2;} 	
#pied      {width:1024px;height:34px ;position:relative;margin: 0 auto 0 ; background:url(images/pied.png);clear: both;}
#left img, #right img {margin:3px 0 0 0;}
 
ul.menu_gauche             {list-style:none;width:150px;padding:0;margin:0;text-align:center}
ul.menu_gauche li a        {display: block;height: 27px;color: #fff;text-decoration: none;outline:none;background-image: url(images/menu1.jpg);padding:0 0 0 10px;font:bold 11px tahoma;line-height:27px}
ul.menu_gauche li a:hover  {background-image: url(images/menu2.jpg)}	
 
 
 
#centrer_menu		{margin: 0 auto;padding: 0;text-align:center;width:850px; height:30px}						
table.centre {margin:0px 0px 0px 25px;padding:0; height:30px;border:0;text-align:center}	   
Span		        {color:#FF9933;font-size:15px;font-weight:bold;}	
img, p, h1, h2, h3, h4, h5, h6, Span, object, table, td, tr{border:0;margin:0;padding:0} 
a                   {color:#2e81cc;text-decoration:none;outline:none;font:bold 11px tahoma}	 
a:hover             {color:#fdc638}		
 
.titree		              {padding:5px 0 0 0;width:150px;font:bold italic 13px tahoma;text-decoration: none;list-style: none;background:url(images/hautmenu.png);height:22px;text-align:center;color:#fff}  
 
ul.menu_gauche             {list-style:none;width:150px;padding:0;margin:0px ;text-align:center;height:100%}
ul.menu_gauche li a        {display: block;height: 27px;color: #fff;text-decoration: none;outline:none;padding:0 0 0 10px;font:bold 11px tahoma;line-height:27px;height:100%}
 
 
.footer	            {position:absolute;color:#fff;padding:0;width:480px;height:25px;}
.footer a           {margin: 0;padding: 0;color:#fff;font:  10px/12px Verdana;}
.footer a:hover     {margin: 0;padding: 0;color:#fff;text-decoration: underline;} 
 
.jeuxc {text-align: center;margin:-54px 0px 0px 0px;}
.jeuxd {text-align: right;margin:-54px 0px 0px 0px;}
 
#left {width: 150px;float: left;color:#fff;padding:10px}
#content {margin-left: 160px;margin-right: 160px;color:#205265; line-height:15pt;text-align:left}
 
.contenu_haute   {height:30px;width:850px;margin:0; background:url(images/contenu_haute.jpg) no-repeat bottom;}
.contenu_haut   {height:30px;width:850px;margin:0; background:url(images/contenu_haut.jpg) no-repeat bottom;}
 
.info_h       {background: url(images/info_h.png) no-repeat;width:263px;height:30px;font-size:12px;font-weight:bold;color:#191919;padding:10px 0 0 0}
 
.contenu_fond   {width:810px;margin:0; background:url(images/contenu_fond.jpg);padding:0 20px 0 20px;margin:0;color:#fff;}
.contenu_bas    {height:20px;width:850px;margin:0; background:url(images/contenu_bas.jpg);}		   
 
.copyright           {color:#fff;font-size:10px;font-weight:bold;margin:3px 0 0 0}   
.copyright a         {color:#fff;font-size:10px;font-weight:bold;text-decoration: none;outline:none}
.copyright a:hover   {color: #2e81cc;}

testé sur chrome, safari, IE8 et firefox

didouchy · 26/01/2011, 11h50

merci c'est beaucoup mieux

23/01/2011, 22h50	#3
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	Pardon, je me suis trompé d'url. http://jeux-en-reseaux.eu/teste/imag...re-blanche.jpg http://jeux-en-reseaux.eu/teste/imag...re-blanche.jpg Et j'aimerai " avec " les bordure blanche sur le côté mais j'ai essayer avec les code que vous m'avais indiqué, c'est pareil :s
	00

24/01/2011, 09h37	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	peux tu rajouter le html qui va avec? merci
	00

24/01/2011, 10h26	#7
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	Merci beaucoup ornitho13
	00

24/01/2011, 10h52	#8
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	Il y a un problème :s Sa déborde en haut du header en en bas du pied :s
	00

24/01/2011, 14h01	#9
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	je ne rencontre pas ce souci, aurais tu un imprim-écran du rendu et pourrais tu dire sur quel navigateur tu as ce problème?
	00

24/01/2011, 16h31	#10
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	Voici le screen > http://jeux-en-reseaux.eu/teste/imag...re-blanche.jpg J'ai le problème sous chrome, firefox et IE8 :s Tu pourra le constater via cette adresse http://jeux-en-reseaux.eu/teste/
	00

26/01/2011, 11h50	#12
didouchy Invité de passage Inscription : janvier 2011 Messages : 26 Détails du profil Informations forums : Inscription : janvier 2011 Messages : 26 Points : 3 Points : 3	merci c'est beaucoup mieux
	00

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