Help - Search - Members - Calendar
Full Version: FACEBOOK BUTTON AND WEBSITE BANNER SIDE BY SIDE ALIGNMENT
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
partsforjoes
I am sorry guys for this question, but I am trying to code my html to properly align my website banner and the facebook button I made. I prefer to use this set up, since my website host does not support java scripting.

Here is the code


<div style="text-align: center;"><a href="http://imgur.com/NWiD3vJ"><img src="http://i.imgur.com/NWiD3vJ.jpg" title="Hosted by imgur.com" alt="" /></a></div>
<p><a target="_blank" title="find us on Facebook" href="https://www.facebook.com/partsforjoes"><img alt="find us on facebook" src="//login.create.net/images/icons/user/facebook-c_130x50.png" border="0" /></a></p>

This first code snippet is the website banner,

The second is the button which allows someone to visit my facebook page I would like the Facebook to be aligned to the very left, on the same horizon as the Website Banner. The Website Banner to stay in the middle? I appreciate all of your insight!

www.partsforjoes.com
pandy
Both DIV and P are block level elements and block level elements break the line.
http://htmlhelp.com/reference/html40/block.html

Put both image links in the same DIV. The line will still wrap if the browser window is smaller than you expect. The first image is very large. You can stop that from happening if you want or let it happen if you want a more adaptable page.
partsforjoes
QUOTE(pandy @ Jun 28 2014, 02:42 PM) *

Both DIV and P are block level elements and block level elements break the line.
http://htmlhelp.com/reference/html40/block.html

Put both image links in the same DIV. The line will still wrap if the browser window is smaller than you expect. The first image is very large. You can stop that from happening if you want or let it happen if you want a more adaptable page.


This maybe more complex then I thought. I am not a savy code programmer, would appreciate if someone could write a code for me!
pandy
No. At least try to do it yourself.

You have a DIV with a linked image in it.
Under it you have P with a linked image in it.

With me so far?

Copy the markup for the linked image inside the P, i.e. everything but the P itself. Paste in into the DIV after the linked image that's already there. Delete the P.

There. wink.gif
partsforjoes
QUOTE(pandy @ Jun 28 2014, 04:01 PM) *

No. At least try to do it yourself.

You have a DIV with a linked image in it.
Under it you have P with a linked image in it.

With me so far?

Copy the markup for the linked image inside the P, i.e. everything but the P itself. Paste in into the DIV after the linked image that's already there. Delete the P.

There. wink.gif



I think I did it Thanks to not only your help! I appreciate it! Does it look okay? or should I space the facebook link more to the right?

<div style="text-align: center;"><a href="http://imgur.com/NWiD3vJ"><img src="http://i.imgur.com/NWiD3vJ.jpg" title="Hosted by imgur.com" alt="" /></a><a target="_blank" title="find us on Facebook" href="https://www.facebook.com/partsforjoes"><img alt="find us on facebook" src="//login.create.net/images/icons/user/facebook-c_130x50.png" border="0" /></a></div>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.