Discussion :

[lvr]

Bonjour,

2ème question de la soirée:

Comment faire pour qu'un div ne prenne pas toute la largeur de la fenêtre ?

J'ai un DIV avec ce texte:
[HTML]

Code :

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

1
2
3
<div id="Copyright">
<p>&copy; SKP @ Parking B 2004 -2007 - Last update: 27/01/2007 - Version 0.0.3<br>
All the pictures are under a Creative Commons contratc</p>

[CSS]

Code CSS :

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

1
2
3
4
5
#Copyright P {
  text-align: center;
  font-size: 7pt;
  margin-top: 7px;
  }

Ce DIV s'étale sur tout la largeur de la page, alors qu'il n'en fait que la moitié.
Est-il possible de lui indiquer de n'occuper que la place nécessaire, sans pour autant fixer sa largeur avec des "width" ?

C'est utile car
- si je demande en CSS un "border-top", il sera tracé sur toute la largeur et pas seulement au dessus de la partie où il y a du texte
- si j'aligne une partie du texte à gauche et l'autre à droite, elles le seront sur toute la largeur et pas relative au bloc.

Merci,

Laurent

[mchev]

Feuille de style :

Code css :

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

1
2
3
4
5
p {
	text-align: center;
	font-size: 7pt;
	margin-top: 7px;
}

Body :

Code :

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

1
2
3
 
<p>&copy; SKP @ Parking B 2004 -2007 - Last update: 27/01/2007 - Version 0.0.3<br>
All the pictures are under a Creative Commons contratc</p>

[lvr]

En gros, tu me suggères de retirer le DIV ?

[Linaa]

Ton bloc ne s'étale pas sur toute la largeur puisque tu as un <br> qui coupe la ligne...

[Candygirl]

Tu as différents moyens:

-Tout d'abord, un positionnement en absolute ou placer ton bloc en float fera que celui-ci s'adaptera à la largeur du contenu plutôt que d'occuper toute la largeur. Cependant il va falloir ruser un peu pour centrer...

- l'autre option est de passer ton texte en display:inline puisque le comportement par défaut des inline est de s'adapter à la largeur du contenu. Par contre si tu veux attribuer un border, tu ne pourras pas l'attribuer directement à l'élément contenant ton texte sous peine de le voir s'afficher sur les 2 lignes de texte, donc peut-être pas vraiment adapté à ton cas...

Un exemple avec un positionnement absolute:

html:

Code :

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

1
2
3
4
<div id="Copyright">
  <p>&copy; SKP @ Parking B 2004 -2007 - Last update: 27/01/2007 - Version 0.0.3<br>
  All the pictures are under a Creative Commons contratc</p>
</div>

css:

Code :

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

1
2
3
4
5
6
7
#Copyright {
  position:absolute; left:50%;
}
 
#Copyright p {
  position:relative;right:50%;border-top:1px solid #000;text-align:center;
}

Avec le float c'est idem sauf:

Code :

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

1
2
3
#Copyright {
  float:left;position:relative; left:50%;
}

L'avantage du float est de pouvoir le garder dans le flux (pas nécessaire si c'est le dernier élément de ta page).