Forum d'entraide PHPFrance

Bonjour,

J'a iun probleme de mise d'un texte a droite dans une balise h1 ... je ni arrive pas du tous

voici ceu que je voudrai

j'avais essayer ceci mais sans resutat ...

<div id="right">
<h1>texte a droite EN BLANC</h1>
</div>
<div id="left">
<h1>texte de gauche</h1>
</div>

div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}

merci du coup de main

La balise <h1> comme toutes les <hn>, <p>, <div> et quelques autres sont das éléments de type bloc. ils occupent par défaut toute a largeur de la page.

Pour faire ce que tu veux faire, la balise h1 n'est en outre pas appropriée et le <div> est de trop. Essaye ceci:

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" lang="fr">
<!-- Date de création: 14/08/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<style type="text/css">
/* <![CDATA[ */
#left {
  float: left;
  width: 75%;
  color: inherit;
  background-color: red;
}
#right {
  float: right;
  width: 25%;
  color: #fff;
  background-color: green;
}
/* ]]> */
</style>
</head>
<body>
<p id="right">texte a droite EN BLANC</p>
<p id="left">texte de gauche</p>
</body>
</html>

bonsoir,

Je viens d'essayer sa ne marche pas les 2 div sont décaller ....

Je viens de pensez a qlq chose ya t'il moyen de mettre une image tou a droite d'un <h1> ?

merci

Bonjour,
Oui, je crois que tu peut le faire avec l'attribut background-image:

ex:

Code : Tout sélectionner

h1 // s'apliquera à toutes les balises h1
{
background-image: url(chemin vers ton image);
}

ou juste pour les balise de ton choix, il faudra mettre un div ou un span avec la class
ex:

Code : Tout sélectionner

.maclass // s'apliquera au balise qui aurons <span class="maclass">ou div class ...
{
background-image: url(chemin vers ton image);
}

Voila en espérant t'avoir été utile

La réponse se trouve (comme toujours) dans le manuel de CSS. Le truc devrait ressembler à

Code : Tout sélectionner

background: url('foo.jpg') 100% 50% no-repeat;

Au fait, comme le dit Cyrano, ce n'est pas trop la fonction de <p> ce que tu veux faire, à mon avis essaie plutôt un <span>. D'ailleurs, on pourrait faire la même réflexion pour <h1>, normalement c'est pour les trucs plus important... (tu style le titre de la page)

Ah, pis aussi je te conseille de ne pas nommer les éléments (surtout les IDs !) d'après leur placement sur la page. Sinon, que se passera-t'il si tu veux mettre le texte de droite à gauche et en bas ? Il faudrat renommer "right" en "left_un_peu_plus_bas" ?

La règle de base c'est de ne pas inclure d'information sur le style dans la page (X)HTML et donc de nommer les éléments d'après leur contenu ou encore leur fonction, par exemple: "titre", "pagination", "description_titre", "important", etc... Et de n'utiliser les IDs (qui sont uniques, je le rappelle) que lorsque c'est vraiment nécessaire, sinon en général il vaut mieux utiliser des noms de classes.

salut,

Il y a plein de solution.
Si tu veux que c'est 2 textes soient dans le même titre tu peux faire ça :

Code : Tout sélectionner

h1 {
    position: relative;
}

h1 span {
    position: absolute;
    right: 10px;
}

Avec en html :

Code : Tout sélectionner

<h1>Ton titre <span>ton texte</span></h1>

Attention par contre si ton titre est long. Si c'est le cas ton span va passer par dessus.

Sinon la solution des floats est bien. Si tu as un décalage tu peux jouer sur la marge en mettant un margin-top en négatif.

Dis moi si tu veux d'autres méthodes

Je ne sais pas laquelle est la mieux mais en ce moment j'aime bien utiliser le positionnement relatif et absolue.

a+

pourquoi tu n'utilises pas des tableaux tu t'embete moins...

modération de zeus : merci de rester poli

Forum d'entraide PHPFrance

texte a droite en blanc dans balise <h1>

texte a droite en blanc dans balise <h1>