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

Create a dynamic menu dropdown with absolute positioning using React

I recently made the transition to React and now I am in the process of converting my old vanillaJS website into ReactJS. One issue I am facing is with a button that is supposed to trigger the opening of a dropdown menu. <button type="button&qu ...

javascriptcssreactjsnext.js

Is there a way I can utilize a for-loop and if statement in JavaScript to present the information accurately within the table?

My current task involves fetching data via AJAX and then using a for-loop and if-statement to determine which goods belong in each shopping cart. Once identified, I need to display these goods in separate tables corresponding to each customer. Although the ...

javascripthtmlfor-loopif-statementdjango-templates

What is the most efficient method for updating URLs in CSS files before the website goes live?

The project I am currently working on has been worked on by various coders with different backgrounds. One of my recent achievements was writing a clean Capistrano recipe to minimize CSS and JS files. Now, the challenge ahead is figuring out how to identif ...

cssregexbashcapistranoweb-deployment

Implementing automatic activation of a tab upon page load using Angular

I am currently working with a set of Bootstrap nav pills in my navigation bar. The 'ng-init' code in my Angular script sets the 'dateState' to 'past' on page load. However, I have noticed that the 'Past Events' nav p ...

javascripthtmlcssangularjs

How to optimize form fields in Bootstrap by utilizing the size/maxlength attributes in HTML inputs

When I attempted to utilize html5's form size/maxlength with bootstrap, I encountered an intriguing issue. The .form-control class in bootstrap overrides the size, but if removed, the input loses its styling. Check out the code pen here: http://code ...

csshtmlformstwitter-bootstrapinput

Creating a Multi-Step Checkout System for a WooCommerce Store

Struggling to make my code work - it just won't fire up. I suspect there might be a version-related issue that I'm overlooking. I'm currently using the default checkout setup from the WooCommerce plugin. Instead of buttons, text is showing ...

phphtmljquerywordpresswoocommerce

Adjust the alignment of text within the <select> tag to the right in Safari browser

Is there a way to align text right in a select option tag? <select style="direction:rtl;text-align:right"> <option value="" selected="">همه</option> <option value="1">راهبر سيستم</option> <option v ...

htmlcsssafari

Conflicting events arising between the onMouseUp and onClick functions

I have a scrollbar on my page that I want to scroll by 40px when a button is clicked. Additionally, I want the scrolling to be continuous while holding down the same button. To achieve this functionality, I implemented an onClick event for a single 40px s ...

javascripthtmlreactjstypescriptresponsive-design

What value does a variable have by default when assigned to the ko.observable() function?

I am in the process of learning KnockoutJS and I have implemented code for folder navigation in a webmail client. In the view code, there is a comparison being made to check if the reference variable $data and $root.chosenFolderId() point to the same memor ...

javascriptjqueryhtmlcssknockout.js

Allowing CSS to break long words but not spaces for better readability

Imagine you have the following paragraph: thisisaverylongwordthatneverbreaks Applying word-wrap:break-word; results in: thisisaverylongwordthat neverbreaks This works well, but what if I try: this is avery long word that has spaces The output becom ...

cssline-breaks

Remove the empty space between lines of images

Is there a way to remove the horizontal and vertical space between the squares? <div class="first"> <ul> <li><img src="http://dummyimage.com/40x40/111111/000000.jpg"/></li> <li><img src="http://dummyimage ...

htmlcss

Is there a way to automatically shorten a text when it goes beyond the boundaries of a div container?

How can I prevent a paragraph in one of two adjacent div containers from having a line break without changing the container's size? The surrounding div uses display: flex to position its children side by side. Currently, I've applied the followin ...

htmlcss

Removing special characters in ASP

Can someone please advise me on how to remove special characters in ASP (classic)? I am using an MS Access database. Is there a function similar to stripslashes() or addslashes() in PHP that can help with this? Any assistance would be greatly appreciated ...

htmlms-accessencodingasp-classic

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

I am putting the final touches on my website and realized that it may be difficult to promote specific sections of the site because the browser address never changes. When visitors click on links, they open in a div using Ajax coding. However, if I want to ...

javascripthtmlajax

Only output to the console if the data returned from an AJAX request has been

Here is a script that I created: <script type="text/javascript> $('.storage').html(""); setInterval(function(){ $.get('./playcommand.php', function(data) { if($('.storage').html() !== data){ ...

javascriptphpjqueryhtmlajax

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

The border bottom effect in Hover.css is malfunctioning when used in the Opera browser

I've implemented a hover effect using hover.css that works perfectly in all browsers except Opera. Surprisingly, the effect only seems to work in Opera when I remove the following properties: -webkit-transform: perspective(1px) translateZ(0); transf ...

csssasshoverborder

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

Tips for selecting a secondary or even tertiary ancestor in a Sass project

Check out this piece of HTML code: <body> <div> <li class="more">hello <ul class="hello"> <li>hello</li> <li>hello</li> ...

csssass

Discovering the dimensions of a disabled attribute within a table using XPath in Selenium with Java

I'm attempting to determine the number of columns in a specific table, but some are disabled - I'd like to know if it's possible to get the count without including the disabled ones (only counting the visible columns). As you can see in the ...

javahtmlcssseleniumxpath