What is the best method to transfer this logo to my header without affecting the title's placement?

Question

What is the best method to transfer this logo to my header without affecting the title's placement?

I'm currently working on a website and I am trying to figure out how to position the title and logo in the header. Ideally, I want the title to be centered and the logo to be on the left.

However, I've encountered an issue where the title is causing the logo to move down.

So far, I have attempted the following solutions:

Adjusting the margins
Changing the padding
Rearranging the code
Modifying the "Display" property

What other approaches could I take?

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
}
.titlemain {
    font-size: 4vw;
    text-align: center;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

https://pastebin.com/Vvw7LtQE - CSS

<div class="header">
        <h1 class="titlemain">The Little Beauty Studio</h1>
        <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
    </div>

https://pastebin.com/0BKmtkZ8 - HTML

Any assistance would be greatly appreciated. Thank you.

html css

Answer 1

Answer №1

check out this code snippet:
css:

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
}
.titlemain {
    font-size: 4vw;
    text-align: center;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.header img {
    position: absolute;
    top: 41%;
    left: 3%;
}

html:

<div class="header">
    <h1 class="titlemain">The Little Beauty Studio</h1>
    <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>

Answer 2

check out this code snippet:
css:

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
}
.titlemain {
    font-size: 4vw;
    text-align: center;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
.header img {
    position: absolute;
    top: 41%;
    left: 3%;
}

html:

<div class="header">
    <h1 class="titlemain">The Little Beauty Studio</h1>
    <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
</div>

Answer 3

Answer №2

To solve the issue, I made adjustments by using inline display, floating the logo to the left, and tweaking the padding to properly center the text and position the logo.

.logomain {
  float: left;
  padding: 2.5px 13.5% 0 175px;
}
.titlemain {
    font-size: 4vw;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    display: inline;
}

Answer 4

To solve the issue, I made adjustments by using inline display, floating the logo to the left, and tweaking the padding to properly center the text and position the logo.

.logomain {
  float: left;
  padding: 2.5px 13.5% 0 175px;
}
.titlemain {
    font-size: 4vw;
    padding-top: 1.5%;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    display: inline;
}

Answer 5

Answer №3

If you're looking to update your HTML structure, consider following this approach:

HTML

<div class="header">
  <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
  <h1 class="titlemain">The Little Beauty Studio</h1>
</div>

CSS

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
  display: flex;
  flex-direction: row;
}

.header img,
.header h1 {
  align-self: center;
}

h1 {
  width: 100%;
  text-align: center;
}

Answer 6

If you're looking to update your HTML structure, consider following this approach:

HTML

<div class="header">
  <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
  <h1 class="titlemain">The Little Beauty Studio</h1>
</div>

CSS

.header {
  position: fixed;
  height: 100px;
  width: 100%;
  left: 0;
  top: 0;
  background-color: rgb(204, 31, 0);
  display: flex;
  flex-direction: row;
}

.header img,
.header h1 {
  align-self: center;
}

h1 {
  width: 100%;
  text-align: center;
}

Answer 7

Answer №4

If you're in the midst of website development, I highly recommend utilizing a UI framework like Bootstrap. This will streamline many tasks and provide you with a pre-defined style set to tackle common issues, ultimately enhancing your project outcomes. It's worth noting that a vast majority of commercially available HTML websites leverage Bootstrap or similar frameworks.

With that being said, let's address your current challenge with a simple solution:

<div class="header">
    <table width="100%">
        <tr>
            <td>
                <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
            </td>
            <td>
                <h1 class="titlemain">The Little Beauty Studio</h1>
            </td>
        </tr>
    </table>
</div>

Now, let's explore how Bootstrap can enhance this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="#">Logo</a>
    
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>

</body>
</html>

Take some time to conduct a thorough Google search on the subject for additional resources that can assist you further.

Best of luck! 🚀

Answer 8

If you're in the midst of website development, I highly recommend utilizing a UI framework like Bootstrap. This will streamline many tasks and provide you with a pre-defined style set to tackle common issues, ultimately enhancing your project outcomes. It's worth noting that a vast majority of commercially available HTML websites leverage Bootstrap or similar frameworks.

With that being said, let's address your current challenge with a simple solution:

<div class="header">
    <table width="100%">
        <tr>
            <td>
                <img class="logomain" src="img/lblogo.png" alt="The PHP logo">
            </td>
            <td>
                <h1 class="titlemain">The Little Beauty Studio</h1>
            </td>
        </tr>
    </table>
</div>

Now, let's explore how Bootstrap can enhance this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <!-- Brand/logo -->
    <a class="navbar-brand" href="#">Logo</a>
    
    <!-- Links -->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link 3</a>
        </li>
    </ul>
</nav>

</body>
</html>

Take some time to conduct a thorough Google search on the subject for additional resources that can assist you further.

Best of luck! 🚀

Answer 9

Answer №5

Try out this code snippet.

HTML

<header>
  <img src="https://api.akeneo.com/img/illustrations/illus--Assetcategory.svg">
  <h1>Title Area</h1>
</header>

CSS

header {
  position: absolute;
  width: 100%;
  border: 1px solid rgba(0,0,0,0.8);
  vertical-align: middle;
  line-height: 4em;
}
header img {
   width: 100px;
   float: left;
}
header h1 {
  text-align: center;
}

Click here to view the demo

Answer 10

Try out this code snippet.

HTML

<header>
  <img src="https://api.akeneo.com/img/illustrations/illus--Assetcategory.svg">
  <h1>Title Area</h1>
</header>

CSS

header {
  position: absolute;
  width: 100%;
  border: 1px solid rgba(0,0,0,0.8);
  vertical-align: middle;
  line-height: 4em;
}
header img {
   width: 100px;
   float: left;
}
header h1 {
  text-align: center;
}

Click here to view the demo

What is the best method to transfer this logo to my header without affecting the title's placement?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

PHP is failing to redirect the user to the correct index.php file

How can I use TailwindCSS in NextJS to remove the "gap" className from a component?

The Art of Cascading Style Sheets Scrolling Alignment

Fetching Information From Database Using PHP

Tips for centering content in the middle of a line

In Vuetify, components are distinct in their own unique way

Develop a dynamic animation using gradient and opacity properties

What is the best way to integrate JavaScript with my HTML command box?

404 error occurs when attempting to load SVG files in Webpack 2

Troubleshooting overflow problems when centering a UL menu with an unspecified width

How can Watir retrieve the inner html content of a <span> element?

Creating an Unordered List in GWT that Includes List Items

Updating the background of a div in HTML through the power of JavaScript

Implement two different styles within an element's style properties

Button with improperly aligned text

Update the displayed number on the input field as a German-formatted value whenever there is a change in the input, all while maintaining

Is there a way to retrieve the value of a dropped file in a file input using jQuery?

Having trouble with the clear button for text input in Javascript when using Bootstrap and adding custom CSS. Any suggestions on how to fix

The container in Bootstrap's CSS now appears when the navigation bar is present

What should I designate as the selector when customizing dialog boxes?