What is the best way to move the logo higher and ensure that the <hr> is aligned perfectly with the img

Is there a way to make the logo float up and align with the navigation bar? It seems to be pushed down for some unknown reason. I have tried all the padding tricks that I know, but I also want the image to close the gap on top with the <hr>. So essentially, I want the <hr> right on top of the image.

https://i.sstatic.net/wPTBW.jpg

<body>
  <!-- Here is the header-->
  <header id="Home">
      <div class="nav-bar">
        <div class="funBus-logo"><a href="#">Fun Bus</a></div> 
            <nav>
        <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Blog</a>
          <a href="#">Contact</a>
              </nav>
        </div>
        <hr>
      <div class="image"><img src="/img/fun-bus.jpg" alt="fun-bus"></div>
    </header>
htmlcss

Answer №1

If you're looking to add some creativity to your borders, try using the border-image property

Also, remember to reset the margins of the hr element to 0 as it may have default margin settings.

hr {
  color: red;
}

.hr-wihout-margin {
  margin: 0;
}
<!-- This is a sample header-->
<header id="Home">
    <div class="nav-bar">
        <div class="funBus-logo"><a href="#">Fun Bus</a></div>
        <nav>
            <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Blog</a>
            <a href="#">Contact</a>
        </nav>
    </div>
    
    <br />
    <hr class="hr-wihout-margin" />
    
    <div class="image">
        <img width="450" src="https://i.sstatic.net/wPTBW.jpg" alt="fun-bus">
    </div>
</header>

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

php Use a one-liner to echo either string1 or string2

Take a look at the code below <a href="<?='http://help.mysite.com/' or 'http://help.mysite.net/';?>">Help</a> Is there a way to display the server URL with two options? I tried searching on Google but couldn't ...

phphtmlstringrandomecho

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

htmlcssangulartypescript

Ways to incorporate a reverse transition effect

I am encountering an issue with a sliding effect on a div. When it has a class hddn, the overlay will have right: -100% from the viewport. However, when the hddn class is removed, it should return to the viewport with right: 0. How can I animate this movem ...

htmlcss

Using XSLT to format HTML tables for printing

In my current project, I am developing an XSLT that retrieves a list of items from an XML file and generates an HTML table for each item. The issue I am facing is that when I attempt to print the document, the tables at the end of the page get cut off and ...

htmlcssxmlxsltxslt-1.0

Looking to optimize iframing for various screen dimensions

Apologies for the basic question. I am looking for a way to make my iframe responsive on all screen sizes, adjusting both height and width accordingly. Could anyone provide guidance? The current iframe code I have is as follows: <iframe name="ROL_ ...

javascripthtmlcssiframe

Elements within div not aligning in a single row

I am currently working on a React application where I need to align 2 links and a button in a row under a div. However, only the links are aligning in a row, not the form fields. Below is my code snippet: <div className='header'> < ...

htmlcssreactjsrow

Removing margins in Bootstrap 5: A step-by-step guide

Currently facing an issue with removing margins in bootstrap. I am looking to set up two graphics that indicate the under construction status of the page - one for desktop and one for mobile devices. This is what I have tried so far: <!DOCTYPE html> ...

cssbackgroundbootstrap-5paddingmargin

Updating the div#content dynamically with Jquery without the need to refresh the page

After spending countless hours on this forum, I have yet to find a solution that perfectly fits my needs, so I will pose my question. Here is the gist of what I am attempting to accomplish: When the page loads, the default page fades in and displays. Wh ...

javascriptphpjqueryhtmlajax

Conceal the entire <tr> tag if the child's child is present

My table situation is as follows: $('td:contains("label label-primary")').parent().hide(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tbody> <tr> <td> < ...

javascriptjqueryhtmltampermonkey

Produced inputs and preset values

I have a question regarding the use of generated input elements in my App's form. I want to keep it as simple as possible, which is why I am using native form reset for these elements. It appears that the 'default value' becomes bound to th ...

javascriptjqueryhtml

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jqueryhtmlcss

Swapping IMG depending on breakpoint in Material-UI

I understand how to adjust styling with breakpoints for various properties like height, width, and font size. However, I am struggling to find examples of switching images based on screen sizes. My goal is to replace an image with a different one dependin ...

cssreactjsmaterial-uiresponsive-images

The toggle feature of the Bootstrap responsive navbar is not functioning properly

I am currently implementing Twitter Bootstrap in a Rails project, but I'm encountering issues with the responsive navbar. When I resize the screen, the menu toggle button appears along with the navbar options open below it. Upon further shrinking, the ...

jquerycsstwitter-bootstrapnavbar

Enhance user experience with Bootstrap by automatically adding a frame around a card upon clicking

Hello everyone! I am a beginner in the Angular/Web Development world and I am currently working on improving my HTML/CSS skills. While using Bootstrap in my Angular project, I ran into a challenge that I couldn't figure out on my own. I have implement ...

javascripthtmlcssangularbootstrap-5

The total sum displayed after decoding JSON always varies in count

I am a beginner when it comes to using APIs and I am facing an issue with counting the data and displaying it in an HTML view. When I use count($data) to count it in the HTML view, the result is different from the actual data received from the API. Below a ...

phphtmljsoncodeigniter

Show information according to the user's input

I am working on a page layout that includes two columns: Side and Middle. Within the side column, there is a form containing a date input and a button labeled "View Summary Report." Upon selecting a date and clicking the button, the goal is to retrieve d ...

javascriptphphtml

The spacing in MUI Grid results in the grid having extra left padding

I'm having trouble creating a grid with a group of elements, specifically when I try to add spacing between them. Take a look at the image below with spacing={0} set on the Grid container: No spacing in Grid container Now, here's what happens wh ...

cssreactjsmaterial-ui

Why does using rgba color with an alpha value cause my div to become see-through?

I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...

javascriptcss

Whenever my code is used within Google Sites, it triggers the opening of a new and empty tab

When using this code inside an HTML box in Google Sites, a problem arises. It seems to work perfectly fine in Internet Explorer and Chrome when saved to an HTML file. However, within Google Sites, it unexpectedly opens a new tab with no data. The code st ...

javascriptjqueryhtml