The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to centre two buttons horizontally
PamAtNZ
post Nov 27 2018, 03:42 AM
Post #1





Group: Members
Posts: 3
Joined: 27-November 18
Member No.: 26,763




I want to centre two buttons horizontally on my choir webpage - with maybe 100 pixels between.

[ Join Us ] [ Book Us ]

I have limited knowledge in markup and I have limited ability to edit the pages - because of the web subscription I have with the site provider. They provide area within the body but I can't access the CSS sheets. (not that I am very skilled in that area either)

I have two images to use for the buttons which I want to link to two other pages at the site.
My page is responsive and I want the buttons to adjust as necessary to monitor or phone.

I've tried using style but when I look at it in Safari - they end up underneath each other.

I just can't seem to do it - can anyone help?



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 28 2018, 04:08 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(PamAtNZ @ Nov 27 2018, 09:42 AM) *

I have limited ability to edit the pages - because of the web subscription I have with the site provider. They provide area within the body but I can't access the CSS sheets.

It should still be possible to do with inline styles (using the STYLE attribute). But if there's an existing stylesheet from the site provider it may conflict.

QUOTE
I have two images to use for the buttons which I want to link to two other pages at the site.
My page is responsive and I want the buttons to adjust as necessary to monitor or phone.

You should be able to float the two buttons with CSS, that way they'll end up side by side in wide enough windows, or below each other in narrow windows (such as on a phone in portrait mode). But dedicated CSS media queries can only be used in the page's HEAD section, so more fancy things may not be possible (unless by using e.g. javascript or similar convoluted things).

QUOTE
I've tried using style but when I look at it in Safari - they end up underneath each other.

Could you post a link to the page, or at least some sample code?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 28 2018, 12:25 PM
Post #3


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

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



Floating won't center them though. Yeah, show us what you've got.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 28 2018, 12:43 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Nov 28 2018, 06:25 PM) *

Floating won't center them though. Yeah, show us what you've got.

Now that you mentioned it blush.gif why not just center a couple of inline images?

CODE
<div style="text-align: center;">
<a href="join-us.html" style="margin-right: 100px; border: 0;"><img src="join-us.gif" alt="Join Us"></a>
<a href="join-us.html" style="border: 0;"><img src="book-us.gif" alt="Book Us" style="margin-right: 100px;"></a>
</div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PamAtNZ
post Nov 30 2018, 05:53 AM
Post #5





Group: Members
Posts: 3
Joined: 27-November 18
Member No.: 26,763



Thanks for your help.
- I tried using the code you suggested - If ended up left aligned though.

Here's the code..
___________________________________

<style type="text/css">IMG.displayed { display: block; margin-left: auto; margin-right: auto }
</style>
<h1 class="rtecenter"><img alt="" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/2018%20Sliders.jpg" style="width: 100%;" /></h1>

<p>&nbsp;</p>

<p><span style="font-size:18px;">WOSOSI...&nbsp;a dynamic, a cappella choir who bring the world’s rich singing traditions to you. Singing&nbsp;songs and chants from around the world, they convey&nbsp;each song’s intention and wairua - whether a quiet longing for your homeland, celebrating the joy of independence won, the despair of loved ones lost or the delicate beauty of a song of peace.</span></p>

<!-- these are the stacked ones I added because I couldn't put on same line -->
<p><a href="bookusform"><img alt="" class="displayed"
src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/Book%20Us%20Button.png" style="max-width: 250px; min-width: 160px; width: 100%; border: 0;" /></a></p>

<p><a href="joinus"><img alt="" class="displayed" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/Join%20Us%20Button.png" style="max-width: 250px; min-width: 160px; width: 100%; border: 0" /></a></p>

<!-- This is the code I put based on your suggestion -->
<div style="text-align: center;"><a href="join-us.html" style="margin-right: 100px; border: 0;"><img alt="Join Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonjoinus.png" /></a> <a href="join-us.html" style="border: 0;"> <img alt="Book Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonbookus.png" style="margin-right: 100px;" /> </a></div>

<p>&nbsp;</p>

This post has been edited by PamAtNZ: Nov 30 2018, 05:53 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 30 2018, 10:37 AM
Post #6


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

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



Remove the single line of CSS that you have.

QUOTE
CODE

IMG.displayed { display: block; margin-left: auto; margin-right: auto }


That line makes images with the class 'displayed' block level (i.e. make them break the line) and the auto margins center them (but only as long as they are block).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 30 2018, 01:06 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(PamAtNZ @ Nov 30 2018, 11:53 AM) *

Thanks for your help.
- I tried using the code you suggested - If ended up left aligned though.

Oops, I made two three mistakes. The second image shouldn't have any right margin, the URL of the first link is wrong, and you probably want different file names for the button images. Try this instead:

CODE
<div style="text-align: center;">
<a href="join-us.html" style="margin-right: 100px; border: 0;"><img src="join-us.gif" alt="Join Us"></a>
<a href="book-us.html" style="border: 0;"><img src="book-us.gif" alt="Book Us"></a>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 30 2018, 01:08 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Nov 30 2018, 04:37 PM) *

Remove the single line of CSS that you have.

That doesn't affect my IMG elements though (since they don't have that CLASS value).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 30 2018, 04:35 PM
Post #9


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

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



I commented the markup and CSS the OP posted, not what you suggested. The images are classed. No use to keep a CSS rule that isn't needed. The classes can of course be removed too if they aren't going to be used for something else.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
PamAtNZ
post Dec 1 2018, 03:28 AM
Post #10





Group: Members
Posts: 3
Joined: 27-November 18
Member No.: 26,763



I removed all code other than the two buttons.

The page is here
https://wososi.org.nz/test

As you can see - it's still left aligning on the page. Do you think there may some backend css styling that the div code you have suggested won't override?

This is what I added....links work, just the buttons position is wrong

[code]
<p>&nbsp;</p>

<div style="text-align: center;"><a href="joinus" style="margin-right: 100px; border: 0;"><img alt="Join Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonjoinus.png" /> </a> <a href="bookusform" style="border: 0;"> <img alt="Book Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonbookus.png" /> </a></div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Dec 1 2018, 06:03 AM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(PamAtNZ @ Dec 1 2018, 09:28 AM) *

Do you think there may some backend css styling that the div code you have suggested won't override?

Yes it seems one of the stylesheets makes all IMG elements "display: block". See if this helps:

CODE
<div style="text-align: center;">
<a href="joinus" style="margin-right: 100px; border: 0;"><img alt="Join Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonjoinus.png" style="display: inline;" /></a>
<a href="bookusform" style="border: 0;"><img alt="Book Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonbookus.png" style="display: inline;" /></a>
</div>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 1 2018, 09:59 AM
Post #12


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

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



Or maybe edit the style sheet or this problem will occur throughout the site. It's backwards to make all images block and have to style images that shouldn't be block differently. The other way around is better, to have a special rule for images that should be block.

CODE
img, object, video {
    height: auto;
    display: block;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
aresourcepool
post Jan 14 2019, 08:33 AM
Post #13





Group: Members
Posts: 4
Joined: 14-January 19
Member No.: 26,796



This can be solved using the following CSS:
#container { text-align: center;}
button {display: inline-block;}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:00 PM