exemple simple de css

**rasleboldesid** · 23/08/2006, 12h22

voilà, pour me lancer en xhtml / full-css j'aurais besoin d'une solution conforme pour ce projet de mise en page...
Si ma page index.html se présente ainsi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>page accueuil</title>
</head>

<body>
<a href="sommaire.html"><img src="imageindex.gif" alt="" border="0" />
</a></body>
</html>

et que ma feuille style.css se présente ainsi :

body {background-color:#333333;
background-position:center;
background-repeat:no-repeat;
}

Comment dois-je faire pour que l'image de la page d'index soit centrée horizontalement et verticalement ?
MERCI !!!!!

**rasleboldesid** · 23/08/2006, 12h44

précision : en full-css, on est bien daccord qu'il n'y a aucune règle dans le <head> des feuilles.html ? Tout est dans les feuilles.css non ? C'est ça le "linking" ?

**rasleboldesid** · 23/08/2006, 13h46

Je pensais utiliser l'attribut "position" dans la balise image :

img {
position:absolute;
left:**px;
}

Mais le problème c'est que ce ne sera pas centré vraiment et que ça s'appliquera à toutes les photos, ce qu'a priori je ne veux pas !!!

**speedev** · 23/08/2006, 13h47

Alors pour que tu centres une image sur ton écran...c'est tout un débat et tout un problème pour beaucoup.

Seule solution: Utiliser un div en absolute.

Je te fais le truc vite fait:

Créer un div de la même taille que ton image par exemple et met ton image dedans ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
 
	<div class="div_index">
		<img src="truc.jpeg" alt="" />	
	</div>
 
 
<body>

et dans le css ton div devra être flottant sur ta page (position:absolute) et positionner pile poil au milieu de ta page de cette manière.

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
 
/* Au passage....enlève les border="0" de toutes les images grace à ceci*/
img {border:0;}
 
/*le div conteneur de ton image*/
.div_index{
	position:absolute;
	width:400px;/*largeur de ton image*/
	height:300px;/*hauteur de ton image*/
 
	top:50%; /*ton div démarre au milieu vertical de la page*/
	left:50%; /*ton div démarre au milieu horizontal de la page*/
 
	margin-left:-200px /*on recule le div vers la gauche de sa moitié*/
	margin-top:-150px /*idem vers le haut*/
 
}

J'ai fais ça à la volée, j'ai peutêtre oublié une propriété mais je pense pas..

a+

**rasleboldesid** · 23/08/2006, 14h09

waou !
C pas trop dur pour une fois, mais c'est sacrément ingénieux !
Merci !

**speedev** · 23/08/2006, 14h25

Càd qu'il n'y a pas d'autres possibilités avec les divs lol.

**Candygirl** · 23/08/2006, 14h40

Il y a quand même un grand point négatif à la technique des marges négatives, surtout si elle est appliquée pour ton conteneur principal:
En réduisant la fenêtre de ton navigateur tu t'apercevras que le contenu sur la gauche et le haut disparaît sans moyen de le consulter via les ascenseurs.

A n'utiliser donc qu'en toute connaissance de cause et dans des cas précis ou la consultabilité du site n'a pas à en souffrir.

Comme alternative pour le centrage horizontal tu peux utiliser les marges gauches et droites en auto.