Creating word spacing in CSS paired with a navigation menu using Dreamweaver

As a beginner in Dreamweaver, CSS, and HTML, I may have made some mistakes or overlooked simple solutions. I am currently struggling with how to separate words in my navigation menu, as they always appear centered. Despite trying adjustments like "word-spacing," I have not been able to find a solution.

If anyone could provide suggestions on how to resolve this issue, I would greatly appreciate it.

Thank you.

CSS

.nav {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0 100px;
  border: 0;
  list-style: none;
}

ul li {
  float: left;
  text-color: white;
  font: Helvetica;
  font-size: 100%;
  outline: 0 none;
  width: 100%;
}

HTML

<div class="menu">
  <ul class="nav">
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    <li id="nav-about"><a href="#">About</a></li>
  </ul>
</div>

csshtmldreamweavernav

Answer №1

Make the menu start from the left side by removing width:100% from the li element.

.nav {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0 100px;
  border: 0;
  list-style: none;
}

ul li {
  float: left;
  color: white;
  font: Helvetica;
  font-size: 100%;
  outline: 0 none;
}
ul li + li{
  margin-left:10px;
}
<div class="menu">
  <ul class="nav">
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    <li id="nav-about"><a href="#">About</a></li>
  </ul>
</div>

If you want the menu to start from the center, you can remove float:left from the li and add display: inline-block.

.nav {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  text-align: center;
}

ul {
  margin: 0 auto;
  padding: 0 100px;
  border: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  color: white;
  font: Helvetica;
  font-size: 100%;
  outline: 0 none;
}

ul li + li{
  margin-left:10px;
}
<div class="menu">
  <ul class="nav">
    <li id="nav-products"><a href="#">Products</a></li>
    <li id="nav-contact"><a href="#">Contact</a></li>
    <li id="nav-about"><a href="#">About</a></li>
  </ul>
</div>

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 best way to create a navigation bar that opens on the same page when clicked?

Can someone help me figure out how to create a navbar that, when clicked, opens a small window on the same page like in this example image? ...

javascripthtmlcss

Adjusting font size according to the font style selected

Can conditional font size be determined based on font family using CSS or jQuery? ...

jqueryhtmlcssconditional-statementsfont-size

My navbar in bootstrap is having trouble staying aligned with the button and search box. What can I do to ensure everything stays in line?

<nav id="NavbarMaster" class="navbar NavCompression"> <!-- style="min-height:100px;" --> <div id="navToggler" class="container-fluid TitleBG TitleHeight"> <div id="navopener" class="Pointer" style="position:fixed;top:0;left:0; ...

htmlcsstwitter-bootstrap-3responsive-designnav

jQuery Slider Showing Incorrect Images

My jQuery slider is acting strangely. It hides the first image, shows the second one, but then just repeats the cycle by showing the first image again instead of loading the third one. I'm puzzled about what could be causing this issue in my code. Do ...

javascriptjqueryhtmlcss

The Ajax/jQuery output is not showing up in the iframe, but is instead appearing on a separate page

I've scoured various forums and websites, attempting to troubleshoot the issue described below without success. This problem persists in both IE 11 and Firefox 10.0.2. My goal is to submit a form (POST) to a website () and showcase the resulting bri ...

javascriptjqueryhtmlajaxiframe

Peeling back the layers of a particular element

This is my code snippet: <pre id='code'> <ol> <li class='L1'><span>hello</span></li> <li class='L2'><span>Hi</span></li> <li class='L3&apos ...

javascriptjqueryhtml

What is causing the 'transitionend' event to trigger multiple times?

Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...

javascripthtml

"Marquee animation functions correctly on the emulator but fails to display on the physical

Greetings! I recently incorporated a marquee tag into my application, and it functions properly in the Android simulator. However, once I install it on my device, the marquee does not display. Below is the code I used for the marquee: <marquee behavi ...

jqueryhtmljquery-uijquery-mobile

Enhance the appearance of Font Awesome stars by incorporating a hover effect

Is there a straightforward way to make them turn solid yellow when you hover over them? const styles = theme => ({ root: { flexGrow: 1, overflow: 'hidden', padding: theme.spacing(0, 3), }, paper: { maxWidth: 800, mar ...

cssmaterial-uifont-awesome

Clicking on the modal button causes the code to run multiple times in JQuery and JavaScript

Hello, I'm experiencing an issue where the code inside a modal is being executed multiple times when the modal button is clicked. For example, if I click the modal button once, the code runs once; if I click it twice, the code runs twice, and so on. ...

javascripthtmljqueryasp.net-mvc

Is there a way to conceal/remove the text displayed on the submit button?

I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...

phpcss

Issue with division operation in HTML not functioning

I've been working on a division calculation within an HTML file, but so far I haven't had success using PHP or JavaScript. While {{ property.listprice }} is correctly displaying a number in the HTML file, the other elements are not functioning as ...

phphtml

Challenges arise when utilizing the foundation 6 grid for image overlays within a React application

Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is re ...

javascriptcssreactjssasszurb-foundation

Using a Mixin as an Argument in Another Mixin in LESS CSS

Is it possible to pass the declaration of one mixin or style to another mixin as an input parameter? Consider the following example involving animation keyframes. This is how keyframes are typically defined in pure CSS: @-moz-keyframes some-name { fr ...

cssargumentslessmixinscss-animations

Creating a foundational design with Bootstrap 5, featuring a sidebar that scrolls seamlessly and a stunning fixed

I'm having some trouble figuring out the layout for a webapp I want to develop. LAYOUT IMAGE What I envision is a sidebar menu on the "S" section that can be scrolled independently, and a large image on the "I" section that changes based on th ...

htmlcssbootstrap-5

Is there a simple way to create a row of triangle-shaped divs using Bootstrap, similar to the design shown

Is it possible to have a white section and background image in the same row? I am aiming for a layout similar to the example shown https://i.stack.imgur.com/J0S2t.jpg ...

htmlcss

Differences between Next.js Image and regular img tag regarding image quality

I am currently using Next.js and have noticed that my images appear slightly blurry when utilizing Next/Image. Below is a snippet of my code: <img src={url} width={articleWidth} /> <Image className="text-center" src={url} ...

htmlcssimagenext.js

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

jquerycssinternet-explorer

Using AJAX to upload an image and passing multiple parameters

I'm facing an issue when trying to upload an image along with other input text in a form and send it to ajax_php_file.php. Whenever I upload the image, all my input text fields appear empty. Any assistance would be greatly appreciated. Thank you very ...

javascriptphpjqueryhtmlajax

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x