web-dev-qa-db-fra.com

Souligner des lignes en pleine largeur, pas seulement du texte

Salut,
J'essaie actuellement de créer quelque chose avec HTML/CSS qui ressemble à un post-it.

Un Image de ce que je vise

 image

Veuillez noter que chaque ligne doit être soulignée, quel que soit le nombre de caractères de cette ligne. De plus, chaque nouvelle ligne doit être complètement soulignée.

HTML:

<p>
    <img src="http://trööt.net/img/pin.png" alt="Stecknadel"/>
    <font>Heading</font><br />
    <span class="blockMargin">
    <span class="underline">
        <strong>Subheading</strong> text text text
    </span>
    </span>
</p>

CSS:

p {
    background-Color: #ffc; 
    padding: 1em; 
    width: 40em; 
    box-shadow: 5px 5px 3px 0px rgba(119,119,119,0.7); 
    text-align: justify;
}
img{
    float: None;  
    height: 4em; 
    display: block; 
    margin-left: Auto; 
    margin-right: Auto;
}

.blockMargin{
    display: block; 
    margin-bottom: -1px;
}

.underline{
    border-bottom: 1px dotted #c03;
}

C'est le code que j'utilise actuellement (j'ai déjà eu l'idée de stackoverflow.com). Cependant, il ne souligne pas les lignes complètes mais fonctionne exactement comme text-decoration: underline...

Des idées? Je devrais peut-être ajouter que je crée cela avec WordPress et Nuclear-Theme.

Merci beaucoup pour votre aide!

Exemple sur JSFiddle: http://jsfiddle.net/8w9Lj7nd/

cssborderunderline
11
trootnet

http://jsfiddle.net/8w9Lj7nd/1/

Voilà. 

.underline{
border-bottom: 1px dotted #c03;
width: 100%;
display: block;
}
4
NubPro

Ceci est répondu ici :

J'ai pris le autre réponse et l'ai mis à jour en SCSS pour le rendre configurable. Vous pouvez maintenant facilement changer la taille et la couleur des trous et des règles et tout sera dimensionné en conséquence.

De plus, j'ai ajouté un autre exemple qui utilise une div éditable au lieu d'une textarea.

example

jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

Malheureusement, Stackoverflow ne supporte pas SCSS, je viens donc d'inclure un instantané d'une configuration fixe ici:

@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie");

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: #000000;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top;
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: 24px;
  line-height: 20px;
  margin: 2% auto;
  padding: 22px 20px 3px 40px;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: #FFFFFF;
  background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  -webkit-background-size: 100% 20px;
  background-size: 100% 20px;
}
<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>

0
Benny Bottema