CSS : alignement bas d'un texte dans un bloc

tinus975 · Message par **tinus975** » 06 déc. 2006, 17:09

Est-ce que la fonction d'alignement bas existe dans l'editeur css? ou alors je dois juste dimensionner ma boite pour que mon texte arrive en bas, ou jouer sur les marges?

merci!

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3

Mongo Bob · Message par **Mongo Bob** » 06 déc. 2006, 22:06

Jamais entendu parler de ça. Ca sert à quoi, exactement?

tinus975 · Message par **tinus975** » 06 déc. 2006, 22:08

ben je voudrais que dans une boite, quelque soit mon texte (qui fait, selon les pages, 1, 2 ou 3 lignes...) il soit toujours aligné en bas, et non en haut de la boite. Comme quand on aligne le texte à gauche ou à droite...

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3

Mongo Bob · Message par **Mongo Bob** » 07 déc. 2006, 00:01

Je croyais m'en sortir avec la propriété "vertical-align", mais celle-ci me reste mystérieuse. Je ne m'en suis sorti qu'en faisant quelquechose comme ça :

Code : Tout sélectionner

<style title="geckostyle" media="all" type="text/css">
div {
    border: 2px solid #ff0000;
    background-color: #ccffff;
    width: 500px;
    height: 300px;
    }

    p {
    text-align: justify;
    background-color: #ffffcc;
    width: 400px;
    height: 140px;
    margin-top: 160px;
    margin-left: auto;
    margin-right: auto;
    }


    </style>
  </head>
  <body>
    <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.
      </p>
    </div>

Il faut un <div> conteneur qui contient ton texte dans un <p>, avec pour celui-ci une (hauteur + une marge haute) qui soit exactement égale à la hauteur du <div> : 140+160=300. Il faut ajuster a la mano la hauteur du <p> selon la quantité de texte puis déduire la marge par soustraction. Donc, chaque <p> contenu devra être identifié différemment par des id dans le css puisqu'à chaque fois des quantités de lignes de texte différentes.
Bon courage!
PS : si qqn a une info sur le mode d'application de "vertical-align"

tinus975 · Message par **tinus975** » 07 déc. 2006, 08:07

Ah oui j'avais pas pensé à ça. MOn texte est déjà dans un #bloc, je pense que ça fait office de div... je vais essayer.
je teste aussi aujourd'hui les puces de couleur

merci!

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3

Mongo Bob · Message par **Mongo Bob** » 07 déc. 2006, 10:31

tinus975 a écrit :je pense que ça fait office de div.

en effet, n'importe quel bloc.

Message par **chinon37** » 07 déc. 2006, 11:08

solution la plus simple:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
    <style type="text/css">
#header {
    border: 1px solid #ff0000;
    width: 800px;
    background-color: #dfdfdf;
    height: 400px;
    position: relative;
    }
    #para1 {
    position: absolute;
    bottom: 0px;
    }

    </style>
  </head>
  <body>
    <div id="header">
      <p id="para1">
        ed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
        <br>
        Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
        commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
        consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? bb
      </p>
    </div>
  </body>
</html>

le bloc principal en position relative
le texte dans un paragraphe. on attribue un id à ce paragraphe (#para1). avec un positionnement absolu et un décalage bas de 0px.
J'attends les objections

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 07 déc. 2006, 11:13

Objection!

Message par **chinon37** » 07 déc. 2006, 11:23

j'avais dit: les objections

tinus975 · Message par **tinus975** » 07 déc. 2006, 14:55

pffuuu non je suis désolée j'y arrive pas!! ça chamboule tout... je vous montre ce que j'ai réussi à bidouiller avec kazcades... le texte donc que je cherche à aligner en bas de sa boite, c'est celui contenu dans bloc2.
Si je mets le bloc 2 en position abolue, il se retrouve tout à gauche du header, alors qu'il doit être à droite (c'est le bloc1 qui est à gauche)

Code : Tout sélectionner

#header {
  border-color: #ff6666;
  height: 92px;
  margin-top: 21px;
  width: 755px;
  background-color: #99ccff;
  position: relative;
}
#bloc1 {
  border-color: #33cc00;
  border-width: 2px;
  float: left;
  background-color: #99ccff;
  color: white;
  font-style: italic;
  position: static;
  text-align: left;
  font-size: xx-large;
  width: 300px;
  height: 45px;
  margin-top: 40px;
  margin-left: 20px;
}
#bloc2 {
  border-color: #3366ff;
  border-width: 2px;
  display: block;
  clear: right;
  background-color: #99ccff;
  color: white;
  font-style: italic;
  width: 400px;
  font-size: small;
  height: 45px;
  bottom: 0px;
  position: relative;
  top: 25px;
  margin-left: 280px;
}

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3

Message par **chinon37** » 07 déc. 2006, 15:58

le code de la page complète serait plus judicieux... ensuite, jai dit en position absolue, pas statique .
Static veut simplement dire que l'élément doit se comporter normalement (dans le flux)

tinus975 · Message par **tinus975** » 07 déc. 2006, 16:03

oui, je sais, mais quand j'ai mis en position absolue, justement, ça a tout foiré... mon bloc s'est retrouvé tout à gauche, et en dehors de la zone header...
Voici le code complet, mais si tu penses que de cette façon (bricolée par moi) ça ne crééra pas de problème de mise en page, laisse tomber...

Code : Tout sélectionner

/* Generated by KaZcadeS */
body {
  margin: 0;
  padding: 0;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 0.8em;
}
#header {
  border-color: #ff6666;
  height: 92px;
  margin-top: 21px;
  width: 755px;
  background-color: #99ccff;
  position: relative;
}
#bloc1 {
  border-color: #33cc00;
  border-width: 2px;
  float: left;
  background-color: #99ccff;
  color: white;
  font-style: italic;
  position: static;
  text-align: left;
  font-size: xx-large;
  width: 300px;
  height: 45px;
  margin-top: 40px;
  margin-left: 20px;
}
#bloc2 {
  border-color: #3366ff;
  border-width: 2px;
  display: block;
  clear: right;
  background-color: #99ccff;
  color: white;
  font-style: italic;
  width: 400px;
  font-size: small;
  height: 45px;
  bottom: 0px;
  position: relative;
  top: 25px;
  margin-left: 280px;
}
#conteneur {
  margin: 0 auto;
  position: relative;
  background-color: #b3ffe6;
  width: 755px;
}
#centre {
  margin-top: 0px;
  background-color: #ffffff;
  top: 6cm;
  margin-left: 170px;
  height: 900px;
  padding-top: 1cm;
  padding-left: 1cm;
}
#gauche {
  position: absolute;
  left: 0;
  line-height: 1cm;
  background-color: #b3ffe6;
  list-style-type: square;
  list-style-position: inside;
  width: 170px;
}
#pied {
  height: 30px;
  background-color: #99ccff;
}
#gauche li {
  margin-bottom: 0px;
  background-color: #b3ffe6;
  font-size: x-small;
  list-style-type: square;
  list-style-position: outside;
  color: black;
}
#gauche a {
  margin: 0 2px;
  color: black;
}
#gauche a:hover {
  color: black;
  text-decoration: none;
}
p {
  margin: 0 0 10px;
}

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3

Message par **chinon37** » 07 déc. 2006, 16:18

chinon37 a écrit :le code de la page complète serait plus judicieux...

uniquement la feulle de style ne suffit pas!!!

tinus975 · Message par **tinus975** » 07 déc. 2006, 16:46

pardon! ne crie pas!!

voici le lien :
http://start1g.ovh.net/~danielanb/

et merci pour ton temps

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/418.9.1 (KHTML, like Gecko) Safari/419.3

Message par **chinon37** » 07 déc. 2006, 17:05

et ça, ça te conviendrait?:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title>
      index
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="index_fichiers/styles.css" rel="stylesheet" type="text/css">
  </head>
  <body linkifytime="0" linkified="0" linkifying="false">
    <div id="conteneur">
      <div id="header">
        <div id="bloc1">
          Daniel ANCELET
        </div>
        <div id="bloc2">
          Le coeur est rond comme une assiette,<br>
          Il se brise en mille morceaux,<br>
          On le recolle avec les mots :<br>
          C'est ainsi que l'on devient poète.
        </div>
      </div>
      <div id="gauche">
        <ul>
          <li>
            <a href="http://start1g.ovh.net/%7Edanielanb/index.html">Accueil</a>
          </li>
          <li>
            <a href="http://start1g.ovh.net/%7Edanielanb/decouvrir.html">Decouvrir Daniel Ancelet</a>
          </li>
          <li>
            <a href="http://start1g.ovh.net/%7Edanielanb/Publications.html">Publications</a>
          </li>
          <li>
            <a href="http://start1g.ovh.net/%7Edanielanb/prix.html">Prix reçus</a>
          </li>
          <li>Articles - Rencontres
          </li>
          <li>ASALA - Le Cerf Volant
          </li>
          <li>Contact
          </li>
        </ul><br>
      </div>
      <div id="centre">
        <big style="color: rgb(255, 153, 0);"><big><big><big><br></big></big></big></big>
        <div style="width: 250px; text-align: justify;">
          <big style="color: rgb(255, 153, 0);"><font style="color: rgb(0, 0, 0);" size="-1">Poète fantaisiste, Daniel
          Ancelet pratique l'humour avec beaucoup de succès.Tout est prétexte à aiguiser son esprit et à faire sourire
          ses contemporains. Ceci, tout en respectant des règles qui lui paraissent essentielles. Et qui donnent à ses
          poèmes une force percutante? suite</font></big>
        </div><big style="color: rgb(255, 153, 0);"><br>
        Actualités</big>
        <div style=
        "padding: 1em; margin-left: 264px; position: absolute; background-color: rgb(255, 226, 153); margin-top: 1cm; bottom: auto; top: 92px; right: auto; font-size: x-small; font-family: Arial,Helvetica,sans-serif; left: 220px; width: 251px;"
        id="centre2">
          <span style="font-family: Arial;"><big><big><span style="font-weight: bold;">Le poème du
          mois</span></big></big></span><br style="font-family: Arial;">
          <br style="font-family: Arial;">
          <span style="font-style: italic; font-family: Arial;">SPORTS D'HIVER</span><br style="font-family: Arial;">
          <br style="font-family: Arial;">
          <span style="font-family: Arial;">Un beau soleil d'hiver sur la neige glacée</span><br>
          Les cloches de Noël sonnant dans la vallée,<br>
          Toute une randonnée à travers les sapins,<br>
          Domaine inviolé des trolls et des lutins,<br>
          Et dans le matin pur, mon pas sonore ébrèche<br>
          La pureté du ciel et la neige bien fraîche,<br>
          Plus éclatante au jour que le drap nuptial...<br>
          <br>
          En revenant j'aurais un appétit brutal :<br>
          Du fromage, du beurre, et du miel des montagnes,<br>
          Puis, grillé juste à point, du bon pain des campagnes,<br>
          Et le sang de mes doigts se serait réchauffé<br>
          Aux brûlantes parois d'une tasse de thé ;<br>
          J'écorcerais aussi deux ou trois mandarines<br>
          Pour parfumer ma peau, mon palais, mes narines...<br>
          Alors, pour sublimer la célébration,<br>
          Ma main caresserait avec précaution<br>
          Sous un chandail de laine un peu rêche et râpeuse<br>
          Ta peau fondante et nue, ô ma belle frileuse!<br>
          <br>
        </div><br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
      <div id="pied"></div>
    </div>
  </body>
</html>

Désolé pour le petit énervement, ça me passera!

Geckozone

CSS : alignement bas d'un texte dans un bloc

CSS : alignement bas d'un texte dans un bloc

Qui est en ligne ?