DIV Tags

[explorer07]

Hi

I have done this site with tables rather than div tags. All I want to do is place some texts near the three images on the left-hand side.
http://www.eyecatchersecurity.com/in...special-offers

I am sure this is simple for those experts out there. And I am rusty on DIV tags which I think is the best way to achieve this.

Regards

[Sanctus]

I personally would have used divs. I would not change that now since it looks alright. You are missing a complete copyright and terms of use notice. That is a must in a business environment; definitely when you are selling security equipment. Disable highlighting on your icons and images. Do not overuse this or it will piss people off like disabling right click will. Put your header on a transparent canvas. If you are planning to register your business name, place a TM in it. Do not abuse it. You will endanger yourself of being pushed into nasty lawsuits. Your customers will want to know more about the company they are about to buy from. Create an "About Us" page with to-the-point information that would approximately fit in an 8x10 document. Include a "FAQ" page too. Et cetera.

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

[explorer07]

Hi Sanctus

Thanks for your detailed input. The site is work in progress hence some of the aspects you point out like copyright, terms etc are missing.

How do I "Disable highlighting on your icons and images"?

Not sure what you mean here "Put your header on a transparent canvas."

I am not sure what the CSS code does.

What about my original question about putting texts near the images?


Regards

[deathshadow60]

None of your markup makes any sense at all -- H3's as direct children of TR, table cell counts that aren't the same in all rows, nonsensical use of heading tags, unclosed tags... it has a lot more 'wrong' than the 21 errors the validator is showing, meaning it probably threw up it's hands on it and gave up...

Which is my advice on that page -- throw it out and start over, there's nothing there even worth TRYING to save. The markup is total gibberish... compounded by multiple scripting toolkits for NOTHING (I'm not even seeing anything on the page that warrants the use of js), and on the whole the page seems to be 'stuck' in 1997.

Though the doctype alone says that, since "transitional" means you are in transition from 1997 to 1998.

You've got gibberish -- throw the gibberish away and try using semantic markup in a modern recommendation document style using proper heading orders.

hah, looking closer found your "problem" -- Joomla, that explains a lot of the excess/unnecessary markup since it shoves a lot of that down your throat, and you basically have to neuter it's codebase to get anything decent out of it.

Seriously, this:

							<div class="clearbreak"></div></div></div></div></div></div></div></div>
						<div class="clearbreak"></div>

Is probably a decent indicator something is disastrously wrong with the code.

[Sanctus]

@deathshadow60
He might be willing to start over again.

@explorer07
Please do not take this offensively or even degrading. You need to need to learn more web development skills before attempting to build an eCommerce website. You are opening the door into a big mess. Use Amazon's eCommerce service if you want to sell equipment off your own domain. Is this is your first business? I recommend you need to speak with an expert such a business attorney to be sure what you are doing is completely legal. Everything that is used on your website must be owned or allowed in copyright law. A court of law will charge you for infringing on someone's copyright if found guilty. This is not a joke and this should be taken very seriously.

[explorer07]

@Sanctus and @deathshadow

I appreciate that you are picking up on other things, maybe your ego has made you jump too quickly about the excessive tags and to realise most of it is produced by Joomla.

This is not an e-commerce site! Did I mention anything about e-commerce, is there hint of a shopping cart on the site? Once again dont jumpt too quickly and assume things about people you do not know. You sound like couple of immature kids with time on your hand.

Its obvious that you are not lawyers so dont attempt to give out stupid legal advice!

All I asked was about the DIV tags regarding attaching texts to the images, that is all. If you cannot or not willing to answer that then please refrain from posting here, as so far your comments have been just needless clutter.

As I have said, I have forgotten DIV tags and CSS. I have built in the past far more complex systems using Java, PHP, Coldfusion, SQL etc.

Regards

Yamin

[deathshadow60]

This is not an e-commerce site! Did I mention anything about e-commerce, is there hint of a shopping cart on the site?

You mean like it listing products, prices that look like an order button and hover effects that would likely lead to a sales page? I can see how sanctus probably thought it was... otherwise what's the point?

Its obvious that you are not lawyers so dont attempt to give out stupid legal advice!

No, we're HTML and CSS coders attempting to tell you what's wrong with your HTML and CSS... it's invalid, non-functional, broken in some browsers, mixing coding styles ranging from 1997 to 2020 (thanks to the use of HTML 5 elements in a XHTML tranny doctype)... meaning even something as simple as adding text to images is going to be a disaster.

All I asked was about the DIV tags regarding attaching texts to the images, that is all.

.... and I didn't see any DIV relating to the images in the code... You have FIGURE and FIGURECAPTION (HTML 5 elements that don't even EXIST in your doctype or all browsers) with H2's inside them (what makes those even BE headings -- that makes even LESS sense)... but no DIV anywhere NEAR any IMG tags on the page. Part of why I think we're scratching our heads a bit here. It's not bad enough the code is gibberish, but what you are asking about ISN'T EVEN ON THE PAGE.

I mean, from the language of your original post it sounds like you're asking about losing the tables to make the layout with DIV... or are you talking adding DIV inside the tables? Either way it sounds like fixing the broken markup... to go with the broken layout that ALSO needs fixing.

You don't want to fix it, why are you asking for help? Could you be more clear on WHERE you want that text in relation to the images -- it could be you need a div wrapping both, could be you don't need either and could get away with a span in-between... could be you need both to apo if you want it over the image... How much text? Same as what the figcaption already does, or actual description text that might be sufficient to warrant a paragraph instead of a DIV?

A mockup of what you want to accomplish would clarify it a bit... or at the very least the text you want to go with those images. Without content we can't tell you the proper markup... since markup is (or at least should) be dictated by the content it is applied to.

[explorer07]

You mean like it listing products, prices that look like an order button and hover effects that would likely lead to a sales page? I can see how sanctus probably thought it was... otherwise what's the point?

The point is expectation, information and presence. The site gives info and pictures of the products the seller is selling locally to his customer base, and everyone expects one to have website, which does not have to be e-commerce. If he grows then he may add an e-commerce facility but not at the moment.


No, we're HTML and CSS coders attempting to tell you what's wrong with your HTML and CSS... it's invalid, non-functional, broken in some browsers, mixing coding styles ranging from 1997 to 2020 (thanks to the use of HTML 5 elements in a XHTML tranny doctype)... meaning even something as simple as adding text to images is going to be a disaster.

Yeah so far all you have said how bad Joomla is and start again!! Thats not helpful. I could start the site again from scratch in Dreamweaver but thats time consuming. Joomla is the no1 CMS in the WORLD, and there are millions of websites based on that.


.... and I didn't see any DIV relating to the images in the code... You have FIGURE and FIGURECAPTION (HTML 5 elements that don't even EXIST in your doctype or all browsers) with H2's inside them (what makes those even BE headings -- that makes even LESS sense)... but no DIV anywhere NEAR any IMG tags on the page. Part of why I think we're scratching our heads a bit here. It's not bad enough the code is gibberish, but what you are asking about ISN'T EVEN ON THE PAGE.

This shows you did not even read the question properly. I said I want to add texts to the images and I ASSUME DIV is the best way forward. Hence I was looking for some code for that. I have used DIV only in one place.

I mean, from the language of your original post it sounds like you're asking about losing the tables to make the layout with DIV... or are you talking adding DIV inside the tables? Either way it sounds like fixing the broken markup... to go with the broken layout that ALSO needs fixing.


You don't want to fix it, why are you asking for help?

In the long term I would like to lose the tables and use DIVs, because I forgot DIV and know tables, I used that for now. All I am asking NOW is how to best attach text to those images under the Special Offer section only inside the table cell. That is all.
If you can provide answer for that it would be enough, and further code for losing the tables would be a bonus.

[Sanctus]

I know the law. Never assume something. Know it. That would be a major mistake otherwise. You do not know anything about me and yet you assumed I have no knowledge of how the legal system in the United States works; on the contrary. I am not going to spell it out to you like a child. Adults should know better. The title or question was from the start was suggestive of someone asking for advice on their work. Was it not? If you find offense in our posts, then this looks like a flame-bait setup from the start. A ban worthy offense. I will let a moderator (@HAWK ) decide there. Take constructive criticism as positive directed energy.

Copyright Law (U.S.A.)
Trademark Law (U.S.A.)
S.B.A. Online Business Law (U.S.A.)

[explorer07]

I know the law. Never assume something. Know it. That would be a major mistake otherwise. You do not know anything about me and yet you assumed I have no knowledge of how the legal system in the United States works; on the contrary. I am not going to spell it out to you like a child. Adults should know better. The title or question was from the start was suggestive of someone asking for advice on their work. Was it not? If you find offense in our posts, then this looks like a flame-bait setup from the start. A ban worthy offense. I will let a moderator (@HAWK ) decide there. Take constructive criticism as positive directed energy.

Knowing the law also requires the use of commonsense and thus gather basic facts. The site is based in the UK and subjected to UK laws. There is no infringment of copy rights as the distributor is the one who has supplied the images to be used!!

I asked for help on the website pertaining to attaching texts to images - not legal advice from non-legal persons! So far I have had nothing constructive from you guys. Maybe the other person will give me an answer on the actual issue.

[Sanctus]

I.P.O.: Copyright (U.K.)
I.P.O.: Trade mark law and practice (U.K.)
B.I.S.: Corporate Governance (U.K.)

....advice from non-legal persons!

I am arguing with someone who will not listen. Kind of pointless to talk with you anymore. If you want us to be completely honest, start over with your webpage. It will save you a lot of head ace. Put it under maintenance mode next time to avoid losing future visitors. Your mood expressed is suggestive of someone who has a self-esteem and temperament issues. I have been nice to you. F.Y.I., what I do for a living is undisclosed. My personal life is none of your damn business. Understood?

[deathshadow60]

You know you can close a quote tag, right? (just mentioning it since if you quote something filled with a quote like that, it's chopped out)

In the long term I would like to lose the tables and use DIVs, because I forgot DIV and know tables, I used that for now. All I am asking NOW is how to best attach text to those images under the Special Offer section only inside the table cell. That is all.
If you can provide answer for that it would be enough, and further code for losing the tables would be a bonus.

Without knowing WHAT the text is, WHERE exactly you want it (above, below, inside?), how it's aligned, it's relationship to the image...

We're supposed to answer how exactly? It could be as simple as

<div class="productPreview">
  <img src="whatever.png" alt="product number" />
  Text Here
</div>

or as complex as:

<div class="productPreview">
  <img src="whatever.png" alt="product number" />
  <p>big long string of text here</p>
</div>

or even:

<span class="productPreview">
  <img src="whatever.png" alt="product number" />
  Text Here<br />
</span>

if you want them to align like inline-level elements would. (since you'd need a inline-level container)... and that's before even TALKING about the CSS, which hinges ENTIRELY on what you want them to look like.

Which you still haven't provided.

[Paul O'B]

Ok, lets keep this thread civil and stop the bickering. The advice given was meant in good faith so lets just leave it at that.

Explorer07 please supply more details of where you want this text placed as Deathshadow69 has requested more information in post #12 along with basic examples. Without knowing what text and to which images you want it aligned it will be difficult to provide specific help.

[explorer07]

You know you can close a quote tag, right? (just mentioning it since if you quote something filled with a quote like that, it's chopped out)


Without knowing WHAT the text is, WHERE exactly you want it (above, below, inside?), how it's aligned, it's relationship to the image...

We're supposed to answer how exactly? It could be as simple as

<div class="productPreview">
  <img src="whatever.png" alt="product number" />
  Text Here
</div>

or as complex as:

<div class="productPreview">
  <img src="whatever.png" alt="product number" />
  <p>big long string of text here</p>
</div>

or even:

<span class="productPreview">
  <img src="whatever.png" alt="product number" />
  Text Here<br />
</span>

if you want them to align like inline-level elements would. (since you'd need a inline-level container)... and that's before even TALKING about the CSS, which hinges ENTIRELY on what you want them to look like.

Which you still haven't provided.

Ok at last we are making progress with the actual issue. The text is simply the model name, like you see on the page "EC 904H" below the DVR (the rectangular device) which I want to move close to the image below or above it. Similar text (e.g "EC -CD1009") above or below the two cameras that you see.

It would be a bonous if you could show how I can contrtol the position of the text appearing near the image.

I hope this is now clear.

Regards


Regards

Yamin

[Paul O'B]

The text under the image is inside td tags so there is little scope to move it around much.

If you move the text closer to the image then you may find it overlaps the image as the images are different sizes. You could drag the h2 upwards with a negative margin but I don't think that will be much use to you.

figurecaption h2{margin-top:-25px}

Still not really sure how you wanted it to look.

[HAWK]

I will let a moderator (@HAWK ) decide there.

Dropped in but it looks like SpikeZ is onto it.

[explorer07]

The text under the image is inside td tags so there is little scope to move it around much.

If you move the text closer to the image then you may find it overlaps the image as the images are different sizes. You could drag the h2 upwards with a negative margin but I don't think that will be much use to you.

figurecaption h2{margin-top:-25px}

Still not really sure how you wanted it to look.

Thanks, but I have managed to achieve this now with DIV Tags. The figurecaption was removed.