Modifier margin-left avec jQuery

absot · 15/08/2011, 23h57

Bonjour, je souhaiterais faire un margin-left et margin-right un peu à la facebook.

C'est à dire que quelque soit la largeur de la résolution de l'écran de l'utilisateur,le texte que je veux afficher soit toujours au même endroit.

par exemple, si la largeur de l'écran de l'utilisateur est de 1000px et que j'ai un texte à afficher de 700px, il faut que je fasse un margin-left et un margin-right de 150px ((largeur-700)/2) pour que mon texte soit centré et si jamais la largeur de l'écran de l'utilisateur est de 1 500px, il faut un margin-left et un margin-right de 400px.

Pour l'instant, mon code est 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
18
19
20
21
 
<!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" xml:lang="fr" > 
  <header> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <style type="text/css"> 
    body 
    { 
 
 } 
    </style> 
  </header> 
  <body> 
      <p>Texte</p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript"> 
        var largeur = Math.round($('body').width()); 
        margin = (largeur-700)/2; // récupération de la largeur de l'écran 
 </script> 
  </body> 
</html>

Que faut-il que je rajoute à mon code svp?

galerien69 · 16/08/2011, 05h08

salut,

tu peux t'en sortir en css, avec la propriété margin:auto;
qui va simplement centrer ton block...

absot · 16/08/2011, 12h14

Pourquoi faire simple quand on peut faire compliqué..

J'en profite avec ce topic parce que j'ai une autre question, je souhaiterais faire une bordure avec une touche de noir dégradée à l'extérieur, un peu dans ce style:

Quelle propriété puis-je utiliser?

guilhem91 · 16/08/2011, 12h57

Salut

La propriété box-shadow. (CSS3, attention, non compatible IE 8.0 et inférieurs)

Genre :

Code :

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

1
2
3
4
5
 
.bordure
{
  box-shadow: 0px 0px 10px #aaa;
}

De mémoire :
- le premier paramètre représente le décalage vers la gauche de l'ombre
- le second le décalage vers le bas
- le troisième la taille de la zone d'ombre
- le quatrième la couleur de l'ombre

Un petit tour sur Google t'en dira plus

absot · 16/08/2011, 13h37

En regardant sur internet, je viens de tomber sur ça:

Citation:

La première valeur indique le décalage horizontal vers la droite
le deuxième correspond au décalage vertical vers le bas
le chiffre suivant indique la force du dégradé
et enfin, la couleur

Par contre, il ne faut que la propriété "box-shadow", il faut tout ça:

Code :

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

1
2
3
4
5
 
border: 5px solid #fff;
-moz-box-shadow: 1px 1px 12px #555; 
-webkit-box-shadow: 1px 1px 12px #555; 
box-shadow: 1px 1px 12px #555;

J'ai une nouvelle question comme je ne suis pas du tout doué en CSS.

Quand je créé une division de 700px par exemple et que j'y intègre du texte qui fait plus de 700px, je souhaiterais qu'il se coupe à 700px et retourne à la ligne du dessous parce que pour le moment, mon texte sort de ma division. :/

gmartintin · 16/08/2011, 14h30

Citation:

Envoyé par absot

J'ai une nouvelle question comme je ne suis pas du tout doué en CSS.

Quand je créé une division de 700px par exemple et que j'y intègre du texte qui fait plus de 700px, je souhaiterais qu'il se coupe à 700px et retourne à la ligne du dessous parce que pour le moment, mon texte sort de ma division. :/

Ton texte, c'est un grand mot sans césure, ou un vrai texte ?
Les navigateurs ne découpent pas tout seuls les "grands mots".

Sinon, voir peut être avec la propriété css overflow ?

absot · 16/08/2011, 19h57

Forcément, ca va mieux si ce n'est pas un seul mot..

J'ai des progrès à faire en CSS moi..

16/08/2011, 05h08	#2
galerien69 Membre éclairé F5(){F5} Inscription : avril 2008 Messages : 256 Détails du profil Informations personnelles : Sexe : Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : F5(){F5} Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2008 Messages : 256 Points : 320 Points : 320	salut, tu peux t'en sortir en css, avec la propriété margin:auto; qui va simplement centrer ton block...
	00

16/08/2011, 12h14	#3
absot Nouveau Membre du Club Inscription : février 2009 Messages : 261 Détails du profil Informations forums : Inscription : février 2009 Messages : 261 Points : 30 Points : 30	Pourquoi faire simple quand on peut faire compliqué.. J'en profite avec ce topic parce que j'ai une autre question, je souhaiterais faire une bordure avec une touche de noir dégradée à l'extérieur, un peu dans ce style: Quelle propriété puis-je utiliser?
	00

16/08/2011, 19h57	#7
absot Nouveau Membre du Club Inscription : février 2009 Messages : 261 Détails du profil Informations forums : Inscription : février 2009 Messages : 261 Points : 30 Points : 30	Forcément, ca va mieux si ce n'est pas un seul mot.. J'ai des progrès à faire en CSS moi..
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email