Fluid div causing navigation to display improperly

I am currently working on a navigation design where I want to have an image above each list item instead of having individual images for each item. It looks great when the screen is at full size, but as soon as I minimize it, the list items start stacking on top of each other. Below is the code snippet I am using:

#nav ul, #nav li {
list-style: none;
font-size: 1.2em;
text-transform:uppercase;
}

#nav ul li {
display: inline;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background: url(images/navico.jpg) no-repeat center;
padding-top: 50px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 6px;
}

You can view this page by following the link

htmlcss

Answer №1

Check out this recommendation:

#navigation ul li {
  background-image: url("images/navico.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  float: left;
  list-style-type: none;
  padding: 50px 4px 0 6px;
}

I converted them into block elements and floated them to the left because inline formatting was causing stacking issues.

Answer №2

The solution provided involves styling the navigation list items in a specific way using CSS. Each list item will be displayed inline-block with certain padding and background image settings applied.

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

What is the process for installing and utilizing the custom CSSLint rules that I have developed for the command line interface?

After investing a significant amount of time into following the instructions outlined here and here for creating custom CSS linting rules using CSSLint via the CLI, I have successfully generated and tested my own set of rules. However, I am now facing the ...

cssnpminstallationlintcsslint

Populate an HTML5 arc with an image - Leveraging the power of HTML5 Canvas

I'm working with an HTML5 Canvas (JSFiddle) that currently displays circles created using the following function: function createball(x,y,r,color){ context.beginPath(); context.arc(x,y,r,0,Math.PI*2,true); context.fillStyle = color; c ...

javascripthtmlcanvashtml5-canvas

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

cssvue.jsvuejs3bootstrap-vuevue-composition-api

Retrieve isolated scope of directive from transcluded content

I am not certain if it is possible, but I am essentially looking for a reverse version of the '&' isolate scope in AngularJS. You can check out this Plunkr to see an example. In essence, I have created a custom directive that provides some r ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Displaying a hidden div using the jQuery .each() method

Attempting to validate a form using jQuery, the goal is to target all form fields with class="required" and utilize the .each() function to verify if the field is empty. If it is empty, a hidden div positioned relative to the field should be displayed. An ...

javascriptjqueryhtmlcss

What could be the reason behind an Ajax Auto-Complete feature suddenly malfunctioning when moving to a new page within the same website?

Working on a website featuring an auto-complete search box powered by Ajax, Javascript, and PHP. As the user types into the search box, an ajax request triggers a php file to query a database and return possible results. Everything works smoothly until the ...

javascriptphphtmlajaxautocomplete

Content towering over the footer

Can anyone help me figure out how to create a footer that appears behind the content when you scroll towards the end of a website? I've tried looking for tutorials online, but haven't found exactly what I'm looking for. Most of what I'v ...

jquerycsshtmlfooterslideup

Stripping CSS prefixes upon file initialization

When developing my application, I have a process in place where I load CSS files on the back-end using Express.JS and then transmit them to the front-end. However, before sending the CSS code to the front-end, I need to: Identify the user's browser; ...

javascriptcssexpressreplace

Internet Explorer 9 (IE9) causing CSS dropdown menu to be truncated due

My issue is very similar to the problem described in this post: CSS Flyout menu gets cut off by borders of its container in IE9 The difference in my case is that I need to set the z-index (and position) on the container. You can view my JSFiddle here: h ...

cssinternet-explorer-9positionz-indexdrop-down-menu

Border with curved edges

Having an issue with content boundaries while using CSS rounded corners in Firefox. Here is the code snippet: Code <html> <head> <style> #outter { width: 200px; margin: auto; text-align: cent ...

htmlcssfirefoxrounded-corners

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

javascriptjqueryhtmlregexeditor

Automatically updating database with Ajax post submission

I have customized the code found at this link (http://www.w3schools.com/PHP/php_ajax_database.asp) to update and display my database when an input box is filled out and a button is clicked to submit. Below is the modified code: <form method="post" acti ...

phphtmlajax

Arranging fixed-width <div>s in rows of four for a sequential display

Below is the code that I am working with: <div style="margin: 0 auto; display:block; width: 916px; overflow: auto;"> <?php echo ""; echo "<i>Owned: $line->phone </i><br><br>"; $query ...

phpcsssql

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

javascripthtml

What is the best way to display an alert when the button is clicked repeatedly?

Is it possible to keep displaying the alert every time we click the button, rather than just once after clicking it? I currently have an alert set to trigger when a button is clicked, but it disappears after 3 seconds. How can I make it show up again with ...

javascriptjqueryhtmlcss

Error message: WebTorrent encountered an issue and was unable to pipe to multiple destinations at once

Upon attempting to stream video from a provided torrent file, I encountered some unexpected issues. The example was taken from the official site, so one would naturally assume it should work seamlessly. To troubleshoot, I tried setting up a default site u ...

javascripthtmlnpmwebtorrent

The alignment issue persists with the menu header, as the div is not functioning correctly

I've been struggling to properly align my menu on the website. As it stands, when a user arrives and is not logged in, they see the header below: https://i.stack.imgur.com/mTKse.png Once the user logs in, the login/register text is replaced by a dro ...

cssreactjsmaterial-ui

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times. Despite searching extensively online, I have not been able to find a solution to this problem. Below is the ...

javascriptjqueryhtmlcss

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss

Attaching a CSS file to a personalized WordPress widget

After much searching and struggling due to language barriers or lack of PHP knowledge, I couldn't figure out how to achieve this: public function widget( $args, $instance ) { ?> <div style="padding: 0 0 14% 0"> <div class="m ...

phphtmlcsswordpress