How to centre two buttons horizontally |
How to centre two buttons horizontally |
PamAtNZ |
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? |
Christian J |
Nov 28 2018, 04:08 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
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? |
pandy |
Nov 28 2018, 12:25 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 Joined: 9-August 06 Member No.: 6 |
Floating won't center them though. Yeah, show us what you've got.
|
Christian J |
Nov 28 2018, 12:43 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
Floating won't center them though. Yeah, show us what you've got. Now that you mentioned it 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> |
PamAtNZ |
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> </p> <p><span style="font-size:18px;">WOSOSI... a dynamic, a cappella choir who bring the world’s rich singing traditions to you. Singing songs and chants from around the world, they convey 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> </p> This post has been edited by PamAtNZ: Nov 30 2018, 05:53 AM |
pandy |
Nov 30 2018, 10:37 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 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). |
Christian J |
Nov 30 2018, 01:06 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
Thanks for your help. - I tried using the code you suggested - If ended up left aligned though. Oops, I made 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> |
Christian J |
Nov 30 2018, 01:08 PM
Post
#8
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Nov 30 2018, 04:35 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 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.
|
PamAtNZ |
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> </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> |
Christian J |
Dec 1 2018, 06:03 AM
Post
#11
|
. Group: WDG Moderators Posts: 9,665 Joined: 10-August 06 Member No.: 7 |
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> |
pandy |
Dec 1 2018, 09:59 AM
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,734 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; } |
aresourcepool |
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;} |
Lo-Fi Version | Time is now: 16th May 2024 - 11:35 AM |