почему код CSS не работает проблема в float? - PullRequest
Новая
       24

почему код CSS не работает проблема в float?

0 голосов
/ 06 октября 2019

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

https://codepen.io/asfafasa/pen/NWWWzgd HTML: 

<body>
<div class="page-wrapper">
    <header>    
    <div class="banner-home">
      <h1>
            <div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
            <span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
            </a>
            </div>
</h1>
    <div id="open">
            <a href="#" onClick="openMenu()">
                <i class="fas fa-ice-cream"></i>
            </a>
      </div>
        <nav>
          <div class="menu">
            <div class="button">
              <ul>
                <!--<a href="#" onClick="closeMenu()">
                  <i class="fas fa-times">
                  </i>
                </a>-->
                <li>
              <div class="homePage_re rd_button">
                  <a href="index.html" class="navigation_home">
                      Home
                    </a></div>
                  </li>
                <li>
                  <div class="crazyGallary rd_button">
                      <a href="gallary.html">
                    Gallay
                    </a></div>
                  </li>
                <li>
                  <div class="aboutUs rd_button">
                      <a href="aboutUs.html">
                          About Us
                      </a></div>
                  </li>
              </ul>
              </nav>
            </div>
      </div>
    </div>
        </div>
</header>
    <div class="space"></div>

CSS: 

*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

div{
    display: block;
}


body{
    margin: 0;
    font-size: 14px;
}

.space{
    height: 50px;
}

.page-wrapper{
    padding: 0 50px;
}
header{
    background: darkgrey;
    height: 120px;
    color: azure;
    z-index: 1;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    display: block;
}

header *{
    display: inline-block;
}

.banner-home{
    align-items: center;
    overflow: auto;
}

.homepage{
    padding-left: 20px;
    float: left;
}

.menu{
    display: inline-block;
    float: right;
}


.rd_button a{
    text-decoration: none;
    display: block;
}

.rd_button{
    list-style-type: none;
    display: block;
}

.button a{
    color: #fff;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 0 0 50px;
  font-size: 14px;
  z-index: 1;
}

.button{
    float: right;
}

.button a:hover{
  background-color: tomato;
  color: #fff;
}

.button a:hover:after{
    transform: translateY(-50%) rotate(-35deg);
}


nav{
    margin: 0 auto;
    text-align: right;
    float: right;
}

.logo{
    display: inline;
    height: 100%;
}

.banner-home h1 a{
    text-decoration: none;
}

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

main{
    text-align: center;
}

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

1 Ответ

0 голосов
/ 06 октября 2019

2 вещи:

  1. .banner-home должен иметь свойство float: left
  2. .banner-home div не был закрыт должным образом

Обновленная ручка: https://codepen.io/david-somekh/pen/yLLLEEK

<body>
<style>
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

div{
    display: block;
}


body{
    margin: 0;
    font-size: 14px;
}

.space{
    height: 50px;
}

.page-wrapper{
    padding: 0 50px;
}
header{
    background: darkgrey;
    height: 120px;
    color: azure;
    z-index: 1;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    display: block;
}

header *{
    display: inline-block;
}

.banner-home{
float:left;
    align-items: center;
    overflow: auto;
}

.homepage{
    padding-left: 20px;
    float: left;
}

.menu{
    display: inline-block;
    float: right;
}


.rd_button a{
    text-decoration: none;
    display: block;
}

.rd_button{
    list-style-type: none;
    display: block;
}

.button a{
    color: #fff;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 0 0 50px;
  font-size: 14px;
  z-index: 1;
}

.button{
    float: right;
}

.button a:hover{
  background-color: tomato;
  color: #fff;
}

.button a:hover:after{
    transform: translateY(-50%) rotate(-35deg);
}


nav{
    margin: 0 auto;
    text-align: right;
    float: right;
}

.logo{
    display: inline;
    height: 100%;
}

.banner-home h1 a{
    text-decoration: none;
}

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

main{
    text-align: center;
}

</style>
<div class="page-wrapper">
    <header>    
    <div class="banner-home">
      <h1>
            <div class="homepage"> <a href="index.html" title="CrazyPirates" target="new">
            <span class="crazy"><img src="images/Logomakr_5MZbkZ.png" alt="" width="30px" class="logo">Sitename & logo </span>
            </a>
            </div></div>
</h1>
    <div id="open">
            <a href="#" onClick="openMenu()">
                <i class="fas fa-ice-cream"></i>
            </a>
      </div>
        <nav>
          <div class="menu">
            <div class="button">
              <ul>
                <!--<a href="#" onClick="closeMenu()">
                  <i class="fas fa-times">
                  </i>
                </a>-->
                <li>
              <div class="homePage_re rd_button">
                  <a href="index.html" class="navigation_home">
                      Home
                    </a></div>
                  </li>
                <li>
                  <div class="crazyGallary rd_button">
                      <a href="gallary.html">
                    Gallay
                    </a></div>
                  </li>
                <li>
                  <div class="aboutUs rd_button">
                      <a href="aboutUs.html">
                          About Us
                      </a></div>
                  </li>
              </ul>
              </nav>
            </div>
      </div>
    </div>
        </div>
</header>
<div class="space"></div>
...