HTML CSS отзывчивый

ProgramBox

HTML CSS отзывчивый

Post author:admin
Запись опубликована:1 февраля, 2023
Post category:Вопросы по программированию

#php #html #css

#php #HTML #css

Вопрос:

Когда я делаю окно меньше, навигация также адаптируется. И так и должно быть. Это работает до сих пор, но выше определенного размера ширина больше не заполняется. Фотография должна дополнять мое описание.
Фото

PHP /HTML index.php

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Icon für Navigation -->
    <title>Home</title>
</head>
<body>

<?php
require_once ('require/script/f_navigation.html');
require_once ('require/nagivation.html');
?>

<h1 class="home-h1-titel">Title</h1>

<!-- -------------------------------------- CONTAINER -------------------------------------- -->
<div class="home-container">
    <div class="border padding" >
        <h1 class="home-h1-container">Registrieren</h1>
        <p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server.  </p>
        <button onclick="window.location.href = 'registrieren.html';">Registrieren</button>
    </div>
    <div class="border padding" >
        <h1 class="home-h1-container">Login</h1>
        <p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. </p>
        <button onclick="window.location.href = 'login.html';">Login</button>
</div>


<!-- -------------------------------------- FOOTER -------------------------------------- -->

<footer>
    <p>Footer<br>
</footer>

</body>
</html>

HTML navigation.html

 <div class="navigation" id="navigation">
   <a href="index.php" class="right">Home</a>
   <a href="#placeholder" class="right">Placeholder 1</a>
   <a href="#placeholder">Placeholder 2</a>
   <a href="registrierung.html" class="right">Registrierung</a>
   <a href="login.html">Login</a>
   <a href="javascript:void(0);" class="icon" onclick="f_navigation()">
       <i class="fa fa-bars"></i>
   </a>
</div>

HTML f_navigation.html

 <script>
   /* Wechseln Sie zwischen dem Hinzufügen und Entfernen der "responsive"-Klasse zur Navigation, wenn der Benutzer auf das Symbol klickt */
   function f_navigation()
   {
       var x = document.getElementById("navigation");
       if (x.className === "navigation") {
           x.className  = " responsive";
       } else {
           x.className = "navigation";
       }
   }
</script>

Таблица стилей CSS.css

 /*ALLGEMEIN*//*ALLGEMEIN*//*ALLGEMEIN*/
body
{
   margin: 0;
   padding: 0;
   font-family: Arial, serif;
}
footer
{
   position: fixed;
   width: 100%;
   text-align: center;
   padding: 3px;
   background-color: #282828;
   color: white;
   font-family: Arial, serif;
   bottom: 0;
   left: 0;

}

/********************************************************************************/
/* NAVIGATION*//* NAVIGATION*//* NAVIGATION*/
.navigation
{
   overflow: hidden;
   border-bottom: solid;
   border-color: white;
   border-width: 1px;
   background-color: #282828;
   width: 100%;
   text-align: right;
   /* position: fixed; MUSS DANN ENTFERNT WERDEN*/

}

/* Gestaltung der Links innerhalb der Navigationsleiste  */
.navigation a
{
   margin: 10px;
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 18px;
   font-family: Arial, serif;
}

/* Ändert Style beim drüberfahren */
.navigation a:hover
{
}

/* Kennzeichnet die aktuelle Seite */
.navigation a.active
{
}

/* Hide the link that should open and close the navigation on small screens */
.navigation .icon
{
   display: none;
}

/* Wenn der Bildschirm weniger als 600 Pixel breit ist, wird die navigation zusammen genommen (Smartphone Ansicht) */
@media screen and (max-width: 600px)
{
   body
   {
       background-image: none;
       background-color: #a7a7e7;
       background-repeat: no-repeat;
       background-size: cover;
   }

   .navigation a
   {
       display: none;
       border: solid;
       border-color: rgb(255, 255, 255, 0);
   }
   .navigation a.icon
   {
       float: right;
       display: block;
   }

   .right
   {
       float: none;
   }


   .navigation.responsive /*Position der Navigation wenn das Icon gedrückt wurde*/
   {

   }
   .navigation.responsive a.icon /*Icon wenn gedrückt*/
   {
       position: absolute;
       right: 0;
       top: 0;
   }
   .navigation.responsive a
   {
       display: block;
   }
}
/********************************************************************************/
/*HOME*//*HOME*//*HOME*/
.home-container
{
   display: grid;
   grid-gap: 50px; /*Raster-Lücke*/
   justify-content: center;
   grid-template-columns:  repeat(2, minmax(200px, 1fr));
   margin-left: 10%;
   margin-right: 10%;

}

.home-h1-container
{
   margin: 5px;
   text-align: center;
   color: #282828;
   font-size: 30px;
   font-family: Arial, serif;
}

.home-h1-titel
{
   text-align: center;
   font-family: Arial, serif;

}

Может кто-нибудь, пожалуйста, помогите мне?

Большое вам спасибо!

С наилучшими пожеланиями

1. Посмотрите в «медиа-запросы». Я вижу, что вы их используете. Но по какой-то причине вы вызываете его из javascript.

2. что вы подразумеваете под «медиа-запросами»? Я не могу найти это в коде.

3. Медиа-запрос: @media screen and (max-width: 600px)

4. Я его протестировал. Размер, который я там указал, с этим не связан. Кроме того, ширина в процентах навигации становится все меньше и меньше.

Ответ №1:

Кажется, вам не хватает пары закрывающих тегов ( </p> и </div> ), в противном случае ваш код работает нормально.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    <link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Icon für Navigation -->
    <title>Home</title>
</head>
<body>


<script>
   /* Wechseln Sie zwischen dem Hinzufügen und Entfernen der "responsive"-Klasse zur Navigation, wenn der Benutzer auf das Symbol klickt */
   function f_navigation()
   {
       var x = document.getElementById("navigation");
       if (x.className === "navigation") {
           x.className  = " responsive";
       } else {
           x.className = "navigation";
       }
   }
</script>
<div class="navigation" id="navigation">
   <a href="index.php" class="right">Home</a>
   <a href="#placeholder" class="right">Placeholder 1</a>
   <a href="#placeholder">Placeholder 2</a>
   <a href="registrierung.html" class="right">Registrierung</a>
   <a href="login.html">Login</a>
   <a href="javascript:void(0);" class="icon" onclick="f_navigation()">
       <i class="fa fa-bars"></i>
   </a>
</div>


<h1 class="home-h1-titel">Title</h1>

<!-- -------------------------------------- CONTAINER -------------------------------------- -->
<div class="home-container">
    <div class="border padding" >
        <h1 class="home-h1-container">Registrieren</h1>
        <p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server.  </p>
        <button onclick="window.location.href = 'registrieren.html';">Registrieren</button>
    </div>
    <div class="border padding" >
        <h1 class="home-h1-container">Login</h1>
        <p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. </p>
        <button onclick="window.location.href = 'login.html';">Login</button>
</div>
</div>


<!-- -------------------------------------- FOOTER -------------------------------------- -->

<footer>
<p>Footer<br></p>
</footer>

</body>
</html>

Вот исправленная версия: https://jsfiddle.net/zrcwh3mn /

1. Большое вам спасибо. Я вижу, что это работает для вас. Я скопировал свой код в jsfiddle.net/zrcwh3mn и запустил его. Это работает. Но почему это не работает, когда я захожу на сайт с помощью Chrome или Edge? Я удалил данные браузера.

2. Я не уверен. Вы не используете какой-либо специфичный для браузера css. Как вы думаете, вы можете разместить его через общедоступную сеть, используя что-то вроде ‘ngrok’? Или, может быть, страницы Github или любой другой бесплатный сервис, чтобы я мог посмотреть?