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;"/ >
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;"/ >
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... .__.
Comments