I am trying to create highlighted text effect with line break(s).
Example:
I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
When adding padding it only adds padding to beginning of the text and the end, as seen here:
CSS:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Does anybody have any idea on how to make this happen?
I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break
The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:
.highlight {
color:#fff;
background:#000;
box-shadow:5px 0 0 #000, -5px 0 0 #000;
padding: 5px 0;
}
Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.
This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.
Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.
This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.
For more info see:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana, sans-serif;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break:clone;
-moz-box-decoration-break:clone;
box-decoration-break: clone;
}
<div class="box">
<h1>
<span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
</h1>
</div>
Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
you can use box-decoration-break
-moz-box-decoration-break:clone;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
working sample codepen
Just add:
If space in the text area is all you are looking for.
If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.
<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
background-color:black;
color: white;
}
#masthead h1{
text-transform:uppercase;
}
#container{
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>some sort of title goes here</h1>
</div>
</div>
</body>
</html>
Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.
Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.
Related
I am playing with various css properties to see how they work. And my question is, why is it when I set "margin-top" that is more negative than -20px my link doesn't move more upwards any more. Setting a more negative value like -21px and above doesn't move the link more to the top at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<style>
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -20px; /* more negative value doesn't move the link more to the top */
}
</style>
</head>
<body>
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>
For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.
If you do change the anchor to a block level element though, the negative margin applies properly.
Sample 1 - padding
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 40px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
Sample 2 - block element
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
It will never go more negative because there is a h1 tag which dosen't have any spaces above it to do the margin
you have to use position:absolute; to make a tag move freely
All the elements in your example have what is called (are in) a "Normal Flow". The very first element in the flow is <h1> which is block element, it occupies the whole available width and makes the line break. When you use negative margin-top you go up to the element above. 20px of padding is the available negative margin for the element. To go out of the "Normal flow" you can use position: absolute. To stay in the flow you may use position: relative, and use top: -21px;.
That is a little bit hard to explain, if someone knows a better title for this, please go ahead and change it.
I want to draw a black box behind my headline. I'm doing this with a span inside the h-tag. It needs a little bit padding to the left and to the right. My layout is responsive, so it is likely that the heading breaks into two lines.
<div class="headline-black">
<h1 class="entry-title">
<span>Some very, very long headline, that is very, very long.</span>
</h1>
</div>
h1 span {
background: none repeat scroll 0 0 #000000;
line-height:44px;
padding:7px 25px 8px 25px;
}
.headline-black h1 {
color: #FFFFFF;
font-size: 22px;
}
The problem: The padding just affects the end and the beginning of the span. Where the heading is broken, the letter touch the border of the box.
I hope this is understandable. Here is the fiddle. Try to make the window small and watch, hoe it behaves.
http://jsfiddle.net/832u8/2/
Edit: I want it to be shaped like the text. As you would mark it with a felt tip. But with padding for every line.
I'm assuming you WANT it to split to "two dark lines" in that fashion? Because if you just want a black background to your titles, that DOES retain the padding, then this simplified version will work:
<h1 class="entry-title">Some very, very long headline, that is very, very long.</h1>
h1 {
background: #000;
line-height:33px;
padding: 8px 25px;
color: #fff
}
Updated Fiddle: http://jsfiddle.net/kWgD2/
This is the closest I can get...really hacky, I think you'll need some JS myself :(
This via:
<h1 class="entry-title"><span id="Title"><span>Some very, very long headline, that is very, very long.</span></span></h1>
#Title {
border-left: 20px solid #000;
display:block;
color: #fff;
}
#Title:after {
content:'';
display:inline-block;
width: 20px;
background: #000;
}
#Title span {
background: #000;
padding-right: 20px;
direction: rtl;
}
http://jsfiddle.net/8EDPN/
What about using position:relative with a left adjustment? Prob not the best method if you're not doing the adjustments manually but at least it's a css-only solution?
Example -> http://jsfiddle.net/JnLje/358/
More info from thirtydot -> Add padding at the beginning and end of each line of text
you should set padding on h1 and/or set span as inline-block
http://jsfiddle.net/832u8/9/ ( span inline-block)
h1 span {
background: none repeat scroll 0 0 #000000;
line-height:44px;
padding:7px 25px 8px 25px;
display:inline-block;
}
http://jsfiddle.net/832u8/3/ (padding h1)
.headline-black h1 {
color: #FFFFFF;
font-size: 22px;
padding:0 1em;
}
I recently found another sollution. It works in almost every browser (No IE8 and down), is easily adjustable and looks like this:
HTML
<h1>
<span class="wrap">
<span class="inner">Du texte HTML dynamique sur plusieurs lignes avec un fond qui suit bien et des marges autour.</span>
</span>
</h1>
CSS
h1 {
color:#fff;
}
.wrap {
box-shadow: -10px 0 0 10px #000, 10px 0 0 10px #000;
}
.inner {
background: #000;
position:relative;
}
I'm having a weird error with padding. I am creating a two-columns layout and when I try to add a padding to the footer div it takes more space than I want. I have already looked for this problem but couldn't find no useful answer.
For instance, if I put up 1 pixel on the code:
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}
I end up getting more than 1 pixel of a padding, as seen here:
The top and bottom paddings have more than 1px of height.
So my question is what could be causing this problem?
I've put up a piece of the code in a fiddle and the problem is still there, so I guess the code I've included will be enough to solve this problem, if it isn't just tell me.
Fiddle link: http://jsfiddle.net/KhxAW/4/
The issue is with your <p> tag. It has a margin space above and below. I recommend you reset the <p> tag margins somewhere in your CSS code.
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}
You aren't using pixels for your units in the padding declaration... You are using EM's. 1EM is equal to the PX size of the font of the parent element. So if your font size is 12px, 0.5em is 6px.
Just change your units to PX...
#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 5px;
line-height: 1.1em;
}
Just Replace Your Footer Div With This One->
<div id="footer">
<p style="display:inline">Three Rings for the Elven-kings under the sky, seven for the Dwarf-lords in their halls of stone,
Nine for Mortal Men doomed to die, one for the Dark Lord on his dark throne, in the Land of Mordor
where the Shadows lie. One ring to rule them all, one ring to find them, one ring to bring them all
and in the darkness bind them, in the Land of Mordor where the Shadows lie.</p>
</div>
If you include the following in your code styles
p.margin
{
margin: 0px;
}
and then inside your <p> tag you include the class="margin" like this:
<p class="margin">Three Rings for the Elven-kings ... </p>
You will be able to set the padding in the <div> tag without interference
from the <p> tag.
First i will show you the problem, wich only happens on IE6/IE7
As you can see, when the length of the innerHtml it's not long, no problem; but when it's 'longer' the sprite set as bg image gets repeated and the text jumps to the next line...
now, the CSS
.contButton {
list-style: none;
float: right;
}
.contButton p {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 0 0 10px !important;
}
.contButton a {
text-decoration: none !important;
float: left;
color: #FFF;
cursor: pointer;
font-size: 14px !important;
line-height: 21px;
font-weight: bold !important;
}
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
background: url(../nImg/spriteBotones.png) no-repeat right -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
color: #FFF;
}
.contButton p a span {
background: url(../nImg/spriteBotones.png) no-repeat left -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}
And the Html:
<div class="">
....
<div class="contButton mt10">
<p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div>
...
</div>
This is the bg Image.
![the sprite][2]
Tried with:
<!--[if IE lte 7]>
<style type="text/css">
/*
.contNombrePrecioHtl .contButton p a{ height:20px; }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; } */
</style>
<![endif]-->
But that didn't solve the problem...
PS: class="mt10" it's only a margin-top:10px;
Any idea how to solve this for the glorious IE6/7?
Try adding white-space: nowrap to .contButton.
change this:
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
white-space: nowrap;
}
I don't think it is a problem with either IE versions, it's probably just the newer browsers being less strict about this particular thing. I haven't tested anything, but "display:inline-block" has helped me sometimes. Still it doesn't seem like the most effective solution. The width seems to be limiting here, you shouldn't give the thing a fixed width if you don't want the text to "jump" into a second line...
can you try to add overflow: hidden to each parent of element with float: left? in this case you will have to add it to each div, p and a. I am not sure whether your actual code is optimal.
Moreover, float: left; and display: inline together make no sense. This might be the reason of the strange behaviour. Delete display: inline (remember about adding overflow: hidden to its parent) and it should work.
Haven't tested though.
UPDATE:
apparently as the author of the question mentions float:left + display: inline fixes IE6 double margin bug for floating elements.
defining dimensions for elements like p oder span is always somewhere between tricky and impossible, because they are inline elements. I'd recommend modifying the surrounding block element div.contButton.
In addition to height you should set overflow to hidden:
.contButton {
height:20px;
width:219px;
overflow: hidden;
}
I have the following code:
<h1><span>Test Heading</span></h1>
and CSS:
h1 { font-size: 1.3em; font-family: calibri, arial;border-bottom: 1px solid #999; padding-bottom: 10px;margin-bottom: 5px; background-color: pink;}
h1 span { color: #fff; background-color: #446688;padding: 1px 5px 3px 5px;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
Right now it displays something like this:
XXXXXXXXXXXXXXXX
x Test Heading X
XXXXXXXXXXXXXXXX
----------------------------------------------------------------------------------------
What I need to be able to do is have text appear to the right of the heading like this:
XXXXXXXXXXXXXXXX Some text aaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
x Test Heading X more text aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
XXXXXXXXXXXXXXXX aaaaaaaaaaaaaaaaaaaaaaaaaaa
----------------------------------------------------------------------------------------
I think this is not so easy to do. Can anyone suggest how I could do this? I guess I need some kind of outer enclosing DIV for my heading but when I tried that the text always appears below the heading instead of to the right.
Here is an example of what I have now
demo
Wrap it all in a <div>, move the pink background color and bottom border to the <div>, and float the <h1> to the left.
For example:
<div class="bb">
<h1><span>Test Heading</span></h1>
This is text that I want to make appear to the right of the heading and above the blue base line. This is text that I want to make appear to the right of the heading and above the blue base line.
</div>
CSS:
.bb {
border-bottom: 1px solid #999;
padding-bottom: 10px;
background-color: pink;
overflow: hidden;
}
h1 {
font-size: 1.3em;
font-family: calibri, arial;
margin-bottom: 5px;
float: left;
}
h1 span {
color: #fff;
background-color: #446688;
padding: 1px 5px 3px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Fiddle: http://jsfiddle.net/ambiguous/FNLBD/
You'll probably want to pretty up the paddings and margins a bit though.
Put the H1 text and the other text in separate DIV's. Then make them float next to one another using CSS
Float the heading.
try
display:inline;
http://jsfiddle.net/gKqQc/
Add this to the H1 CSS:
float: left;
margin-right: 10px;
This will float your heading left so that the text can wrap around it on the right, Check this JS Fiddle, The Margin-right will add a 10px margin to the right of the heading for presentation.
float-ing the h1 to the left is the best option in this case and your markup could do with a little tweaking to accomplish this in the best possible way.
<div class="box">
<h1>Test Heading</h1>
<p>This is text that I want to make appear to the right
of the heading and above the blue base line. This is
text that I want to make appear to the right of the
heading and above the blue base line.</p>
</div>
Demo: jsfiddle.net/Marcel/ryGFq/10
You'll see there's a second option in the demo too showing the best way to have the content left justified, however an absolute value is required for the margin-left.
Try with
display: table-cell;
For both the H1 and the Text. They will appear next to each other.