Struggling with getting the navigation bar to show up in a row instead of stacking

Hey there, I need some help with the layout of my page. Here's the link to the page I'm currently working on:

At the moment, the list is showing up vertically instead of horizontally.

CSS:

li {   display:inline;
        list-style-type:none;
    }
#nav {  background-color:#c6c7c3;
        height:50px;
        margin-top:120px;
        z-index:2;
    }

HTML

<div id="nav">
<ul>
<li><a href="index.php"><h2>Home</h2></a></li> <li><a href="about.php"><h2>About</h2></a></li> <li><a href="school.php"><h2>School</h2></a></li> <li><a href="workshop"><h2>Workshop</h2></a></li> <li><a href="contact.php"><h2>Contact</h2></a></li>
</ul>
</div>

Upon further inspection, I realized that the issue was caused by the blocks H1-6. Here's a reference image of how I want the navigation to appear (I appreciate your assistance): site design http://students.thenet.ca/jlandon/images/sitedesign.png

htmlcsslistinline

Answer №1

What is the reason behind incorporating H2 for the navigation components?

Consider modifying them to appear inline as well, or opt for an inline element instead.

Answer №2

By default, h2 is a block element, causing your lines to break.

To resolve this issue, you can either apply display: inline to the h2 elements (although this may not be the best solution) or replace the h2 tags with an alternative styling such as adjusting the size and font properties of the a tag.

Answer №3

To resolve this issue, I believe using the CSS property float: left would be the solution:

li 
{   
  display: inline;
  float: left;
  list-style-type: none;
}

Answer №4

Consider utilizing semantic classes instead of relying on block elements like h2 within your navigation structure. If you wish to achieve a bold font with a specific size using the h2 element, you can implement the following CSS:

.nav-text, #nav li a {
  font-size: 1.25em;
  font-weight: bold; }

#nav {
  background-color: #c6c7c3;
  height: 50px;
  margin-top: 120px;
  z-index: 2; }

It is also important to note that using em units instead of pixels can enhance responsiveness, especially if you plan to expand your webpage to cater to mobile devices.

Your HTML structure should resemble the following:

<div id="nav">
  <ul>
    <li><a href="index.php">Home</a></li> 
    <li><a href="about.php">About</a></li> 
    <li><a href="school.php">School</a></li> 
    <li><a href="workshop">Workshop</a></li> 
    <li><a href="contact.php">Contact</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

Creating an X pattern on an HTML5 canvas and detecting intersections with a perimeter

I am currently developing a maze game using HTML 5. Below is the function I have implemented to draw an "X" on the canvas (the player will guide the X through the maze using touchpad). dim = 8; function rect(x,y,xdim){ ctx.beginPath(); ctx.moveT ...

javascripthtmlhtml5-canvas

Adjust the height and width dynamically in CSS/HTML based on various screen dimensions

There are 2 major concerns I have regarding this layout : .feature_content (with a grey background) does not adjust its height and width to different screen sizes. Currently, on large screens, .feature_content is positioned far from the footer. There is ...

htmlcss

Adjust the size of my navigation bar to match the dimensions of the browser

I'm currently facing an issue with my website's navigation menu on mobile devices. I've been attempting various solutions to make the navigator scale up appropriately with the browser, but so far nothing seems to be working. Below is the HT ...

htmlcssmedia-queries

What is the best way to incorporate a background image that complements my content?

I'm currently working on revamping my friend's windsurf club website. The issue I'm facing is with trying to achieve a more elegant appearance by positioning a background image behind the <h1> and <h2> elements. Currently, I have ...

htmlcssbackground-imagebootstrap-5

choosing from dropdown menu items

Learn HTML <table> <tr> <td>ENTER PRINCIPLE AMOUNT</td> <td><input type="text" name="principle" size="7"></td> </tr> <tr> <td>ENTER RATE OF INTEREST</td> <td><input type="text" na ...

javascriptjqueryhtmldrop-down-menu

Splitting the div into two columns

I've encountered various solutions to this issue, but when I integrate an Angular2 component inside the divs, it fails to function properly. Here is my progress so far: https://i.stack.imgur.com/qJ8a9.jpg Code: <div id="container"> <div ...

javascriptcssangular

Changing the CSS Border of Thumbnails

Take a look at this screenshot of a thumbnail grid. I need to reposition the gray border so that it sits below the price and is consistently aligned across all products. The challenge arises when product titles vary in length, causing the price to be posit ...

ruby-on-railscss

Leveraging the power of JavaScript to reveal concealed div elements

I've got a collection of divs (five in total) with a hidden class applied to them in my CSS stylesheet. Each div also has its own unique ID. My goal is to use JavaScript to reveal these divs one by one. Here's an example of what I'm looking ...

javascriptcssclasshtml

Feature of Thymeleaf: Download functionality

When working with my Thymeleaf template, I have successfully processed Java map content to HTML using the following code: <div th:each="file : ${files}"> <span th:text="${file.key}"></span> <!-- here file.key is retrieved --> ...

javahtmlthymeleaf

Desktop Safari displays Font-awesome icons with trimmed corners using a border-radius of 50%

While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to ...

javascriptcssreactjsborderfont-awesome

how can I use jQuery to disable clickable behavior in HTML anchor tags?

Here is the HTML code I am working with: (note -: I included j library on the top of page ) <div class="WIWC_T1"> <a href="javascript:void(0);" onClick="call_levelofcourse();popup('popUpDiv1')">Level of Course</a> </di ...

javascriptjqueryhtml

Utilize Z-index to hide elements from view

Encountering an issue with hiding other div elements when one is visible. In the code snippet below, I aim to make Pacific Rim and World War Z disappear using z-index when Star Trek is visible. Here's my HTML code: <!doctype html> <html ...

htmlcssz-indexcss-transitions

I prefer children to have their own unique style, instead of inheriting their parent's CSS

I currently have a project structured in the following way: There is an index page with a full layout Separate PHP files that are included in the index page Bootstrap is used in the index page, however, in some of the separate PHP files I also use jqgri ...

phpjquerycsstwitter-bootstrap

The Bootstrap Jumbotron section stubbornly stays above the footer

I'm currently working on a Bootstrap 3 page and facing an issue where the yellow area does not seamlessly transition into the green footer. Instead, there is a white space between the end of the yellow area and the start of the footer. How can I resol ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How can the height of a Material-UI Grid item be dynamically set to match its width?

I am trying to create grid items that are square, where the height matches the width: const App = ({ width, items }) => ( <Grid container> {items.map((v) => ( <Grid item md={width}> // I want this Grid item to be square ...

cssreactjsmaterial-ui

Tips on displaying the number of items ordered above the cart icon

Hey there, I've been attempting to place a number in the top left corner of a cart icon without success. My goal is to achieve a result similar to the image shown here: enter image description here Here is the code snippet I've been using: < ...

htmlcssreactjsiconsstyled-components

What is the best way to upload a file without finalizing the form submission?

I have been working on a task to upload a file using ajax and php without refreshing the page when submitting. My code seems to be functioning well and alerts a valid message when I use the preg_match function. However, when I include the rest of the valid ...

phpjqueryhtmlajax

CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...

htmlcssangularformsflexbox

CSS animations using keyframes to continuously move text from left to right

I've been experimenting with text animation, and I've noticed that at the end of the animation, there is a sudden transition cut. What I'm aiming for is to have the text continuously shifting. text { animation: scrollText 5s ...

htmlcss

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

javascriptjqueryhtmljquery-selectbox