Problème de mise en page CSS

**20cents** · 16/03/2010, 12h41

Bonjour à tous,

Alors, voilà, je tenais à ce que mon site fasse 1024px de largeur. J'ai donc créé mon header et mon footer dans cette optique. Ils s'affichent très bien, là n'est pas le problème.

Le problème c'est que pour la partie contenu de ma page, soit le centre, j'ai réalisé une sorte de box aux coins arrondis au niveau supérieur et inférieur. Donc 4 coins arrondis. Ne voulant pas utiliser CSS3 et ses nouveaux attributs pour le moment, je pensais alors diviser cette box en 3 parties, content_haut, content, content_bas.

**12monkeys** · 16/03/2010, 20h08

Bonsoir

Tester ton code chez moi n'apportes rien du tout : il manque du code HTML (pas de PHP ici) et je pense du code CSS ! Et puis nous n'avons pas les images à disposition...

Tu n'aurais pas une page en ligne qu'on voit un peu mieux ?

**20cents** · 16/03/2010, 23h34

Merci de ta réponse

Oui mon code n'est pas complet, car en fait j'avais commencé le site en html5 et CSS3, puis je me suis ravisé au html 1.0 strict car je pensais encore à un problème de compatibilité, ce qui n'est finalement pas le cas

Alors je veux bien passer mon code html5 et CSS3 :

Le voici :

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
@charset "utf-8";
/* CSS Document */
 
/* ----------------------------- */
/*  Auteur : H2Organisation      */
/*  Date   : 15 Mars 2010        */
/*  Version: 2.0                 */
/*  Name : Harmony               */
/* ----------------------------- */
 
* {margin: 0px;padding: 0px;}
 
/* Page */ 
html { 
  font-size: 100%;
} 
 
/* html5 */
header, hgroup, section, footer, aside, nav, article { 
	display: block !important;   
}
 
body { margin: 0; padding: 0; color: #03609a; font: 13px "lucida grande", Tahoma, Verdana, Arial, sans-serif; background: #8ed8f8; }
 
a { color: #03609a; text-decoration: underline; }
a:hover { text-decoration: none; }
a:visited { color: #FFF; }
a:focus  { color: #03609a !important; }
 
h1 { color: #03609a; font-size: 22px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; margin-bottom: .5em; text-shadow: 1px 1px 2px #666; }
h2 { color: #03609a; font-size: 1.571em; font-weight: normal; }
h3 { color: #03609a; font-size: 1.286em; font-variant: small-caps; text-shadow: 1px 1px 1px #666; text-align: left; margin-bottom: .5em; }
h4 { font-size: 1.143em; }
 
ul, ol { margin-bottom: 1em; padding-left: 15px; }
 
p { margin: 0 0 1em 0; }
 
img { border:none; }
 
blockquote { padding: 1em 0 0 2em; margin-bottom: 1em; color: #03609a; font-style: italic; }
 
a.carte { text-decoration:underline; color: #03609a; }
 
a.carte:hover, a.carte:visited { text-decoration:none; color: #03609a; }
 
hr { border-bottom:dotted; border-bottom-width:thin; width: 100%; }
 
/* Tableaux */
table { border:none; }
 
th.tarifs { background-color: #036; color: #fff; font-weight:bold; }
td.nom { padding-left: 10px; }
table.reiki { width:917px; border:0; margin-left:-10px; font-size:13px; }
 
td.bleu { background-color:#69C; color:#fff; padding-left:5px; }
 
td.t_bleu_clair { background-color:#5595bb; color:#fff; padding-left:10px; text-transform:uppercase; height:25px; }
 
td.t_bleu_fonce { background-color:#13619c; color:#fff; padding-left:10px; text-transform:uppercase; height:25px; }
 
td.bleu_clair { background-color:#5595bb; color:#fff; padding:5px 10px; }
 
/* Titres */
h1.reiki { text-transform:uppercase; }
h2.reiki { font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; }
h3.reiki { font-weight:bold; font-size:12px; padding-bottom:5px; }
 
/* Pour centrer la page. */
#main-content { clear: both; width: 1024px; margin: 0 auto; margin-top: 0; }
 
#main-content > header { background: url(img/header.png) center top no-repeat; height:270px; width:1024px; }
 
header nav { position: absolute; font-family: "Century Gothic"; text-align:center; width: 1024px; margin-top: 234px; color: #FFF; font-size: 15px; }
header nav a { color:#FFF; position: relative; text-decoration: none; text-transform:uppercase; padding: 5px 10px; outline:none; }
header nav a:hover, header nav a:focus { text-decoration: none; background-color: rgba(255,255,255,0.2); color:#770352; -moz-border-radius: 8px; -webkit-border-radius: 8px;  border-radius: 8px; }
header nav a#current { background-color: rgba(255,255,255,0.1); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
 
section { width:1024px; }
 
section nav { position: absolute; font-family: "Century Gothic"; text-align:center; width: 600px; margin-top: 60px; margin-left: 420px; font-size: 15px; }
 
section nav a { color: #03609a; position: relative; text-decoration: none; text-transform:uppercase; padding: 5px 10px; outline:none; }
section nav a:hover, section nav a:focus { text-decoration: none; background-color: rgba(255,255,255,0.2); color:#770352; -moz-border-radius: 8px; -webkit-border-radius: 8px;  border-radius: 8px; }
 
section nav a:visited { color: #03609a; }
 
section nav a#current { background-color: rgba(255,255,255,0.1); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
 
#content { background: transparent url(img/content_milieu.png) center repeat-y; margin-top: 0px; width: 1024px; min-height: 300px; }
 
 
#content_haut { background: transparent url(img/content_haut.png) center top  no-repeat; margin-top: 0px; width: 1024px; height:116px; }
 
#content_haut h1 { padding-top: 32px; padding-left: 100px; font-family: "myriad Pro", Verdana, sans-serif; font-size: 4.5em; text-transform:capitalize; }
 
#content_texte { padding-left: 65px; padding-right: 65px; }
 
#content_bas { background: transparent url(img/content_bas.png) center bottom no-repeat; margin-top: 0px; width: 1024px; height: 40px; }
 
 
/*  Adverts */
#adverts { background:transparent url(img/adverts.png) center top no-repeat; height: 170px; width:1024px; padding-top: 85px; }
 
#box1 { width: 280px; margin-left: 60px; float:left; height:120px; }
#box2 { width: 280px; margin-left: 32px; float:left; height:120px; }
#box3 { width: 280px; margin-left: 32px; float:left; height:120px; }
 
/*Footer */
footer { color:#FFF; height: 120px; width:1024px; background:transparent url(img/footer.png) center top no-repeat; }
 
#copyright { text-align:center; padding-top: 72px; font-size:11px; }
 
#copyright a { text-align:center; padding-top: 72px; color:#FFF; text-decoration:none; }
 
#copyright a:hover { text-align:center; padding-top: 72px; color: #FC0; }
 
/* Formulaires */
.submit { background-color:#03609a; font-size: 13px; color:#FFF; border:none; width:110px; height:30px; cursor:pointer; font-weight:bold; text-transform:uppercase; }
 
.submit:hover { color:#FFF; cursor:pointer; background-color:#2594d9; }

INDEX

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
 
<!DOCTYPE html>
<html lang="fr">
 
	<head>
 
        <meta charset="utf-8">
 
        <title>Harmony</title>
 
        <meta name="DC.title" content="" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="H2Organisation" />
        <meta name="geo.placename" content="Bruxelles, Belgique" />
 
        <meta name="robots" content="index, follow, noarchive" />
        <meta name="googlebot" content="noarchive" />
 
        <link rel="icon" type="image/png" href="images/favicon/favicon.png" />
 
        <script src="js/prototype.js" type="text/javascript"></script>
		<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
		<script src="js/lightbox.js" type="text/javascript"></script>
 
        <style type="text/css" media="all">/*<![CDATA[*/ @import url(lightbox.css); /*]]>*/</style>
		<style type="text/css" media="all">/*<![CDATA[*/ @import url(stylesheet.css); /*]]>*/</style>
 
        <!--[if IE]>
			<script src="js/html5-ie.js"></script>
    	<![endif]-->
 
 
	</head>
 
  	<body>
 
        <div id="main-content">
 
        	<header role="banner">
 
            	<nav role="navigation">
 
                    <a href="index.php?page=accueil" title="Accueil">Accueil</a>|
          			<a href="index.php?page=reiki" title="Soins">Soins</a>|
          			<a href="index.php?page=tarifs" title="Tarifs">Tarifs</a>|
          			<a href="#" title="Agenda">Agenda</a>|
                    <a href="index.php?page=contact" title="Contact">Contact</a>
 
                </nav>
 
        	</header>
 
            <section>
 
            	<nav role="navigation">
 
					<a href="index.php?page=reiki" title="Reiki">Reiki</a>
          			<a href="index.php?page=massages" title="Massages">Massages</a>
          			<a href="index.php?page=reflexologie" title="Réflexologie">Réflexologie</a>
                    <a href="index.php?page=kinesiologie" title="Kinésiologie">Kinésiologie</a>
 
                </nav>
 
                <div id="content_haut">
 
                	<div id="content_title">
 
                    	<h1><? if(isset($_GET['page']) && file_exists("pages/" . $_GET['page'] . ".php")) echo $_GET['page']; else echo "Accueil"; ?></h1>
 
                  	</div>
 
               </div>
 
               <div id="content">
 
                	<div id="content_texte">
 
                		<?php
							include("includes/page.inc.php");
						?>
 
                	</div>
 
                </div>
 
                <div id="content_bas">
                </div>
 
            </section>
 
            <section id="adverts">
 
            	<div id="box1">
                	test 1
                </div>
                <div id="box2">
                	test2
                </div>
                <div id="box3">
                	test3
                </div>
 
            </section>
 
            <footer role="contentinfo"> <!-- Bas de page -->
 
    			<p id="copyright">Copyright &copy; 2010 Harmony | Tous droits réservés | Site réalisé par 
                <a href="http://www.sysmic.be/" title="H2Organisation Website" target="_blank">H<sub>2</sub>Organisation</a></p>
 
    		</footer> 	
 
        </div>
 
    </body>
 
</html>

Voici l'adresse du site en ligne :

Lien du site

Tu verras que sur la page accueil, en mettant une simple balise <p> avec un margin de 10px je pense, le margin crée un espacement entre mes deux div !

Autre chose, lorsque l'on selectionne le texte, la selection ne se limite pas au div, elle prend toute la largeur du site ce qui n'est pas normal non plus

Merci de votre aide...

**Macmillenium** · 17/03/2010, 17h56

Bonjour,

Envoyé par 20cents

Tu verras que sur la page accueil, en mettant une simple balise <p> avec un margin de 10px je pense, le margin crée un espacement entre mes deux div !

C'est un comportement standard, les marges verticales du P ont fusionné avec celles du parent direct #content_texte (faire une recherche sur la fusion des marges).
Tu peux changer ce comportement en déclarant par exemple un padding:1px 65px 0 accompagné d'un height:1% afin de conférer le layout à IE7-

Problème de mise en page CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager