Overlaying a transparent image on to text in Komposer

Familiar with web-design ? Trouble with images, tables ? Any other queries ?

Moderators: BobCP, agsone, Neil Parks, gregtutor, Lem3

Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Fri Mar 22, 2013 3:24 am

Hey Guys & Gals,
Sorry if this has been asked before but is it possible to overlay a partially transparent image on to a table containing text in Komposer? In this example - http://test722.zxq.net/index.html - I'd like the image of the bamboo to sit on top of the text. I've only recently started to dabble with css but am happy to give that a go (instructions please!) if it provides a quick and easy solution.

Thanks in advance
Tek
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby gregtutor on Fri Mar 22, 2013 8:54 am

I don't think you mean image on top of text. I suspect you want the image as a background so the text shows over the image.

Also you should NOT be using a table for that page. There is no tabular data. And most certainly not a host of nested tables.

Get rid of ALL those tables. Create a generic container (<div> tag) add the background image to the <div> and place the heading and text in appropriate semantic tags (heading and paragraphs)

No more tables, please, and no more text with only visual effect markup!
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3784
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Fri Mar 22, 2013 9:46 am

G'day Greg,
Thanks for the reply, image on top of text or text on top of image, well as the image is transparent it doesn't really matter, either or either, are both ways possible?

I don't understand why I shouldn't use a table for that page nor what not having tabular data means and whether that's important or not? I think that nested tables is the method I've used to make the page, sticking tables together, seems to work ok?

If I get rid of all my tables, won't that in effect starting from scratch? Not super keen on that idea I have to confess!

In another post I made here, someone else suggested I not use the nested tables and in fact check out your website, in particular the tutorials for CSS. I've always avoided using CSS until very recently when I needed to create some hover text and to remove underlines of links and my experience with it doesn't go much beyond there. I did take a look at your tutorial and even started to follow it step by step in making a template, but mucked it up and some point and gave up. I do plan to get back on there at some point and give it another go, honest!

I've always been a really bad student; when I learnt to tie my shoelaces I could never quite grasp the accepted method, then one day someone showed me an easy way, a simpler knot and I'd always get in trouble for NOT tying my laces properly. I never did learn the "'proper" way to tie them, but nowadays my shoes don't have laces so it's not ALL that much of a big deal eh! :D

Sorry for being such an ignoramus but I also don't know what "text with only visual effect markup!" means either?

Is there just an easy way to put the image on top of text or make the image as a background so the text shows over the image?

Thanks in advance
Tek
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby gregtutor on Fri Mar 22, 2013 9:27 pm

Tek2007 wrote:G'day Greg,
Thanks for the reply, image on top of text or text on top of image, well as the image is transparent it doesn't really matter, either or either, are both ways possible?

The bamboo isn't transparent. it needs to go behind the text, unless you plan a margin or other technique to push the text out of the way.
I don't understand why I shouldn't use a table for that page nor what not having tabular data means and whether that's important or not?
"Tabular data" means data that is presented as a table. Here's the first page that comes up if you google for a definition:
http://webdesign.about.com/od/tables/a/aa122605.htm
and here's a set of images that gives you the general idea:

It comes down to: You shouldn't use tables as a structure for page layout.

Why? (I hear you ask!)

Because while it may seem OK to you looking at your page, it may not make sense to others. You must take account of the fact that on the web you are transmitting an electronic document, not a paper, or even a visual one. There are many who listen to web pages and don't see them. The blind and partially sighted, in particular, typically use screen readers. Many of these will read each item in a column and then move from left to right column by column. Such a technique makes complete nonsense of a page like yours.

Producing a web page is not like producing a word processor or DTP document. You cannot assume that people will have the same equipment as you to render the page. Apart from those who may be viewing your page on screen the size of a giant TV, there are also those using minute screens on cellular phones. Then there are some, who disable the download of images as they take too long to arrive on slow connections, and those who browse via voice activated device while driving and listen to your page. And then there are the blind who render the pages on Braille devices.

So your. "It looks OK to me" approach fails to recognise how other may receive your page.

That is why is it essential to use appropriate semantic markup.
I think that nested tables is the method I've used to make the page, sticking tables together, seems to work ok?
Hopefully, you now understand why this is not an appropriate attitude for a web author!
If I get rid of all my tables, won't that in effect starting from scratch?
Not necessarily, you can convert them one at a time, and use the appropriate construct. For page structure, in most cases, that just means using a generic container.
In another post I made here, someone else suggested I not use the nested tables and in fact check out your website, in particular the tutorials for CSS. I've always avoided using CSS until very recently when I needed to create some hover text and to remove underlines of links and my experience with it doesn't go much beyond there.
Well, you could spend an hour or two working through the tutorials on my site...

Time well spent, I'd say (but I would wouldn't I?)
I did take a look at your tutorial and even started to follow it step by step in making a template, but mucked it up and some point and gave up. I do plan to get back on there at some point and give it another go, honest!
Good man! If you run into trouble just email me the file and I'll talk you through where you've gone wrong.
I've always been a really bad student; when I learnt to tie my shoelaces I could never quite grasp the accepted method, then one day someone showed me an easy way, a simpler knot and I'd always get in trouble for NOT tying my laces properly.
You're obviously, almost as old as me! No youngster would use a shoelace example! :-)
I also don't know what "text with only visual effect markup!" means either?
"Markup" is the tags you add to the contents on your page to say, for example, where big text starts and stops or where within the text to have a particular image appear.

Imagine you are blind and the page is being read to you. Your page starts with a face and cross swords - but no alternate text so that becomes invisible and is not rendered in any way by a screen reader.

Next we see "Text 722" but those listening to your page get nothing. There's not even alternative text for those who have switched of images because the cost of data is too expensive on their pay-by-the-megabyte connection.

Then we have a set of words, "home, about, gallery" etc. but this is a list of pages to which you have links, but there is no clue about this in your page. Why not specify it is a list in your markup? (Of course, you have this list in a table - but as a structure a table is utterly meaningless without more than one row or column!)

Then we have the bamboo image. Again not text to tell us why it is there and if it has any relevance to the text on the page, or whether is is just background decoration.

Then we have a single big bold word. You may have made a heading on the page bigger - but how will a screen reader know how to treat that? Is this a heading? You don't tell us! You don't even tell us, and more important perhaps, search engines, whether that word is more important that the rest of the text on the page.

And so it goes on...

There is nothing on that page that helps anyone other than those with 20/20 vision and using similar equipment to you how to render the page and present it to them - and certainly not the blind or search engine spiders and why it should be listed higher on search results than any other page that has similar content.
Is there just an easy way to put the image on top of text or make the image as a background so the text shows over the image?
Yes. See my earlier reply! Hopefully, you'll now begin to understand why I gave the answer I did! It is the approach you should use!
Last edited by gregtutor on Sat Mar 23, 2013 9:25 am, edited 1 time in total.
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3784
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Overlaying a transparent image on to text in Komposer

Postby dr-john on Fri Mar 22, 2013 10:26 pm

If you put an image OVER text, the non-transparent parts would block out the text below.
Set the image as a background to a div and then just enter your text.

You say you have avoided using css unless really necessary.
CSS came into existence in December 1996, and by 2000 it was becoming the standard way to style a web page. By about 2003, anyone not using it was considered a beginner and way behind the times.

CSS is compact, and highly efficient. you define something once, and every page that uses the css file uses that definition. So if you wished to change th efont of your h1 tag from times roman 14px red to Georgia Italics 16px blue, you would change one file, and dozens, hundreds thousands of your pages would adopt the new style. If you didn't like the result of the change, you edit the one file, and they all change back.

Doing things your way, you'd have to change every single file manually, and then if you didn't like the result, go through and change them all again.

Here's an analogy.
You can open a tin of beans with a hammer, a saw, a pistol (well the bullet it fires), a screwdriver, a brick, a knife, an oxyacetylene torch, a can opener.

They can all open the can, but one of them is better and was designed to open cans in an efficient, neat manner.

Now you might say, I can eat the beans which every way I open the can, but everyone else will say "use a can opener!" and your wife/partner will say "clear up the bloody mess, and use a can opener next time"

Yes, you can style your site using a method from last century, but there are better, much much better ways to do things.
You have to ask yourself why every professional or experienced web designer uses css and every web help forum tells people that tables are for tabular data, not for page layout.
Last edited by dr-john on Fri Mar 22, 2013 10:36 pm, edited 3 times in total.
dr-john
 
Posts: 618
Joined: Wed May 13, 2009 1:37 pm
Location: Kent
Country: Scotland (sp)

Re: Overlaying a transparent image on to text in Komposer

Postby dr-john on Fri Mar 22, 2013 10:31 pm

You asked what is tabular data?
http://windrushers.org.uk/competitions/standards2011/results_six.htm

The results are in a table. (Part of this page was generated by the scoring program, and unfortunately it uses parts of the table where it should a div instead.)
dr-john
 
Posts: 618
Joined: Wed May 13, 2009 1:37 pm
Location: Kent
Country: Scotland (sp)

Re: Overlaying a transparent image on to text in Komposer

Postby agsone on Sat Mar 23, 2013 1:42 am

dr-john wrote:... and your wife/partner will say "clear up the bloody mess, and use a can opener next time" ...

Presumably also "and why is there a hole in the wall?"

Nice analogy. Can't help but think we'll be using it again on the forum in the future.
agsone
Moderator
 
Posts: 1376
Joined: Mon May 21, 2007 7:33 pm
Location: Connecticut, USA
Country: Scotland (sp)

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Sun Mar 24, 2013 12:18 am

G'day Guys,
Firstly many thanks for taking the time to reply, now I have a much better understanding of why the methods I have used are not appropriate, I certainly would not wish to limit the scope of what I create nor others experience of it. I do however once again have that sinking feeling as I slink to the back of the class, books in hand, having been told; "do it properly this time"! :D

One thing that I should let you know is that I use test722 as a sandbox to play around with, which is one of the reasons there is no alternative text, as test722 is not really meant for general viewing, I'm not quite as daft as I must seem! :oops:
I'm not going to list my other sites here, as I have the feeling I may get yelled at! Needless to say the other sites have been made in much the same way. So in truth my real predicament is not the 722 site so much as as the others, that I now have to change! :(

At this stage I really could do with a quick fix solution (which probably makes your brows furrow). Greg, you mentioned that I wouldn't necessarily have to start again from scratch, so what if I make a basic template using CSS and then copy the content over from the other pages, which are all similar in layout?

UPDATE:

Ok, I wrote the above yestereday and then went on to do the stylsheet and masterpage exercises at Greg's site, the linked results of that are here; http://test722.zxq.net/about.html

I had an issue right at the start, for some reason Crtl and down arrow didn't put my cursor outside of the div, in fact it didn't do anything, likewise when later on there was a need to Crtl right arrow that didn't work either. To get around that I hit the enter key a number of times then scrolled back up and used the format paragraph to put in the div containers.

So I now have a masterpage and a basic grasp of how to put one together but still have a few questions. I'd like to try and get the masterpage to look like the others on the test722 site.

I want to set the background image for the whole page, do I use the css to do this or just the regular format page colours and background?

I couldn't work out how to centre the menu, I could see I could adjust the position of the text in the stylesheet but not the menu itself?

I'd like to have a container above the site title to put in search box code, add this button etc, what would that be called, there's nothing in the div container ID list?

No doubt I'm going to have more questions, it's a rather steep learning curve for me.

Cheers
Tek
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby wink0r on Sun Mar 24, 2013 2:48 am

Which version of KompoZer are you using? The link to Greg's site shows 0.8b3, but if you are using 0.7.10 moving the cursor is accomplished in a slightly different way. Greg has separate pages for 0.7.10 and 0.8b3, I believe.

The background image and overall text size, font and color should be set in the body tag in the css. Just select 'body' from the drop-down list with the first radio button selected or type body into the new rule box. Background image is set on the background tab and text is set on the text tab.
wink0r
 
Posts: 2595
Joined: Tue Aug 28, 2007 10:10 pm
Location: East Coast - USA
Country: United States (us)

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Sun Mar 24, 2013 3:09 am

Hi Wink0r, thanks for the feedback, I'm using 0.7.10 so that explains the reason why crtl/down arrow is not working for me, do you know how it is accomplished in 0.7.10?

With regards to the body tag, is that a custom style rule I need to make?

Cheers
Tek
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Sun Mar 24, 2013 3:46 am

Bit of an update to this post as I've now worked a few things out, thanks once again to Greg's tutorials. I worked out how to align the menu and also how to put the whole thing in a wrapper of a pre-defined width.

So I've played around with the master page and it now looks like this http://test722.zxq.net/about.master2.html

I now have more questions then answers, sorry guys!

In the top div above the header I want to put in three separate pieces of code, a search bar aligned left, and an add this and translate button aligned to the right, I take it I should again use the css and not tables? I also still don't know what the top container should be called?

With regards to inserting other bits of code, for example for a favicon, do I simply drop that in next to the head in the source as I'd normally do?

How do I align the menu to sit in the centre rather than to the left? (SOLVED)

Below the menu I want to insert a flash slide show, does this go in the content div, should I make a new container for it?

How do I move col1 to the right, so that my main is aligned to the left instead?

In the footer I would like a mini menu as in my other pages on test722.zxq.net, how should I go about putting the menu in the footer or should in go elsewhere?

In the web pages I've made using the dreaded tables, I've usually set the size to 960 pixels wide. In my master page version - http://test722.zxq.net/about.master2.html the container width seems to be set at 1203 pixels. How would I go about and should I even at all reduce the width to 960?(SOLVED)

Apologies once again for all of the questions and thanks in advance for you time.

Cheers
Tek
Last edited by Tek2007 on Sun Mar 24, 2013 8:06 am, edited 1 time in total.
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Sun Mar 24, 2013 8:59 am

Not quite sure what I've done now? All of my styles for my new master2 page have disappeared! All of the information is there in the external stylesheet?
Now I'm confused!
http://test722.zxq.net/about.master2.html
http://test722.zxq.net/stylesheets/master2.css
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby gregtutor on Sun Mar 24, 2013 9:33 am

The code in your page says the file is called "master2". The file itself is called "master2.css"
Greg Chapman
http://www.gregtutor.co.uk
Helping new users of KompoZer - but using BlueGriffon
gregtutor
Moderator
 
Posts: 3784
Joined: Wed Jun 20, 2007 8:25 am
Location: The Norfolk Broads, UK
Country: England (en)

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Sun Mar 24, 2013 9:51 am

Thanks Greg, I thought it might be something simple! :oops:
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Re: Overlaying a transparent image on to text in Komposer

Postby Tek2007 on Wed Mar 27, 2013 2:44 am

G'day Guys,
Well having attempted to follow your advice, my head is swimming after a few days of trial and error and css tutorials.

I have a site I'm supposed to be making for someone and really would like to ditch the nested tables and use css, but at this stage I still haven't been able to re-do the 722 page successfully - http://test722.zxq.net/index.html there's a link for the stylesheet on the page.

As you can see I still have a few issues, this is about the fourth version of a master page I've made following Greg's tutorial.

I really would appreciate some feedback and help to get this page looking right, I reckon I'm a bit further ahead than I was!

Cheers
Tek
Last edited by Tek2007 on Wed Mar 27, 2013 2:48 am, edited 1 time in total.
Tek2007
 
Posts: 38
Joined: Mon Oct 29, 2007 7:58 pm

Next

Return to General Q & A


Who is online

Users browsing this forum: No registered users and 1 guest