Style your toolbar the Google way with CSS and HTML

Trying to replicate the Google-style toolbar found on G-mail and other Google services has been a challenge for me.

I have experimented with creating this toolbar using a formatted list and nested div elements within a single container, but I encounter the same issue each time.

Whenever the mouse hovers over an element, a new 1px border appears and causes all the other elements to shift. To counteract this, I have had to apply styles like:

left: -1px;
bottom: 1px;

While this works for the element being hovered over, it creates an unsightly movement of the other elements.

My question is: Is there a way to display these elements so that a new 1px border on hover does not affect the positioning, all without using absolute positioning?

If the only solution is absolute positioning with specific pixel coordinates, then I will proceed in that manner. However, I am hoping for a more elegant and efficient solution.

csshtmlhtml-lists

Answer №1

If you want to prevent the 1px border from shifting things around on hover, there are a few solutions you can try.

Check out this example for one solution: http://jsfiddle.net/ZeikJT/tBmm2/

One option is to add a transparent border (border:1px solid transparent) to create a consistent gap. This allows you to easily change the border-color on hover without adjusting the border-width, simplifying your code.

Take a look at this alternative solution: http://jsfiddle.net/ZeikJT/NkBwp/

Another approach is to incorporate margin or padding that is removed on hover. While this method may be a bit more complex to implement, it can also be effective in achieving the desired result.

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

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

$scope.categories = [ { "advertiser_id": "2", "tier_id": 1, "tier_name": "1", "base_cpm_price": "", "retarget_cpm": "", "gender": "", "location": "", "ageblock1": "", "ageblock2": "", "ageblock3": ...

javascripthtmlangularjsjson

Determine if a div contains an svg element with JavaScript

My question involves a div containing a question mark and some SVG elements. Here is the initial setup: <div id="mydiv">?</div> When validating a form submission in my code, I check if the div text contains a question mark like this: const f ...

javascriptjqueryhtmlcsssvg

Dynamic layout problem with navigation pills

I currently have 2 navigation pill buttons designed to alter the layout upon being clicked. Both layouts always include the sidebar which remains constant throughout. Clicking on Nav pill 1 will display the layout as follows: sidebar | column 1 | column ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for enabling a flexbox item to extend beyond its container

While attempting to utilize flexbox for creating a navbar with the logo in the center, I encountered an issue where the logo wasn't able to overflow from above and below the navbar. I experimented with squeezing in and positioning the element, but it ...

htmlcsssassvuetify.js

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

javascriptcssvue.jsvuejs2vue-component

Encountering an unanticipated reference error while attempting to paste the data

// Modify the layout function document.addEventListener('DOMContentLoaded', function() { function modifyLayout(productId) { // Referencing the original card and detailed card const originalCard = document.querySelector(&ap ...

javascripthtmlbootstrap-5

Accordion is having trouble expanding fully

My accordion is causing some trouble. When I try to open one section, both sections end up opening. I want it to toggle, so that only one section opens at a time based on my click. Switching the display from flex to column fixes the issue, but I don' ...

javascripthtmljquerycss

How can I place my container above my header in the layout?

I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for: No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening. HTML: <!DOCTYPE html PUBLIC ...

htmlcss

Having trouble loading image on web application

Currently, I am facing an issue while attempting to add a background image to an element within my Angular web application. Strangely enough, the relative path leading to the image seems to be causing my entire app to break. https://i.stack.imgur.com/b9qJ ...

htmlcssangularweb-applicationsrelative-path

Is it possible for the background color to change in a sequence every time the page

I'm having trouble figuring out how to create a sequence that changes the background color every time the page is refreshed. I'm comfortable with basic HTML but not so much with JavaScript or CSS. I'm working on a page where I want the backg ...

javascripthtmlcss

I noticed an excess of white space on the right side of my Angular website

Check out my website here. Everything seems to be functioning correctly, however, there is an issue with scrolling on mobile. It should only scroll up and down, not left and right! I have noticed a strange white space on the right side of my site when view ...

htmlcssangularresponsive

Is it possible to manipulate a modal within a controller by utilizing a certain attribute in HTML, based on specific conditions (without relying on any bootstrap services), using AngularJS?

Within my application, I have a modal that is triggered by clicking on a button (ng-click) based on certain conditions. Here is the HTML code: <button type="button" class="btn btn-outlined" ng-click="vm.change()" data-modal-target="#add-save-all-alert ...

javascriptangularjshtmlmodal-dialog

Having trouble with looping the CSS background using JavaScript in CodePen

Can someone help me with looping through CSS background images? Why is the background not changing in this code example: http://codepen.io/anon/pen/dGKYaJ const bg = $('.background').css('background-image'); let currentBackground = 0; ...

javascriptcssloops

What is the correct method for compiling a list of users?

Hello, I have developed a basic user list based on database results, but I am facing two issues with it. Currently, my list displays like this: [UserOne, ...][UserTwo, ...] However, I need the format to be: [UserOne],[UserTwo]... The three dots repres ...

phphtmlarraysstringmysqli

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

htmlreactjsparameters

Show MaterialUI Dialog in fullscreen mode

I'm just starting out with React and Material-UI, and I'm trying to figure out how to print my current dialog. The issue I'm running into is that I can't seem to find a way to set the Dialog to full screen for printing while keeping it ...

cssreactjsmaterial-uireact-tsx

Content within a Row of a Data Table

Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...

javascriptjqueryhtmlcss

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

javascripthtmlcsstextbox

Generate a list of files and transfer them to an input file

I am currently working on creating a drag and drop area where I can retrieve dataTransfer items using webkitGetAsEntry, and then differentiate between directories and files. My goal is to convert these files into a FileList and transfer them to a file inp ...

javascripthtmlgoogle-chromefileapi

Show a picture on top of another picture

Is there a way to overlay an image and text on top of another image, similar to what is done on this website ? ...

cssimagetext