Więc to jest cały kod witryny, którą wykonuję i mam pasek wyszukiwania w mojej sekcji NAV. Chciałem włączyć ikonę z czcionki niesamowitej i dodałem tam tam, ale nie mogę go umieścić we właściwym miejscu, który jest obok paska wyszukiwania po prawej stronie. Czy jest jakiś sposób, jaki mogę to naprawić? Niektórzy pomocy byłyby bardzo doceniane :)

W następnym są kod JavaScript, CSS i HTML na stronie internetowej.

function AboutHover() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}

function AboutNormal() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}

function GalleryHover() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}

function GalleryNormal() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}

function ContactHover() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}

function ContactNormal() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}
body, html{
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
    width: 80%;
    margin: 0 1.5%;
}

header{
    background:rgb(241, 200, 203);
    position: relative;
    overflow: hidden;
}

header::after{
    content: "";
    display: table;
    clear:both;
}

.logo{
    width: 9%;
    height: 5.4%;
    float: left;
    padding: 0px;
}

nav{
    float: inline-end;
    overflow: auto;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    display: inline-block;
    margin-left: 6.3%;
    padding-top: 1.8%;
    font-size: 112.5%;
    position: relative;
}

nav input[type=text]{
    float: right;
    margin-top: 2%;
    background-color: transparent;
    color: rgb(95, 62, 64);
    font-size: 112.5%;
    border: none;
    border-bottom: solid 2px black;
    margin-right: 10%;
}

nav input::placeholder{
    color: rgb(95, 62, 64);
    font-family: 'Work Sans', sans-serif;
}

nav i{
    float: right;      
}

nav a{
    color: black;
    text-decoration: none;
    text-transform: uppercase;

}

nav a:hover{
    color: rgb(0, 0, 0);
}

nav a::before{
    content: "";
    display: block;
    height: 10%;
    background-color: rgb(0, 0, 0);
    
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 250ms;
}

nav a:hover::before{
    width: 100%;
}

.bg-one{
    background-image: url("bg-one.jpg");
    height: 100%;
    padding-top: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position:relative;     
}


.transbox{
    padding: 0.8%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 10px double rgb(240, 178, 182);
    margin-left: 2.5%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    position: absolute;
    margin-top: 2.5%;
}

h1{
    text-align: center;
    font-size: 406.25%;
    color:rgb(0, 0, 0, .7); 
}

.first-block{
    height: 12%;
    background-color:rgb(241, 200, 203);
    text-align: center;
    border: 10px double white;
    padding-top: 1.6%;
    padding-bottom: 3.8%;
    vertical-align: auto;
}

h3{
    text-transform: uppercase;
    font-size: 250%;
    text-align: center;
    color: rgb(199, 127, 131);
    font-weight: 500;
}

.bg-two{
    background-image: url("bg-two.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.about-box{
    width: 32%;
    height: 40%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 15%;
    margin-left: 3.8%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    padding: 1.35%;
}

h4{
    font-size: 312%;
    text-align: center;
    font-weight: 300;
    margin-top: 7%;
    margin-bottom: 10%;
    color:rgb(126, 81, 83);
}

.about-box p, .gallery-box p, .contact-box p{
    font-size: 125%;
    text-align: center;
    color:rgb(95, 62, 64);
}

.about-box-two{
    width: 92%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 0%;
    display: block;
    border-radius: 10px;
}

.about-button{
    width: 25%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 21%;
    margin-left: 102%;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.about-button a, .gallery-button a, .contact-button a{
    font-size: 156.25%;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(126, 81, 83);
}

.far{
    padding-left: 20px;
    padding-bottom: 2px;
}

.bg-three{
    background-image: url("bg-three.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.gallery-box{
    width: 30%;
    height: 40%;
    background-color: rgba(241, 200, 203, .7);
    position: absolute;
    margin-top: 15%;
    margin-left: 65%;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    
}

.gallery-box-two{
    width: 91%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.5%;
    display: block;
    border-radius: 10px;
    padding: 1%;
}

.gallery-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 30.55%;
    margin-left: 50%;
    display: block;
    padding: 1.2%;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.bg-four{
    background-image: url("bg-four.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.contact-box{
    width: 36%;
    height: 35%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 16%;
    margin-left: 3%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
}

.contact-box-two{
    width: 93%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.4%;
    margin-bottom: 15%;
    display: block;
    border-radius: 10px;
}

.contact-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 28.8%;
    margin-left: 630px;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.footer{ 
    height: 20%;
    text-align: center;
    background-color: rgb(241, 200, 203);
    position: relative;
}

@media screen and (max-width: 768px) {
    h1{
        font-size: 312%;
    }

    a{
        font-size: 80%;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <title>New York - The City That Never Sleeps</title>
        <link rel="stylesheet" href="main.css">
        <script src="app.js"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
    <body>
        <header>
            <div class="container">
            <img src="nyc-logo.png" alt="logo" class="logo">

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contacts</a></li>
                    <input type="text" placeholder="Search" >
                </ul>
                <i class="fas fa-search"></i>
            </nav>
            </div>
        </header>
        <div class="bg-one">
            <div class="transbox">
                <h1>NEW YORK</h1>
            </div>
        </div>
        <div class="first-block">
            <h3>Welcome to the city that never sleeps...</h3>
        </div>
        <div class="bg-two">
            <div class="about-box">
                <h4>ABOUT</h4>
                <div class="about-box-two">
                    <p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
                        <br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
                    </p>
                </div>
                <div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
                    <a href="#">ABOUT<i class="far fa-arrow-alt-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
        <div class ="bg-three">
            <div class="gallery-box">
                <h4>GALLERY</h4>
                <div class= "gallery-box-two">
                    <p>Take a peek into some first-hand images taken by tourists in New York. 
                        <br>Click on the button to discover New York's beautiful features...</br></p>
                </div>
            </div>
            <div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
                <a href="#">GALLERY<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
        <div class="bg-four">
            <div class = "contact-box">
                <h4>CONTACT</h4>
                <div class = "contact-box-two">
                    <p>To find out the places where you can experience the best of New York, click on the button!</p>
                </div>
            </div>
            <div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
                <a href = "#">CONTACT<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </body>
</html>

Co obecnie wygląda nagłówek

0
Priya 16 kwiecień 2021, 23:36

1 odpowiedź

Najlepsza odpowiedź

Istnieje kilka sposobów na to zrobić, ale wychodząc z kodu, który już masz, sugeruję tylko kilka poprawek, które powinny uczynić to możliwe:

  • Weź wejście z <ul> w nawigacji. Ponieważ nie jest w znaczniku <li>, jest to nieprawidłowe HTML, aby to zrobić w ten sposób
  • Umieść <div> po <ul> i umieść <input> i ikona wewnątrz
  • Dostosuj CSS, aby float: right; jest na swoim <div> zamiast elementów input i i. Również przesuń wszelkie style związane z odstępami na div

W poniższym przykładzie dałem nową div klasę .search i przenieśli się do niektórych stylów na niej z input. Usunąłem również pływak z stylu ikony.

function AboutHover() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}

function AboutNormal() {
  document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}

function GalleryHover() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}

function GalleryNormal() {
  document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}

function ContactHover() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}

function ContactNormal() {
  document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}
body, html{
   height: 100%;
   margin: 0;
   padding: 0;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
    width: 80%;
    margin: 0 1.5%;
}

header{
    background:rgb(241, 200, 203);
    position: relative;
    overflow: hidden;
}

header::after{
    content: "";
    display: table;
    clear:both;
}

.logo{
    width: 9%;
    height: 5.4%;
    float: left;
    padding: 0px;
}

nav{
    float: inline-end;
    overflow: auto;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    display: inline-block;
    margin-left: 6.3%;
    padding-top: 1.8%;
    font-size: 112.5%;
    position: relative;
}
nav .search{
    float: right;
    margin-top: 2%;
    margin-right: 10%;
}
nav input[type=text]{
    background-color: transparent;
    color: rgb(95, 62, 64);
    font-size: 112.5%;
    border: none;
    border-bottom: solid 2px black;    
}

nav input::placeholder{
    color: rgb(95, 62, 64);
    font-family: 'Work Sans', sans-serif;
}


nav a{
    color: black;
    text-decoration: none;
    text-transform: uppercase;

}

nav a:hover{
    color: rgb(0, 0, 0);
}

nav a::before{
    content: "";
    display: block;
    height: 10%;
    background-color: rgb(0, 0, 0);
    
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 250ms;
}

nav a:hover::before{
    width: 100%;
}

.bg-one{
    background-image: url("bg-one.jpg");
    height: 100%;
    padding-top: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position:relative;     
}


.transbox{
    padding: 0.8%;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 10px double rgb(240, 178, 182);
    margin-left: 2.5%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    position: absolute;
    margin-top: 2.5%;
}

h1{
    text-align: center;
    font-size: 406.25%;
    color:rgb(0, 0, 0, .7); 
}

.first-block{
    height: 12%;
    background-color:rgb(241, 200, 203);
    text-align: center;
    border: 10px double white;
    padding-top: 1.6%;
    padding-bottom: 3.8%;
    vertical-align: auto;
}

h3{
    text-transform: uppercase;
    font-size: 250%;
    text-align: center;
    color: rgb(199, 127, 131);
    font-weight: 500;
}

.bg-two{
    background-image: url("bg-two.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.about-box{
    width: 32%;
    height: 40%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 15%;
    margin-left: 3.8%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    padding: 1.35%;
}

h4{
    font-size: 312%;
    text-align: center;
    font-weight: 300;
    margin-top: 7%;
    margin-bottom: 10%;
    color:rgb(126, 81, 83);
}

.about-box p, .gallery-box p, .contact-box p{
    font-size: 125%;
    text-align: center;
    color:rgb(95, 62, 64);
}

.about-box-two{
    width: 92%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 0%;
    display: block;
    border-radius: 10px;
}

.about-button{
    width: 25%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 21%;
    margin-left: 102%;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.about-button a, .gallery-button a, .contact-button a{
    font-size: 156.25%;
    text-decoration: none;
    text-transform: uppercase;
    color: rgb(126, 81, 83);
}

.far{
    padding-left: 20px;
    padding-bottom: 2px;
}

.bg-three{
    background-image: url("bg-three.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.gallery-box{
    width: 30%;
    height: 40%;
    background-color: rgba(241, 200, 203, .7);
    position: absolute;
    margin-top: 15%;
    margin-left: 65%;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
    
}

.gallery-box-two{
    width: 91%;
    height: 45%;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.5%;
    display: block;
    border-radius: 10px;
    padding: 1%;
}

.gallery-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 30.55%;
    margin-left: 50%;
    display: block;
    padding: 1.2%;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.bg-four{
    background-image: url("bg-four.jpg");    
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    position: relative;
}

.contact-box{
    width: 36%;
    height: 35%;
    background-color: rgba(241, 200, 203, 0.7);
    position: absolute;
    margin-top: 16%;
    margin-left: 3%;
    margin-right: auto;
    margin-bottom: auto;
    display: block;
    border-radius: 10px;
}

.contact-box-two{
    width: 93%;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-left: 3.4%;
    margin-bottom: 15%;
    display: block;
    border-radius: 10px;
}

.contact-button{
    width: auto;
    height: auto;
    background-color: rgb(241, 200, 203);
    position: absolute;
    margin-top: 28.8%;
    margin-left: 630px;
    display: block;
    padding: 20px;
    border: 2px solid rgb(126, 81, 83);
    border-radius: 10px;
}

.footer{ 
    height: 20%;
    text-align: center;
    background-color: rgb(241, 200, 203);
    position: relative;
}

@media screen and (max-width: 768px) {
    h1{
        font-size: 312%;
    }

    a{
        font-size: 80%;
    }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1" name="viewport"/>
        <title>New York - The City That Never Sleeps</title>
        <link rel="stylesheet" href="main.css">
        <script src="app.js"></script>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400&display=swap" rel="stylesheet">
        <script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
    <body>
        <header>
            <div class="container">
            <img src="nyc-logo.png" alt="logo" class="logo">

              <nav>
                  <ul>
                      <li><a href="#">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Gallery</a></li>
                      <li><a href="#">Contacts</a></li>

                  </ul>
                  <div class="search">
                      <input type="text" placeholder="Search">
                      <i class="fas fa-search" aria-hidden="true"></i>
                  </div>
              </nav>

            </div>
        </header>
        <div class="bg-one">
            <div class="transbox">
                <h1>NEW YORK</h1>
            </div>
        </div>
        <div class="first-block">
            <h3>Welcome to the city that never sleeps...</h3>
        </div>
        <div class="bg-two">
            <div class="about-box">
                <h4>ABOUT</h4>
                <div class="about-box-two">
                    <p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
                        <br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
                    </p>
                </div>
                <div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
                    <a href="#">ABOUT<i class="far fa-arrow-alt-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
        <div class ="bg-three">
            <div class="gallery-box">
                <h4>GALLERY</h4>
                <div class= "gallery-box-two">
                    <p>Take a peek into some first-hand images taken by tourists in New York. 
                        <br>Click on the button to discover New York's beautiful features...</br></p>
                </div>
            </div>
            <div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
                <a href="#">GALLERY<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
        <div class="bg-four">
            <div class = "contact-box">
                <h4>CONTACT</h4>
                <div class = "contact-box-two">
                    <p>To find out the places where you can experience the best of New York, click on the button!</p>
                </div>
            </div>
            <div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
                <a href = "#">CONTACT<i class="far fa-arrow-alt-circle-right"></i></a>
            </div>
        </div>
        <div class="footer">
            <p> </p>
        </div>
    </body>
</html>
0
shadowwolf 16 kwiecień 2021, 21:17