2017-11-15 4 views
0

私は単純なウェブページを構築しようとしています。左上隅にロゴがあり、右に同じ行にはナビゲータがあります。それはすべて正常に動作します。問題は、ロゴの下のテキストを& navbar(全幅)にしたいということです。私が試しても、ロゴとナビゲーションバーと同じ行でテキストが始まります。テキストをロゴ& navbarの下から開始するにはどうすればよいですか?ここで私のロゴとnavbarの下に私のWebテキストを表示するには?

は、HTMLです:

<!doctype html> 
<html> 
    <head> 
     <link rel="stylesheet" href="Temp.css" type="text/css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    </head> 
    <body> 
     <div class="logo" style="display:inline;"> 
      <a href="Temp.html"> 
       <img src="robert-half-technology-logo-600(40).gif"/> 
      </a> 
     </div> 

     <nav class="navbar navbar-fixed-top"> 
      <div class="container-fluid"> 
       <ul class="nav navbar-nav pull-right"> 
        <li class="active"><a href="#" style="color:black;">Home</a></li> 
        <li><a href="Temp_AboutUs.html" style="color:black;">About Us</a></li> 
        <li><a href="Temp_Careers.html" style="color:black;">Careers</a></li> 
        <li><a href="Temp_ContactUs.html" style="color:black;">Contact Us</a></li> 
       </ul> 
      </div><br/><br/> 
     </nav> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-8"> 
        <h1>About Us</h1> 
        <p class="normaltext"> 
         Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce. 
        </p> 
        <p class="normaltext"> 
         We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley. 
        </p> 
        <p class="normaltext"> 
         Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization. 
        </p> 
        <h2>1940s: The beginning</h2> 
        <table style="width:100%" class="normaltext"> 
         <tr> 
          <td>1948</td> 
          <td>Robert Half founded by Bob and Maxine Half.</td> 
         </tr> 
        </table> 
        <h2>1960s: High ethical standards become a cornerstone</h2> 
        <table style="width:100%" class="normaltext"> 
         <tr> 
          <td>1963</td> 
          <td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td> 
         </tr> 
        </table> 
        <h2>1970s: A decade of firsts</h2> 
        <table style="width:100%" class="normaltext"> 
         <tr> 
          <td>1973</td> 
          <td style="padding-left:20px">Robert Half opens its first international location in London.</td> 
         </tr> 
         <tr> 
          <td>1973</td> 
          <td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td> 
         </tr> 
        </table> 
       </div> 
      </div> 
     </div> 
    </body> 

</html> 

そして、ここでは、CSSです:

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

li { 
    float: left; 
} 

a { 
    display: block; 
    padding: 8px; 
    background-color: #dddddd; 
} 

.logo { 
    position: fixed; 
    z-index: 2000; 
} 

.video { 
position: fixed; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
z-index: -100; 
-ms-transform: translateX(-50%) translateY(-50%); 
-moz-transform: translateX(-50%) translateY(-50%); 
-webkit-transform: translateX(-50%) translateY(-50%); 
transform: translateX (-50%) translateY(-50%); 
} 

h1 { 
    text-align:center; 
    color:#a01b35; 
} 

.normaltext { 
    font-size: 18px; 
    font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif; 
    line-height: 1.25; 
} 

答えて

1

限りコンテナにマージントップを与えますヘッダーの高さに合わせて、top:0px cssを.logoクラスに渡す必要があります。

.container { 
    width: 1170px; 
    margin-top: 100px; 
} 

.logo{ 
    position: fixed; 
    z-index: 2000; 
    top: 0px; 
} 
+0

パーフェクト!ありがとうございました! –

1

それはだ、それは下記のおコンテナの上に座っているように、あなたが固定されたナビゲーションバーやロゴを使用しているためです。

ちょうどあなたの.containerクラスとトップにマージントップを適用する:0あなたの.logoクラスに:

.container { 
    margin-top: 50px; //use what ever you need here for spacing. 
} 

.logo { 
    position: fixed; 
    top: 0; 
    z-index: 2000; 
} 

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

 
li { 
 
    float: left; 
 
} 
 

 
a { 
 
    display: block; 
 
    padding: 8px; 
 
    background-color: #dddddd; 
 
} 
 

 
.logo { 
 
    position: fixed; 
 
    z-index: 2000; 
 
} 
 

 
.video { 
 
position: fixed; 
 
top: 50%; 
 
left: 50%; 
 
min-width: 100%; 
 
min-height: 100%; 
 
z-index: -100; 
 
-ms-transform: translateX(-50%) translateY(-50%); 
 
-moz-transform: translateX(-50%) translateY(-50%); 
 
-webkit-transform: translateX(-50%) translateY(-50%); 
 
transform: translateX (-50%) translateY(-50%); 
 
} 
 

 
h1 { 
 
    text-align:center; 
 
    color:#a01b35; 
 
} 
 

 
.normaltext { 
 
    font-size: 18px; 
 
    font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif; 
 
    line-height: 1.25; 
 
} 
 

 
.container { 
 
    margin-top: 50px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" href="Temp.css" type="text/css"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    </head> 
 
    <body> 
 
     <div class="logo" style="display:inline;"> 
 
      <a href="Temp.html"> 
 
       <img src="robert-half-technology-logo-600(40).gif"/> 
 
      </a> 
 
     </div> 
 

 
     <nav class="navbar navbar-fixed-top"> 
 
      <div class="container-fluid"> 
 
       <ul class="nav navbar-nav pull-right"> 
 
        <li class="active"><a href="#" style="color:black;">Home</a></li> 
 
        <li><a href="Temp_AboutUs.html" style="color:black;">About Us</a></li> 
 
        <li><a href="Temp_Careers.html" style="color:black;">Careers</a></li> 
 
        <li><a href="Temp_ContactUs.html" style="color:black;">Contact Us</a></li> 
 
       </ul> 
 
      </div><br/><br/> 
 
     </nav> 
 
     <div class="container"> 
 
      <div class="row"> 
 
       <div class="col-md-8"> 
 
        <h1>About Us</h1> 
 
        <p class="normaltext"> 
 
         Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce. 
 
        </p> 
 
        <p class="normaltext"> 
 
         We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley. 
 
        </p> 
 
        <p class="normaltext"> 
 
         Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization. 
 
        </p> 
 
        <h2>1940s: The beginning</h2> 
 
        <table style="width:100%" class="normaltext"> 
 
         <tr> 
 
          <td>1948</td> 
 
          <td>Robert Half founded by Bob and Maxine Half.</td> 
 
         </tr> 
 
        </table> 
 
        <h2>1960s: High ethical standards become a cornerstone</h2> 
 
        <table style="width:100%" class="normaltext"> 
 
         <tr> 
 
          <td>1963</td> 
 
          <td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td> 
 
         </tr> 
 
        </table> 
 
        <h2>1970s: A decade of firsts</h2> 
 
        <table style="width:100%" class="normaltext"> 
 
         <tr> 
 
          <td>1973</td> 
 
          <td style="padding-left:20px">Robert Half opens its first international location in London.</td> 
 
         </tr> 
 
         <tr> 
 
          <td>1973</td> 
 
          <td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td> 
 
         </tr> 
 
        </table> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </body> 
 

 
</html>

+0

残念ながら、これはロゴ50pxも低くします。私はロゴとナビゲーションバーを一番上にして、テキストを下げておく必要があります。 –

+0

ロゴクラスにトップ:0を追加する必要があります。 –

関連する問題