0
現在、私のウェブサイトは応答していますが、これは、サイズを変更するときにナビゲーションバーを画面で移動させる必要があることを意味します。私はブラウザにサイズを変更する場合、次の行に移動するには、CSSを取得しようとしているワードラップや単語区切りを使用していても、テキストがナビゲーションバーから流れ出す
* {
\t padding: 0px;
\t margin: 0px;
}
html {
\t
\t width: 100%;
\t height: 100%;
}
#head {
\t margin-top: .5%;
\t width: 87%;
\t margin-left: 6.5%;
\t height: 120px;
\t background-color: rgb(241, 181, 0);
}
#head img {
\t margin-left: 15px;
\t margin-top: 10px;
\t width: 140px;
\t height: 90px;
}
#head h3 {
\t font-size: 36px;
\t margin-top: -4%;
\t margin-left: 45%;
}
#head p {
\t margin-left: 47.4%;
\t font-size: 18px;
}
#nav {
\t overflow: initial;
\t word-wrap: break-word;
\t width: 87%;
\t margin-left: 6.5%;
\t background-color: rgb(187, 187, 187);
\t float: left;
}
#nav ul {
\t word-wrap: break-word;
\t display: flex;
}
#nav li {
\t padding-left: 45px;
\t padding-right: 45px;
\t list-style: none;
\t
}
#nav a:hover {
\t background-color: rgb(205, 205, 205);
}
#nav a {
\t width: 1440px;
\t margin-left: 1em;
\t color: #000;
\t font-size: 1.8em;
\t text-decoration: none;
}
#nav-right {
\t margin-left: 25%;
\t float: right;
}
#content {
\t display: inline-block;
\t overflow: visible;
\t background-color: rgb(241, 181, 0);
\t width: 87%;
\t height: auto;
\t margin-left: 6.5%;
}
#gallery {
\t position: relative;
\t margin-top: 2%;
\t margin-left: 15%;
\t width: 69%;
\t height: 335px;
\t background-color: #131313;
}
#gallery img {
\t width: 100%;
\t height: 100%;
}
.galleryBTN {
\t cursor: pointer;
\t position: absolute;
\t margin-top: -21.4%;
\t text-align: center;
\t background-color: rgb(187, 187, 187);
\t width: 6%;
\t margin-left: 94%;
\t height: 150px;
\t text-decoration: none;
}
.galleryBTN ~ .galleryBTN {
\t margin-left: 0%;
}
.galleryBTN p {
\t color: #000;
\t text-decoration: none;
\t margin-top: 65px;
}
#webInfo {
\t min-height: 400px;
\t background-color: rgb(218, 166, 7);
\t float: left;
\t margin-top: 5%;
\t margin-left: 5%;
\t width: 50%;
\t height: auto;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#webInfo p {
\t font-size: 18px;
\t margin-left: 1%;
\t overflow: hidden;
}
#addr {
\t min-height: 400px;
\t background-color: rgb(218, 166, 7);
\t overflow: hidden;
\t float: right;
\t margin-top: 5%;
\t margin-right: 2%;
\t width: 40%;
\t height: auto;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#addr img {
\t width: 340px;
\t height: 320px;
\t margin-top: 5%;
\t margin-right: 5%;
\t float: right;
}
#addr p {
\t font-size: 32px;
\t text-align: right;
\t margin-right: 12px;
\t margin-top: 20%;
\t float: right;
\t margin-left: 4px;
\t font-size: 16;
}
#separator {
\t margin-top: 625px;
\t background-color: #000;
\t border: 1px solid #000;
}
#sep {
\t background-color: #000;
\t border: 1px solid #000;
}
.partner {
\t display: inline-block;
\t margin-top: 2%;
\t margin-left: 5.4%;
\t margin-right: 3%;
\t width: 180px;
\t height: 210px;
}
.partner img {
\t width: 180px;
\t height: 180px;
}
.partner p {
\t margin-top: 10px;
\t text-align: center;
}
.prices {
\t overflow: hidden;
\t display: inline-block;
\t background-color: rgb(218, 166, 7);
\t margin-top: 3%;
\t margin-left: 5%;
\t width: 42%;
\t height: 125px;
\t -moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#visblock {
\t width: 100%;
\t height: 50px;
}
.prices img {
\t float: left;
\t margin-top: 2%;
\t margin-left: 2%;
\t width: 90px;
}
.prices p {
\t word-wrap: break-word;
\t white-space: initial;
\t clear: both;
\t margin-left: 18%;
}
#shop {
\t margin-top: 2%;
\t margin-left: 5%;
\t background-color: rgb(218, 166, 7);
\t width: 90%;
\t min-height: 960px;
\t height: auto;
\t overflow: hidden;
\t -moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#shoppingCart {
\t margin-top: 30px;
\t display: inline-block;
\t margin-left: 87%;
}
#shoppingCart img {
\t float: right;
\t width: 55px;
\t height: 55px;
}
#shoppingCart p {
\t float: left;
\t margin-top: 20px;
}
.shopItem {
\t overflow: auto;
\t display: inline-block;
\t background-color: rgb(218, 166, 7);
\t margin-top: 3%;
\t margin-left: 2.5%;
\t margin-right: 2.5%;
\t width: 27%;
\t min-height: 225px;
\t height: 25%;
\t -moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.shopItem img {
\t float: left;
\t margin-left: 3%;
\t margin-top: 3%;
\t width: 120px;
\t height: 140px;
}
.shopItem p {
\t word-wrap: break-word;
\t white-space: initial;
\t clear: both;
\t margin-left: 7px;
\t padding-bottom: 2%;
}
#shopTextContainer {
\t font-size: 18px;
\t height: 82%;
\t overflow: hidden;
}
.shopItem a {
\t background-color: #FFF;
\t color: #000;
\t text-decoration: none;
\t margin-top: 1.2%;
\t padding: 7px;
\t margin-right: 36%;
\t float: right;
}
#tableContainer {
\t background-color: rgb(218, 166, 7);
\t width: 95%;
\t overflow: hidden;
\t height: 95%;
\t margin-top: 2.5%;
\t margin-left: 2.5%;
\t margin-bottom: 2.5%;
\t -moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#agendaTable table, th, td {
\t table-layout: fixed;
\t text-align: center;
\t font-size: 32px;
\t border: 1px solid black;
\t width: 100%;
}
.team {
\t display: inline-block;
\t overflow: hidden;
\t margin-left: 10%;
\t margin-top: 4%;
\t width: 20%;
\t height: 65%;
\t margin-bottom: 4%;
\t
}
.team img {
\t margin-top: 10%;
\t margin-left: 15%;
\t margin-bottom: 2%;
\t width: 220px;
}
.team p {
\t text-align: center;
font-size: 18px;
}
#vactitle {
\t font-weight: bold;
\t text-align: center;
\t font-size: 24px; \t
}
#vacature {
\t width: 90%;
\t height: auto;
\t margin-bottom: 2%;
\t
}
#vacature p {
\t margin-top: 4%;
\t margin-left: 10%;
}
#piste-text {
\t width: 90%;
\t margin-top: -150px;
\t margin-left: 5%;
\t margin-bottom: 50px;
\t min-height: 200px;
\t word-wrap: break-word;
\t white-space: initial;
\t overflow: hidden;
}
#pistes {
\t width: 80%;
\t height: 70%;
}
#pistes img {
\t background-color: #000;
\t width: 80%;
\t height: 60%;
\t margin-top: 3%;
\t margin-left: 20%;
}
#form {
\t text-align: center;
\t background-color: rgb(218, 166, 7);
\t margin-top: 5%;
\t margin-bottom: 5%;
\t margin-left: 10%;
\t width: 80%;
\t -moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#form input {
\t min-height: 40px;
}
#form input[type=submit] {
\t min-width: 240px;
}
#form input[type=text], input[type=password], select {
\t min-width: 450px;
}
#form input[type=text], input[type=password], select {
\t width: 60%;
\t height: 6%;
\t font-size: 2em;
}
#form input[type=submit] {
\t margin-top: 5%;
\t margin-bottom: 3%;
\t width: 20%;
\t height: 7%;
\t font-size: 2em;
}
#form p {
\t font-size: 1.8em;
\t margin-top: 3%;
}
#form a {
\t color: #000;
\t text-decoration: none;
\t margin-top: 5%;
\t font-size: 2em;
}
#form .small-form select, #form .small-form input {
\t min-width: 200px;
\t width: 20%;
}
#form .small-form p {
\t margin-left: 5%;
\t margin-right: 5%;
\t display: inline-block;
}
#pageNumber {
\t margin-top: 2%;
\t text-align: center;
\t width: 100%;
\t height: 40px;
\t font-size: 23px;
}
footer {
\t margin-top: 5px; \t
\t background-color: rgb(187, 187, 187);
\t text-align: center;
\t width: 87%;
\t font-size: 26px;
\t margin-left: 6.5%;
\t margin-bottom: .5%; \t
\t height: auto;
}
@media (max-width: 1666px) {
\t #nav { \t
\t \t height: 10%;
\t }
\t #nav a {
\t \t word-wrap: break-word;
\t \t white-space: initial;
\t }
\t .galleryBTN {
\t \t margin-top: -25%;
\t }
\t \t #shoppingCart {
\t \t \t margin-left: 80%;
\t \t \t padding: 0px;
\t \t }
\t #shoppingCart img {
\t \t float: left;
\t }
\t #shoppingCart p {
\t \t float: left;
\t }
\t .shopItem {
\t \t width: 90%;
\t }
\t .shopItem a {
\t \t padding-bottom: 10px;
\t }
}
@media (max-width: 1520px) {
\t .galleryBTN {
\t \t margin-top: -27%;
\t }
}
@media (max-width: 1480px) {
\t .galleryBTN {
\t \t margin-top: -28%;
\t }
\t #addr p {
\t \t font-size: 1.2em;
\t \t margin-top: 5%;
\t \t margin-right: 35%;
\t \t text-align: center;
\t }
}
@media (max-width: 1400px) {
\t .galleryBTN {
\t \t margin-top: -30%;
\t }
\t #addr img {
\t \t margin-right: 13%;
\t }
\t #addr p {
\t \t margin-left: 15%;
\t }
\t #webInfo p {
\t \t font-size: 1.2em;
\t }
}
@media (max-width: 1250px) {
\t #separator {
\t \t margin-top: 1050px;
\t }
\t #webInfo {
\t \t width: 90%;
\t }
\t #addr {
\t \t width: 90%;
\t \t margin-left: 5%;
\t \t float: left;
\t }
\t #addr img {
\t \t padding-left: 30%;
\t \t float: left;
\t \t width: 40%;
\t \t height: \t 30%;
\t }
\t #addr p {
\t \t margin-bottom: 30px;
\t }
\t #head {
\t \t margin: 0px;
\t \t width: 100%;
\t }
\t #vactitle {
\t \t margin-left: 10%;
\t }
\t #vacature {
\t \t margin-bottom: 30px;
\t }
\t #gallery {
\t \t margin-top: 5%;
\t \t margin: 0px;
\t \t width: 100%;
\t }
\t .galleryBTN {
\t \t margin-top: -20%;
\t }
\t .team {
\t \t height: auto;
\t \t width: 90%;
\t }
\t #pageNumber {
\t \t font-size: 1.5em
\t }
\t .team img {
\t \t margin-left: 24%;
\t }
\t #vacature {
\t \t font-size: 1.4em;
\t }
\t .team p {
\t \t font-size: 1.4em;
\t \t text-align: center;
\t \t margin-left: -22%;
\t \t margin-right: 7%;
\t }
\t #pistes {
\t \t width: 100%;
\t }
\t #pistes img {
\t \t margin-left: 0px;
\t \t width: 100%;
\t }
\t #piste-text {
\t \t font-size: 1.4em;
\t }
\t #head h3 {
\t \t margin-top: -10%;
\t }
\t #nav {
\t \t margin: 0px;
\t \t width: 100%;
\t }
\t #content {
\t \t margin: 0px;
\t \t width: 100%;
\t }
\t .partner {
\t \t padding-left: 15%;
\t }
\t #addr p {
\t \t margin-top: 8%;
\t \t margin-left: 40%;
\t \t text-align: center;
\t \t float: left;
\t }
\t footer {
\t \t margin: 0px;
\t \t width: 100%;
\t }
}
@media (max-width: 1152px) {
\t #pageNumber {
\t \t font-size: 1.8em
\t }
\t .galleryBTN {
\t \t margin-top: -23%;
\t }
\t #form input {
\t \t min-width: 0px;
\t }
}
@media (max-width: 952px) {
\t #shoppingCart {
\t \t margin-left: 75%;
\t \t padding: 0px;
\t }
}
@media (max-width: 906px) {
\t .prices {
\t \t width: 90%;
\t }
\t .galleryBTN {
\t \t margin-top: -28%;
\t }
}
@media (max-width: 768px) {
\t .galleryBTN {
\t \t margin-top: -33%;
\t }
\t #pageNumber {
\t \t font-size: 1.8em
\t }
\t #shoppingCart {
\t \t margin-left: 70%;
\t \t padding: 0px;
\t }
\t #webInfo {
\t \t float: left;
\t }
\t .partner {
\t \t padding-left: 30%;
\t }
}
@media (max-width: 631px) {
\t #vacature p {
\t \t font-size: 1.4em;
\t }
\t .galleryBTN {
\t \t margin-top: -40%;
\t } \t
\t #shoppingCart {
\t \t margin-left: 65%;
\t \t padding: 0px;
\t }
}
@media (max-width: 524px) {
\t .galleryBTN {
\t \t margin-top: -50%;
\t }
\t #separator {
\t \t margin-top: 1100px;
\t }
\t #form input[type=submit] {
\t \t width: 60%;
\t }
\t #shoppingCart {
\t \t margin-left: 55%;
\t \t padding: 0px;
\t }
}
@media(max-width: 480px) {
\t #head h3 {
\t \t position: absolute;
\t \t padding-top: -50%;
\t }
\t #head img {
\t \t margin-left: 0px;
\t }
\t .galleryBTN {
\t \t margin-top: -60%;
\t }
\t #separator {
\t \t margin-top: 1200px;
\t }
\t #shoppingCart {
\t \t margin-left: 50%;
\t \t padding: 0px;
\t }
\t .partner {
\t \t padding-left: 20%;
\t }
} \t
@media(max-width: 346px) {
\t .galleryBTN {
\t \t margin-top: -75%;
\t }
\t #separator {
\t \t margin-top: 1300px;
\t }
\t .partner {
\t \t padding-left: 15%;
\t }
}
@media(max-width: 300px) {
\t .partner {
\t \t padding-left: 15%;
\t }
}
}<html>
\t <head>
\t \t <title> Bigfoot bar - home </title>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0">
\t \t <link rel="stylesheet" type="text/css" href="style/style.css">
\t \t <link rel="icon" href="img/logo.png" type="image/x-icon"/>
\t </head>
\t <body>
\t <div id="container">
\t \t <div id="head">
\t \t \t <img src="img/logo.png"/>
\t \t \t <h3>Bigfoot bar</h3>
\t \t \t <p>Een slogan hier</p> \t
\t \t </div>
\t \t <div id="nav">
\t \t \t <ul>
\t \t \t \t <a href="index.php"> <li> Home </li> </a>
\t \t \t \t <a href="prices.php"> <li> Prices </li> </a>
\t \t \t \t <a href="shop.php"> <li> Shop </li> </a>
\t \t \t \t <a href="agenda.php"> <li> Agenda </li> </a>
\t \t \t \t <a href="team.php"> <li> Team </li> </a>
\t \t \t \t <a href="slopes.php"> <li> Slopes </li> </a>
\t \t \t \t <a href="login.php"><li>Login/register</li></a>
\t \t \t </ul>
\t \t </div>
\t \t <div id="content"> \t
\t \t \t <div id="gallery">
\t \t \t \t <img src="" value="0" name="img1">
\t \t \t \t \t <a class="galleryBTN"><p>Next</p></a>
\t \t \t \t \t <a class="galleryBTN"><p>Prev</p></a>
\t \t \t </div>
\t \t <div id="webInfo">
\t \t <p> text about the greatness of mankind, who are we? Why are we here? Those are questions many people ask themselves, however i think the question that we all should think about is "Where will we go?". We do not know how our life will turn out to be, but we surely could predict it somehow, that is what i believe to be the truth, but there are some who do not agree with me, they think we should live in the present and not think about our future, which is silly to think about, because the offspring that we create will have to live here, meaning that our problems will become their problems in the future. I really hope that the government has some kind of plan for the people living in the country that are getting older, the newer generations won't be able to help their parents financially because the scale of support will be 2:1 in around 30 to 40 years! Yes, shocking isn't it? We as children in the netherlands will be screwed due to these plans of parents, such a SHAME!!! </p>
\t \t </div>
\t \t <div id="addr">
\t \t \t <img src="img/adress.png">
\t \t \t <p>Adress: <br>
\t \t \t \t New York City
\t \t \t \t <br> Lorem Ipsum
\t \t \t \t <br> 3881TC, ergens</p>
\t \t </div>
\t \t \t <hr id="separator">
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div class="partner">
\t \t \t \t <img src="img/partners/img1.png">
\t \t \t \t <p> Een partner </p>
\t \t \t </div>
\t \t \t <div id="visblock"></div>
\t \t </div>
\t </div>
\t <footer>Een geweldig copyright bericht</footer>
\t </body>
</html>あなたは完全なビューでそれを入れていない場合は、ここで見ることができるように、NAVのテキストがしますナビゲーションバーから流出しますが、ウェブサイトの他のリンクを壊して移動する必要があります。これは私たちが受け取った割り当てのためのものです応答性の高いウェブサイトを作成するには、私はかなり遠いです！
ご協力いただきありがとうございます。
'ul'の唯一の有効な子は' li'です。あなたは 'a'で' li'をラップすることはできません。そしてあなたのnavリンクに1440pxの幅を与えています。それは正しく聞こえません – Turnip