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

120

04 апреля 2022, 00:30

Я пытаюсь создать мало-мальски нормальную плашку, но мало того что при не моем формате экрана сливаются слова, так еще и картинка не отображается. Она лежит в той же папке , что и 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