Text on top of lines - html

I am trying to get text to show above some horizontal lines. But try as I might the text always show underneath.
Here is the code
http://jsfiddle.net/mrchin/uTsxZ/
Can anyone see what I need to do? I've always done layout in flash and am still learning css. Any help appreciated.

Positioning the text relatively seems to work:
#txt_projects
{
position: relative;
}

You need to use background image to display lines underneath the text.
I updated your code, please review.
http://jsfiddle.net/uTsxZ/4/
if you need a tripple line, you need to modify your background image to do that.

Related

Add some text next to an element on a wordpress page

Image to show postion
Hello there,
I would like to add a label to the box below (where it says 209) in the same style and aligned to the text above. These boxes are generated trough plugins. I have css styled them a bit, but I am unsure how to add text. Any help would be apreciated, since I am but only a humble noob.
Do it with jQuery:
jQuery('.classNameHere').text('text to be inserted');

Text selection style going to the edge of a webpage

I've been looking around but there doesn't seem to much help on this.
Basically I've adjusted my text selection to a different colour, easy done. However, I was wondering how to code the selection to select to the edge of the page rather than just the text on it's own.
I've attached a screenshot of a working example to show you what I mean.
thanks
I would suggest css style:
display: block;

How can I achieve underneath diagonal strikethrough text in CSS?

For example, if you look at the image here:
Is it possible to create the love' hate part? where the hide text is a little-but underneath the Love text? And also, how can I cross out the hate text?
yes, it is possible, but I don't recommend doing it that way
for the stroke: simply create an element and rotate it a bit
for the "underneath" look: use position: relative (absolute), margins, paddings etc.
here is live example: http://jsfiddle.net/78qpE/1/
If you want the image to look like the one you attached, it would be done in a program like Illustrator, but it is unclear if this is what you want. Can you elaborate at all, or provide code for what you are trying to do? It is possible to have both "Love" and "Hate" in separate DIVs, positioned by CSS. If it is only text, there are CSS controls for strikethrough as well.

responsive css circle with two text lines

I am trying to make a responsive circle in CSS.
It has to be activated as a link.
When you hover over the circle, the background color needs to change.
In some circles there need to be two text lines.
I found this example script. But unfortunately it is not a link yet:
http://codeitdown.com/css-circles/
As well the following example:
http://codepen.io/anon/pen/cqoFv. Which is not a link yet as well.
So, only the circle needs to be a link.
Your help is appreciated. Thank you very much.
Some like this?
http://codepen.io/anon/pen/zAaGe
Just easy css.
:hover,visited.

creating invisible text fields in html?

I'm trying to put html code to a design mockup my boss provided, and some of the aesthetics - the shape of the search bar, for example, are a little bit bizarre and complex. As an easy fix, I thought I would simply put a text field over an image of the search bar, but I can't get it to work.
Can anyone suggest a way to layer a text field over an image, leaving it invisible but still functional?
As far as the invisibility goes, put this CSS on your input:
input {
background: transparent;
border: none;
}
Check out this jsFiddle that shows this in action. As far as positioning the input goes, you should be able to handle that normally.