The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Aligning Buttons
Olivia Doyle
post Nov 27 2019, 01:25 PM
Post #1





Group: Members
Posts: 3
Joined: 27-November 19
Member No.: 27,053



Hi all,


As an HTML novice I'm generally able to customise the branding of our various systems through trial and error, but I'm working on a landing page for our new Zoom account at present, and I cannot for the life of me get the three Join/Host/Sign In buttons to be centred beneath the logo/welcome statement.

- Landing page: https://apprenticeshipconnect.zoom.us/
- HTML: https://docs.google.com/document/d/1zVs9P8i...dit?usp=sharing

Zoom stated that they're unable to assist with HTML queries, so I'm at a complete loss. Any suggestions would be much appreciated! smile.gif


Best,
Olivia
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 27 2019, 08:55 PM
Post #2


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

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



Well, you have this construct for the buttons

CODE
            <div class="row">
                <div class="left">
                    <a href="/join" class="button"><span class="btn-text">Join a Meeting</span></a>
              
                </div>


You have made the innner DIV display: inline-block. But the outer DIV is still the default, block. So it will break the line. You've also set the max-width of .content to 450px. There isn't room for the buttons in a row.

You have too many DIVs and SPANs. And unnecessarily complicated CSS for something that doesn't take much to do.

Set the width of .content to something reasonable. Then remove all the DIVs and SPANs you have for the buttons and style the links directly. This is all you need.

CODE
#buttons a   { color: white; text-decoration: none }


HTML
<div id="buttons">
<a href="/join" class="button">Join a Meeting</a>
<a href="/start/videomeeting" class="button">Host a Meeting</a>
<a href="/signin" class="button">Sign into Zoom</a>
</div>


I'd also get rid of the class button and move the styling to the new rule I made. It'll work without doing that, but it would be harder to maintain.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Olivia Doyle
post Nov 28 2019, 06:06 AM
Post #3





Group: Members
Posts: 3
Joined: 27-November 19
Member No.: 27,053



QUOTE(pandy @ Nov 27 2019, 08:55 PM) *

Well, you have this construct for the buttons

CODE
            <div class="row">
                <div class="left">
                    <a href="/join" class="button"><span class="btn-text">Join a Meeting</span></a>
              
                </div>


You have made the innner DIV display: inline-block. But the outer DIV is still the default, block. So it will break the line. You've also set the max-width of .content to 450px. There isn't room for the buttons in a row.

You have too many DIVs and SPANs. And unnecessarily complicated CSS for something that doesn't take much to do.

Set the width of .content to something reasonable. Then remove all the DIVs and SPANs you have for the buttons and style the links directly. This is all you need.

CODE
#buttons a   { color: white; text-decoration: none }


HTML
<div id="buttons">
<a href="/join" class="button">Join a Meeting</a>
<a href="/start/videomeeting" class="button">Host a Meeting</a>
<a href="/signin" class="button">Sign into Zoom</a>
</div>


I'd also get rid of the class button and move the styling to the new rule I made. It'll work without doing that, but it would be harder to maintain.


Thank you so much for your response, Pandy! Apologies for being dense, but I'm afraid I don't entirely follow... where should the #buttons section go, and what should it replace? Likewise with the <div id="buttons"> part.

Sorry about this... I have incredibly limited knowledge when it comes to HTML/CSS - I can just about change colours, font size etc, but after that I have zero idea what I'm doing haha.

Thanks again!
Olivia
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Olivia Doyle
post Nov 28 2019, 02:43 PM
Post #4





Group: Members
Posts: 3
Joined: 27-November 19
Member No.: 27,053



Don't worry - somebody suggested that I replace the .row info with row { text-align: center; } which appears to have worked.

Many thanks for your help! smile.gif


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 - 03:22 AM