Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Graphics, Flash and Multimedia _ FACEBOOK BUTTON AND WEBSITE BANNER SIDE BY SIDE ALIGNMENT
Posted by: partsforjoes Jun 28 2014, 01:10 PM
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
Posted by: 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.
Posted by: partsforjoes Jun 28 2014, 03:05 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!
Posted by: 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. 
Posted by: partsforjoes Jun 28 2014, 05:19 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.
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>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)