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.
Related
This jsfiddle looks like this:
I want it to look like this (I created this with MS Paint)... flush:
Is there anything I can add to the styles to achieve this?
div {
border: 1px solid blue;
font-size: 50px; // this number should be treated as arbitrary
}
One option is to use line-height. The amount will depend on the font-family you are using. The advantage would be that line-height can directly depend on font-size so it can be dynamic. However, it doesn't have a concept of vertical top and bottom individually (it applies to both) so you won't have that space under the text.
div {
border: 1px solid blue;
font-size: 70px;
font-family: 'Times';
line-height: 0.7; /* This will work for any font-size on 'Times'*/
}
<div>Hello</div>
You could simulate that bottom space by wrapping the text in an element with margin-bottom.
div.outer {
border: 1px solid blue;
font-size: 70px;
}
div.inner {
font-family: 'Times';
line-height: 0.7;
margin-bottom: 20px;
}
<div class="outer">
<div class="inner">Hello</div>
</div>
Another option is to use relative positioning. An advantage of this method over line-height is that the div size does not change.
div {
border:1px solid blue;
font-size: 64px; // works for arbitrary font sizes
}
span{
position:relative;
top:-0.21em;
}
<div>
<span>Hello</span>
</div>
As with line-height, you might have to adjust "-0.21em" depending on your font. -0.21em worked well for me for sans-serif and serif, but not cursive.
I have an H2 element that I'd like underlined and with a graphic of an arrow "below" the bottom border line.
Currently, the arrow appears above and if I change the background coordinates to lower the arrow, it starts to disappear.
my code:
h2 {
background: url("images/arrow-title.png") no-repeat scroll 10px 27px transparent;
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
}
image of what it's currently doing:
image of what I'd like to do:
and finally, a website link to a theme which does this properly. I have viewed the "inspect element" on Firefox and can't seem to adjust the CSS to make it work. :(
Website link to theme that looks correct: http://www.joomlart.com/demo/#ja_travel
What they are doing is putting a <span /> inside the <h2 /> tag and giving the span the border-bottom instead of the <h2 />
This way the <h2 /> has the arrow as a background image and since the <span /> adds a 3px padding on the bottom it is aligned perfectly.
<h2>
<span>
This is my header
</span>
</h2>
and then something like this
h2{
background: url("../images/arrow-title.png") no-repeat left center;
}
span{
border-bottom: 2px solid black;
padding-bottom: 3px;
}
Add a span inside your H2. Apply the border to that span and use padding-bottom on the H2 to adjust the arrow position.
If you prefer not to use a background image, you can try using a pseudo-element:
h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
}
h2:before {
content: '\25bc';
position: absolute;
top: 100%;
left: 5em;
color: #00a7a8;
}
See fiddle reference: http://jsfiddle.net/audetwebdesign/kFSvL/
The major advantage is the simplicity of the markup:
<h2>The Header Is Here</h2>
No extra tags required!
Make the underline part of the background image. It clearly should be from a visual perspective, so it might as well be from a technical perspective.
I am working on a website that helps people become more aware of the threats posed by the internet.
I have bumped into a VERY annoying css problem where the text will not center horizontally or vertically and generally doesn't seem to listen to the css properly. I have checked for anything overriding it and there's nothing.
http://nblackburn.me/pofa/
You're centering the text within the span, which isn't working because the span is only the size of the text. You need to either use a p element and use text-align:center with that, or add text-align:center to the parent of the span.
For aligning vertically, you can set the parent of an element to display:table; and the element to display:table-cell; vertical-align:middle;. This will vertically align the element.
Heres what I see in your CSS:
.sopa-box .title {
font-size: 50px;
font-weight: 700;
text-shadow: 1px 1px 0px #111111;
text-align: center;
}
Heres what it should be:
.title {
font-size: 50px;
font-weight: 700;
text-shadow: 1px 1px 0px #111111;
text-align: center;
}
That way when you use:
<div class="sopa-box">
<span class="title">SOPA</span>
</div>
You wont have any problems.
display: block; and line-height:200px on .sopa-box .title will center both horizontally and vertically
I am currently trying to make a custom underline with border-bottom. However, currently the underline is going all the way of my block-element (whole page).
I’d prefer to have it being only 50px longer than my headline (however the text is flexible and I do not know the length).
Can I do this without adding another <span> tag within the <h2> somehow? I do not wannt to add a <span> element to each <h2> just to change my design.
Current HTML is:
<h1>My title</h1>
CSS:
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
Is it possible to adjust the border-bottom length to my text length? (e.g. behave like inline element for border, but like block for newlines, padding and margin)
Using display: inline-block works, the only caveat being that the content after the <h1> tag must be the full width of the container element. The other solutions here also assume this. You can also use display: inline (supported by older browsers), but inline-block allows for setting of explicit widths, should you need it.
Here's a JSFiddle
CSS
h1
{
display: inline-block;
padding-right: 50px;
border-bottom: 1px dotted #888;
}
Inline or floating methods can be problematic if you're unable to compensate for them in other rules. One alternative is to use display:table
h1
{
display:table;
border-bottom:1px solid black;
padding-right:50px;
}
You can use
h1 {
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
float: left;
padding-right: 50px
}
Simply add one more property in css like this :
h1 {
display:inline;
font-size: 18px;
color: #b62525;
border-bottom: 2px solid #c68181;
}
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.