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.

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

Par contre la bordure revient tout le temps...

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

S'agissant de la page d'accueil et d'une simple image, cette solution est unique pour la centrer horizontalement ET verticalement. Ayant vu ton site rasleboldesid c'est ce qu'il te faut pour la page d'index. Cela dit pour la structure de ton site il ne faut pas en effet utiliser cette méthode qui te posera des soucis nombreux d'interfaçage. Préfére donc comme dit Candy les margin-left:auto et margin-right: auto si tu comptes centrer horizontalement ton site...

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

Envoyé par rasleboldesid

Par contre la bordure revient tout le temps...

quelle bordure?

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

pardon : la bordure de l'image-lien...

Mai sinon, en réduisant le navigateur, les ascenseurs apparaissent même avec les marges négatives !

**Candygirl** · 23/08/2006, 15h06

Envoyé par rasleboldesid

pardon : la bordure de l'image-lien...

Mai sinon, en réduisant le navigateur, les ascenseurs apparaissent même avec les marges négatives !

oui mais une partie de ton image n'est pas consultable, s'il y a le bouton "entrer" du site dans cette partie, c'est plûtôt gênant

**speedev** · 23/08/2006, 15h14

Arranges toi juste pour que cette image ainsi que le contenu éventuel supplémentaire comme un bouton entrer ou du texte (auteur etc...) de cette première page, tiennent sur l'écran et pour toutes résolutions (même du 600x800 tant qu'à faire...).

Si tu as mis ...

Code :

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

img{border:0;}

...tu n'es pas censée avoir de bordure autour de ton image

**rasleboldesid** · 23/08/2006, 15h31

ok : c bon !

**rasleboldesid** · 23/08/2006, 15h35

par contre, ça, ça ne marche pas du tout :

body {margin-left:auto;margin-right:auto;}

**rasleboldesid** · 23/08/2006, 16h51

Encore une chose :
entre span/class et div/id j'ai lu des commmentaires qui sont l'exact inverse les uns des autres...
alors : lequel est plus "général" que l'autre ?

**speedev** · 23/08/2006, 16h53

Normal ce n'est pas sur body qu'il te faut mettre ces propriétés lol mais sur ton div principal!!! Càd le div qui contient tout ton code html....celui que tu vas, grace a ces deux propriétés, centrer horizontalement sur la page.

**rasleboldesid** · 23/08/2006, 17h02

Je pars demain en week-end : ça va me faire du bien ;-)

est-ce que c ça que tu veux dire :

.div_index {margin-left:auto;margin-right:auto;}

Sinon, qu'est-ce que tu appelles "div principal" ?

Et toujours : quelles différences classe/span id/div ??? pourquoi peut-on avoir <div class="...."> alors que j'ai cru comprendre que div allait avec id ???

Désolé de vous tirer vers le bas ....

**Alexounet** · 23/08/2006, 17h11

Tu peux écrire <div id = " quelquechose"> et <div class = "quelquechose">. La seule différence c'est que normalement tu ne dois utilisée un id qu'une seule fois dans ton code, donc tu l'utiliseras principalement pour tes div qui seront des conteneurs comme des menu, des pieds de page ces choses là. Des "class" tu peux les ré utiliser souvent. Mais dans la pratique tu peux les intervertir ça ne change rien, c'est juste faux sémantiquement. Et puis après tu auras des problèmes si tu veux accéder avec Javascript aux éléments auxquels tu as mis plusieurs id je crois.

La différence entre span et div c'est un rapport avec le "flux" des éléments dans la page. Span crée des balises "inline" et div des balises "block". Les balises inlines peuvent être placées à la suite les une des autres alors qu'après une balise block tu as un retour à la ligne. Sauf si tu sors la balise du flux normal avec des propriétés comme "float:left"...

EDIT :

Les "id" s'écrivent avec le signe dièse (#) dans ton code CSS et les "class" avec un point (.)

Par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#conteneur{
		margin-left:auto;
		margin-right:auto;
		width:1000px;
		height:15px;
		border:1px solid gray;
		padding:0px;
		margin-top:10px;
	}
 
.alignDroite{
		text-align:right;
	}

**speedev** · 23/08/2006, 17h13

Et bien le div principal est le BIG "bloc" qui contient d'autres "blocs".

Un span est autre chose, c'est une zone dans laquelle tu veux mettre du texte qui sera formaté d'une certaine manière...comme un commentaire par exemple ou une info bulle. Ca n'a rien à voir...concentre toi sur tes divs lol.

Les ID servent à identifier des objets HTML afin que l'on puisse leur attribuer des propriétés CSS (par ex) spécifiques.

Dans ton cas actuel :
Fabrique d'abord un prototype ou une maquette de ton site avec les divs principaux en affichant les bordures pour bien voir les différents blocs.

Et si tu as du mal à t'y retrouver avec tout ce qui est dit, je te conseille de reprendre une page de code faite pour t'enseigner tout ça et de la modifier à ta guise pour te familiariser avec le code. Prends cette page, pique le code source (

) et modèlise la tel que tu le voudrais pour ton site.

exemple simple de css

CSS

Discussions similaires

Partager

Partager