The HTML Search Bar is Misaligned

once more.

I seem to be having trouble with my search bar, as it is not appearing in the position or size that I coded for it.

The search bar should look like the one shown in this link: https://www.w3schools.com/howto/howto_css_searchbar.asp

However, after implementing the code, the size and position of the search bar are different from what I intended. The image below illustrates the issue: https://i.sstatic.net/lBLOz.png

Your assistance would be greatly appreciated, as I am still learning these programming languages.

<!-- ---------------------------------------START OF CSS -------------------------------- --><style>
/*----------------------START OF CSS PAGE BACKGROUND-----------------*/

body {
  background-color: white;
  font-size: 20px;
  margin: 0;
}

...

htmlcss

Answer №1

After reviewing your code, I noticed an issue with the indexing that was affecting the elements in the Nav bar. I made some adjustments to ensure proper alignment of the search bar on the right side by modifying the CSS for the Nav bar.

I updated the CSS properties to improve the layout and positioning of the Nav bar elements, making it more visually appealing and user-friendly.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="footer.php" />

    <style>
      
    /*----------------------START OF CSS PAGE BACKGROUND-----------------*/
    
    body {
      background-color: white;
      font-size: 20px;
      margin: 0;
    }
    /*----------------------END OF CSS PAGE BACKGROUND-----------------*/
    /*----------------------START OF CSS STICKY NAVBAR AND DROPDOWN BUTTONS-----------------*/
    
    .nav {
      display: flex;
      margin: 0;
      padding: 0;
      /* overflow: hidden; */
      background-color: #38444d;
      min-height: 45px;
      position: -webkit-sticky;
      /*Safari */
      position: sticky;
      top: 0;

      /* Additional Changes */
      justify-content: space-between;
      align-items: center;
      padding: 0 2%;
      /* Additional Changes */

    }

    .nav ul {
      display: flex;
      list-style-type: none;



    }
    
    li {
      float: center;

    }
    
    li a,
    .dropbtn {
      display: inline-block;
      color: white;
      text-align: left;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    li a:hover,
    .dropdown:hover .dropbtn {
      background-color: red;
    }
    
    li.dropdown {
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .dropdown-content a:hover {
      background-color: #dcdcdc;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    /* Style the search box inside the navigation bar */
    
    .topnav .search-container {
      float: right;
    }
    
    .topnav input[type=text] {
      padding: 8px;
      margin-top: 10px;
      font-size: 17px;
      border: none;
    }

  
  
    
    .topnav .search-container button {
      float: right;
      padding: 6px 10px;
      margin-top: 8px;
      margin-right: 16px;
      background: #ddd;
      font-size: 17px;
      border: none;
      cursor: pointer;
    }
    
    .topnav .search-container button:hover {
      background: #ccc;
    }
    
    @media screen and (max-width: 600px) {
      .topnav .search-container {
        float: none;
      }
      .topnav a,
      .topnav input[type=text],
      .topnav .search-container button {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
      }
      .topnav input[type=text] {
        border: 2px solid #ccc;
      }
    }
    /*----------------------END OF CSS STICKY NAVBAR AND DROPDOWN BUTTONS-----------------*/
    /*----------------------------------------START OF CSS FOOTER----------------------------*/
    /*footer basic*/
    
    footer {
      position: absolute;
      left: 0;
      right: 0;
      background: #111;
      height: auto;
      margin: 0px;
      padding-top: 0px;
      color: #fff;
    }
    
    .footer-content {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
    }
    /*footer title*/
    
    .footer-content h3 {
      font-size: 2.1rem;
      font-weight: 500;
      text-transform: capitalize;
      line-height: 3rem;
    }
    
    .footer-content p {
      max-width: 500px;
      margin: 10px auto;
      line-height: 28px;
      font-size: 14px;
      color: #cacdd2;
    }
    /*footer social media icons */
    
    .socials {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1rem 0 3rem 0;
      background: transparent;
    }
    
    .socials li {
      margin: 0 10px;
    }
    
    .socials a {
      text-decoration: none;
      color: #fff;
      border: 1.1px solid white;
      padding: 5px;
      border-radius: 50%;
    }
    
    .socials a i {
      font-size: 1.1rem;
      width: 20px;
      transition: color .4s ease;
    }
    
    .socials a:hover i {
      color: aqua;
    }
    /*footer menu */
    
    .footer-menu {
      margin: 0px;
      padding-bottom: 5px;
    }
    
    .footer-menu ul {
      display: flex;
      background: transparent;
      align-items: center;
    }
    
    .footer-menu ul li {
      padding-right: 10px;
      display: block;
    }
    
    .footer-menu ul li a {
      color: #cfd2d6;
      border: 1.3px solid white;
      padding: 6px 15px;
      border-radius: 50px;
      text-decoration: none;
    }
    
    .footer-menu ul li a:hover {
      color: #27bcda;
    }
    /*footer credit section*/

    /* Footer Styling Continues... */
  </head>

  <body>
   <!-- HTML Content Goes Here -->
  </body>
</html>

Answer №2

I find it odd that you are nesting a div inside a ul tag. It's usually not recommended to do so. However, I have made the necessary adjustments by introducing a new div to properly wrap the ul menu and form component. Please take a look at the updated structure.

   <!DOCTYPE html>
    <html>

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="footer.php">

      <!-- ---------------------------------------START OF CSS -------------------------------- -->
      <style>
        /*----------------------START OF CSS PAGE BACKGROUND-----------------*/
        
        body {
          background-color: white;
          font-size: 20px;
          margin: 0;
        }
        /*-----------Omitted for brevity------------*/
      </style>
      <!-- ---------------------------------------END OF CSS -------------------------------- -->

      <!-- -------------------------------------START OF HTML ------------------------------- -->
    </head>

    <body>
      <div class="header">
        <h2>Scroll Down</h2>
        <p>Scroll down to see the sticky effect.</p>
      </div>

      <div class="topnav">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li class="dropdown">
          <a href="javascript:void(1)" class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></a>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </li>
        
      </ul>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
        </div>

      <h3>Sticky Navigation Bar Example</h3>
      <p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
      <p>Some text to enable scrolling. </p>
      <p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
      <p>Some text to enable scrolling. </p>
      
      <div class="clear"></div>

      <div class="footer">
        <footer>
          <div class="footer-content">
            <h3>Foolish Developer</h3>
            <p>Raj Template is a blog website where you will find great tutorials on web design and development. Each tutorial is detailed step by step with the required source code.</p>
            <ul class="socials">
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
              <li><a href="#"><i class="fa fa-youtube"></i></a></li>
            </ul>
            <div class="footer-menu">
              <ul class="f-menu">
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">Blog</a></li>
              </ul>
            </div>
          </div>
          <div class="footer-bottom">
            <p>copyright &copy; <a href="#">Foolish Developer</a> </p>
          </div>

        </footer>
      </div>

    </body>

    </html>

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

The Material UI - makeStyles function is having difficulties generating the intended styles

After implementing withStyles and makeStyles from material-UI, I encountered an issue where the CSS styling was not as expected, despite the correct class name being returned. For example, consider the following component: import React, { Component } fro ...

cssreactjsmaterial-ui

Fixing a scrolling element within a div located below the screen is my goal, ensuring it remains fixed in place as the user scrolls

I'm facing a challenge that I need help with: My HTML/CSS layout currently looks like this: Screenshot of how my CSS/HTML appears on the screen upon page load: As I scroll down, I encounter a green element: While scrolling down -> Upon further s ...

javascriptjqueryhtmlscrollscreen

The JQuery code is failing to remove the dynamically added field when the delete icon is clicked

Information: I am currently navigating the world of programming and attempting to build a To-Do List feature. When the create list button is clicked, a dynamically generated div with the class 'wrap' is created. This div contains two nested divs: ...

jqueryhtmlcss

Modifying the default class styles from Bootstrap based on the HTML displayed in Devtools

I am attempting to customize the styles of my application using bootstrap. Upon inspecting the HTML in Chrome Devtools, I found the following rendered code: <div data-v-256a5f3d="" data-v-7bf4ea52="" class="row bg-gray-200 bord ...

htmlcssbootstrap-4bootstrap-vue

Use jQuery to swap out images and witness the image loading in real time

Currently, I am using jQuery to dynamically change images by using the code $('img').attr('src','newUrl'); However, whenever I do this, the image is only displayed once it has completely loaded. Due to my slow internet conne ...

javascriptjqueryhtmlimage

How can I invoke a PHP script using AJAX?

I am currently working on implementing a feature that involves multiple tables where users can move table rows between the tables. I want to use ajax to call a php script that will update the database with the new values, specifically assigning a new paren ...

javascriptphpjqueryhtmlajax

CSS: Creating a dynamic layout to center the card on screens of all sizes

My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen? @import url("https://fonts.googleapis.com/cs ...

javascripthtmlcsscss-selectors

I discovered that the chips' content was in need of updating once I selected the content from the menu

I want to create a chips feature similar to Google Flights where clicking on the chips opens a menu. Currently, when I click on the chips, the menu opens up and 'Sports' is displayed as a chip. However, I want to update the 'Sports' tex ...

javascripthtmlreactjsreduxmaterial-ui

Switch between different content sections using a button in a Bootstrap tab-pane

Here is the code snippet I am currently working with: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s ...

htmlcsstwitter-bootstrapmenu

The DXTreeview feature in AngularJS restricts the expansion of branches

My MVC5 project contains an Index.aspx file, but when I run it in VS2013, only the top branches of the tree are visible without any option to expand them. https://i.sstatic.net/0FWUB.png Resharper confirms that my references are correct. Being new to HT ...

angularjshtmlgoogle-chromeasp.net-mvc-5devextreme

Is there a way to turn off step navigation in bootstrap?

Displayed below is a visual representation of the bootstrap step navigation component. Presently, there is an unseen 'next' button located at the bottom of the page. When this 'next' button is pressed, it transitions from 'step-1 ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to sort out the <li> elements within a <ul> that has a specific id

<ul class="apple" id="A"> <li> <li> ..... ...... ...... </ul> <ul class="apple" id="C"> <li> <li> ...

javascriptjquerycssfreemarker

In order to achieve a sliding effect for the second div, it can be programmed to

Currently, I am working on implementing hide and show functionality in my project. However, I have come across a bug in my code that I need assistance with. When clicking on the first div element, the content opens from bottom to top instead of the desired ...

javascripthtmljquerycssjquery-events

Modifying the order of Vuetify CSS in webpack build process

While developing a web app using Vue (3.1.3) and Vuetify (1.3.8), everything appeared to be working fine initially. However, when I proceeded with the production build, I noticed that Vue was somehow changing the order of CSS. The issue specifically revol ...

javascriptcssvue.jsvuetify.jsvuetify-1

The website was designed to only allow scrolling on desktop devices, not on mobile devices

I noticed that the website is not scrolling properly on mobile devices, specifically when viewed on a Samsung Galaxy S4 Mini. Does anyone have suggestions on how to resolve this issue? ...

jquerycssmobilescroll

What steps should I take in order to modify the color of my header background?

I'm facing an issue with changing the background color of the header along the navigation menu using HTML/CSS. It seems that my current code is not working as expected. I believe that the header selector should contain my topnav section, but changing ...

htmlcss

Leveraging Enums in Angular 8 HTML template for conditional rendering with *ngIf

Is there a way to implement Enums in an Angular 8 template? component.ts import { Component } from '@angular/core'; import { SomeEnum } from './global'; @Component({ selector: 'my-app', templateUrl: './app.componen ...

htmlangulartypescriptenums

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?

Looking for assistance with my vertical carousel project. Is there a way to create a vertical carousel in bootstrap 5 with the previous image fixed? I found a slider on this website: zara.com/jp/en/ I want to maintain the previous image in a fixed posit ...

javascripthtmlcssbootstrap-5

Tips on dynamically changing the position of a div: Utilize absolute positioning within a for loop

Is there a way to extract the position x value of my div and store it in a variable? How do we then iterate over it within a for loop? <div id="object"></div> <style> #object{ position:absolute; width:10px; height:10px; ...

javascripthtmlcss

Is it possible to continuously loop and gradually fade the same image URL using JavaScript?

I have a dynamic image stored on my web server at example.com/webcam.jpg that is continuously updated by the server. My goal is to display this image on a static HTML page with a looping effect that smoothly transitions from the previous image to the upda ...

javascriptjqueryhtmlajaxxmlhttprequest