Suppose I am creating a horizontal navigation bar with five links and I have set the width to 20%. However, when I add a 1px border to the links, they exceed the specified width of 20% and the last link moves onto a new line. How can I resolve this issue?
I thought CSS might provide an option for negative padding values so that the border could overlap the element instead of surrounding it, but unfortunately, that is not supported.
If you want to support IE6/7, you have a couple of options. You can either add an extra internal element or experiment with negative margins. A better approach would be to use a list for your navigation and style the links within it, like so:
<ul id="nav">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
This is the most semantic way to mark up navigation (update: prior to HTML5, but now you can simply wrap the list in a nav element). Your CSS could then look like this:
#nav li {
float: left;
width: 20%;
}
#nav li a {
display: block;
border: 1px solid #000;
}
Alternatively, you can play around with the CSS3 box-sizing property, which is supported by modern browsers (excluding IE6/7) with some additional code:
#nav li {
/* Opera 8.5+ and CSS3 */
box-sizing: border-box;
/* Firefox 1+ */
-moz-box-sizing: border-box;
/* IE8 */
-ms-box-sizing: border-box;
/* Safari 3+ */
-webkit-box-sizing: border-box;
Incorrect, according to the box model, the border is included in the total width calculation. To ensure a specific width of 100%, do not mix borders within the object. Instead, place a div (or another block element) inside the object that needs to be 20% and set it to 100% with a border.
Perhaps a margin of -1 pixel could be effective. Results may vary.
I am looking to increase the size of my bootstrap buttons beyond btn-lg. Here is my current code: HTML Whenever I add a new class with padding to the anchor tags, it ends up looking strange. https://i.sstatic.net/3AFPI.png However, this is the desired ...
My HTML file contains numerous links to a database, but the URLs are formatted as: <a href=/bw/examplefile.html> Although I attempted to use wget with the --base parameter to download all the links, it didn't work as expected. Instead of trou ...
The Angular Material directive "md-nav-bar" is causing trouble in my code. It refuses to render, even after trying various snippets of working code that I found. HTML <body ng-app="app" ng-controller="MainController"> <md-content layout="row"&g ...
I have the following SCSS code: main{ width: 100%; height: 840px; /*background: red;*/ margin: 10px auto; position: relative; padding: 5px 0; } section{ width: 98%; height: 600px; margin: auto; display: flex; ...
Apologies for the poorly worded question, but I'm struggling to find a better way to phrase it. I'm currently working with a .each() loop where I need to update a specific css() parameter of each item in the loop. However, I can't seem to g ...
let link = '<a href="javascript:void(0);" (click)="redirectToPage(store)" class="btn grey">' + displayText + '</a>'; Upon clicking the button on the page, nothing seems to be happening. Can you help me figure out what I&apo ...
Found the solution on this interesting page: In a list, there's a button: <form> <ul> <li> <a href="account.html" class="button"> <button type="submit">Submit</button> ...
Can someone help me with this code snippet? from keyboard import press_and_release from selenium import webdriver from selenium.webdriver.common.by import By url = 'https://www.yr.no/nb' def weather(url, webdriver): webdriver.get(url) # Op ...
I encountered an issue while attempting to generate two shapes on the canvas: an octagon and a pyramid. The octagon displays correctly, but the pyramid does not appear as expected. Below is the code snippet related to the creation of the pyramid: pyramidP ...
I have a setup that resembles the following: http://jsfiddle.net/NhAuJ/ The issue arises when hovering near the edges of the circle because the square div blocks interaction with the background. I want to ensure that the circular div in the middle remain ...
When working with a form that uses the post method, there is often a need to encrypt certain parameters using md5 before posting them in JavaScript. How can I bind these encrypted values to the form? Here is an example of an HTML form: <input id="sig" ...
Currently stuck on a university project where I've set up an array of images like this: var testdata = [ { "imageID": 17, "uploadedDate": "2020-07-31 03:56:56.243139", "filepathOriginal": &qu ...
Is there a way to format an HTML string similar to how it's done in an HTML editor like Netbeans with Alt-Shift-F? I'm looking for a JavaScript function or library that can achieve this. Any suggestions? ...
I need to figure out how to make an HTML symbol entity stay fixed on the browser screen. It's for a Sign-In page and I'm trying to have a down arrow float next to a sign in link, positioned approximately 25px from the left and 10 px from the top ...
When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...
Looking for a way to create a stylish two-toned divider line at the bottom of my header. It should be two pixels tall, with a grey top half and white bottom half. While I considered using two one pixel divs stacked together, I'm hoping there's a ...
Is it possible to integrate jQuery Datepicker into a web page that includes an iframe? And where is the optimal placement for linking the CSS and script references? ...
Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...
I have a website where I use two columns with modules to display information like this: https://i.sstatic.net/Jp97V.png However, I work on vertical monitors and when I switch to a more landscape format, the layout looks like this: https://i.sstatic.net/D ...
I am attempting to create a function where an element is hidden whenever the user clicks outside of it. When the CART link in the top left corner is clicked, a dropdown appears. However, I am encountering two issues. 1) The dropdown is being shown and th ...