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?

Invité · 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:

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

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 ?

Modifier margin-left avec jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager