The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> FACEBOOK BUTTON AND WEBSITE BANNER SIDE BY SIDE ALIGNMENT
partsforjoes
post Jun 28 2014, 01:10 PM
Post #1





Group: Members
Posts: 3
Joined: 28-June 14
Member No.: 21,161



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

This post has been edited by partsforjoes: Jun 28 2014, 01:11 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2014, 02:42 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
partsforjoes
post Jun 28 2014, 03:05 PM
Post #3





Group: Members
Posts: 3
Joined: 28-June 14
Member No.: 21,161



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 28 2014, 04:01 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
partsforjoes
post Jun 28 2014, 05:19 PM
Post #5





Group: Members
Posts: 3
Joined: 28-June 14
Member No.: 21,161



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 post has been edited by partsforjoes: Jun 28 2014, 05:20 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:22 PM