aligner 3 div

Version imprimable

30/08/2007, 15h33
celinettebuff

aligner 3 div

bonjour tout le monde !
je suis débutante dans le développement(je suis actuellement en stage)
depuis trois jours j'essaie désespérément d'aligner 3 div(sidebar,content,puis sidebarright)et je n’y arrive pas ,soit elles ne sont pas dans le bonne ordre,soit elles sont décalés à moment j’ai crue avoir réussi puisqu’elles étaient aligné mais finalement ma sidebar sortait du bas de la page,j’ai mis « height :auto ; »dans ma css mais ca n’a pas marcher non plus je sais pas trop quoi vous mettre car ma css fait plusieurs pages et mon code et plutôt long aussi.
le site :http://www.discount-promo.net
j’espère que quelqu’un pourra m’aider (dites moi qu’elles sont les bouts de codes que vous avez besoin de voir ,je les posteraient)
merci beaucoup a tout ce qui pourront me donné un coup de main

Céline
30/08/2007, 16h44
beeboo

Salut,
Si j'ai bien compris, tu veux avoir le sidebar à gauche de content.
Dans ton code tu devrais le mettre avant content, avec le float:left, le content va se coller à sa droite.
30/08/2007, 16h52
celinettebuff

re

merci,mais c'est tout le but de mon travail
pour le referencement du site je dois mettre la "div id=content" juste apres "la div id=header" mais sans changer l'apparence du site
si quelqu'un a une solution......parce je craque, j'ai tout essayer a chaque fois je crois trouvé ma reponse mais ca ne marche jamais...
30/08/2007, 17h01
beeboo

Ben je ne vois pas en quoi la séquence des éléments va influencer le référencement du site.
Sinon il reste une méthode un peu plus bourrin qui consiste à mettre tes div en positionnement absolu, alors tu peux les dimensionner et les positionner au pixel près.
30/08/2007, 17h14
celinettebuff

Du fait que le contenu du site soit avant les catégories(le menu de gaughe),le moteur de recherche lit le contenu avant ,ce qui est une excellent chose pour le référencement d'un site.
En ce qui concerne position absolute ,j'ai essayé mais ya toujours des problemes

espoirs...

bon je vais terminer ma journée et je n'ai toujours pas trouver de solution,je mets un plus de détails et espere avoir plein de réponses demain matin
bonne soirée à tout le monde.

Code:

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
body 
{
	font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
	word-spacing:2px;
	color:#0000;
	margin:20px 0px 20px 0px;
	background:url(images/body.jpg) top repeat-x #FF00A2;
	background-attachment:fixed;
}
* 
{
	margin:0;
	padding:0;
}
#wrapper 
{
	background:#fff;
	border:3px solid #FF00A2;
	width:980px;
	margin:0 auto;
}
* html #wrapper
{
	width:980px;
}
#innerwrapper
 {
 width:961px;
	margin:1px;
	background:#ffffff;
	padding:10px;
}
 
....
 
 
#sidebar 
{
	color:#666;
	position: absolute;
    left:20px;
    width:190px;
	top:135px;
}
 
.....
 
#sidebarright 
{
	position: absolute;
        right:10px;
        width:200px;
 
}
 
 
....
 
 
#content 
{
	width:560px;
	margin-left: 199px;
        margin-right:199px;
        voice-family: "\"}\"";
        voice-family: inherit;
        margin-left: 201px;
        margin-right:201px;
}

Salut,

Je pense que tu peux t'inspirer de cela:

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
	<head>
		<style>
			#contenu {
				background-color: #FDD;
				float: right;
				width:100%;
				margin-left: -200px;
 
			}
			#inner {
				margin-left: 200px;
			}
			#sidebar {
				background-color: #DFD;
				float: left;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="contenu">
			<div id="inner">
				contenu très important pour google...
			</div>
		</div>
		<div id="sidebar">
			navigation ...
		</div>
	</body>
</html>

Le truc, c'est de faire une colonne de taille définie (unité en px, em ou %) est de laisser toute la largeur restante pour ton contenu.
(testé avec IE6 et Opera9)

bonjour,

Code:

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
body 
{
    font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
    word-spacing:2px;
    color:#0000;
    margin:20px 0px 20px 0px;
    background:url(images/body.jpg) top repeat-x #FF00A2;
    background-attachment:fixed;
 
}
* 
{
    margin:0;
    padding:0;
}
#wrapper 
{
    background:#fff;
    border:3px solid #FF00A2;
    width:980px;
    margin:0 auto;
}
* html #wrapper
{
    width:980px;
}
#innerwrapper
 {
    width:960px;
    margin:1px;
    background:#ffffff;
    padding:10px;
}
 
 
...
 
 
 
#cont-side-right
{
width:960px;
}
#cont-side
{
width:770px;
}
#sidebar 
{
    float:left;
    color:#666;
    padding:10px 0px 0px 20px;
    width:190px;
}
 
 
......
 
 
 
#sidebarright 
{
    height:200px;
    float:right;
    width:190px;
    background:#F7F7F7;
    padding:10px 0 0 20px;
}

Voilà ma css avec laquelle mes div sont enfin correctement positionnées, maintenant gros problème mes block ne s’agrandissent pas lorsque leur contenu lui s’agrandit comment faire help s.v.p. !