Encountering obstacles as a novice trying to master CSS styling techniques

I'm having trouble aligning buttons at the center top of the screen. Despite my efforts, I can't seem to get them perfectly aligned https://i.stack.imgur.com/j7Bea.png

button { 
    width: 13%;
    height: 50px;
    display: inline-block;
    font-family: Verdana, "Helvetica", sans-serif;
    font-size:small;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 0px #07526e;
    padding-top: 6px;
    margin-left: auto;
    margin-right: auto;
    left: 15%;
    margin-top: 2%;
    position: relative;
    cursor: pointer;
    border: none;
    background: #000000;
    background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb 22,179,236) 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #5C6061, 0px 5px 0px 0px #4A4A4A, 0px 10px 5px #060606;
}

Another issue arises when zooming in and out as the button texts exceed their width. Any solution for this problem?

You can access a working example on JSFIDDLE.

htmlcssvertical-alignment

Answer №1

Here is a snippet of CSS code for styling buttons and range input:

<style>
        body {
            margin: 0;
            width: 83%;
        }

        #range{
            width: 90%;
        }

        button { 
            width: 13%;
            height: 50px;
            display: inline-block;
            font-family: Verdana, "Helvetica", sans-serif;
            font-size:small;
            font-weight: bold;
            color: #FFFFFF;
            text-decoration: none;
            text-transform: uppercase;
            text-align: center;
            text-shadow: 1px 1px 0px #07526e;
            padding-top: 6px;
            /* padding-left: 1%; */
            margin-left: auto;
            margin-right: auto;
            left: 15%;
            margin-top: 2%;
            position: relative;
            cursor: pointer;
            border: none;
            background: #000000;
            background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
            border-radius: 5px;
            box-shadow: inset 0px 1px 0px #5C6061, 0px 5px 0px 0px #4A4A4A, 0px 10px 5px #060606;
        }

        button:active {
            top:3px;
            box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
        }

        .range-class {
            top:6px;
        }
    </style>
    <div class="menu"> <button type="button" class="range-class"><input type="range" id="range" min="1" max="30"  value="16"/></button>
        <button type="button" id="reloadbutton" class="reloadbutton" onclick="load()">Reset</button><audio id="disappearsound"> </audio>
        <button type="button" id="disappearbutton" class="disappearbutton" onclick="PlayDisappearSound()">Disappear</button><audio id="blackholesound"> </audio>
        <button type="button" id="blackholebutton" class="blackholebutton" onclick="PlayBlackHoleSound()">Black hole</button>
        <button type="button" id="cometsbutton" class="cometsbutton" onclick="launchComets">Comets</button> <audio id="spacesound"> </audio>
        <button type="button" id="playbutton" class="playbutton" onclick="playOrPause()">Sound off</button>
        <a href="index.php"><button type="button" id="portfolio" class="portfoliobutton">Back</button></a>
    </div>

Answer №2

It appears that the vertical-align: text-top; property is absent from your button's style. For a visual representation, check out this demo.

Answer №3

To align your buttons vertically in the parent using the display: inline-block property, you can utilize the vertical-align property of CSS. Refer to the example below for clarification:

body {
margin: 0;
width: 83%;
}

#range{
width: 90%;
}

button { 
    width: 13%;
    height: 50px;
    display: inline-block;
    vertical-align: top; /* Added line - use this to align elements when using display: inline-block */
    font-family: Verdana, "Helvetica", sans-serif;
   font-size:small;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 1px 1px 0px #07526e;
    padding-top: 6px;
    margin-left: auto;
    margin-right: auto;
    left: 15%;
    margin-top: 2%;
    position: relative;
    cursor: pointer;
    border: none;
    background: #000000;
    background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #5C6061, 0px 5px 0px 0px #4A4A4A, 0px 10px 5px #060606;
}

button:active {
  top:3px;
  box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;
}
 <div class="menu"> <button type="button"><input type="range" id="range" min="1" max="30"  value="16"/></button>
<button type="button" id="reloadbutton" class="reloadbutton" onclick="load()">Reset</button><audio id="disappearsound"> </audio>
<button type="button" id="disappearbutton" class="disappearbutton" onclick="PlayDisappearSound()">Disappear</button><audio id="blackholesound"> </audio>
<button type="button" id="blackholebutton" class="blackholebutton" onclick="PlayBlackHoleSound()">Black hole</button>
<button type="button" id="cometsbutton" class="cometsbutton" onclick="launchComets">Comets</button><audio id="spacesound"> </audio>
<button type="button" id="playbutton" class="playbutton" onclick="playOrPause()">Sound off</button>
<a href="index.php"><button type="button" id="portfolio" class="portfoliobutton">Back</button></a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the appearance of React Native WebView with CSS styling

Currently, I find myself facing a challenge... We are using a WebView in a section of our app because we receive an HTML string from an API endpoint. The HTML styling is not optimized for mobile use, so we are attempting to make some stylistic changes to i ...

cssreactjswebviewreact-native

Unlock the Full Potential: Enabling Javascript's Superpowers through PHP Execution

I specialize in PHP and JavaScript. Currently, I am attempting to incorporate JavaScript functionalities into my PHP code. However, I am encountering an issue where the code is not functioning properly. The PHP code that executes the JavaScript code is as ...

javascriptphphtml

Issue with submitting forms in modal using Bootstrap

In the model box below, I am using it for login. When I click on either button, the page just reloads itself. Upon checking in Firebug, I found something like this: localhost\index.php?submit=Login <div class="modal fade" id="loginModal" tabindex= ...

javascriptphpjqueryhtmltwitter-bootstrap

Verify whether the element within an iFrame contains any content

After conducting extensive research, I have been unable to find a satisfactory answer to my question. Therefore, I am reaching out to see if anyone has the knowledge I seek. The Goal: I aim to check the contents within an iFrame and determine whether it ...

javascripthtmljquery

Show/hide functionality for 3 input fields based on radio button selection

I need assistance with a form that involves 2 radio buttons. When one radio button is selected, I want to display 3 text boxes and hide them when the other radio button is chosen. Below is the code snippet: These are the 2 radio buttons: <input type= ...

javascriptjqueryhtml

Moving a component beyond its container using a query

After much searching, I have yet to find a solution to fix this issue. My problem involves having a list with draggable elements within a scrollable area. The goal is to drag these elements outside of the parent div into a droppable area; however, they see ...

jqueryhtmlweb

The issue I am facing currently revolves around the absence of images on

I recently uploaded a captivating HTML page for my website's captive portal. Although the redirection to the designated page is working perfectly, I am facing an issue with the images included in the HTML page. Even though I went ahead and uploaded th ...

htmlpfsensecaptiveportal

Using ASP.NET MVC to generate dynamic CSS styles

I am seeking a solution that will allow me to achieve the following objectives: Retrieve dynamically generated CSS from an action method Select a CSS file based on request parameters or cookies Utilize a tool for combining and compressing (minifying) CS ...

c#.netasp.net-mvccss

Tips for creating a fixed element with ScrollTrigger and GSAP

How can I prevent the right div from jumping on top of the left div when using a scroll trigger to make the left div's position fixed? gsap.registerPlugin(ScrollTrigger); const tlfour = gsap.timeline({ scrollTrigger: { trigger: ".ma ...

javascripthtmlcssgsapscrolltrigger

What is the best way to display a variable (string/int) from a PHP file onto an HTML file?

I've searched online multiple times for a solution, but most of the results I found only show how to echo HTML code from a PHP file by changing the file extension to .php. However, my goal is to echo a variable from a PHP file and display it in an HTM ...

phphtml

What is the functionality of CSS radio tabs?

Can anyone provide a breakdown of how the final section of this code operates? Specifically: [type=radio]:checked { } [type=radio]:checked ~ .content { z-index: 1; } I am brand new to CSS and wanted to experiment with creating interactive CSS tabs, whi ...

htmlcsstabsradio-button

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

Responsive navigation menus can create confusion when hover and click events overlap

Check out my HTML5 responsive, 2-level menu by clicking HERE. The menu displays submenus on hover for wide screens and on click for narrow screens (less than 768px). The JavaScript function responsible for switching the events is shown below: function ho ...

jquerycsshtmlmenuresponsive-design

Tips for retrieving the primary key of the highlighted row in bs_grid

I've integrated bs_grid to showcase a lineup of company names, each associated with a unique GUID identifier. Here's how I've set up the grid: $(function() { $('#grid1').bs_grid({ ajaxFetchDataURL: 'CompaniesList.asmx/G ...

jqueryhtmltwitter-bootstrap

The Challenges of Parsing HTML Source Code for Web Scraping

I've been attempting to scrape data from this website: (specifically rare earth material prices) using Python and BeautifulSoup. My query pertains not to Python, but rather the HTML source code of the site. When I utilize Firefox's "Inspect Elem ...

htmlcss

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

What could be causing the issue with absolute positioning not functioning correctly?

I'm having trouble keeping my footer at the bottom of the page: body, html{position:relative;} footer{position:absolute;} Even when I use bottom: 0;, the footer doesn't seem to go all the way to the bottom. Is there anyone who can help me troub ...

htmlcss

Modifying the src attribute of an object tag on click: A step-by

So I have an embedded video that I want to dynamically change when clicked on. However, my attempt at doing this using JavaScript doesn't seem to be working. <object id ="video" data="immagini/trailer.png" onclick="trailer()"></object> H ...

javascriptjqueryhtml

What is the best way to attach a value to an attribute of a web component in Angular?

In all honesty, I am quite new to Angular and still learning the ropes. Currently, I am faced with a debugging challenge related to one of the users encountering an issue with my web component library. Within this library, there is a custom element create ...

htmlangularlit-element