HTML Help.

Key-J · Post by **Key-J** » Wed Jul 20, 2011 7:18 pm

Hey Guys,

I'm working on a project using HTML, it's very basic HTML, and i've pretty much finished, but im stuck on one bloody thing.

So, basics:

I have 1 big Background Image. 512 by 1000
Over that background, i'm placing 2 Smaller images that will have hyperlinks.
At the bottom, i have a Youtube embed.

Now, so far everything is working fine. The only problem is, that when i place the Smaller image with the hyperlink in, the "click-able area" goes from the top left corner of the background, to the bottom right corner of the little image.

I need to know how to make the "click-able" area only the small image.

This is the code i currently have written, to keep it more simple i've taken out the 2nd image, and just using the top image till if find out how to make the correct "click-able" area.

Spoiler!

Here is a HTML tester if you guys want to see it in use.
http://www.w3schools.com/tags/tryit.asp ... image_test

Any help is super appreciated. Thanks!

Toasty · Post by **Toasty** » Wed Jul 20, 2011 9:52 pm

I would have to be able to see the page on my browser and view the source from that.

I find it hard to understand from just words.

But one thing you do need to learn to do is seperate your HTML and CSS files. Putting styling in the same file as your HTML is very bad practice and makes everything a lot harder to work with.

Key-J · Post by **Key-J** » Thu Jul 21, 2011 1:18 am

With the HTML tester you can see the page, and the issue im having.

Just paste the code i provided above onto the right, and generate it.

Also, i know im new at HTML, but what do you mean by separate your CSS and HTML?

Shomari · Post by **Shomari** » Thu Jul 21, 2011 1:46 am

everything in yellow goes in CSS file.
another issue is that you're using "background" as your content.
if you're still planning on using images to completely compose your content then splice it up in photoshop or something.

Code: Select all

<link rel="stylesheet" type="text/css" href="style.css" />

this brings your CSS file in.
The above code would go in between <head></head>

I don't think <iframe> is recommended either.

I have a fairly limited knowledge in Web development as well so what I'm saying may or may not be true.

SM-Count · Post by **SM-Count** » Thu Jul 21, 2011 2:38 am

It's cause you're spacing the image with padding, and yeah, iframe has security issues.

Fixed code:

Code: Select all

<div style="width:515px; height:1000px; padding:0px; margin:0px auto; font-family:'Times New Roman', Times, serif; font-size:14px; color:#b4c0c3; text-align:left; background: url(http://img269.imageshack.us/img269/4802/fyesplashbrand.png) no-repeat left top">

<div style="padding-top:240px; padding-left:307px"><a href="http://www.ubc.ca/okanagan/students/newtoubc/fye.html" target="_blank">
<img src="http://img585.imageshack.us/img585/9895/aboutlinkbord.jpg"></a></div>

<div style="padding-bottom:10px; padding-top:250px"><center><iframe width="450" height="370.5" src="http://www.youtube.com/embed/ooj33ffM6ps" frameborder="0" allowfullscreen></iframe></center></div>
</div>

Oh, if for some reason you're inclined to not want to use another div for the image, just replace padding with the word margin, margin is outside the object, padding is inside, when you pad the bounding box gets bigger, when you use margin the bounding box moves. Actually, every time you've used padding, you probably mean margin.

Post by **dom** » Thu Jul 21, 2011 2:42 am

No way in hell would this be the proper way to do it, but I think this is what you wanted while keeping what you wrote:

Code: Select all

<div style="width:515px; height:1000px; padding:0px; margin:0px auto; font-family:'Times New Roman', Times, serif; font-size:14px; color:#b4c0c3; text-align:left; background: url(http://img269.imageshack.us/img269/4802/fyesplashbrand.png) no-repeat left top">

<div style="padding-top:240px; padding-left:307px"><a href="http://www.ubc.ca/okanagan/students/newtoubc/fye.html" target="_blank">
<img src="http://img585.imageshack.us/img585/9895/aboutlinkbord.jpg" ></a>
</div> 

<div style="padding-bottom:10px; padding-top:250px"><center><iframe width="450" height="370.5" src="http://www.youtube.com/embed/ooj33ffM6ps" frameborder="0" allowfullscreen></iframe></center></div>
</div>

EDIT:

, I took a while because I originally started rewriting it properly but then said **** it.

SM-Count · Post by **SM-Count** » Thu Jul 21, 2011 2:45 am

y u copy my answer and pass it off as ur own?

William-CL · Post by **William-CL** » Thu Jul 21, 2011 3:09 am

I used that html tester a couple times and half the time my product looks different on localhost than it does on that.

Key-J · Post by **Key-J** » Thu Jul 21, 2011 3:22 am

Thank you guys so much, it was honestly killing me.

Seriously appreciate the help.

And i just used the iFrame only because that's what is provided by youtube, im definitely not a master, not even a "Novice" at HTML coding, i just know how to use it slightly, and be able to do things, so honestly its appreciated.

NuclearSilo · Post by **NuclearSilo** » Thu Jul 21, 2011 7:54 am

The structure of your page is bad. You shouldn't use padding to position an element. Use divs and float to position them correctly

William-CL · Post by **William-CL** » Fri Jul 22, 2011 2:14 pm

Key-J wrote:Thank you guys so much, it was honestly killing me.

Seriously appreciate the help.

And i just used the iFrame only because that's what is provided by youtube, im definitely not a master, not even a "Novice" at HTML coding, i just know how to use it slightly, and be able to do things, so honestly its appreciated.

I hardly do either, but for some reason we have like 1 class that teaches it(non-required) and like 3 required that focus on Java.. wtf. They assume if your going to school for that, you taught yourself.. Why the hell do you think I'm going to school? Certainly not to learn something I already know.

Silkroad Online Forums

HTML Help.

HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.

Re: HTML Help.