0

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

7
  • Покажите скрин проблемы с картинкой. 7 фев 2020 в 19:14
  • прикрепил, вот в верхнем левом углу должна быть картинка, а у меня какая-то хрень вместо нее, и так не только в этом браузере
    – Artem
    7 фев 2020 в 19:24
  • а по f12 в консоли что? 7 фев 2020 в 19:28
  • Cross-Origin Read Blocking (CORB) blocked cross-origin response drive.google.com/file/d/1Fm2SXwMXD5CuE1gNrVOAsqUxA6k9-Mdm/… with MIME type text/html. See chromestatus.com/feature/5629709824032768 for more details.
    – Artem
    7 фев 2020 в 19:34
  • если открыть тупо html файл, то картинка появляется, но я то запуска. станицу через локальный серв на python Flask
    – Artem
    7 фев 2020 в 19:37

1 ответ 1

0

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

<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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.