I have <h1> with image before and after it.
It works fine within all webpages, but now I have some additional headings with two lines.
So, I need to style <h1> with two lines.
If I use the existing style with image before and after then text align is a problem.
You can test it in jsfiddle: http://jsfiddle.net/kw3KX/
Or see it in realtime webpage (a bit modified): http://modeles-de-lettres.org/test/
You can see that <h1> with two lines contains text "Some text here" and "about this site" and alignment is a problem.
HTML:
<div id="content-wrapper">
<h1>
Some text here
</h1>
</div>
CSS:
h1 {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #5d5d5d;
margin: 41px 0 32px 0;
}
h1:before {
background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
background-repeat: no-repeat;
padding: 0 152px 0 0;
}
#content-wrapper {
width: 1000px;
margin: 0px auto;
position: relative;
}
So is it possible to fix it somehow with <h1> tag?
This is beeing caused by the float you apply to the :before and :after elements.
I would advise you to postion the images absolute instead. This lifts the images out of the document flow, and they can no longer influence the other elements (and mess up your text). This way your layout will keep working, no matter the number of lines in your h1.
I updated your fiddle: http://jsfiddle.net/kw3KX/2/
and the relevant css:
h1 {
text-align: center;
font-size: 22px;
font-weight: bold;
color: #5d5d5d;
margin: 41px 0 32px 0;
position: relative; /* added so the position absolute will work */
}
h1:before {
background-image: url('http://modeles-de-lettres.org/test/images/h_ltr.png');
background-repeat: no-repeat;
background-position: center left;
padding: 0 317px 0 0;
content:"\00a0";
/* added */
position: absolute;
left: 0;
top: 50%;
margin-top: -7px; /* half the height of the image, to center it */
}
h1:after {
background-image: url('http://modeles-de-lettres.org/test/images/h_rtl.png');
background-repeat: no-repeat;
background-position: center right;
padding: 0 317px 0 0;
content:"\00a0";
/* added */
position: absolute;
right: 0;
top: 50%;
margin-top: -7px; /* half the height of the image, to center it */
}
you may wrap the text in a span and do display: inline-block; for that span, and do some margin-top to adjust the alignment with the images:
<h1>
<span style="display:inline-block; margin-top:-16px;">Some text here<br>
about this site</span>
</h1>
Use the white-space property: white-space:pre;
FIDDLE
Related
I'm trying to emulate this effect via CSS:
The reason this is an issue is because it needs to be re-usable. The red underline's size should be dictated by the text length, but also overflow its container in a predictable manner, e.g.:
<div>
<h1>This</h1>
<h1>Cool</h1>
<h1>Effect</h1>
</div>
The red underline should extend outside the div by 10px on the left, and then also overflow the text itself by roughly 50px on the right. So, all told, the red line is +60 pixels wider than the text itself.
How can I achieve this effect without doing it manually each time? I've had no success with pseudo elements, and box-shadow won't extend on the left and right as I need it to.
Pseudo elements was the answer for me. Setting z-index on the :after element to get it positioned behind the parent element is a neat trick. The elements can't be block elements, but other than that it seemed straightforward.
html {
min-height: 100%;
}
body {
min-height: 100%;
background: linear-gradient(to bottom, #0b122f 0%, #17457d 100%);
padding: 20px;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1:before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
z-index: -1;
}
<div>
<h1>This</h1>
<br />
<h1>Cool</h1>
<br />
<h1>Effect</h1>
</div>
use <h1><span>This</span></h1> make effect in span and adjust red box to use padding to were's you want :
h1 span {
position: relative;
font-size: 100px;
font-weight: 300;
margin: 0;
padding:0 0 0 20px;
}
h1 span::before {
content: "";
background: red;
height: .25em;
position: absolute;
bottom: .15em;
z-index: -1;
width: 100%;
left: 0;
}
like: https://jsfiddle.net/bdmpqkme/1/
All this examples mentioned above by lalit bhakuni and JasonB work really well, but only when you don't have any section with a background behind this underlined text.
The z-index: -1 will put the line you want behind the text like you want and also behind any other parent sections. In case any of these parent sections have a background, the line will be hidden (behind).
Other solution, not so clean, but solves all our problems is by adding an extra element inside of your heading:
HTML
<div class="div-with-background">
<h1><span>This</span></h1>
<br />
<h1><span>Cool</span></h1>
<br />
<h1><span>Effect</span></h1>
</div>
CSS
.div-with-background {
background-color: #333;
}
h1 {
position: relative;
display: inline-block;
color: #fff;
font-family: sans-serif;
font-size: 100px;
font-weight: 300;
margin: 0;
}
h1::before {
content: "";
background: red;
height: .25em;
width: calc( 100% + 60px);
position: absolute;
bottom: .15em;
left: -10px;
}
h1 > span {
position: relative;
}
In this case, we don't even need to use the z-index property.
I'm trying to have a background image to the right of a div, which isn't covering the whole div.
Right now it's like this (div1 is background-color):
<div id="div1">
<div id="image"></div>
Text
</div>
CSS:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius:4px;
height:40px;
clear:both;
overflow: hidden;
}
.image {
background: url("url here");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position:absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
But is it possible to have the image shown in it without having it as a div inside div1? Like using :after, :before or something else? I only want the div image to show to the right of div1 and be X width.
For an background image to show on pseudo-elements like ::after and ::before you should include content: ''; on them.
I've fixed (you were trying to target ids with class selectors) and added the mentioned background image on on this fiddle. But it goes like this:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius: 4px;
height: 40px;
clear: both;
overflow: hidden;
}
.div1::after {
content: '';
background: url("https://unsplash.it/200/300");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position: absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
<div class="div1">
Text
</div>
There are several ways to place an image to the right of a div. You should consider displaying the image with an image tag as follows:
Also, in your html you define ids, then in css you need to use # isntead of .. Check Difference between id and class in CSS and when to use it
A way to do this:
HTML:
<div id="div1">content</div>
<img id="image" src="url"/>
CSS:
#div1 {
display:inline-block;
float:left;
}
#img {
float:left;
}
By default, div containers stretch their width all the way to match 100% the width of their parent container. Setting 'display:inline-block' will make it wrap their content and allow stacking different containers (including images) to the sides.
This is a test of :before and :after, with which you can place text or an image before and after each HTML element.
p.test:before {
padding-right: 5px;
content: url(/pix/logo_ppk.gif);
}
p.test:after {
font-style: italic;
content: " and some text after.";
}
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag">500000.00$</div></div>
ndnmpricetag-container use a static background image. When using large numbers (like the second example), the image is too small for the numbers.
How can i adjust ndnmpricetag-container's background width depending on the width of ndnmpricetag ?
Full css and examples here.
You need to make following changes:
Change the display property of .ndnmpricetag-container to inline-block so that it doesn't take all of the width of block. To make div place in next line, use < br/> tag in HTML.
Give the .ndnmpricetag-container a min-width equal to the image width say 100px. This will ensure that the image will not get cropped for very small widths.
Give background-size:100% 100%;.
Give padding-right: 35px;to .tondnmpricetag so that the arrows at the end of your image are able to contain the numbers and text have enough space to adjust within image.
See the updated link
See the screenshot below:
Hi now try to this Css
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
Demo
.ndnmpricetag-container {
text-align: left;
display: inline-block;
vertical-align: top;
height: 53px;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png');
background-size: 100% 54px;
padding: 0 50px 0 7px;
font-size: 16px;
}
.ndnmpricetag {
position: relative;
top: 7px;
margin-left: 7px;
margin-right: 7px;
font-face: Helvetica;
font-size:1.2em;
white-space: nowrap;
letter-spacing: -1px;
font-weight:bold;
}
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">15.00$</div></div>
<div class="ndnmpricetag-container"><div class="ndnmpricetag price">500000.00$</div></div>
Use a long image and use the 'Sliding door technique'.
https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
You can have :before pseudo element to contain start of element, :after to contain end of element. And self element contains repeated middle background.
.a {
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') repeat-x left center;
display: inline-block;
position: relative;
margin-left: 10px;
margin-right: 35px;
}
.a:before {
content: '';
width: 10px;
height: 100%;
position: absolute;
left: -10px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat left center;
}
.a:after {
content: '';
width: 35px;
height: 100%;
position: absolute;
right: -35px;
top: 0;
display: block;
background: url('http://www.ni-dieu-ni-maitre.com/images/pricetag.png') no-repeat right center;
}
<div class="a">15464%</a>
I'm new to CSS, and I'm experiencing a lot of difficulty with aligning things.
At the moment, I have <h1> and <h2> text and an image. I'd like the <h2> text to reside right beneath the <h1> text, and I'd like this <h1>-<h2> block to be positioned in the top-left corner of the screen. I'd like the image to be inline with the text, but centered in the middle of the screen. This is what I have so far:
.header img {
width: 525px;
height: 188px;
text-align: center;
position: relative:
}
.header h1{
position: absolute;
left: 15px;
top: 35px;
font-family: 'Tehuti';
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
.header h2{
font-family: 'Tehuti';
font-size: 3em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
background-color: rgba(37, 39, 37, 0.07);
float: left;
}
I can't for the life of me get this to work. Any help would be greatly appreciated.
Since you are using an absolute positioned layout your could absolute position your <img> to the center of the screen with these styles:
.header img {
position: absolute;
left:50%;
transform:translateX(-50%);
}
See this fiddle for a demo (fullscreen)
1: text-align aligned the content inside the element so setting text-align: center to .header img will no center align the img.
2: the h1 and h2 has by default display: block so that is why it place one bellow the other, set display: inline-block or inline to placed next to each other.
Now you can float: left h1 and h2 set text-align: center to div .header but you will note that the img will not centered in the middle of the screen
So do this
h1, h2{
display: inline-block;
font-family: 'Tehuti';
font-size: 1em;
margin: .2em .5em;
color: rgba(0,0,0, 0.3);
}
.header h2{
background-color: rgba(37, 39, 37, 0.07);
}
.header{
text-align: center;
}
.header img {
width: 100px;
height: 100px;
}
.h-content{
position: absolute; /*If you want it to be always on the top-left of the screen, even when scrolls set fixed*/
left: 15px;
top: 35px;
}
<div class="header">
<div class="h-content">
<h1>I'm a h1</h1>
<h2>I'm a h2</h2>
</div>
<img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" alt=""/>
</div>
I hope this help you
I have not been able to find a solution to this and am willing to change whatever I need to as long as I can keep a couple things.
The entire list element needs to be a link, the text within that link needs to be centered to the list item which has a background image. I need this fluid so I choose to use the padding-top to maintain the aspect ratio and to create the correct height. With using that padding top to create the height, I can not for the life of me figure out how to get the text vertically centered. I have seen a few other questions that addresses this issue somewhat but I have not found a single one answered. PLEASE help me!
Here is live example. I need the text to vertically align to the middle of blue elements.
http://jsbin.com/OxuxECI/1/edit?html,css,output
HTML
<section>
<ul>
<li><a id="monday" href="_monday.html"><span>Monday</span></a></li>
</ul>
</section>
CSS
section {
position: relative;
width: 86.029411764%;
height: 100%;
margin: -6px auto 0 auto;
overflow: hidden;
}
section ul {
list-style-type: none;
display: inline-block;
width: 35%;
min-width: 320px;
padding: 0;
margin: .8rem;
height: 100%;
}
section li {
width: 100%;
display: block;
background: url(_images/daybg_03.png) center center no-repeat;
background-size: contain;
margin: .8rem auto .8rem auto;
text-align: center;
font-size: 0;
line-height: 0;
}
section ul li a {
width: 100%;
**padding-top: 14.95%;** /* This gives my container height */
display: inline-block;
text-decoration: none;
text-align: center;
}
section ul li a span {
font-size: 1.3rem;
color: white;
text-align: center;
}
Ok so after searching high and low and no luck I have figured it out!!!
CSS
section li {
position: relative;
width: 100%;
height: auto;
display: block;
background: url(_images/daybg_03.png) center center no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
margin: .8rem auto 0 auto;
list-style: none;
text-align: center;
font-size: 0;
padding-top: 14.95%;
}
section ul li a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
text-decoration: none;
text-align: center;
background: rgba(0,191,85,.5);
}
section ul li a span {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
line-height: 0;
font-size: 1.3rem;
color: white;
text-align: center;
background: rgba(0,159,255,.5);
}
And the bin http://jsbin.com/enuBeyE/1/edit?html,css,output
I left the background colors in there for visual help for each container.
Infinity Designs' answer works well, but only if you don't need content that spans more than one line.
If you do need content that spans more than one line inside responsive, dynamic height and width vertically centred containers with a fixed aspect ratio, there's good news and bad news:
Good news: there is a pure CSS method that works in GC, FF, IE7+, etc etc.
Bad news: the code ain't pretty: it needs four (!) wrapper elements plus a non-semantic spacer. Infinity Designs' method only needs three wrappers, so use that unless you need text wrap.
It's essentially Infinity Designs' approach to the responsive fluid aspect ratio, mixed with Kizu's approach to vertical centring on this other question, using side-by-side inline-blocks with vertical align around a nested block.
JSbin demo
Sample code:
<div class="w1">
<!-- make w2 <a> if like the asker you want it all to be a clickable link -->
<span class="w2"><span class="hh"> </span>
<span class="w3"> <!-- make w3 <a> if don't want the bkg clickable -->
<span class="w4"><!-- or, any block element -->
Monday
</span>
</span>
</span>
</div>
<style>
.w1 { /* outer wrapper for aspect ratio */
position: relative; /*or absolute*/
display: block; /*or inline-block*/
padding-top: 25%; /*aspect ratio*/
}
.w2 { /* wrapper2 resets position to top */
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: block;
}
.w3 { /* wrapper3 and hh sit side by side */
display: inline-block;
width: 100%;
text-align: center;
}
.w3, .hh {
vertical-align: middle;
display: inline-block;
}
.hh { height: 100% }
.w4 { /* v.align applies to child block */
display: block;
}
</style>