[CSS 3] Centrer balise div et créer des coins arrondis en CSS et sans images

scoubi77 · 04/12/2011, 22h06

Bonsoir a tous,

S'il vous plait j'ai grandement besoin de vos aides,

Voici mon soucis, j'ai crée une page en html et un petit bout de css.
je veux utiliser sous mes paragraphes (crées avec td ) des coins arrondis en CSS et sans images,
ils fonctionnent très bien sous safari et pas du tout sous ie9, et inverssement sous safari ne sont pas centrés a l'horizontale mais sont centré sous ie9 !!!!
Je voudrais en fait pour décorer ma page créer plusieurs coins arrondis en CSS et sans images de differentes couleurs et les centrers, que cela soit comprhénsible par la plus part des navigateurs !!!
voici mon code :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<TITLE>nav</TITLE>
<html>
<head>
 
<meta name="description" CONTENT="">
<META HTTP-EQUIV="IMAGETOOLBAR" CONTENT="no" SCROLLING="yes" >
<META NAME="keywords" CONTENT="">
 
 <style type="text/css">
      body {
       position: center;
 text-align: center;
        margin-left:center;
           margin-right:center;
        padding: 50px;
         }
      div {
        width: 1000px;
        padding: 10px;
        background: #F5F5DC;
      }
      div.arrondi {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }
 
 
    </style>
 
    <!-- DEBUT DU SCRIPT --><SCRIPT LANGUAGE="JavaScript">
 
function yaunclick()	{	alert('reproduction interdite');	}function noclick(scx)	{
 
	if (navigator.appName == "Netscape" && scx.which == 3)		{		yaunclick();
 
		return false; 		}
 
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2)		{
 
		yaunclick();		return false; 		}	}document.onmousedown = noclick</SCRIPT>
 
<!-- FIN DU SCRIPT -->
 
<script language="JavaScript1.2">
function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;
</script> 
<script type="text/javascript">
<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}
 
function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;
 
// -->
</script> 
 
 
</HEAD>
<body>
 
 <div class="arrondi" align="center">
<p align="center"><FONT face="Garamond" size="6" color="">OBSERVATOIRE ASTRONOMIQUE DE XXXXXXX (XXXXXX)</FONT></P>
 
<p align="center"><FONT face="Garamond" size="6" color="">WEEK- ENDS A THEMES</FONT></P></DIV><BR><BR><BR><BR>
 
 
 <div class="arrondi" align="center">
<TABLE ALIGN="center">
 
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">L'observatoire astronomique de xxxxxxxx situé dans le xxxxxx, au cœur du xxxxxxxxxxxxxxxxx,</P>
<p align="left"><FONT face="Garamond" size="3" color="">organise des week-ends à thèmes : Astronomie ; Photographie ; Randonnée.</P><BR>
<p align="left"><FONT face="Garamond" size="3" color="">L'hébergement se réalise sur place, se qui facilite les observations nocturnes du ciel. </P><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">Les animations ont été mises en place par xxxxxxxxxxx, animateur scientifique.</P>
<p align="left"><FONT face="Garamond" size="3" color="">xxxxxxx a travaillé pour diverses centres d'astronomie ; le Conseil Général des xxxxx xxxxx ; </P>
<p align="left"><FONT face="Garamond" size="3" color="">le Conseil Régional ; Le xxxxxxxxxx ainsi que sur le site de xxxx pendant 7 ans </P>
<p align="left"><FONT face="Garamond" size="3" color="">de 1991 à 1998.</P><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">Il n'y a pas d'animation en période estivale pour la raison que les 3 logements du site sont mis </P>
<p align="left"><FONT face="Garamond" size="3" color="">chaque année en location saisonnière.</P><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">L'observatoire situé loin des lumières des villes et le télescope de classe semi professionnel </P>
<p align="left"><FONT face="Garamond" size="3" color="">ultra lumineux mis à votre disposition, vous permettront de superbes observations des objets </P>
<p align="left"><FONT face="Garamond" size="3" color="">célestes.</P><BR>
 
<p align="left"><FONT face="Garamond" size="3" color="">Bonnes observations à tous</P>
<p align="left"><FONT face="Garamond" size="3" color="">La présidente</P><BR><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="center"><IMG src="image.jpg"  width="197" height="300" border="0" ></A></P><BR><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"></FONT><FONT face="Garamond" size="3" color="">Télescope Ø 62 cm ouvert à F/D : 3,3 et 20 Newton / Nasmith, sur monture à fourche. Moteurs pas à pas.</FONT></P> 
<p align="left"></FONT><FONT face="Garamond" size="3" color="">Entrainement en &#x1F71; par couronne dentée. Masse de 1300 kg. Construction : xxxxxxxxxxxxxxxxxxx. Optiques de xxxxxxxxxxxxxxx</FONT></P>
<p align="left"></FONT><FONT face="Garamond" size="3" color="">Télescope sous coupole de Ø 5 mètres.</FONT></P></TD></P></TABLE></DIV>
 
 
 
 
 
 
 
 
 
</body>
</html>

Clairement je voudrais donc centrer sur l'orizontale mes coins arrondis sous safari, et avoir des vrais coins sous ie
Je vous remerci par avance du coup de main

amicalement
scoubi77

scoubi77 · 05/12/2011, 18h40

Bonsoir a tous,
j'ai modifié mon code ( écriture en bleu ) et j'ai résolu pour safari, à savoir que j'ai centré et deux cadres de couleur différents et j'ai me^me ajouté une ombre,
voici le code :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<TITLE>nav</TITLE>
<html>
<head>

<meta name="description" CONTENT="">
<META HTTP-EQUIV="IMAGETOOLBAR"CONTENT="no" SCROLLING="yes" >
<META NAME="keywords" CONTENT="">



<!-- DEBUT DU SCRIPT --><SCRIPT LANGUAGE="JavaScript">

function yaunclick()	{	alert('reproduction interdite');	}function noclick(scx)	{

	if (navigator.appName == "Netscape" && scx.which == 3)		{		yaunclick();

		return false; 		}

if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2)		{

		yaunclick();		return false; 		}	}document.onmousedown = noclick</SCRIPT>

<!-- FIN DU SCRIPT -->

<script language="JavaScript1.2">
function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;
</script> 
<script type="text/javascript">
<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}

function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;

// -->
</script> 
 <style>
                body { 
                        background: #FFFFFF; 
                        color: #000000;
			font-family: Helvetica, Arial, sans-serif;
                }
		h1 { 
			font-size:1.5em;
		}
                .cta {
                        width: 800px;
                        background: #D8BFD8;
                        border-radius: 20px;
                        padding: 20px;
                        margin: 100px auto;
			box-shadow: 0 0 20px #222;
                }
        .ctb {
                        width: 800px;
                        background: #FFFACD;
                        border-radius: 20px;
                        padding: 20px;
                        margin: 100px auto;
			box-shadow: 0 0 20px #222;
                }
        
        </style> 
</HEAD>
<body>
<div class="cta">
<p align="center"><FONT face="Garamond" size="6" color="">OBSERVATOIRE ASTRONOMIQUE DE xxxxxxx (xxxxxxx)</FONT></P>

<p align="center"><FONT face="Garamond" size="6" color="">WEEK- ENDS A THEMES></FONT</div></P>


<div class="ctb">
<TABLE ALIGN="center">

<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">L'observatoire astronomique de xxxxxxx situé dans le xxxxxx, au cœur xxxxxxxxxxxxxxxxx,</P>
<p align="left"><FONT face="Garamond" size="3" color="">organise des week-ends à thèmes : Astronomie ; Photographie ; Randonnée.</P><BR>
<p align="left"><FONT face="Garamond" size="3" color="">L'hébergement se réalise sur place, se qui facilite les observations nocturnes du ciel. </P><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">Les animations ont été mises en place par xxxxxxxxxxxxxxxxx, animateur scientifique.</P>
<p align="left"><FONT face="Garamond" size="3" color="">xxxxxxxxxxx a travaillé pour diverses centres d'astronomie ; le Conseil Général xxxxxxxxxxxxxx; </P>
<p align="left"><FONT face="Garamond" size="3" color="">le Conseil Régional ; Le xxxxxxxxxxxxx ainsi que sur le site de xxxxxxxxxx pendant 7 ans </P>
<p align="left"><FONT face="Garamond" size="3" color="">de 1991 à 1998.</P><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">Il n'y a pas d'animation en période estivale pour la raison que les 3 logements du site sont mis </P>
<p align="left"><FONT face="Garamond" size="3" color="">chaque année en location saisonnière.</P><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"><FONT face="Garamond" size="3" color="">L'observatoire situé loin des lumières des villes et le télescope de classe semi professionnel </P>
<p align="left"><FONT face="Garamond" size="3" color="">ultra lumineux mis à votre disposition, vous permettront de superbes observations des objets </P>
<p align="left"><FONT face="Garamond" size="3" color="">célestes.</P><BR>

<p align="left"><FONT face="Garamond" size="3" color="">Bonnes observations à tous</P>
<p align="left"><FONT face="Garamond" size="3" color="">La présidente</P><BR><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="center"><IMG src="image.jpg"  width="197" height="300" border="0" ></A></P><BR><BR></TD></TABLE>
<TABLE ALIGN="center">
<TD ALIGN="center"><p align="left"></FONT><FONT face="Garamond" size="3" color="">Télescope Ø 62 cm ouvert à F/D : 3,3 et 20 Newton / Nasmith, sur monture à fourche. Moteurs pas à pas.</FONT></P> 
<p align="left"></FONT><FONT face="Garamond" size="3" color="">Entrainement en &#x1F71; par couronne dentée. Masse de 1300 kg. Construction : xxxxxxxxxxxx. Optiques de xxxxxxxxxxxxx</FONT></P>
<p align="left"></FONT><FONT face="Garamond" size="3" color="">Télescope sous coupole de Ø 5 mètres.</FONT></P></TD></P></TABLE>

</DIV>

 




</body>
</html>

j'ai rempli on va dire 50% du problème, quelqu'un peut il m'espliquer comme avoir un centrage valable pour tous les navigateurs et résoudre le problème sous IE des coins disparuts ainsi que les ombres ?
Merci par avance

amicalement scoubi77

scoubi77 · 05/12/2011, 18h50

Sous IEil n'y a pas une question de rajouter un plugin jquery ?
sa marche comment la déclaration,

en attente de vos aides

NoSmoking · 05/12/2011, 19h09

Bonjour,
il serait bon de mettre un DOCTYPE à ton document et de respecter la structure d'un fichier HTML.

Pas regardé plus avant

scoubi77 · 05/12/2011, 19h21

Bonsoir et merci pour la réponse,

Je vais rajouter <!DoctypE html> , par contre je pensais avoir respecté la structure d'un fichier HTML ???? :

Code html :

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

1
2
3
4
5
6
7
8
<html>
<head>
<title></title>
</head>
<body>
 
</body>
</html>

j'ai déplacé <TITLE>nav</TITLE>

amicalement scoubi77

scoubi77 · 06/12/2011, 10h48

Peut être en utilisant

Code :

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

1
2
3
  margin-left: auto;
  margin-right: auto;
  width: 800;

Pour centrer sous IE , je n 'ai que mon iPhone jusqu'à ce soir
Et je ne peux essayer

essayé a l'instant et marche pas !!!

Amicalement scoubi 77

Emyleen · 07/12/2011, 16h36

Ouille ouille ouille mes yeux! Quel vilain code!
Bon voici ta page corrigée, mais il y avait énormément d'erreurs!!! Tu sais si tu ne connais pas très bien les langages HTML/CSS n'hésites pas à lire des tutoriels :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
<meta name="keywords" CONTENT="">
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
 
function yaunclick(){	
	alert('reproduction interdite');
	}
function noclick(scx){
	if (navigator.appName == "Netscape" && scx.which == 3){
		yaunclick();
		return false;
	}
 
	if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2){
		yaunclick();
		return false;
	}
}
document.onmousedown = noclick;
 
function refresh()
  {
  document.location.reload();
                return false;
  }
document.oncontextmenu = refresh;
 
<!--
function removeelements(){
  var remove_el=document.all.remove
  if (remove_el!='' && remove_el.length==null){
    remove_el.style.display='none'
  }else{
    for (i=0;i<remove_el.length;i++){
      remove_el[i].style.display='none';
    }
  }
  document.bgColor="white";
  document.body.style.background='';
}
 
function revertback(){
  setTimeout("window.location.reload()",50);
}
window.onbeforeprint=removeelements;
window.onafterprint=revertback;
 
// -->
</script> 
<!-- FIN DU SCRIPT -->
<style type="text/css">
	body { 
		background: #FFFFFF; 
		color: #000000;
		font-family: Helvetica, Arial, sans-serif;
	}
	h1 { 
		font-size:1.5em;
	}
	#entete {
		text-align: center;
		width: 800px;
		background: #D8BFD8;
		border-radius: 20px;
		padding: 20px;
		margin: 100px auto;
		box-shadow: 0 0 20px #222;
	}
	#corps {
		width: 800px;
		background: #FFFACD;
		border-radius: 20px;
		padding: 20px;
		margin: 100px auto;
		box-shadow: 0 0 20px #222;
	}
	#piedDePage {
		width: 800px;
		background: #A6D2FF;
		border-radius: 20px;
		padding: 20px;
		margin: 100px auto;
		box-shadow: 0 0 20px #222;
	}
	p {
		text-align: left;
	}
</style> 
</head>
 
<body>
	<div id="entete">
    	<h1>OBSERVATOIRE ASTRONOMIQUE DE xxxxxxx (xxxxxxx)<br/>WEEK- ENDS A THEMES</h1>
    </div>
    <div id="corps">
    	<p>L'observatoire astronomique de xxxxxxx situé dans le xxxxxx, au cœur xxxxxxxxxxxxxxxxx, organise des week-ends à thèmes : Astronomie ; Photographie ; Randonnée. L'hébergement se réalise sur place, se qui facilite les observations nocturnes du ciel. </p>
        <p>Les animations ont été mises en place par xxxxxxxxxxxxxxxxx, animateur scientifique. xxxxxxxxxxx a travaillé pour diverses centres d'astronomie ; le Conseil Général xxxxxxxxxxxxxx;  le Conseil Régional ; Le xxxxxxxxxxxxx ainsi que sur le site de xxxxxxxxxx pendant 7 ans de 1991 à 1998.</p>
        <p>Il n'y a pas d'animation en période estivale pour la raison que les 3 logements du site sont mis chaque année en location saisonnière.</p>
        <p>L'observatoire situé loin des lumières des villes et le télescope de classe semi professionnel ultra lumineux mis à votre disposition, vous permettront de superbes observations des objets célestes.</p>
        <p>Bonnes observations à tous<br/>La présidente<br/><img src="image.jpg"  width="197" height="300" border="0" ></p>
    </div>
    <div id="piedDePage">
    	<p>Télescope Ø 62 cm ouvert à F/D : 3,3 et 20 Newton / Nasmith, sur monture à fourche. Moteurs pas à pas.</p>
        <p>Entrainement en &#x1F71; par couronne dentée. Masse de 1300 kg. Construction : xxxxxxxxxxxx. Optiques de xxxxxxxxxxxxx</p>
        <p>Télescope sous coupole de Ø 5 mètres.</p>
    </div>
</body>
</html>

scoubi77 · 08/12/2011, 15h58

Merci je vais essayer cela dès ce soir

scoubi77 · 08/12/2011, 18h56

Bonsoir,

Après étude du code je n'arrives pas a centrer mon image ( code en vert ) , elle se centre vers la gauche

Code :

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

1
2
3
4
5
6
7
<div id="corps">
    	<p>L'observatoire astronomique de xxxxxxx situé dans le xxxxxx, au cœur xxxxxxxxxxxxxxxxx, organise des week-ends à thèmes : Astronomie ; Photographie ; Randonnée. L'hébergement se réalise sur place, se qui facilite les observations nocturnes du ciel. </p>
        <p>Les animations ont été mises en place par xxxxxxxxxxxxxxxxx, animateur scientifique. xxxxxxxxxxx a travaillé pour diverses centres d'astronomie ; le Conseil Général xxxxxxxxxxxxxx;  le Conseil Régional ; Le xxxxxxxxxxxxx ainsi que sur le site de xxxxxxxxxx pendant 7 ans de 1991 à 1998.</p>
        <p>Il n'y a pas d'animation en période estivale pour la raison que les 3 logements du site sont mis chaque année en location saisonnière.</p>
        <p>L'observatoire situé loin des lumières des villes et le télescope de classe semi professionnel ultra lumineux mis à votre disposition, vous permettront de superbes observations des objets célestes.</p>
        <p>Bonnes observations à tous<br/>La présidente<br/><img src="image.jpg"  width="197" height="300" border="0" ></p>
    </div>

je pense qu'elle doit suivre l'instruction suivante:

Code :

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

1
2
3
4
5
	}
	p {
		text-align: left;
	}
</style>

j'ai essayé de remplacer left par center, cette action casse l'effet recherché des praragraphes.
Comment centrer cette image?
et en deuxième question comment obtenir mes effets de coins arrondis et ombrage sous IE ( visible après test sous safari 5)
Merci pour vos conseils

NoSmoking · 08/12/2011, 19h37

il te faut mettre l'image dans une DIV qui a comme propriété/valeur text-align:center

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="corps">
  <p>L'observatoire astronomique de xxxxxxx situé dans le xxxxxx, au cœur xxxxxxxxxxxxxxxxx, organise des week-ends à thèmes : Astronomie ; Photographie ; Randonnée. L'hébergement se réalise sur place, se qui facilite les observations nocturnes du ciel. </p>
  <p>Les animations ont été mises en place par xxxxxxxxxxxxxxxxx, animateur scientifique. xxxxxxxxxxx a travaillé pour diverses centres d'astronomie ; le Conseil Général xxxxxxxxxxxxxx;  le Conseil Régional ; Le xxxxxxxxxxxxx ainsi que sur le site de xxxxxxxxxx pendant 7 ans de 1991 à 1998.</p>
  <p>Il n'y a pas d'animation en période estivale pour la raison que les 3 logements du site sont mis chaque année en location saisonnière.</p>
  <p>L'observatoire situé loin des lumières des villes et le télescope de classe semi professionnel ultra lumineux mis à votre disposition, vous permettront de superbes observations des objets célestes.</p>
  <p>Bonnes observations à tous<br/>La présidente<br/></p>
  <div style="text-align:center">
    <img src="image.jpg"  width="197" height="300" border="0" >
  </div>
</div>

scoubi77 · 09/12/2011, 08h51

Un grand merci, je vais essayer cela dès ce soir, et pour mon soucis sous IE pour les angles arrondis et les ombres tu as une idée ? Ça fonctionne à merveille sous safari 5 mais pas du tout sous IE .
Amicalement scoubi 77

Emyleen · 09/12/2011, 10h40

Tu as quelle version de IE? Car chez moi sous IE 9 ça fonctionne très bien! Mais sinon je te conseille de regarder des solutions spécifiques à IE en javascript ou css (css3pie.com par exemple).

scoubi77 · 09/12/2011, 12h20

Bonjour et merci de votre réponse,

J'ai précisément IE 9 et malgrès cela, ça ne marche pas!!!!
J'ai essayé sur des veilles verssion de IE et ça ne fonctionne
Pas non plus !!!
J'ai vue plusieurs tuto, ( car de par nature je déteste ennuyer les gens, et favorise la recherche d'information plutôt que de céder à la solution miraculeuse qui n'apprend rien en général . Mais la je tourne en rond depuis plusieurs jours et je demande de l'aide tout en continuant à chercher de mon côté . ) css3 ou avec des arrondis sous forme
De jpeg ( mais je n'arrives pas à en faire de beaux donc j'ai abandonné )
J'ai vue qu'il existe des modules supplémentaires pour justement le rendre compatible avec les anciennes verssion de IE ( autre que IE9 qui devrait fonctionner sans ce plungin ).
Ce qui est bizard c'est que ça ne fonctionne pas chez moi même en i9
Si vous avez une esplication j'en suis preneur
À ce que j'en ai compri il faudrait installer un fichier dans le même répertoire que le site et ajouter une instruction entre les balises head mais j'ai du rater quelque chose !!! Ça ne fonctione pas
Merci pour tout

scoubi77 · 09/12/2011, 19h24

Bonsoir et merci NoSmoking pour le centrage,

j'ai une question, dans le code css il y a une déclaration de

Code :

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

1
2
3
p {
		text-align: left;
	}

ce qui veut dire que toutes les balise <p> dans la page vont se comporter
pareil, donc une question comment peut on varier les plaisirs et mélanger les styles ?
car pour centrer jai utilisé

Code :

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

1
2
3
<div style="text-align:center">
    <img src="image.jpg"  width="197" height="300" border="0" >
  </div>

car si j'avais ecrit :

Code :

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

1
2
3
]<div style="text-align:center">
<P><img src="image.jpg"  width="197" height="300" border="0" ></P>
</div>

Le centrage est calé sur Left.

Toutes mes escuses a Emyleen, effectivement sous IE9 sa fonctionne, parcontre comment le rendre compatible avec les autres IE j'ai lu plusieurs tutos mais je n'y arrive pas si quelqu'un peut m'aider merci par avance

amicalement scoubi77

davrous · 09/12/2011, 19h41

Hello,

Attention à bien mettre le DOCTYPE html5 standard en effet sinon IE9 bascule en mode Quirks et ne supporte plus HTML5/CSS3/SVG. Vous pouvez simplement le vérifier en appuyant sur la touche F12 dans IE9 et en vérifiant que le document mode est bien à IE9 Standard.

Pour supporter les anciens navigateurs, il y a 2 stratégies:

- soit tu te fiches des bords arrondis sous IE8 et inférieur et tu ne fais rien en bénéficiant de la dégradation élégante. Solution que je te recommande.
- soit tu utilises une technique de "progressive enhancement" qui va charger du JavaScript pour combler le manque du support comme CSS3pie. Mais je n'aime pas trop ce genre d'approche car cela alourdit la page en fichier JS et offre rarement un résultat impeccable.

J'avais parlé un peu de tout ça dans ce tutoriel si cela t'intéresse: http://blogs.msdn.com/b/davrous/arch...modernizr.aspx

Bye,

David

NoSmoking · 09/12/2011, 20h07

Il est vrai que sur ce coup tu n'as pas besoin de DIV englobante, sorry !

Il suffit de mettre le style sur l'image

Code html :

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

<img style="border:0;display:block;margin:auto;width:197px;height:300px;" src="image.jpg" alt="La présidente">

Maintenant elle devrait se centrer que tu mettes ou non un P autour.

Concernant l'utilisation des coins arrondis je rejoint l'avis de davrous, mais si tu tiens à tout prix à mettre des arrondis, il y a la solution qu'il préconise ou l'utilisation d'image, eh oui!!! regardes du coté de RoundedCornr.

scoubi77 · 09/12/2011, 22h50

merci NoSmoking et davrous,

il est tard et j'essai dès demain.
J'ai regardé le tuto mais c'est la fatigue je n'y comprend rien
merci a vous deux et à demain

amicalement scoubi77

scoubi77 · 10/12/2011, 18h13

Bonsoir,

j'ai lu et essayé de comprendre le tuto.

mais j'avais trouvé ceci sur un autre site a insérer dans la balise head

Code :

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

1
2
3
<!--[if lte IE 8]>
<script type="text/javascript" src="script/roundies.js">
</script><![endif]-->

Citation:

A présent, il faut indiquer quels seront les éléments qui bénéficieront des coins arrondis. Pour cela, vous devez ajouter une instruction DD_roundies.addRule, soit à la fin du fichier roundies.js, soit dans le code de votre page (de préférence avant la fin de l'élément body, après l'appel à roundies.js).

Voici les règles que nous avons mis en place pour notre page d'exemple :
DD_roundies.addRule('div.arrondi', '10px');
DD_roundies.addRule('h1', '10px');
DD_roundies.addRule('a', '8px');
La première règle indique que nos éléments HTML <div> de classe arrondi bénéficieront d'un arrondi de 10px ; la seconde s'applique éléments de titre (<h1>) et la dernière ligne génère un arrondi autour des liens hypertextes (<a>). Il est également possible de cumuler les éléments sélectionnés au sein de la même règle.

Côté HTML, les éléments sont structurés ainsi (exemple pour le bloc <div>) :
<div class="arrondi">
<p>ici un bloc arrondi</p>
</div>

sa ne fonctionne que pour iE8 mais pas pour les verssion antérieure?

Merci par avance pour vos éclaircissements

05/12/2011, 18h50	#3
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Sous IEil n'y a pas une question de rajouter un plugin jquery ? sa marche comment la déclaration, en attente de vos aides
	00

05/12/2011, 19h09	#4
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, il serait bon de mettre un DOCTYPE à ton document et de respecter la structure d'un fichier HTML. Pas regardé plus avant
	00

08/12/2011, 15h58	#8
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Merci je vais essayer cela dès ce soir
	00

09/12/2011, 08h51	#11
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Un grand merci, je vais essayer cela dès ce soir, et pour mon soucis sous IE pour les angles arrondis et les ombres tu as une idée ? Ça fonctionne à merveille sous safari 5 mais pas du tout sous IE . Amicalement scoubi 77
	00

09/12/2011, 10h40	#12
Emyleen Membre actif Emeline Dabée Webmaster Inscription : mars 2010 Messages : 136 Détails du profil Informations personnelles : Nom : Emeline Dabée Âge : 26 Localisation : France, Aveyron (Midi Pyrénées) Informations professionnelles : Activité : Webmaster Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : mars 2010 Messages : 136 Points : 171 Points : 171	Tu as quelle version de IE? Car chez moi sous IE 9 ça fonctionne très bien! Mais sinon je te conseille de regarder des solutions spécifiques à IE en javascript ou css (css3pie.com par exemple).
	00

09/12/2011, 12h20	#13
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Bonjour et merci de votre réponse, J'ai précisément IE 9 et malgrès cela, ça ne marche pas!!!! J'ai essayé sur des veilles verssion de IE et ça ne fonctionne Pas non plus !!! J'ai vue plusieurs tuto, ( car de par nature je déteste ennuyer les gens, et favorise la recherche d'information plutôt que de céder à la solution miraculeuse qui n'apprend rien en général . Mais la je tourne en rond depuis plusieurs jours et je demande de l'aide tout en continuant à chercher de mon côté . ) css3 ou avec des arrondis sous forme De jpeg ( mais je n'arrives pas à en faire de beaux donc j'ai abandonné ) J'ai vue qu'il existe des modules supplémentaires pour justement le rendre compatible avec les anciennes verssion de IE ( autre que IE9 qui devrait fonctionner sans ce plungin ). Ce qui est bizard c'est que ça ne fonctionne pas chez moi même en i9 Si vous avez une esplication j'en suis preneur À ce que j'en ai compri il faudrait installer un fichier dans le même répertoire que le site et ajouter une instruction entre les balises head mais j'ai du rater quelque chose !!! Ça ne fonctione pas Merci pour tout
	00

09/12/2011, 19h41	#15
davrous Membre confirmé Inscription : juillet 2009 Messages : 157 Détails du profil Informations personnelles : Âge : 34 Localisation : France, Paris (Île de France) Informations forums : Inscription : juillet 2009 Messages : 157 Points : 234 Points : 234	Hello, Attention à bien mettre le DOCTYPE html5 standard en effet sinon IE9 bascule en mode Quirks et ne supporte plus HTML5/CSS3/SVG. Vous pouvez simplement le vérifier en appuyant sur la touche F12 dans IE9 et en vérifiant que le document mode est bien à IE9 Standard. Pour supporter les anciens navigateurs, il y a 2 stratégies: - soit tu te fiches des bords arrondis sous IE8 et inférieur et tu ne fais rien en bénéficiant de la dégradation élégante. Solution que je te recommande. - soit tu utilises une technique de "progressive enhancement" qui va charger du JavaScript pour combler le manque du support comme CSS3pie. Mais je n'aime pas trop ce genre d'approche car cela alourdit la page en fichier JS et offre rarement un résultat impeccable. J'avais parlé un peu de tout ça dans ce tutoriel si cela t'intéresse: http://blogs.msdn.com/b/davrous/arch...modernizr.aspx Bye, David
	00

09/12/2011, 20h07	#16
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Il est vrai que sur ce coup tu n'as pas besoin de DIV englobante, sorry ! Il suffit de mettre le style sur l'image Code html : Sélectionner tout - Visualiser dans une fenêtre à part <img style="border:0;display:block;margin:auto;width:197px;height:300px;" src="image.jpg" alt="La présidente"> Maintenant elle devrait se centrer que tu mettes ou non un P autour. Concernant l'utilisation des coins arrondis je rejoint l'avis de davrous, mais si tu tiens à tout prix à mettre des arrondis, il y a la solution qu'il préconise ou l'utilisation d'image, eh oui!!! regardes du coté de RoundedCornr.
	00

09/12/2011, 22h50	#17
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	merci NoSmoking et davrous, il est tard et j'essai dès demain. J'ai regardé le tuto mais c'est la fatigue je n'y comprend rien merci a vous deux et à demain amicalement scoubi77
	00

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