Overlapping An Image On Another Image

simple // ur most basic layout tutorials thread

Oshh. I'm sorry you guy's, I'm soo lazy.
ORZ
Alright, I'm going to catch up with all the things I have on the navigation.
After that, we'll see -- depending on if you guys request for any more tutorials or not.
If not, everything'll stay up. I just won't be updating anymre tutorials.

Okay, soo. In the navigation, I have an image overlapping another image. A lot of you guys asked for a tutorial on that. So, here it is. BTW; this is going to be a very simple tutorial and I'm not going to go so into depth with it. I'll explain why -- or you could just see for yourself.

Do you guys remember how to put text on an image? Well, it's the same thing.

Put your image in and go to source. After the height or width of your image, put in margin: 0px 0px #px;. Before I continue, let me say this. The numbers of the margins MUST BE SPACED. My sister tried to put text over an image and she didn't space out the margin numbers so she couldn't do it. Don't make the same mistake.

Anyway, like I said before, the smaller the number gets, the higher the image will be placed. The larger the number gets, the lower. Let's see some examples now, yeah?

Example: < img src="http://2.bp.blogspot.com/_m9ryOC0F33Q/TUtuf2rzQvI/AAAAAAAAAbM/G1j-rh490hM/s1600/sacura_1.jpg" style="height: 200px; width: 244px; margin: 0px 0px -100px;"/ >< img src="http://2.bp.blogspot.com/_m9ryOC0F33Q/TUtuf2rzQvI/AAAAAAAAAbM/G1j-rh490hM/s1600/sacura_1.jpg" style="height: 100px; width: 122px;"/ >

sacura_1.jpg

Example: < img src="http://2.bp.blogspot.com/_m9ryOC0F33Q/TUtuf2rzQvI/AAAAAAAAAbM/G1j-rh490hM/s1600/sacura_1.jpg" style="height: 200px; width: 244px; margin: 0px 0px -200px;"/ >< img src="http://2.bp.blogspot.com/_m9ryOC0F33Q/TUtuf2rzQvI/AAAAAAAAAbM/G1j-rh490hM/s1600/sacura_1.jpg" style="height: 150px; width: 183px;"/ >

sacura_1.jpg

 

Other than that, I think we're done. I'm not going to specifically point anything out on this one because this should be like .. review from chapter 5. Anyway, there was some confusion so if you've been here long enough or if you read through all the chapters, I'm pretty sure you already know how my examples work but just in case. What I'm going to say about my examples is to remind you guys to not forget that if you copy and paste my examples, delete every space after each "<" and every space before each ">". There were some people who got confused on that. But ... I think that's it. And honestly you guys, the same thing from chapter 5 applies to this. It's not that hard... .__.

Like this story? Give it an Upvote!
Thank you!

Comments

You must be logged in to comment
starfan24
#1
Chapter 13: ⋆。°✩Reader Comment⋆。°✩

Hi author -esque!!

Love this tutorial!! Thank you so much!!

Reader
⋆。°✩starfan24⋆。°✩
Krystal_Luu
#2
Thank you for creating this!!!!
godna24
#3
Chapter 38: hi erm i wanna ask is it possible to use background image instead of background color in the scroll box?
Mael517 #4
Chapter 32: Thank you; this was very helpful!
sikakira
#5
Chapter 18: I wish text shadow worked :((((
Sakarafreak
#6
Chapter 7: Im still confused on the strikethrough..
Dark_History45 #7
Chapter 23: how to change the background image?
Jisoori #8
Chapter 8: why do i have this 'lorem ipsum dolor sit amet' on my preview?