Struggling to create a border around icons on my website from left to right. Here's what I'm aiming for: However, the CSS code I have been using doesn't seem to be working properly. This is the outcome I am getting. Any assistance in figuring out where I went wrong would be greatly appreciated. Below is my code.
CSS:
HTML:
Any help would be much appreciated. Thank you
Feel free to attempt it this way
#logo{
background: #3cf;
min-height: 100px;
line-height: 100px;
text-align: center;
}
.border{
margin: 10px auto;
display: block;
min-height: 100px;
border-top: 2px solid gray;
border-bottom: 2px solid gray;
background:rgba(0,0,0,.1);
}
.buttons{
width: 80%;
min-height: 100px;
line-height: 100px;
margin: auto;
text-align: center;
}
.buttons .button{
width: 20%;
min-height: 100px;
text-align: center;
display: inline-block;
background: red;
margin: 1% auto;
}<div id="main">
<div id="layout">
<div id="logo">LOGO IMG HERE</div>
<div class="border">
<div class="buttons">
<div class="button" id="forum">Block 1</div>
<div class="button" id="vote">Block 2</div>
<div class="button" id="store">Block 3</div>
<div class="button" id="bans">Block 4</div>
</div>
</div>
</div>
</div>Note : Customize with additional CSS properties such as
margin,paddingaccording to your requirements.
To dynamically adjust the width of a container div element using Javascript to match the screen size (specifically, window.innerWidth), add border styling to it, and then center the menu by setting its margin to auto (i.e., margin:auto;). Afterward, customize the height of the container by adjusting the menu's padding-top and padding-bottom according to your preference.
My goal is to apply a specific class to a child element if it shares the same numeric class as its parent. If the child does not have the same numeric class as the parent, then I want to remove that child element altogether. However, I am encountering an e ...
Currently, I am working on creating a file browser and facing some issues with calling a function when the user clicks on a directory. Initially, I tried using onClick inside an href in the class part (right before FUNCTION folderSize), intending to open ...
Hey there! I have a question regarding Jquery. I'm working on a simple jquery popup form that shows a thank you message once users complete it. However, I'm facing an issue with resetting the box to display the original form when a user closes it ...
How can whitelisting be implemented for input fields to prevent HTML and XSS injection? It seems like using preg_replace with regular expressions is a good initial step. Are there any other methods worth exploring? ...
My current template, based on Bootstrap, displays a text along with a button and an image. Using a checkbox, you can choose whether the image appears to the right or left of the text. One issue I'm facing is that in the mobile view, the text and butt ...
There is a div with three slide-bars, each representing an 'rgb' value with a range of 0-255. When the slide-bars are dragged, the background-color of the div should change accordingly. Currently, an 'onchange' event is called to a func ...
How can I retrieve and display all the values with key 'Task'? Below is the structure of the JSON data: {"Assignments":[{"AssignedBy":"537000","AssignedBy_FirstName":" JOHN","AssignedBy_LastName":"WANDER"}, {"AssignedBy":"537000","AssignedBy_Fir ...
I have successfully established a connection to my database in server.js, and I am able to retrieve data and view it in the terminal. However, presenting this information in HTML, or even creating a graph to display it, has been a challenge. Any helpful ...
Is it possible to set a CSS variable so that my div's height is always half of its width, and the width scales with the screen size (in percentage)? <div class="ss"></div> CSS: .ss { width: 30%; height: 50% of the width; } This ...
Can the transition for changing the order of the model array in ng-repeat be animated using only CSS, without using ng-animate? ...
Currently, I am enhancing my skills by working on my own projects. One of the projects I'm focused on right now is designing a MEAN-stack app that utilizes Webpack. In the past, I encountered an issue where I couldn't display images in my app. Ho ...
I'm working on modifying the behavior of a site's sub-menu. The current sub-menu is displayed as a drop-down, but I want it to show up in a separate horizontal div instead. Here's what I have accomplished so far: jQuery(document).ready(fun ...
<button type="submit" class="myButton" onclick="window.open('test.txt')">Cash Machine</button> This code is not functioning as expected when clicked. The desired action is to prompt the download of test. ...
Greetings, I am currently learning on the job as I work on a new website for my family business. I am struggling to make the drop-down navigation menu function properly on both desktop and mobile. I want it to have a simple design similar to the main nav ...
When I open my index.html and global.css files in Coda, Textmate, or other text editors, everything appears fine. However, when I try to view them in Firefox, the index.html file loads the CSS from the correct path but it doesn't seem to take effect. ...
I have a complex structure with nested tables, rows, and cells, each containing div elements with multiple spans. I am trying to create a function that will capture the clicked cell every time I click on either the cell itself or any of its child elements ...
I am experiencing some issues with my angular splash screen animation. It works perfectly when there is no activity in the background, but when I simulate a real-life application scenario, the animation becomes stuttered, choppy, or sometimes does not anim ...
I am implementing a function in jQuery to toggle an 'active' class on elements within a grid. Here is the code snippet: $(".cinema-seats .seat").on("click", function () { $(this).toggleClass("active"); } Essentially, when clicking on random ...
I'm looking to create something similar to the image linked below https://i.sstatic.net/Czef9.png Note:: The above image features a V-shaped icon, which is what I'm aiming for. Currently, I am utilizing input[type="range"]. The foll ...
Is there a way to trigger a PHP page call when a user clicks on a <DIV> with AJAX? Additionally, can the text of the DIV be changed to display "LOADING....." simultaneously? I lack knowledge about AJAX. Could you please provide me with more details ...