Délimité contenu page html css
Anaïs
-
coeus Messages postés 3296 Statut Membre -
coeus Messages postés 3296 Statut Membre -
Bonjour,
Je débute dans le html et css. Je voudrais savoir comment on fait our encadrer le contenu d'une page, ou bien mettre des ombres.. Quel est le code html et css ?
merci
Je débute dans le html et css. Je voudrais savoir comment on fait our encadrer le contenu d'une page, ou bien mettre des ombres.. Quel est le code html et css ?
merci
1 réponse
-
Salut !
Je ne suis pas sûr de ce que tu veux dire par "encadrer le contenu d'une page"... Mais à la base, toutes tes pages devraient être contenues dans une<div id="global"> ... </div>
À laquelle tu pourras appliquer, dans ton CSS :div#global { border:1px solid #000; /*Tu peux changer le style de la bordure, il y a différents choix d'allures, de couleurs, d'épaisseurs... Cherche ! ;-) */ width:/*Largeur voulue, par exemple en fonction de la largeur de ton écran*/ }
C'est peut-être aussi simple que ça ! ;-)-
-
Les boutons à liens, ça va souvent être des liens très normaux mais avec une apparence spéciale, programmée en CSS.
Essaie déjà ça. Tu commences par te faire un petit lien HTML :
<a href="www.commentcamarche.net" class="btn">Lien vers CCM</a>
Et tu lui mets le CSS suivant :
a.btn { background-color: #AAF; border: 2px ridge #AAF; color: #008; font-weight: bold; padding: 2px 8px; text-decoration: none; } a.btn:hover { background-color:#FAA; border-color:#FAA; color:#F00; }
Bon, je ne garantis pas que ça va être beau, mais ça va te donner une idée ! ;-)
Pour plus d'information sur les propriétés possibles en CSS : W3Schools devrait faire ton bonheur !
Bonne exploration ! ;-) -
ok merci encore une fois.
Juste une derniere question, désolé de t'embêter encore, mais y a encore un truc qui me prend la tete, je voudrais positionner une image voici mon code html:
<img class="1" src="photos/bannieres/banniere.jpg" alt="banniere"/>
et mon code css :
img.1
{
position: absolute;
display:block;
margin-left:32px;
margin-top:14px;
}
mais ça ne fonctionne pas, l'image ne bouge pas :( -
Quand tu utilises position:absolute; tu ne peux utiliser que les attributs top, bottom, left et right pour placer ton élément... Dans ce cas précis, les margins ne servent à rien, l'élément ne se positionne plus par rapport à ses "voisins", mais par rapport à ses "parents". En fait, il se positionne en fonction du parent le plus proche (souvent une <div>) qui est soit en position:absolute ou en position:relative.
Petite note, au cas où ça t'intéresserait, parce que beaucoup de gens le demandent éventuellement... Quand tu utilises position:absolute, tu peux avoir envie de déterminer toi-même quel élément va apparaître "par-dessus" les autres sur ta page. Pour ça, il y a l'attribut z-index. Tu peux le mettre à n'importe quelle valeur entière :
z-index:0;
z-index:10;
z-index:-5;
Et plus la valeur est haute, plus l'élément va être "par-dessus" les autres.
Autre petite note, pour simplifier ton code... Au lieu de faire, par exemple :
margin-left:32px; margin-top:14px;
Tu pourrais faire :
margin:14px 0 0 32px;
Tu entres effectivement quatre valeurs à margin, séparées seulement par un espace (pas de virgule ni de point-virgule). Ces valeurs représentent les quatre côtés de l'élément, dans le sens des aiguilles d'une montre, en commençant par le haut. Donc, dans le fond, tu spécifies :
margin:haut droite bas gauche;
Encore mieux, tu peux spécifier toutes tes margins ainsi :
margin:4px 8px;
Dans ce cas, l'élément aura 4px de marge en haut et en bas, et 8px à gauche et à droite.
Tu peux appliquer ces règles également au padding, au border-width, et peut-être à d'autres attributs qui ne me viennent pas en tête actuellement...
Voilà, j'espère que ça t'aide !!! ;-)
-
