Placing the image and list on separate lines for better organization

I am attempting to create a header and a footer for the top portion of my website. The header will feature a .svg logo, while the footer will be a list. I am having trouble separating them. How can I ensure that each part appears on its own line?

ul {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
  display: block;
}

li {
  display: inline-block;
  margin: 0px auto;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

li span {
  position: absolute;
  top: 0.5px;
  /*background: orange;*/
  width: 100%;
  height: 2.5px;
  opacity: 0
}

li a {
  display: inline-block;
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border: 2px;
  vertical-align: -13px;
}

li:hover span {
  animation: pulse 1s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: translateY(5px)
  }
  100% {
    opacity: 1;
  }
}

hr {
  margin: 10px;
  border-width: 1px;
}
<header>
  <span style="position: unset"><a><img align="right" src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%" alt="NEWS"></a></span>
</header>
<br>
<nav>
  <ul>
    <li><span style="background: blue"></span><a href="#shopping">A</a></li>
    <li><span style="background: red"></span><a href="#wanted">B</a></li>
    <li><span style="background: green"></span><a href="#games">C</a></li>
    <li><span style="background: brown;"></span><a href="#TECH">D</a></li>
    <li><a href="#tourism" style="border-top-color: yellow;">E</a></li>
    <li><span style="background: burlywood;"></span><a href="#health">F</a></li>
    <li><span style="background: cyan;"></span><span></span><a href="#food" ">G</a></li>
    <li><span style="background: magenta; "></span><a href="#fashion ">H</a></li>
    <li><span style="background: gray; "></span><a href="#culture ">I</a></li>
    <li><span style="background: firebrick; "></span><a href="#car ">J</a></li>
    <li><span style="background: olivedrab; "></span><a href="#TV ">K</a></li>
    <li><span style="background: silver; "></span><a href="#business ">L</a></li>
    <li><span style="background: lightblue; "></span><a href="#sport ">M</a></li>
    <li><span style="background: khaki; "></span><a href="#news ">N</a></li>
        </ul>
</nav>

htmlcsssvg

Answer №1

Make sure to add the class .clear to any "< a >" tag that includes an image.

.clear {
    content: '';
    display: block;
    clear: both;
}

Answer №2

Using inline CSS to float the image (align: right) is no longer recommended as pointed out by hungerstar in the comments. You can replace this deprecated property with text-align to position the image on the right.

Example:

ul {
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  overflow: hidden;
  background-color: #333333;
  display: block;
}

li {
  display: inline-block;
  margin: 0px auto;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

li span {
  position: absolute;
  top: 0.5px;
  width: 100%;
  height: 2.5px;
  opacity: 0
}

li a {
  display: inline-block;
  background-color: #333333;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  border: 2px;
  vertical-align: -13px;
}

li:hover span {
  animation: pulse 1s;
  animation-fill-mode: forwards;
}

@keyframes pulse {
  0% {
    opacity: 0;
    transform: translateY(5px)
  }
  100% {
    opacity: 1;
  }
}

hr {
  margin: 10px;
  border-width: 1px;
}

header {
  text-align: right;
}
<header>
  <span style="position: unset"><a><img src="C:\Users\David\Desktop\WebDevelopmentTest\images\NotWalla\logo.svg" style="height: 25%; width: 25%" alt="NEWS"></a></span>
</header>
<nav>
  <ul>
    <li><span style="background: blue"></span><a href="#shopping">A</a></li>
    <li><span style="background: red"></span><a href="#wanted">B</a></li>
    <li><span style="background: green"></span><a href="#games">C</a></li>
    <li><span style="background: brown;"></span><a href="#TECH">D</a></li>
    <li><a href="#tourism" style="border-top-color: yellow;">E</a></li>
    <li><span style="background: burlywood;"></span><a href="#health">F</a></li>
    <li><span style="background: cyan;"></span><span></span><a href="#food" ">G</a></li>
    <li><span style="background: magenta; "></span><a href="#fashion ">H</a></li>
    <li><span style="background: gray; "></span><a href="#culture ">I</a></li>
    <li><span style="background: firebrick; "></span><a href="#car ">J</a></li>
    <li><span style="background: olivedrab; "></span><a href="#TV ">K</a></li>
    <li><span style="background: silver; "></span><a href="#business ">L</a></li>
    <li><span style="background: lightblue; "></span><a href="#sport ">M</a></li>
    <li><span style="background: khaki; "></span><a href="#news ">N</a></li>
        </ul>
</nav>

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

ensure placement within the div

I have a back-to-top arrow image that is fixed on the page when clicked. I want this arrow to be positioned within its parent div. Below is the code snippet: .relative { position: relative; } .up { float: right; max-width: 3%; display: block; ...

javascriptjquerycss

Retrieving a PHP script from within a DIV element

I am seeking assistance to successfully load a PHP file from a DIV call. Below is the code I have used: <html> <head> </head> <body> <script class="code" type="text/javascript"> $("#LoadPHP").load("fb_marketing ...

phpjavascripthtml

Tips for adding additional text within a span element correctly

Looking for suggestions on how to create a post box with '#' tag feature using HTML. Here is the current code I have: $("#textinput").click(function() { setCursor("textinput", 0); $(this).css("opacity", "0.5"); }) // Rest of the JavaScr ...

javascripthtmljquery

How can you stop text in a textarea from spilling over into the padding?

When I add padding to a textarea element and type more than four lines of content, the content overflows into the padding. Is there a way to prevent this? I have looked at the suggestions in this thread and this one (specifically for google-chrome), but t ...

htmlcss

Which is the ideal library for creating this specific chart - shown in the image in the description - in reactjs?

After numerous unsuccessful attempts, I have finally decided to seek help in creating this chart. I would highly appreciate any assistance that can be provided. https://i.sstatic.net/jtQ3I.jpg ...

cssreactjscanvashtml5-canvaschart.js

Only the circle's center reveals the background color

I am trying to create a design with a yellow background and a circle that has a grey border. I want everything outside the circle to be white, while the inside of the circle should reveal the yellow background from the div below it. I am looking for a CSS ...

jquerycss

Is it possible to incorporate button classes from the <a> tag into a JQuery fade in/fade out function?

My jQuery image thumb Slider features thumb buttons that link to different div elements. When a user clicks on a thumb button, I want the associated div to smoothly fade in, replacing the previous one. The goal is to have a seamless transition between the ...

javascriptjqueryhtmlcss

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

Currently, I am utilizing HTML5 data attributes to save information such as the targeted DOM element and to initialize events using jQuery's delegation method. An example of this would be: <a href="#" data-target="#target" data-action="/update"> ...

javascriptjqueryhtmlstyles

Unable to retrieve cursor in Internet Explorer when focusing on input fields within a modal

One problem I'm facing is with a modal pop-up that contains various controls such as text areas, inputs, dropdowns, and date pickers. When trying to type in the text box or select a date, the cursor is not visible (though the focus styles are applied) ...

htmlinternet-explorertypescursor

looking to retrieve information exclusively from the HTML document elements

Can you help me extract the text from HTML elements such as <div>some text</div>? I only want "some text" in the output without any angle brackets. For example: LineNo:1<HTML> LineNo:2<HEAD> LineNo:3<TITLE>Your Title Here< ...

javahtmlstringdomtext-extraction

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

javascriptjqueryhtmlcssonclick

What could be the reason behind the misalignment of one of the pictures I uploaded?

I've been looking to include some buttons on the website I'm currently developing, each one leading to a different page. I decided to use images and insert hyperlinks to them, aligning them with floats. Although, it seems that something is off wi ...

htmlcss

working with three.js, adding child elements to a div, and dynamically resizing elements

I'm having an issue resizing the canvas created by three.js. When I uncomment the 6 lines related to three.js in the wrapResize2 function, the cube disappears. Upon checking the Chrome console, it appears that the appended canvas element cannot be fo ...

svgthree.jsresizegsap

Designing a typical ReactJS project

I initialized a new react project using the command npx create-react-app my-app. When I checked the src folder of my project, I noticed both App.css and index.css files. However, none of these seem to be affecting the styling of my index.js file. Could s ...

cssreactjs

AngularJS: Utilizing bold text to enhance the separation of concerns between controllers and templates

In my AngularJS version 1 application with Ecmascript 6, I have a requirement to display a string where one part is in normal weight and the other part is bold. For instance, consider the following scenarios: Will start now Will start in 6 minutes Will ...

javascripthtmlangularjsecmascript-6

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

javascripthtml

Iterate over an array to locate the position of a user-entered value, and subsequently update the element at that position within a different array

I'm currently working on a Hangman game with a unique twist using JS/jQuery. I've managed to successfully identify the index of the word being guessed based on user input, but I'm struggling with replacing the blank underscoreArray with the ...

javascriptjqueryhtmlarrays

Deploying a React App to Github Pages Results in a Blank Screen

After successfully uploading a simple react app onto GitHub pages using gh-pages, I attempted to import the Shards dashboard project (https://github.com/DesignRevision/shards-dashboard-react) onto my GitHub page. Unfortunately, all I see is a blank page. ...

javascripthtmlreactjsgithubgithub-pages

Can you please explain to me how to target a specific element by its ID in the DOM and then move on to the next element with the same ID using jQuery

During the event handling process, a scenario arises where two div elements end up having identical IDs within the DOM structure. While using JQuery, my objective is to specifically target the second occurrence of the div with the aforementioned ID in the ...

javascriptjqueryhtmlcssdom

Arrange the HTML DOM elements in the order of their appearance in a list

Is it possible to rearrange the order of <div> and its elements based on database information? For example, consider the following HTML structure: <div id="container"> <div id="A"> Form elements for A</div> <div id="B"& ...

javascriptjqueryhtmlangularjs