Welcome to my page at . Notice how the "Storia del Bernese" menu voice is positioned above the other list items. I would like all list items to have the same height but different widths based on text length.
What adjustments should I make in my CSS to achieve this?
Thank you for your help.
Greetings, I will now explain the usage of li white-space nowrap
Here is an example:
#menu-Principale li {
white-space: nowrap;
}
utilized: ul, menu, dir { display: block;
... }
An improved approach would be to opt for display:inline; and refrain from specifying the width (or set it to auto for better browser compatibility)
Within your coding structure, there is a tag with the following CSS styling:
a.tabInactive {
background: url("images/menu_normal.png") repeat scroll 0 0 transparent;
display: block;
line-height: 33px;
text-align: center;
width: 76px;
}
The image menu_normal.png has dimensions of 77 X 34, which may be too small for your menu item titled Storia del Bernese.
To resolve this issue, you will need to create an additional image that is suitable for your menu size. After creating the new image, assign it to a new class with the ID li10. This adjustment should address the problem.
Avoid setting a fixed width for the list item and there is no need to specify the height either, since we are using top padding. Here's how you can structure it:
#menu-Principale li{
display:inline-block;
padding:6px 4px;
width:auto
}
Adjust tab spacing, enhance padding on both sides, and correct background image display. Next step is to refine the background image/color combination.
a.tabInactive {
display: block;
line-height: 33px;
padding-right: 20px;
padding-left: 20px;
width: auto;
background-image: url('../images/tab-bg.jpg');
background-color: #F0F0F0;
}
a.tabInactive:hover {
display:block;
line-height:33px;
padding-right: 20px;
padding-left: 20px;
width: auto;
background-image: none;
background-color: #999;
}
a.tabActive {
display: block;
color: #FFF;
padding-right: 20px;
padding-left: 20px;
line-height: 33px;
width: auto;
background-image: url('../images/selected-tab-bg.jpg');
background-color: #6E49A1;
}
Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...
Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...
I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...
I've been struggling with this for the past couple of days - how can I have a new ngModel for each iteration within an *ngFor loop? The idea is that I load a list of questions, and within each question there are 2 propositions. Here's the HTML: & ...
Looking to dynamically hide all unchecked radio buttons and their labels until a submit button is clicked, displaying only the checked radio button. <form method="post"> <input type="radio" name="radiobtn"> <label for="first">Fir ...
I am looking to design a product list page with a mouseover gallery similar to the one showcased on [this page][1]. I attempted to use a vertical carousel like the one illustrated in this Fiddle, but unfortunately, it does not function like Zalando and jc ...
[Link removed] Is anyone else experiencing an issue with the columns on a website layout? I have 5 columns set up with each post taking up 20% width. It looks fine in Chrome, but in IE and Firefox, the last column gets pushed below so there are only 4 col ...
I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...
When working with ASP.NET 3.5/C#, I encountered a situation where I needed to filter a list of dates based on a specific month for a given year (approximately 20 dates total). For example, if a user selects the year 2010 from a dropdown menu, the resulting ...
Currently, I am facing a challenge while using Hpple to extract links from webpages. Due to the lack of support for Flash on iOS, I have to resort to the HTML 5 player. My objective is to locate and access this player. In scenarios where the website loads ...
Can anyone explain why there is an extra line being produced here? I came across another question where it was mentioned that this issue is not due to CSS but rather caused by HTML. Why is that? This is completely new to me, and I'm curious as to wh ...
example here: http://jsfiddle.net/R7GUZ/3/ I'm struggling to make the list-style property work in webkit for a parent OL that is styled with -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; Is there a way to format an ordered list ...
I'm currently generating html files from Nunjucks using my gulp file. Now, I need to convert these html files into text files. I came across a useful NPM package called html-to-text that can help with this task. However, I'm facing some challenge ...
I am looking to adjust the font size based on the value within the span element. The numbers in the class name may vary. Issue: using text() retrieves all values (e.g. 50020) I want to incorporate each() and $this in some way. How can I do this? Thank ...
After conducting extensive research, I am still unable to find a solution or comprehend the code written by someone else - it simply does not work. As a result, my codebase has grown significantly. I am interested in optimizing my code using AngularJS func ...
I am still learning English, so please bear with me :) My issue is that when using Gin to load HTML, my HTML file contains an import (/stylesheet/index.css), but when I run my app with Gin, it gives an alert that the stylesheet file could not be loaded. ...
I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. ...
I am currently in the process of coding my own website and I've run into an issue with a button. Here's the code I'm working with: <div *ngFor="let game of games" class=card"> <div class="card-body"> <h5 class="card-t ...
Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: https://i.sstatic.net/OVh2y.png I'm unsure if the oute ...
On my HTML page, I have a centered header (h1) with a title that displays in portrait mode above an image. When switching to landscape orientation, I want the image to move to the left side of the title. I've experimented with using <br> along ...