Блог

Главная - Вопросы по программированию - Заголовок не реагирует, что приводит к перекрытию кнопок

Заголовок не реагирует, что приводит к перекрытию кнопок

#html #css #header #format #html-heading

Вопрос:

Я очень новичок в веб-разработке и пытаюсь разобраться в проблеме, которая возникла у меня с моим заголовком. Я хочу, чтобы мой заголовок был отзывчивым и не вызывал переполнения элементов кнопок рядом с ним.

Я попытался применить элементы position , float , и transform отдельно и все сразу к разделам заголовка, и это, похоже, не решает проблему, или я просто не знаю, как их правильно использовать.

Ниже приведен пример как моего html, так и css.

HTML:

 <header>
   <a href="Website.html"><img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo"></a> 
    <h1 class="bizPage">FuturU</h1>
    <div class="homeButtons">
        <a href="Website.html" class="btn btn-outline-light" id="linkHomePage">Home</a>
        <a href="Mindmovies.html" class="btn btn-outline-light" id="linkMindMovies">MindMovies</a>
        <a href="mailto:pbusko5@gmail.com?subject=I am interested in an affirmation/mindmap!" class="btn btn-outline-light" id="linkContact">Contact</a>
        <a href="About.html" class="btn btn-outline-light" id="linkAbout">About</a>
        <a href="Testimonials.html" class="btn btn-outline-light" id="linkTestimonials">Testimonials</a>
        <hr style="background-color: white; height: 3px; opacity: initial;">
    </div>
    <hr style="background-color: white; height: 3px; opacity: initial;">
  </header>

Классы CSS:

 #smallLogo{
width: 110px;
height: 110px;
float: left;
}

.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}

header{
background-color: black;
font-family: Courier;
justify-content: center;
}

.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}   

.lineHeader, .lineFooter{
   margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{

Любое решение для этого было бы весьма признательно. Спасибо

Ответ №1:

В принципе, если вы хотите создать полностью адаптивную страницу/навигационную панель, вам может потребоваться использовать «Меню бургеров». Похоже, вы использовали Bootstrap. Вы можете посмотреть эту ссылку

Тем не менее, я пытаюсь предложить измеримое решение. Проверьте код и стиль, как вы хотите. Я просто использовал гибкий div в части html.

 header{
    width: 100%;
}
#smallLogo{
    width: 110px;
    height: 110px;
    /* float: left; */
    }
    
    .bizPage{
    font-size: 80px;
    color: white;
    /* position: relative; */
    top: 30%;
    /* left: 30%; */
    }
    
    header{
    background-color: black;
    font-family: Courier;
    }
    
    .homeButtons{
    /* position: absolute; */
    /* top: 32px; */
    /* right: 26px; */
    margin-top: 1%;
    font-size: 8px;
    }   
    
    .lineHeader, .lineFooter{
    /* margin-left: auto;
    margin-right: auto; */
    color: white;
    height: 3px;
    width: auto;
    { 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack Overflow</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

</head>
<body>
    <header>
        <div class="d-flex justify-content-between">
            <a href="Website.html"><img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo"></a> 
            <h1 class="bizPage">FuturU</h1>
            <div class="homeButtons">
                <a href="Website.html" class="btn btn-outline-light" id="linkHomePage">Home</a>
                <a href="Mindmovies.html" class="btn btn-outline-light" id="linkMindMovies">MindMovies</a>
                <a href="mailto:pbusko5@gmail.com?subject=I am interested in an affirmation/mindmap!" class="btn btn-outline-light" id="linkContact">Contact</a>
                <a href="About.html" class="btn btn-outline-light" id="linkAbout">About</a>
                <a href="Testimonials.html" class="btn btn-outline-light" id="linkTestimonials">Testimonials</a>
                <hr style="background-color: white; height: 3px; opacity: initial;">
            </div>
        </div>
         <hr style="background-color: white; height: 3px; opacity: initial;">
       </header>

    <!-- <script type="text/javascript" src="index.js"></script>  -->
</body>
</html>

Дайте мне знать, если это сработает для вас.

Комментарии:

1. Это определенно помогает, но чтобы сделать его совместимым с планшетами и телефонами, я думаю, было бы лучше использовать гамбургер. Собираюсь использовать это с этого момента.

Метки: ,