Stacked on top of one another are in-line block items

I've been working on this code for a while now, but I can't seem to get it right.

My goal is to create a horizontal line of navigation links with the first link aligned to the left and the rest following in sequence like a text line.

However, all my links are currently stacked on top of each other. What am I missing that's preventing them from appearing side by side?

.logo {
     font-family: 'Work Sans';
     font-weight: 100;
     font-size: 150px;
     color: #B5B5B5;
     position: absolute;
     margin-top: 25px;
     text-align: right;
}
 .logo::before {
     content: '////////////////////////////////////////////';
     font-weight: 300;
     letter-spacing: 4px;
     font-size: 25px;
     color: #ff00ff;
}
.navs a {
    box-sizing: border-box;
    display: inline;
    position: absolute;
    left: 0;
    margin: -10px 15px 0px;
    width: 135px;
    border-bottom:1px solid #333;
    padding:6px;
    font:14px 'share tech mono';
    text-transform:uppercase;
    letter-spacing:1px;
    color:#B5b5b5;
    text-align: left;

}

<div class="logo">
                    STICTION

                    <div class="navs"><a href="/">QUICK-START</a> <a href="/">RULES</a></div></div>

If you need more code to troubleshoot the issue, just let me know.

htmlcssinline

Answer №1

The root cause of the issue lies in the 'position: absolute' attribute applied to the .navs a element.

When using position: absolute;, the element is positioned precisely on the screen, causing elements with the same class to stack one above the other.

To resolve this problem:

  1. Remove the 'position: absolute' property entirely
  2. Or change it to 'position: relative'

For further details about the 'position' property, visit:

https://www.w3schools.com/cssref/pr_class_position.asp

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

Tips for resolving the Firefox display problem with input[type="file"] using CSS

After researching articles, it became clear to me that input[type="file"] displays differently across various web browsers. I am in need of a simple solution using only CSS to address this issue as I only require adjusting the width of the element. The w ...

htmlcss

Is there a way to add the date icon next to the date picker input in Bootstrap 5?

I'm struggling with getting the date icon to display after the date selection input in Bootstrap 5. It keeps showing up below it instead. https://i.sstatic.net/kD2GL.png Here is the code I am using: <form data-toggle="validator" class=& ...

htmlbootstrap-5

Using a ternary condition within the ngClick directive

Trying to implement different functionalities based on the type of device. The setting tab is clickable, and in the desktop version, clicking should redirect to a default URL. However, on mobile devices, clicking the same link should open a modal window. ...

javascriptjqueryangularjshtml

What is the best way to send data to PHP while moving objects between different div elements?

I have a situation where I have two parent divs containing dynamic children divs, and I want to enable POST requests to PHP when items are dragged from one side to the other (and vice versa). Here is the Javascript code I am using: function allowDrop( ...

javascriptphphtmldrag-and-dropdraggable

The HTML width of 100% extends beyond the boundaries of the page

Having limited experience with HTML and CSS, I'm encountering an issue with setting the width to 100%. It seems to exceed the browser borders. Can someone check out the example below? Should I slightly decrease the width percentage, or could there be ...

htmlcsswidth

How to make divs occupy the entire space of a parent div?

I've been scouring the website for a solution, but nothing I've found has been helpful. I'm attempting to create a grid within a containing div where a default (and eventually user-specified) number of divs will fill up the space. I'm t ...

javascriptjquerycss

Is there a way for me to retrieve the price using the xpath?

I have this code snippet currently: CurrentPrice=driver.find_element_by_xpath('/html/body/div[2]/div[4]/div[2]/header/div/div[3]/div[1]/div/div/div/div[1]/div[1]').get_attribute("title") This is the price data I am attempting to extrac ...

pythonhtmlweb-scraping

Accelerate Image Preloading速

I am currently in the process of creating a website that features divs with background images. Although I am new to JavaScript, I am eager to learn more about it. My main goal is to preload these images so that visitors do not encounter any delays or bla ...

javascriptjqueryhtmlcss

Changing class in jQuery ignores CSS style

I have a id="header" div that initially has css rule: padding: 25px 0;. I want to decrease the padding of this div when scrolling down the page. $(document).ready(function() { var headerID = $("#header"); $(this).scroll(function() { if (!$(this).s ...

jqueryhtmlcss

After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html> <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link href ...

htmlcss

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

Utilizing JSON data, I have successfully generated HTML content representing Questions and Multiple Choice Questions. My next goal is to capture user responses in an array after the submit button is clicked. This involves storing which radio button the use ...

javascriptjqueryhtmlcss

When using jQuery to focus on an input element, the cursor fails to show up

Looking to enhance user experience by focusing on an input element upon clicking a specific div. The HTML structure being used is as follows: <div class="placeholder_input"> <input type="text" id="username" maxlength="100" /> <div ...

javascripthtmljqueryfocustext-cursor

AngularJS - How to loop through a div to display all items

I am working with AngularJS to create a repeatable shopping cart items feature. Below is a sample JSON data structure: [{"src": "img/T1.jpg", "itemname": "solid green cotton tshirt", "style": "MS13KT1906", "colour": "Blue", "size": "s", "qty": "1", "price ...

htmlangularjs

Function that activates traffic lights

Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this f ...

javascripthtmlcss

Having trouble getting @media queries to work effectively across various screen sizes

Currently, I am using Sass with Bootstrap and facing some challenges when implementing different media queries. Despite most discussions revolving around CSS problems only, I am uncertain of the source of my issue and how to effectively address it. The sty ...

htmlcsssassbootstrap-4

Adding border color and width to an ion-avatar element can be achieved by using CSS properties

I've been struggling to add a border color and width to an ion-avatar element in Ionic 4. I've attempted to use various CSS3 code snippets, but nothing seems to work. This is what I have tried: .ion-avatar img{ width: 90px !important; h ...

cssionic-frameworkionic4

Utilizing clip-path polygons for effective styling on Firefox and iOS

I have been working on a plugin to create animated modal boxes by utilizing the clip-path property. However, I have encountered an issue where this code only seems to work in Chrome. You can view the codepen demo here. Unfortunately, it appears that Firef ...

javascriptcsssvgclip-path

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Issues encountered with integrating external jQuery/JavaScript functions with Wordpress child theme template

After creating a custom template in my WordPress child theme, I added a link to the Bootstrap v3.0.3 .js file stored on my site. While the popup modal is functioning properly, the jQuery tabs seem to be having some issues. Although they are being display ...

javascriptjquerycsswordpress

Transfer a file from the file:///var/mobile/Applications/ directory to an accessible location for reading in Cordova/PhoneGap

I have a unique 'whitelabel' app that customizes itself for each client by downloading image files from a configuration server. However, I am facing an issue where the images are not displayed and instead showing a "Not allowed to load local reso ...

javascripthtmlangularjsbrowsercordova