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

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

Centrer un élément en CSS

Vue hybride

Discussions similaires

Partager

Partager