I'm trying to add text in this structure with pure css:
<div><i></i>world!</div>
so it would look like
<div><i></i>Hello, world!</div>
on the page.
The jsFiddle example contains this css style:
div{
border:1px solid red;
margin-top:20px;
margin-left:20px;
}
i {
display: inline-block;
width: 48px;
height: 48px;
background-image: url("http://png-.findicons.com/files/icons/1688/web_blog/48/pencil_small.png");
border:1px solid green;
}
My bad solution is to add:
i:after {
content: "Hello, ";
}
but it doesn't put the text "Hello, " where I actually want and the style from i applied.
So, is there any way to add Hello, right in front of another text with the same style?
Please only css solution.
Thank you.
P.S. And here is my bad solution # jsFiddle
It should be like this:
http://jsfiddle.net/RbLRA/2/
Is this how you want it? Your first fiddle doesn't help a lot - is the text meant to overlap the pencil image?
Anyway, you can style the pseudo-element itself to have the green border, and remove the browser default styling from the tags which is usually italic, using:
font-style: normal;
It's not considered semantic to use the tag either in this case, just a thought...
Related
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 */
}
Easiest to explain this with code: http://jsfiddle.net/fjZfL/37/
I want it to be like
who ----------------
Where the line is totally "gone" behind who.
I know I could make the h3 have a white background to have it make it disappear, but my website has a background image, which if it was replicated again behind who it would look inconsistent.
You can absolutely change the markup, but hopefully not too much.
You could try adding a pseudo-element instead - http://jsfiddle.net/ZZbce/
h3:after {
content: '';
width: 150px;
height: 1px;
background: black;
display: inline-block;
vertical-align: middle;
}
Try this..
http://jsfiddle.net/fjZfL/55/
THis will work in all browser
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;
}
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.