Text On Image, how do i do this? - html

I have this:
alt text http://azzyh.dk/newgen/area/member/b/videoklip.jpg
But i want to have place text in the middle like this:
This is how i wanted. http://img251.imageshack.us/img251/4498/exvideo.jpg
How do i do it?
Im sorry forgot to mention i want this in the web.. so like html, so i would use a div or a span to do it

Are you doing it on the web? if so, then you can use css/divs/spans to do it
google css layout tutorials and you'll be fine

Programmatically, this largely depends on what dechnologies you're using. Are you reading in a bitmap, adding text, and outputting a bitmap?
What's the input, what's the output, and how do you want the program to operate? There are hundreds of answers to this question, and all depend on the specification.

If you're familiar with PHP, you could try GD:
http://php.net/manual/en/book.image.php

Related

Facing issue in getting HTML data centered

I am new to HTML. I want to take this data in the middle of the page but am not able to do this.
I just want to achieve the same thing as:
I'm not sure if you are referring a data as text based on the image you mentioned. you can use text-align: center in your stylesheet.
Your question is unclear, we need more details. It may be simple and you just need to apply a text-align: center to the element wrapper the text.
In future, edit your post to show us your code and a screenshot of what you have so far. Otherwise, we cannot give you much help.
Right now it looks as if you're asking us how to create something that resembles that image. Stackoverflow doesn't take kindly to that.

Fast way to check if I'm adding duplicate css (if possible in coda)?

Is there an easy way to check if I'm adding duplicate css lines to my file? I'm currently adding on to the existing style sheet and am now using command+f in my editor (Coda) to find if the class has already been used but this is by far the fastest way to do this.
To be perfectly clear: Let's say I'm writing to add a margin to class '.test', how do I make sure I am not repeating '.test' in my document?
Is there something in Coda that can do this, or in other editors?
Some text editors will underline duplicated css.
Good text editor: atom text editor
some tips for you so you wont need any text editor auto checkers:
Keep your css in order.
example:
body{}
navbar{}
footer{}
2 Use comments to know what you are styling so it will be easy to continue after brake.
3.keep class/id names clear! For example use .navbar / #navbar Dont use something like .thisasdafclassbadexample

Dynamic Underlining

Let's say I have the following section on a form
Form Section:
Data:_____________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
__________________________________________________________________________________
and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:
<u>{{ data }}<u>
Thanks in advance for any and all help!
There seem to be a couple of options here;
Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.
Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right
Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable
This post might be helpful. How to underline blank space in CSS?
In their example, you would put your template code in the first span.

Should i put images into a paragraph or a html list? - HTML

Should i put images into a paragraph or a html list? - HTML
Example, should i do it like this?
<p><img><img><img></p>
Or like this?
<ul><li><img><li></li><img><li></li><img></li></ul>
Or somehow else?
EDIT: sorry i forgot to tell you for what i use the images. It's a gallery. I just wanted to know which one is the proper way, or are this 2 both the proper way? Thank you.
I believe you should use lists or tables to organize your images, depending on how you want to look. You might want to set it up so you have no bullets or borders in your gallery, though.

Is it proper to use images inside header tags?

I've done quite a bit of googling on this, but I haven't been able to get a straight answer.
In terms of SEO, how bad is it to use images for your headers? The reason for doing this of course would be to be able to display non-standard fonts. I know it is bad to use images in place of headers, but I'm wondering if this sort of syntax would do anything to make it more search engine friendly:
<h1><img src="header.jpg" alt="Level 1 Header" /></h1>
Does it have the same effect as this?:
<h1>Level 1 Header</h1>
I suspect the answer to this is no. I think search engines probably wouldn't like this because you could put any text in the alt attribute without it actually being displayed on the page. So in that case, what is the best way to use images for headers without sacrificing SEO?
One old trick is to put the real text in the <h1> box, but then use CSS to make the text invisible and put your image in the background.
So you'd do something like:
h1 {
color: transparent;
background-image: url(your/cool/image.png);
width:400px; height: 300px;
}
Astute Stackoverflow member K Ivanov points out that it would probably be better to make the text invisible by positioning it way off the page with "text-indent: -5000px" or something.
It is a recognised practise (neither good nor bad) to use text-indent:-9999px; alongside overflow:hidden; for headings.
This offsets the text by a massive amount then uses the overflow to hide it.
That means you can have a nice big description/title in your <header> and have an image with the description/title the way you want it to appear, that way you get the best of both worlds.
A perfect example of this is: http://www.sohtanaka.com/web-design-blog/
The "LatestWord" section is an image, but if you look at the CSS for the section you will see this technique employed.
Another possible solution to the problem of non-standard fonts in headers would be to use the Google Fonts API, assuming that the fonts that they have available fulfill your needs.
You could also take a look at the stylesheets they generate and attempt generating them yourself (assuming that you need to).