Printable Version of Topic

Posted by: PamAtNZ Nov 27 2018, 03:42 AM

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?

Posted by: Christian J Nov 28 2018, 04:08 AM

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.


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).


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

Posted by: pandy Nov 28 2018, 12:25 PM

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

Posted by: Christian J Nov 28 2018, 12:43 PM

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

Posted by: PamAtNZ Nov 30 2018, 05:53 AM

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>

Posted by: pandy Nov 30 2018, 10:37 AM

Remove the single line of CSS that you have.

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).

Posted by: Christian J Nov 30 2018, 01:06 PM

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:

Posted by: Christian J Nov 30 2018, 01:08 PM

That doesn't affect my IMG elements though (since they don't have that CLASS value).

Posted by: pandy Nov 30 2018, 04:35 PM

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.

Posted by: PamAtNZ Dec 1 2018, 03:28 AM

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>

Posted by: Christian J Dec 1 2018, 06:03 AM

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

Posted by: pandy Dec 1 2018, 09:59 AM

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.

Posted by: aresourcepool Jan 14 2019, 08:33 AM

This can be solved using the following CSS:
#container { text-align: center;}
button {display: inline-block;}