Problème d'alignement en CSS

**Tangee** · 25/03/2007, 20h24

Bonjour!!
Un ptit besoin d'aide...

Je suis en train de réaliser ma feuille de css et j'ai un petit souci. J'ai réalisé 2 parties dans ma page: un menu qui sera placé à gauche et une page principale. Mais je ne sais pas comment faire pour les 2 parties soient tou simplement collées l'une à l'autre...
Si je mets align: left pour les 2, elles se retrouvent l'une SOUS l'autre et ça ne va pas!!! Si je tape align: right pour le menu principal, il se retrouve jeté à l'autre bout de la page...

Voici le code que j'ai tapé:

.content {
width: 1000px;
}

#center {
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
width: 800px;
}

#menu {
overflow: hidden;
float: left;
width: 200px;
background-color: #cfb07d;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
}

Merci de m'éclairer!!!!....

Tangee

**blueice** · 26/03/2007, 11h42

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
 
#center {
height: 100%;
margin-left: 202px;
overflow: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color:#FFFFFF;
}
 
#menu {
width: 200px;
overflow: hidden;
position: absolute;
background-color: #cfb07d;
border: 1px solid #000000;
}

**Tangee** · 01/04/2007, 14h26

Bonjour!
J'ai essayé le code mais ça ne marche toujours pas.
Voici le résultat:
http://echappee.celtique.free.fr/index2.html

que faire????

En vous remerciant par avance,
Tangee

**blueice** · 01/04/2007, 14h41

Tu fais des id dans ta css et tu déclares une class dans la page, ca ne risque pas de marcher.

Le code

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.Style1 {
        font-size: 24px;
        font-weight: bold;
}
.Style4 {font-size: 16px}
.arpacote {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-style: normal;
        background-color: #ceb083;
}
 
 
#center {
        height: 100%;
        margin-left: 202px;
        overflow: auto;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background-color:#FFFFFF;
}
 
#menu {
        width: 200px;
        position: absolute;
        background-color: #cfb07d;
        border: 1px solid #000000;
        height:100%;
}
-->
</style>
</head>
 
<body>
 
	<div id="menu">
	    <p><img src="http://echappee.celtique.free.fr/harpe11.jpg" alt="ARPA" width="151" height="189" />	  </p>
	    <p><a href="http://echappee.celtique.free.fr/programme.html"><img src="http://echappee.celtique.free.fr/menu_prog.gif" alt="programme" width="187" height="70" border="0" /></a></p>
	    <p><a href="http://echappee.celtique.free.fr/detail.html"><img src="http://echappee.celtique.free.fr/menu_detail.gif" alt="d&eacute;tail des stages" width="187" height="70" border="0" /></a></p>
	    <p><a href="http://echappee.celtique.free.fr/artistes.html"><img src="http://echappee.celtique.free.fr/menu_artistes.gif" alt="les artistes" width="187" height="70" border="0" /></a></p>
	    <p><a href="http://echappee.celtique.free.fr/photos.html"><img src="http://echappee.celtique.free.fr/menu_photos.gif" alt="photos" width="187" height="70" border="0" /></a></p>
	    <p><a href="http://echappee.celtique.free.fr/contact.html"><img src="http://echappee.celtique.free.fr/menu_contact.gif" alt="contact" width="187" height="70" border="0" /></a></p>
	    <p align="center"><img src="http://echappee.celtique.free.fr/triskel.GIF" alt="*" width="35" height="35" /></p>
	</div>
	<div id="center">
      <p><img src="http://echappee.celtique.free.fr/Banniere.gif" alt="Harpe Celtique en Bourgogne" width="800" height="150" /></p>
      <p>&nbsp;</p>
      <p align="center" class="Style1">BIENVENUE<br />
      Au festival de   Harpe en Bourgogne </p>
      <p align="center" class="Style1"><img src="http://echappee.celtique.free.fr/photos/harpe1.JPG" alt="la magie de la harpe..." width="389" height="286" /></p>
      <p align="center" class="Style1"><span class="Style4">Cette ann&eacute;e, le festival aura lieu les 16, 17 et 18 Mars &agrave; <a href="http://echappee.celtique.free.fr/plan.html">La Chapelle de   Guinchay</a>.</span><br />
        <br />
      </p>
	  <div>&nbsp; &nbsp; &nbsp;
          <p>Le succ&egrave;s des deux   premiers Festivals de Harpe Celtique &agrave; la Chapelle de Guinchay permet de se   lancer dans un troisi&egrave;me festival. Chaque ann&eacute;e, le festival &eacute;volue tant par la   qualit&eacute; musicale que par le nombre croissant d'auditeurs, m&eacute;lomanes avertis ou   simples curieux attir&eacute;s par la magie de la harpe.<br />
              <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Les musiciens apportent   au village dynamisme, enthousiasme et bonheur de faire de la musique tous   ensemble, tous ages confondus. Le deuxi&egrave;me festival s'est enrichi d'un Bal Folk   qui s'est d&eacute;roul&eacute; dans une ambiance chaleureuse et festive. Il sera maintenu   cette ann&eacute;e, anim&eacute; par un nouveau groupe.<br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Souhaitant un   renouvellement des activit&eacute;s chaque ann&eacute;e, les organisateurs du festival feront   venir d'autre artistes, d'un style diff&eacute;rent o&ugrave; le chant traditionel aura son   importance, accompagn&eacute;, bien sur, de harpes celtiques.</p>
	    <p align="center"><img src="http://echappee.celtique.free.fr/photos/2P97.JPG" width="425" height="323" /></p>
	    <p align="center"><br />
              <br />
        </p>
	    <div>
            <div align="center"><strong>Nous vous attendons   nombreux!</strong><br />
                <br />
                <script type="text/javascript" src="http://www.123compteur.com/compteurjour.php?votre_id=176343"></script>
                <noscript>
                  <a href="http://www.123compteur.com"
target="_blank">compteur</a>
              </noscript>
              personnes <br />
              sont pass&eacute;es par l&agrave;... <br />
            </div>
        </div>
      </div>
	  <p align="center" class="Style1"><br />
	    <br />
      </p>
	</div>
</div>
<p>&nbsp;</p>
</body>
</html>

**Tangee** · 03/04/2007, 08h59

Merci beaucoup, j'ai pu faire ce que je voulais, le problème, c'est que ça ne s'affiche pas de la même façon selon le navigateur. Dans internet explorer, le menu est SUR la colonne centrale...
Dans firefox ça marche!

http://echappee.celtique.free.fr/index2.html

Problème d'alignement en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager