Positionement éléments CSS

**frog43** · 06/02/2008, 17h23

Bonjour à tous,
vous allez sanns doute trouvez mas question bête mais je me lance ...
Comment utiliser correctement le CSS pour positioner les éléments de ma page???

Voici mon code HTML :

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
 
<!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=UTF-8" />
<title>Société Mécanique de Beauzac (43) : usinage, traitements thermiques, élctro érosion ...</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="conteneur">
 	<div id="banniere"></div>
	<div id="fond_menu"></div>
    <div id="logo"></div>
</div>
 
</body>
</html>

et mon 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
 
@charset "UTF-8";
/* CSS Document */
 
html, body {width:100%;}
#conteneur {
	width:1000px;
	height:auto;
	margin:0 auto 0 auto;
}
#banniere {
	z-index:0;
	background-image:url(img/banniere.jpg);
	background-repeat:no-repeat;
	background-position:right;
	background-color:#003399;
	width:1000px;
	height:175px;
}
#fond_menu {
	position:relative;
	top:-22px;
	z-index:0;
	background-image:url(img/fondbleu.jpg);
	background-repeat:no-repeat;
	width:352px;
	height:618px;
}
#logo{
	position:relative;
	top:-793px;
	left:1px;
	z-index:1;
	background-image:url(img/logo.jpg);
	background-color:#003399;
	background-repeat:no-repeat;
	width:371px;
	height:142px;
}

voici maintenant l'adresse de cette page :

http://www.designcreation.fr/somecab

Cette utilisation du CSS ne me convient pas car mon logo est d'abord placé en bas du site puis je le remonte en méttant une valeur de top négative, et du coup j'ai quand même l'espace de mon logo en bas du site, ce qui provoque l'apparition d'un scrol si la résolution de l'écran et trop petite, meme si le site rentre sur la page visuellement ...

J'esper avoir été clair, n'hésitez pas à me demander + d'info ...

Donc voilà si quelqu'un peut m'aider à faire que je n'est pas cette espace en bas d emon site ...

**franculo_caoulene** · 06/02/2008, 17h31

Salut,

Pourquoi ne pas tout simplement faire un bandeau haut avec photo, fond bleu et logo? En dessous du bandeau, un conteneur avec le reste du fond bleu en arrière plan calé au pixel près par rapport au bandeau.

**frog43** · 07/02/2008, 10h47

Ok, je viens de la faire ...
Mais bon en fait ma question se résume à comment aligné 2 div horizontalement. Car voici mon code :

HTML :

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
 
<!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=UTF-8" />
<title>Société Mécanique de Beauzac (43) : usinage, traitements thermiques, élctro érosion ...</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
 
<body onload="MM_preloadImages('img/btn/acc_blanc.jpg','img/btn/trait_blanc.jpg','img/btn/usin_blanc.jpg','img/btn/qual_blanc.jpg','img/btn/contact_blanc.jpg')">
	<div class="centre" id="banniere"></div>
	<div class="centre" id="contenu">
    	<div id="menu"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','img/btn/acc_blanc.jpg',1)"><img src="img/btn/acc_noir.jpg" name="Image1" width="140" height="32" border="0" id="Image1" /></a><br /><br />
        	<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','img/btn/trait_blanc.jpg',1)"><img src="img/btn/trait_noir.jpg" name="Image2" width="320" height="32" border="0" id="Image2" /></a><br /><br />
    		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','img/btn/usin_blanc.jpg',1)"><img src="img/btn/usin_noir.jpg" name="Image3" width="140" height="32" border="0" id="Image3" /></a>   <br /><br />
    		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','img/btn/qual_blanc.jpg',1)"><img src="img/btn/qual_noir.jpg" name="Image4" width="140" height="32" border="0" id="Image4" /></a><br /><br />
    		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','img/btn/contact_blanc.jpg',1)"><img src="img/btn/contact_noir.jpg" name="Image5" width="140" height="32" border="0" id="Image5" /></a>  
    	</div>
        <div>Test</div> 
    </div>
</body>
</html>

et 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
 
@charset "UTF-8";
/* CSS Document */
 
html, body {width:100%;}
.centre {
	width:1000px;
	height:auto;
	margin:0 auto 0 auto;
}
#banniere{
	background-image:url(img/banniere.jpg);
	background-repeat:no-repeat;
	height:175px;
}
#contenu{
	background-image:url(img/fond_bleu.jpg);
	background-repeat:no-repeat;
	height:597px;
}
#menu{
	width:250px;
}

Et comme tu peut le voir, le mot test est en dessous du menu, je voudré que les 2 div soit à la meme hauteur, et si je fais avec ma tecbique d'avant (top=-XXpx) il seront bien aligné mé j'aurais un espace en bas correspondant à la hauteur de mon div ....
Si tu peut me m'aider ...

**frog43** · 07/02/2008, 11h40

J'ai un peu résolu mon problème, avec un float left ...
Mon souci maintenant c'est que sous FF (PC et MAC) tout est OK mais avec IE 7 PC ca ne marche pas ....

Comment faire SVP ???

Voilà 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
 
@charset "UTF-8";
/* CSS Document */
 
html, body {
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
.centre {
	width:1000px;
	height:auto;
	margin:0 auto 0 auto;
}
#banniere{
	background-image:url(img/banniere.jpg);
	background-repeat:no-repeat;
	height:175px;
}
#contenu{
	background-image:url(img/fond_bleu.jpg);
	background-repeat:no-repeat;
	height:597px;
}
#menu{
	width:250px;
	float:left;
	margin-right:100px;
}
#txt{
	position:relative;
	top:25px;
	width:1000px;
}

**frog43** · 07/02/2008, 14h46

J'ai trouvé une solution au cas sa intéréseré quelqu'un ...
Je sais pas si c'est la meilleur mais sa marche donc bon ...
Voila ce que j'ai fait :

Code :

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

1
2
3
4
5
6
7
8
 
#txt{
	position:relative;
	top:25px;
	width:650px;
	overflow:auto;
	display:inline-block;
}

Voilà ...

Positionement éléments CSS

Positionnement en CSS

Discussions similaires

Partager

Partager