Welcome, Guest. Please login or register.
Did you miss your activation email?
May 22, 2013, 05:50:36 AM

Login with username, password and session length
Search:     Advanced search
The look of the forum is still being worked on. Thank you for your patience.
193705 Posts in 16235 Topics by 17051 Members
Latest Member: wheelwinter50

* Home Help Login Register
AppleGeeks.com  |  Help / Advice  |  Programming  |  Topic: I need some help with HTML, please. 0 Members and 1 Guest are viewing this topic.
Pages: [1] Go Down Print
Author Topic: I need some help with HTML, please.  (Read 4855 times)
aaron
Guest
« on: March 30, 2007, 08:35:32 PM »
So I've started working on my own website/portfolio just a few days ago...and I haven't really done anything with HTML in a long time. And I was wondering if someone could help me. I got the layout and everything done for my website. But now I need to start bringing stuff in onto the page. What I need help with is how can i lay one image on top of another. For example, on the front page of AppleGeeks.com, Hawk has the Previous Comic on the right side of the page, laying on the background, which is an image. Or on Marvel.com, the Marvel logo is doing the same thing. How can I do that? Can someone help me with the code here? I can't seem to figure it out and when I do figure something out, its always on the side of the page or something and not where I would like it to be.
Logged
aprendiz
Hero Member
*****
Posts: 601


"Be the change you want to see in the world"Gandhi


WWW
« Reply #1 on: March 30, 2007, 09:34:25 PM »
hi man, i think i can help, the best way you can do this is using CSS, not HTML, so first, you can just use the CSS doing this: in the head part (<head> here </head>) you put this
<style type="text/css">
<!--



-->
</style>
and between the <1-- and --> you put something like "#imagen1" the # is to say that the next thing to it is an id that will bee called later on, the you put this:
{ background-image: url("theimageloc");
}

and then in the body part (<body> here </body>)
you put a div wich conatains the image, like this

<div>
<img src="imgloc.jpg">
</div>
but with this the image will cover the entire div, it will be the image alone, now you want the image to have a backgroun ima, then down the #imagen1 you put this:
body {
background-image: url("differentimage.jpg");
}

and now the entire page will have a background image, and the image you put will be over the background image, but where did we use the #imagen1 tag? nowhere? well we can use it now, if you want the image has an own background image, since the image is inside a div you put a background image for that div, but how can we do that? change this:

<div>
<img src="imgloc.jpg">
</div>

to this:

<div id="imagen1">
<img src="imgloc.jpg">
</div>
 and now the div has a background image, but the image in the div covers that background image, so you hgave to say that the div is bigger than the image, so that the sorrounding spaces of the image will show the background-image,so let's supose the image has a size of 115px x 150px, so do this, change this:

#imagen1{
background-image: url("theimageloc");
}

To this:


#imagen1{
background-image: url("theimageloc");
width: 120 px;
height:155px;
}

now as you can see the div itself is a bit bigger than the image so the sorounding spaces will show the background image, at the end you should have something like this

<head>
<style type="text/css">
<!--
body {
background=image: url("image location.jpg");
}

#imagen1{
background-image: url("theimageloc");
width: 120 px;
height:155 px;
}

-->
</style>
</head>

<body>


<div id="imagen1">
<img src="image you want to go over the rest">
</div>


</body>

I really hope you have undesrtood all this, but trust me when i say that explaining CSS or any languege in a writing form is hard, or at least for me it is very hard, any way there are many of tutorial of CSS on the internet, so go ahead to to find one
« Last Edit: March 30, 2007, 09:37:02 PM by aprendiz » Logged
je fais rien, mais je le fais bien, i do nothing, but i do it properly
rbrtchng
Newbie
*
Posts: 44


WWW
« Reply #2 on: August 03, 2007, 12:45:14 PM »
I think you are creating a background image instead of an image on top of another image. Background image can be easily done without CSS by creating tables and sizing it to fit what background size you want and place another image on top.

However, if you want to have multiple images on top of each other, then you need to use the z-index in CSS.

Z-index can be set to 0,1,2,3, etc (even negative numbers). The bigger the number, the higher the layer. So an image with Z-index of 0 will be under an image with z-index of 1.

For how to use z-index go to http://www.w3schools.com/css/pr_pos_z-index.asp
Logged
http://www.tktechsolution.com
aprendiz
Hero Member
*****
Posts: 601


"Be the change you want to see in the world"Gandhi


WWW
« Reply #3 on: August 03, 2007, 03:54:40 PM »
yeah, but that's in case you need to place 3 or more images, if it is only two and you have no ackground, you can do it the way i told you, but yeah, for more than 3 images z-index would be necessary, in case you don't understand z-index what matter is the order they have in the code.
Sorry i missed z-inex thing
Logged
je fais rien, mais je le fais bien, i do nothing, but i do it properly
rbrtchng
Newbie
*
Posts: 44


WWW
« Reply #4 on: August 14, 2007, 06:51:14 PM »
Quote from: aprendiz on March 30, 2007, 09:34:25 PM
hi man, i think i can help, the best way you can do this is using CSS, not HTML, so first, you can just use the CSS doing this: in the head part (<head> here </head>) you put this
<style type="text/css">
<!--



-->
</style>
and between the <1-- and --> you put something like "#imagen1" the # is to say that the next thing to it is an id that will bee called later on, the you put this:
{ background-image: url("theimageloc");
}

and then in the body part (<body> here </body>)
you put a div wich conatains the image, like this

<div>
<img src="imgloc.jpg">
</div>
but with this the image will cover the entire div, it will be the image alone, now you want the image to have a backgroun ima, then down the #imagen1 you put this:
body {
background-image: url("differentimage.jpg");
}

and now the entire page will have a background image, and the image you put will be over the background image, but where did we use the #imagen1 tag? nowhere? well we can use it now, if you want the image has an own background image, since the image is inside a div you put a background image for that div, but how can we do that? change this:

<div>
<img src="imgloc.jpg">
</div>

to this:

<div id="imagen1">
<img src="imgloc.jpg">
</div>
 and now the div has a background image, but the image in the div covers that background image, so you hgave to say that the div is bigger than the image, so that the sorrounding spaces of the image will show the background-image,so let's supose the image has a size of 115px x 150px, so do this, change this:

#imagen1{
background-image: url("theimageloc");
}

To this:


#imagen1{
background-image: url("theimageloc");
width: 120 px;
height:155px;
}

now as you can see the div itself is a bit bigger than the image so the sorounding spaces will show the background image, at the end you should have something like this

<head>
<style type="text/css">
<!--
body {
background=image: url("image location.jpg");
}

#imagen1{
background-image: url("theimageloc");
width: 120 px;
height:155 px;
}

-->
</style>
</head>

<body>


<div id="imagen1">
<img src="image you want to go over the rest">
</div>


</body>

I really hope you have undesrtood all this, but trust me when i say that explaining CSS or any languege in a writing form is hard, or at least for me it is very hard, any way there are many of tutorial of CSS on the internet, so go ahead to to find one


Whoa, I just read this, and wow. You've made it way harder than it should be even if you make it as background.

just create a style.css page
then on the page that you want the images put <link rel="stylesheet" type="text/css" href="style.css" /> in the header section

Then in your css page put:

table
{
background-image:
url('yourbackgroundimage.jpg');
}

and in your actual page put:

<table>
<tr>
<td>
       <img src="yoursecondimage.jpg" />
</td>
</tr>
</table>


But if you have a lot of that. then either put background image under td instead of table OR use z-index. Of course z-index is web standard and a better practice and easier and shorter for browsers to load.
Logged
http://www.tktechsolution.com
aprendiz
Hero Member
*****
Posts: 601


"Be the change you want to see in the world"Gandhi


WWW
« Reply #5 on: August 15, 2007, 03:47:41 PM »
hey sorry i just tried to show many ways so he could pick, but you are right, it looks very hard despite it isn't
Logged
je fais rien, mais je le fais bien, i do nothing, but i do it properly
Pages: [1] Go Up Print 
AppleGeeks.com  |  Help / Advice  |  Programming  |  Topic: I need some help with HTML, please.
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.074 seconds with 20 queries.