CODEWITHSUNDEEP
htmlcssimage
cashxx
cashxx

Reputation: 15

HTML and CSS Help getting Logo in top blue bar

Trying to edit the template for a helpdesk and want to add our logo img src and center it in the blue bar at the top, but unable to figure it out. Can someone help me?

Here is the default code:

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body style='font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";line-height: 1.15;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin: 0;font-size: 15px;font-weight: 400;line-height: 1.5;color: #212529;text-align: left;background-color: #f8f9fa !important;padding: 10px 0 88px 0;'>
    <div style='padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;width: 700px;'>
      <div style='position: relative;display: -ms-flexbox;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 1px solid rgba(0, 0, 0, 0.125);border-radius: 0.25rem;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;width: 100%;border-top: 15px solid #005984;'>
        <div style='x-ms-flex: 1 1 auto;xflex: 1 1 auto;padding: 1.25rem;background-color:#fff;'>
          {{content}}
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Views: 363

Answers (2)

DDHost
DDHost

Reputation: 45

If I understood you correctly something like that ?

            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
                    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
                line-height: 1.15;
                -webkit-text-size-adjust: 100%;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                margin: 0;
                font-size: 15px;
                font-weight: 400;
                line-height: 1.5;
                color: #212529;
                text-align: left;
                background-color: #f8f9fa !important;
            }

            .container {
                margin: 10px auto;
                width: 700px;

                display: flex;
                flex-flow: row wrap;

                box-sizing: border-box;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            }

            .container .topbar {
                display: flex;

                flex: 1 1 100%;
                padding: 15px;

                justify-content: center;

                background-color: #005984;
                border-radius: 0.25rem 0.25rem 0 0;
                border-bottom: 3px solid rgba(0, 0, 0, 0.1);
            }

            .container .content {
                display: block;

                flex: 1 1 100%;
                padding: 1.25rem;
                background-color: #fff;
            }
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    </head>
    <body>
        <div class="container">
            <div class="topbar">
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAkUlEQVRIS91V0QoAIQjL///oq4MzwtpNoYjysczNzUrS4pDF9dM+gKfE252U+OuS5cHD7KCCsjwqESrACiuBfQDK0DtlyCvqwXQAy1yZRdehB9FCKL8DQJpHO6iFv/tTPYiayrxRYhcCIM29ktgb3klkAaKP3cUASON2fEf+MAndr2n7+YxAEUEKwKaH7Z8PkAExm6QZQlT61QAAAABJRU5ErkJggg=="
                />
            </div>
            <div class="content">{{content}}</div>
        </div>
    </body>
</html>

UPDATE:

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    </head>
    <body>
    <style>
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: left;
        background-color: #f8f9fa !important;
    }

    .container {
        margin: 10px auto;
        width: 700px;

        display: flex;
        flex-flow: row wrap;

        box-sizing: border-box;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .container .topbar {
        display: flex;

        flex: 1 1 100%;
        padding: 15px;

        justify-content: center;

        background-color: #005984;
        border-radius: 0.25rem 0.25rem 0 0;
        border-bottom: 3px solid rgba(0, 0, 0, 0.1);
    }

    .container .content {
        display: block;

        flex: 1 1 100%;
        padding: 1.25rem;
        background-color: #fff;
    }
    </style>
        <div class="container">
            <div class="topbar">
                <img
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAkUlEQVRIS91V0QoAIQjL///oq4MzwtpNoYjysczNzUrS4pDF9dM+gKfE252U+OuS5cHD7KCCsjwqESrACiuBfQDK0DtlyCvqwXQAy1yZRdehB9FCKL8DQJpHO6iFv/tTPYiayrxRYhcCIM29ktgb3klkAaKP3cUASON2fEf+MAndr2n7+YxAEUEKwKaH7Z8PkAExm6QZQlT61QAAAABJRU5ErkJggg=="
                />
            </div>
            <div class="content">{{content}}</div>
        </div>
    </body>
</html>

Upvotes: 1

DCR
DCR

Reputation: 15698

flex is about the easiest way to do this.

#container{
    display:flex;
    justify-content:center;
    background-color:lightblue;
}


#container2{
margin-top: 20px;
background-color:lightblue;
text-align:center;
}

#container2 img{
  vertical-align:middle;
}
<div id='container'>
    <img src='https://via.placeholder.com/25x25'>
</div>


<div id='container2'>
    <img src='https://via.placeholder.com/25x25'>
</div>

Upvotes: 1

Related Questions