exemple simple de css

Version imprimable

23/08/2006, 12h22
rasleboldesid

exemple simple de css

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 :

Citation:

<!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 :

Citation:

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 !!!!!
23/08/2006, 12h44
rasleboldesid

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" ?
23/08/2006, 13h46
rasleboldesid

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 !!!

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:

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:

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+

23/08/2006, 14h09
rasleboldesid

waou !
C pas trop dur pour une fois, mais c'est sacrément ingénieux !
Merci !
23/08/2006, 14h25
speedev

Càd qu'il n'y a pas d'autres possibilités avec les divs lol.
23/08/2006, 14h40
Candygirl

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.
23/08/2006, 14h44
rasleboldesid

Par contre la bordure revient tout le temps...
23/08/2006, 14h45
speedev

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...
23/08/2006, 14h45
speedev

Citation:

Envoyé par rasleboldesid

Par contre la bordure revient tout le temps...

quelle bordure?
23/08/2006, 14h52
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 !
23/08/2006, 15h06
Candygirl

Citation:

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 ;)
23/08/2006, 15h14
speedev

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:

img{border:0;}

...tu n'es pas censée avoir de bordure autour de ton image
23/08/2006, 15h31
rasleboldesid

ok : c bon !
23/08/2006, 15h35
rasleboldesid

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

body {margin-left:auto;margin-right:auto;}
23/08/2006, 16h51
rasleboldesid

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 ?
23/08/2006, 16h53
speedev

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.
23/08/2006, 17h02
rasleboldesid

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 ....

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:

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; }

23/08/2006, 17h13
speedev

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.
23/08/2006, 17h22
rasleboldesid

Ok : merci beaucoup à vous deux !
Je vais essayer de travailler tout ça avant de poursuivre... c vrai que j'ai quand même du mal à tout imprimer et à bien voir les nuances de tout ces points importants !
23/08/2006, 17h25
Alexounet

Essaie juste de ne pas vouloir en apprendre trop d'un coup, et lis beaucoup de tutoriaux, comme ceux Developpez.com, et puis regarde des sources ;)
23/08/2006, 17h25
speedev
Je te vulgarise la chose:

HTML : <div id="div_centre">bonjour</div>
CSS : #div_centre{...}

HTML : <div class="div_centre">bonjour</div>
CSS : .div_centre{...}

CORRECT:
Code:

1 2 3 4 <div class="div_centre">bonjour</div> <div class="div_gauche">bonjour</div> <div class="div_centre">bonjour</div>
On peut appeler deux fois une classe!

INCORRECT:
Code:

1 2 3 4 <div id="div_centre">bonjour</div> <div id="div_gauche">bonjour</div> <div id="div_centre">bonjour</div>
On appelle un ID une seule fois dans une page. Un ID référence de manière unique un objet. Sers-t'en pour des DIV unique qui auront leurs propriétés CSS propres.

Une classe peut-être appelées autant de fois que voulu, on l'utilise pour appliquer des propriétés CSS communes à des <div> des <span> des <p>...bref tout dépend des propriétés CSS que tu veux attribuer à tel ou tel éléments de ta page.
23/08/2006, 18h02
rasleboldesid

Merci beaucoup pour cette vulgarisation tout à fait limpide :D :D :D :D
J'ai bien compris le principe...
Par contre, dans l'application, je vois pas encore très bien l'utilité d'avoir les deux : pourquoi ne pas tout passer en classe ?

Citation:

Envoyé par speedev

[U]Sers-t'en pour des DIV unique qui auront leurs propriétés CSS propres.
23/08/2006, 18h37
speedev

Tu peux tout mettre en classe si ça te chante lol.
Je pensais comme toi au début.
23/08/2006, 18h42
rasleboldesid

Citation:

Envoyé par speedev

Tu peux tout mettre en classe si ça te chante lol.
Je pensais comme toi au début.

Et qu'est-ce qui t'a fait changer d'avis :P ?
23/08/2006, 18h44
speedev

Les standarts ^^