Неправильно отображается картинка

Question

Я пытаюсь создать мало-мальски нормальную плашку, но мало того что при не моем формате экрана сливаются слова, так еще и картинка не отображается. Она лежит в той же папке , что и index.html. Если открыть тупо html файл, то картинка появляется, но я то запускаю станицу через локальный серв на python Flask

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" lang="ru" content="Основные блюда и режимы приема пищи для больных диабетом второго типа">
        <meta name="keywords" content="диабет,прием,пища,больные,блюда">
        <meta name="robot", content="index,follow">
        <meta name="application-name" content="FlaskApp">
        <link rel="stylesheet" type="text/css" href="{{ url_for( 'static', filename='style1.css')}}">
        <title>FoodSearch</title>
        <style>
        H1 {
                color: #000000;
                font-size: 70%;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }        
        p {
                margin-left: 4%;
                margin-top: 3%;
                color: #000000;
                font-size: 110%;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        .query {
                margin-left:1.4%;
                margin-top: 0.7%;
                width: 90%;
                height: 70%; 
        }
        .submit {
                height: 70%;
        }
        .top {
                font-size: 120%;
        }
        a {
                text-decoration: none;
                color: #ffffff; /* Цвет обычной ссылки */
                padding: 2px; /* Поля вокруг текста */
        }
        a:visited {
                text-decoration: none;
                color: #ffffff; /* Цвет посещенной ссылки */
        }
        a:hover {
                text-decoration: none; /* Убираем подчеркивание */
                opacity: 1;
                color: #d3d3d3; /* Цвет ссылки при наведении на нее курсора мыши */  
        } 
        </style>
    </head>
    <body>
        <div style='position: absolute; left:0%; top:0%; width: 100%; height: 8%; background-color: RGB(36,41,46);'>
                <img style="position: absolute; left:3%; top:28%;" src="https://drive.google.com/file/d/1Fm2SXwMXD5CuE1gNrVOAsqUxA6k9-Mdm/view?usp=sharing">  
                <a class='top' style="position: absolute; left:7%; top:28%" href="http://127.0.0.1:5000/login">LOG IN</a>
                <a class='top' style="position: absolute; left:12%; top:28%" href="http://127.0.0.1:5000/signup">SIGN UP</a>
                <a class='top' style="position: absolute; left:17.4%; top:28%" href="http://127.0.0.1:5000/">DASHBOARD</a>
        </div>

Answer 1

Чтобы текст не сливался:

<div style="padding: 4%;position: absolute;left:0%;top:0%;width: 100%;background-color: RGB(36,41,46);">
            <img style="/* position: absolute; *//* left:3%; */top:28%;" src="">  
            <a class="top" style="" href="http://127.0.0.1:5000/login">LOG IN</a>
            <a class="top" style="" href="http://127.0.0.1:5000/signup">SIGN UP</a>
            <a class="top" style="" href="http://127.0.0.1:5000/">DASHBOARD</a>
    </div>

Старайтесь избегать абсолютного позиционирования , если это не статичное меню/кнопка. Все отступы можно грамотно разрулить при помощи margin и padding

БЛОГ НА HUSL

Неправильно отображается картинка

Ответы (1 шт):