PDA

Afficher la version complète : xhtml/css , gestion de la taille et position de l'image



manchette
13/10/2009, 10h56
Hello,

j'ajoute à mon code xhtml une image en .jpg mais ensuite comment gérer sa position ?

l'image :
(http://img67.imageshack.us/i/opensuse.jpg/)

pour gérer la taille de l'image j'ajoute width et height dans la balise img , le html :



Venez découvrir une solution qui vous rendra bien des services car à la fois gratuite, stable et évolutive : la distribution linux openSUSE :


<div id="logo"><a href="http://www.alionet.org">[img]images/opensuse.jpg</div>
</p>

mais ensuite comment gérer la position de l'image ?

exple : j'utilise ce css mais ca ne va pas : seul bottom left permet de voir l'image et je me retrouve avec 2 images (celle du html et celle du css) .

#logo{
background: url("images/opensuse.jpg") no-repeat bottom left fixed;
position: absolute;
width: 150px;
height: 200px;
margin: 0px;
padding: 0px;
z-index: 999;
}

Faut t'il passer par le html, par le css pour modifier à loisir la position ?

merci ;)

salv-ice
13/10/2009, 20h26
Salut manchette,

L'attribut css background permet de mettre une image de fond sur ta page, je suppose que ce n'est pas ce que tu veux faire...

Pour pouvoir placer ton image comme tu le souhaites, supprime l'attribut background de ton DIV et joue ensuite avec les attributs "margin-top", "margin-bottom", "margin-left" et "margin-right" qui représentent les marges par rapport au conteneur dans lequel se trouve ton DIV (ou par rapport à la page s'il n'y en a pas).

Si tu veux centrer l'image horizontalement, tu peux également utiliser "text-align" avec "width: 100%"

Voilà, j'espère que ça t'aidera.

Si tu débutes en html / css, je te conseille vivement cette doc qui est une véritable mine d'or d'informations http://fr.selfhtml.org/

salv-ice

oh!rocks
14/10/2009, 13h48
Pultôt que jouer avec les dimensions de l'image, préfère également une image aux bonne dimensions (donc redimansionnée dans gimp ou autre logiciel libre de ton choix).

Le z-index n'est pas d'une utilité flagrante (excepté pour quelques designs très pointus graphiquement).

Pour positionner quoique ce soit dans une page XHTML il faut toujours utiliser les CSS : c'est déroutant au début mais tellement efficace ensuite !

Les choses à travailler :

les propriétées margin et padding ;
le positionnement (relative, absolute, en accord avec le padding) ;
le flottement (left, right, en accord avec le margin) ;

En plus du site cité par salv-ice, un coup d'oeil sur Alsacréations (http://www.alsacreations.com/). ;)

Et si tu lis l'anglais même basiquement les livres d'Eric Meyer sont très didactiques sur tout ce qui relève du positionnement.

Bonne continuation.


à plus,

oh!rocks


Ha, et pendant que j'y pense, essaie de mettre ton projet de site en ligne sur un hébergement gratuit ou (mieux) mutualisé ce qui nous permettra un accès au code et une bonne visualisation des problèmes à corriger. ;)

Heero_Yuy
19/10/2009, 21h53
Salux Manchette,

Je serais toi, je supprimerais les propriétés Width et Height dans ton code html, et je jouerais plutôt sur le CSS comme te l'ont déja conseillé Oh!Rocks et Salv-ice.

Maintenant, dans ton CSS, je mettrais plutôt un :

#logo {
...
}

avec des propriétés générales, et un

#logo img {
...
}

avec les propriétés propres à l'image ;)

Mais bon, je ne m'y connais pas encore suffisamment pour te dire quelles propriétés utiliser, surtout de tête, j'utilise encore le site du zéro :P

manchette
19/10/2009, 22h02
Bonne idée ca, merci, en effet mettre le css à part accélère le site d'aprés ce que j'ai compris. Ce qui est génant c'est que bien souvent les exemples mélangent les 2 : montrant et propageant les mauvaises habitudes.

Heero_Yuy
19/10/2009, 22h12
En fait, le code (X)HTML gère le contenu, et le CSS la forme. Il y a donc ce qu'on appelle séparation du contenu et de la forme. Grâce au CSS, si un jour tu veux modifier l'aspect de ton site sans en changer le contenu, il te suffira de simplement modifier le CSS ;)

C'est quand même bien plus agréable.

Maintenant, sur le site du Zéro, je n'ai pas vu d'exemples mélangeant les bonnes et les mauvaises habitudes (ou alors, j'ai mal lu :P ).

salv-ice
23/10/2009, 18h27
Salut manchette !

La présentation de ta page devrait toujours se trouver dans un fichier CSS séparé, c'est la façon la plus propre de travailler en dev web, bien souvent hélas, il vaut mieux avoir 2 fichiers CSS à cause de IE, le deuxième fichier permettant d'inclure les "exceptions" d'IE dans un fichier séparé.

La seule exception concerne la balise <table> dont les attributs "cellpadding" et "cellspacing" n'existent pas en CSS.

Concernant le chargement plus rapide pour les pages ayant un fichier CSS séparé, cela doit être dû au cache utilisé par le navigateur pour stocker le fichier CSS.

salv-ice.