2017-12-01 13 views
0

HTML5 & CSS3では、ロゴは左上隅に浮動する必要があります&リスト/メニューのリストは右上隅に浮動する必要があります。ロゴ(浮動小数点:左)&リスト(浮動小数点:右)は表示されません

ここの出力では、何らかの理由でロゴが見えなくなります。しかし、「alt」は「ロゴの代わりに」と言われました。

ここに私の側からの出力があります。なぜ私は見つけることができません

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="Vendors/CSS/normalize.css"> 
     <link rel="stylesheet" type="text/css" href="Vendors/CSS/grid.css"> 
     <link rel="stylesheet" type="text/css" href="Resources/CSS/Style.css"> 
     <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i" type="text/css" rel="stylesheet"> 
     <title>Shyam Restaurant</title> 
    </head> 

    <body> 
     <header> 
      <nav> 
       <div class="row"> 
        <img src="Resources/Images/logo-white.png" alt="Shyam Restaurant Logo" class="logo">      
        <ul class="main-nav"> 
         <li><a href="#">Food Delivery</a></li> 
         <li><a href="#">How It Works</a></li> 
         <li><a href="#">Our Cities</a></li> 
         <li><a href="#">Sign Up</a></li> 
        </ul> 
       </div> 
      </nav> 
      <div class="hero-text-box"> 
       <h1>Goodbye junk food. <br>Hello super healthy meals</h1> 
       <a class="btn btn-full" href="#">I'm hungry</a> 
       <a class="btn btn-ghost" href="#">show me more</a> 
      </div> 
     </header> 

     <section class="section-features"> 
      <div class="row"> 
       <h2>Get food fast &mdash; not fast food</h2> 
       <p class="long-copy"> 
        Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise! 
       </p> 
      </div> 

      <div class="row"> 
       <div class="col span-1-of-4"> 
        <h3>Up to 365 days/year</h3> 
        <p> 
         Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style. 
        </p> 
       </div> 

       <div class="col span-1-of-4"> 
        <h3>Ready in 20 minutes</h3> 
        <p> 
         You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy. 
        </p> 
       </div> 

       <div class="col span-1-of-4"> 
        <h3>100% organic</h3> 
        <p> 
         All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better! 
        </p> 
       </div> 

       <div class="col span-1-of-4"> 
        <h3>Order anything</h3> 
        <p> 
         We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you! 
        </p> 
       </div> 
      </div> 
     </section> 
    </body> 
</html> 

Here is the output is received from my side. I've marked it with white color on top of the webpage

/*---------------------------------------------------------*/ 
 
/*Basic Setup*/ 
 
/*---------------------------------------------------------*/ 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
html { 
 
    background-color: #fff; 
 
    color: #555555; 
 
    font-family: 'Lato', 'Arial', sans-serif; 
 
    color: #555555; 
 
    font-size: 20px; 
 
    font-weight: 300; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
/*---------------------------------------------------------*/ 
 
/*----------------REUSABLE COMPONENTS----------------------*/ 
 
/*---------------------------------------------------------*/ 
 
.row { 
 
    max-width: 110px; 
 
    margin: 0 auto; 
 
} 
 
/*-------------------------HEADINGS------------------------*/ 
 
h1 { 
 
    margin: 0; 
 
    margin-bottom: 20px; 
 
    color: #fff; 
 
    font-size: 240%; 
 
    font-weight: 300; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    word-spacing: 4px; 
 
} 
 
/*-----------------BUTTONS---------------*/ 
 
.btn:link, 
 
.btn:visited { 
 
    display: inline-block; 
 
    color: #fff; 
 
    padding: 10px 30px; 
 
    font-weight: 300; 
 
    text-decoration: none; 
 
    border-radius: 200px; 
 
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
 
} 
 

 
.btn-full:link, 
 
.btn-full:visited { 
 
    background-color: #e67e22; 
 
    border: 1px solid #e67e22; 
 
    color: #fff; 
 
    margin-right: 15px; 
 
    
 
} 
 

 
.btn-ghost:link, 
 
.btn-ghost:visited { 
 
    color: #e67e22; 
 
    border: 1px solid #e67e22; 
 
} 
 

 
.btn:hover, 
 
.btn:active { 
 
    background-color: #cf6d17; 
 
} 
 

 
.btn-full:hover, 
 
.btn-full:active { 
 
    border: 1px solid #cf6d17; 
 
    
 
} 
 

 
.btn-ghost:hover, 
 
.btn-ghost:active { 
 
    color: #fff; 
 
    border: 1px solid #cf6d17; 
 
} 
 
/*------------------------------------------------------------------------*/ 
 
/*----------------------------HEADER--------------------------------------*/ 
 
/*------------------------------------------------------------------------*/ 
 
header { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(Images/hero.jpg); 
 
    
 
    background-size: cover; 
 
    background-position: center; 
 
    height: 100vh; 
 
} 
 

 
.hero-text-box { 
 
    position: absolute; 
 
    width: 1140px; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-40%,-50%); 
 
} 
 

 

 
.logo { 
 
    height: 100px; 
 
    width: auto; 
 
    float: left; 
 
    margin-top: 20px; 
 
} 
 

 
.main-nav { 
 
    float: right; 
 
    list-style: none; 
 
    margin: 55px; 
 
} 
 

 
.main-nav li { 
 
    display: inline-block; 
 
    margin-left: 40px; 
 
} 
 

 
.main-nav li a:link, 
 
.main-nav li a:visited { 
 
    padding: 8px 0; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 90%; 
 
    border-bottom: 2px solid transparent; 
 
    transition: border-bottom 0.2s; 
 
} 
 

 
.main-nav li a:hover, 
 
.main-nav li a:active { 
 
    border-bottom: 2px solid #e67e22; 
 
}

私のHTMLファイルを:私は、Webページの上に白い色でそれをマークしましたロゴが表示されます。

+0

を配置するクラスrowので、基本的に、彼らは多くの部屋を持っていないことにより、提供さ110pxの最大幅を有する浮遊していますか? –

+0

いいえグリッドは別のベンダーのものです – Shyam

答えて

0

あなたの要素が正しく、しかし、親はあなたがあなた自身のグリッドを使用している

+0

あなたの提案(クラス行の最大幅)に応じて、幅を50ピクセルに縮小しようとしましたが、応答はnullでした。しかし、私は最大5000pxの幅を増加しようとしたとき、それは完全にうまくいった。フロートはロゴとリストで完璧に機能しました。画素の値は大きいですか? – Shyam

+0

幅100%が最適なソリューションである必要があります –

関連する問題