I have a part of this site where I want H3s that look like this...
------------------- Centered Text Here -------------------
where the "---" parts are fancy wiggley background images. The left one and the right one are reflections of each other.
So one option is...
<h3>
<div class="left-image-thing"></div>
<span>Centered Text Here</span>
<div class="right-image-thing"></div>
</h3>
...and put the images in the divs around the span. But I'd like to just have...
<h3>Centered Text Here</h3>
...and just use css for the left and right background images. Is there a way to do this? just one tag, css, etc?
You could use pseudo elements, :before and :after:
h3 {
text-align: center;
}
h3:before {
content: url('myimageurl1.png');
}
h3:after {
content: url('myimageurl2.png');
}
Of course your CSS will be more complex, but this is a way to handle your use case.
EDIT: here's an example.
Psuedo elements scare me because we need to support lower end browsers... this will work everywhere (even low end):
CSS:
h3 {
background: url('myimageurl1.png') no-repeat left middle;
padding-left: 100px /*This should be the width of myimageurl1.png */
}
h3 span {
background: url('myimageurl2.png') no-repeat right middle;
padding-right: 100px /*This should be the width of myimageurl2.png */
}
HTML:
<h3><span>Centered Text Here</span></h3>
Related
I have been trying to create a new footer for my website that looks like this:
footer_nice
Unfortunately, I have only been able to recreate that in gimp, and not in html & css.
So far, I have been only partially successful. I have been able to align all the text and image so they are all collinear and inline, like this:
footer_bad
However, they are not separated into a left and a right. Whenever I try to float left or text-align right, or other combinations using divs and spans, it ends up breaking the inline property and the images and text are no longer collinear.
I have been able to seperate the text into left and right using seperate divs and spans, but only when they are not collinear, which is a bit of a bummer.
Here is my HTMl & CSS:
/* footer */
.middle > * {
vertical-align: middle;
}
footer {
color: #666;
font-size: 1.4em;
background: #191919;
border-top: 1px solid #444;
padding: 20px;
white-space: nowrap;
}
footer a {
color: #888;
display:inline-block;
}
footer a:hover {color: #BBB;}
footer img {
padding: 0px 0px 0px 4px;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
BUILT WITH CSS & HTML. OPTIMIZED.<span class="middle"><img src="https://placebear.com/32/25"/></span>
</footer>
Is there something I am missing? Is it some simple css that I am just forgetting? Any input would be fantastic. I hope this does not come across as a stupid question. I looked around a bit on here and w3schools and could not come to a conclusion. Thanks everybody!
Add to your HTML:
<div class="float-right> class containing your text & img that goes on the right
To your CSS:
float:right to your footer img
and
.float-right {float:right;}
Note that it may have responsive issues when viewed on mobile, but it's a quick-fix for desktop sized.
Do not forget to clear your floating elements after.
I troubleshooted some more. this is another potential solution, but the right side overflows and doesn't stay bounded to the right side of the footer.
.middle > * {
vertical-align: middle;
}
body {
padding: 20px;
background: #eee;
}
div {
display: inline-block;
margin: 0;
width:100%;
text-align: right;
}
footer {
margin: 0;
padding: 10px;
background: white;
white-space: nowrap;
}
footer a{
display: inline-block;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
<div class="float-right">BUILT WITH CSS & HTML. OPTIMIZED <span class="middle"><img src="https://placebear.com/32/25"/></span>
</div>
<div class="clearer"></div>
</footer>
I was not able to resolve the overflow issue with this particular solution, but as I was working on it I thought of a fix for the collinear issue with the solution offered by BrainHappy. If I add a dummy image to the left side of the footer which is the same height as the image on the right side of the footer, this would resolve the collinear alignment problem of the text and the image. This dummy image would be the same color as the background of course. depending on placement, you could adjust the padding to compensate for the presence of this dummy photo. example:
derp_fix
This solution works, but it is far from elegant. I feel dummy images are bad practice, so I may forgo images in the footer altogether. If anyone else has any other suggestions I am all ears. Thanks!
I simply want all of my p elements to be the length of the text in it. It works if I put .intro p at inline-block, but I would like my p elements all to be displayed underneath each other. Is there a way to do this?
HTML:
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p>
<p>hsdqjkf kjdsh</p>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p>
</div>
CSS:
.intro {
margin-top: 80px;
color: #ffffff;
text-align: center;
}
.intro p {
margin-bottom: 12px;
padding: 6px 12px;
background: #25d6a2;
}
Just add br tag after each p element
<div class="intro">
<p>fjsdqk dhksjfd kjsh kdshjkd</p><br>
<p>hsdqjkf kjdsh</p><br>
<p>hdsqkhfj sdhkjf fsjqkfhdks hjs</p><br>
</div>
Demo
If you don't want to add <br /> in the DOM or for some reason you cannot modify your HTML, you can simulate line break using CSS :after pseudo with content property having an value of \a and white-space set to pre
As far as the explanation goes for \a, its an hexadecimal value for line feed which is equivalent to 10.
p:after {
content:"\a";
white-space: pre;
}
Demo
In a sense, you want to eat your cake and keep it: make the p elements inline elements as far as box formatting is considered (in this case, for the purpose of setting background behind the text only) but block elements in the sense of starting on a fresh line.
There are various methods and tricks, but perhaps the simplest one is to use floating (instead of display: inline-block): float the elements to the left but also clear floating, so that no real floating takes place—you just want the side effect of floating, the effect of making the element just as wide as its content requires:
.intro p {
float: left;
clear: both;
}
In addition, you need to set clear: both on the element after the intro.
Im trying to accomplish the next situation;
If got a h1 tag, and right of it i want a small line (separator.png)
But my image keeps crossing the h1 text..
http://i57.tinypic.com/2m30l51.png
I've got a example of how i need it to be;
http://themes.webcreations907.com/ninezeroseven/option-two/#prettyPhoto
Those titles: "Take a Look, Recent Works"
HTML is like this;
<div class="titleBar">
<h1 class="left"><span>DIENSTEN</span></h1>
</div>
CSS;
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
}
#diensten .titleBar h1{
display: inline-block;
}
If tried a lot of things, even copied the code from the original site, but actually i have nog idea what to do.. Can someone help me with it?
Thanks
UPDATE
So i've tried all the things you guys answered.
So far none of them are working for me..
First;
The background tag, smart idea but my page background is transparant.. So transparant on transparant won't work. And even if i make the background transparent, the line will shine trough it. Are there any solutions to this problem? Because its a easy way to do it with a background tag.
Second;
Paulie_D's solution, i actually don't understand it.. Not advanced enough is guess, tried copying the exact code and change the parameters so it fits in my coding, but didn't work.. Can you help me making it fit my coding?
Simply give your h1 element a background of its own which matches the background of the page.
#diensten .titleBar h1 {
background: #f00;
display: inline-block;
}
You can then space the line apart from the h1 element by introducing some right padding (which will extend the background past the end of the text):
#diensten .titleBar h1 {
...
padding-right: 10px;
}
Your div titleBar is around the h1 title, I don't think using inline-block will solve this.
You should just wrap all around a div :
<div class="titleWraper">
<h1>DIENSTEN</h1>
<div class="titleBar">
</div>
</div>
and your css like this :
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
display: inline-block;
}
#diensten .titleWraper h1{
display: inline-block;
}
You can get the same kind of style. But the thing, they used some background color around h1 tag to avoid to show the stripped line(used as a background for titlebar). If you are ok with the effect do the following. Add your css like below and check the jsfiddle below.
.titleBar{
background:url('http://themes.webcreations907.com/ninezeroseven/option-two/wp- content/themes/ninezeroseven/assets/img/theme/sep.png') repeat-x 0 55%;
background-position:center;
padding-top:0;
}
.titleBar h1{
display: inline-block;
background-color:#f2f2f2;
}
Jsfiddle link below..
http://jsfiddle.net/vapnF/
A pseudo element will work although it does require an additional span but you can dispense with the image if required.
Codepen.io Demo
HTML
<h1 class="left"><span>Some Text</span></h1>
CSS
h1 {
overflow:hidden; /* hides all extra pixels */
font-size:2em;
}
h1 > span {
diaplay:inline-block;
position:relative;
}
h1.left > span:after {
content: "";
position: absolute;
left:100%;
top: 50%;
height: 1px;
width:2000px; /* some really large number*/
background:red;
margin-left:0.5em; /* or remove and add padding-right to span */
}
I'm trying to create an effect where h# elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.
Take this example HTML5 and CSS3:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="content-container">
<h1>Short title</h1>
<h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
</div>
</body>
</html>
h1 {
font-weight: bold;
text-align: center;
}
h1:before {
content: '— ';
}
h1:after {
content: ' —';
}
This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.
How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This jsFiddle depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.
I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.
I can't see a way of doing this with text bullet points, but it can be done with background images. CSS3 supports multiple background images and multiple image positions, so we can position an image bullet point at either end of the h1 like so:
Replace your CSS with this:
body {text-align:center}
h1 {
font-weight: bold;
padding: 0 16px;
background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
background-position: left center, right center;
background-repeat: no-repeat;
display: inline-block;
}
The padding is required to make room for the bullet points. I have used some random bullet point image, but note that I have specified it twice. I can then specify different positions for these two images; one left and one right of the h1. Finally display:inline-block prevents the h1 filling the entire width, which would cause the bullet points to constantly sit at the edges of the parent element instead of at the edges of the heading text.
Hope this works for you.
I managed to get quite close with creative use of table display styling:
h1 {
font-weight: bold;
text-align: center;
display: table;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
h1:before {
vertical-align: middle;
content: '—';
display: table-cell;
padding-right: '1em';
}
h1:after {
vertical-align: middle;
content: '—';
display: table-cell;
padding-left: '1em';
}
Why just "quite close"? Well, firstly I haven't verified that this is standard-mandated behaviour and not just some quirk of rendering. Secondly, it works in Chrome 18 and Firefox 12, but I haven't bothered to check in Internet Explorer or Safari — and I know it doesn't work quite right in the Android browser engine.
I would like to put headlines in my site like this: http://cl.ly/0m3F0j392e0G1n0s0T34
What i'd ideally like to do is use text for the headline and then have a 10px by 10px gif repeat horizontally after it.
EDIT: I should add that I would like to use a textured background so I can't set any solid colours to the h2 element.
I have been able to add in the gif after the headline but I can't get it to repeat, even if i add repeat-x. Here's the code i used:
h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}
Are there any workarounds for this or any alternate methods? I'd rather not resort to slicing the entire headline as an image. I've thought about floating the headline to the left then floating an empty div to the right with the gif as a repeating background image but I figure this is what the :after pseudo-element is for, right?
A little hacky and will involve adding overflow-x:hidden; to the parent element, but should do the trick:
h2 {
position: relative;
padding-right: 10px;
float: left;
}
h2::after {
content: '';
position: absolute;
left: 100%;
right: 9999px;
background: url(image.gif);
height: 10px;
width: 9999px;
}
You can set any attributes to your after pseudo element. What I would do it set the content to "" (empty) and then set a width and height to the pseudo element. You can set the background to the repeated gif as normal then.
h2:after {
content: "";
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}
When you use content:url() pressed class create an img element. You need to use background in this case. Like what Erik said.
But if size of your text in heading is not known (aka dynamic content) then pseudo element is not a good work around. You can use a markup like this:
<h1><span>your text content</span></h1>
And then add the repetitive background to h
h1{ background:'url(img/imagehere.gif) repeat-x';}
To hide background in part that text apears make the span's background a solid color
span{background:white}
Update:
if you have a background image under your h1, then you can do this:
Same HTML: <h1><span>your text content</span></h1>
CSS:
say your body have a background image:
body{background-image:(foo)}
then you want bar to be your image to repeat after the heading. You should do this:
h1{background:url(bar)}
And add same background your body have to the span containing your text:
h1 span{background-image:(foo)}
This would solve your problem. Look at this Fiddle to see in action. It's not depended on your text size or anything else.
Note: if you are using an span then you should make it dispaly:inline-block
Update:
Based on your request I rethink on this. I used tables this time. Code without explanation:
HTML
<table>
<tbody>
<tr>
<td><h1>Heading</h1></td>
<td class="pattern"></td>
</tr>
</tbody>
</table>
CSS
body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
See in action<
The answer above from Erik Hinton will work if you add "display:block" declaration, as below:
h2:after {
content: "";
display:block;
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}