2017-08-08 7 views
0

こんにちは、私は本当にこの2つの間に新しいコンテナを作成するのに苦労しています。私は白い部分に追加する:2つの既存のコンテナの間に入る新しい基本コンテナを作成する

enter image description here

私はそのすべての境界内に、それは素晴らしいことだので、レイアウトに合わせて、HTMLを取得することができます。

以下は、追加したい領域の間にあるHTMLです。

<li><a href="/Contactus.html" accesskey="5" title="">Contact Us</a></li> 
 
</ul> 
 
</div> 
 
</div> 
 
<div id="page-wrapper"> </div> 
 
<div id="featured-wrapper"> </div> 
 
<div id="contact" class="container"> 
 
    <div class="major"> 
 
    <h2>Get in touch</h2> 
 
    <span class="byline">It's easy to contact us as we are always here 
 
    to help</span> 
 
    </div> 
 
    <ul class="contact">

答えて

0

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <style> 
 
\t \t .container{ 
 
\t \t \t max-width:90%; 
 
\t \t \t min-height: 700px; 
 
\t \t \t margin:0 auto; 
 
\t \t \t padding:0; 
 
\t \t } 
 
\t \t #heading{ 
 
\t \t \t width: inherit; 
 
\t \t \t min-height: 60px; 
 
\t \t \t line-height: 59px; 
 
\t \t \t margin:0 auto; 
 
\t \t \t text-align: center; 
 
\t \t \t background-color: blue; 
 
\t \t \t color:white; 
 
\t \t \t font-family: Arial,sans-serif; 
 
\t \t } 
 
\t \t #navigation{ 
 
\t \t \t width: inherit; 
 
\t \t \t padding:0; 
 
\t \t \t margin:0; 
 
\t \t \t background-color: gray; 
 
\t \t \t color:white; 
 
\t \t \t min-height: 30px; 
 
\t \t \t line-height: 29px; 
 
\t \t \t text-align: center; 
 
\t \t } 
 
\t \t #navigation ul 
 
\t \t { 
 
\t \t \t margin:0; 
 
\t \t \t padding:0; 
 

 
\t \t } 
 
\t \t #navigation ul li{ 
 
\t \t \t display:inline; 
 
\t \t \t padding-right: 30px; 
 
\t \t \t margin:0 auto; 
 
\t \t } 
 
\t \t #navigation ul li a{ 
 
\t \t \t text-decoration: none; 
 
\t \t \t color:white; 
 
\t \t } 
 
\t \t #navigation ul li a:hover{ 
 
\t \t \t color:gray; 
 
\t \t } 
 
\t \t .panel{ 
 
\t \t \t width: inherit; 
 
\t \t \t margin:0 auto; 
 
\t \t \t height: 200px; 
 
\t \t \t color:white; 
 
\t \t \t background-color: black; 
 
\t \t \t text-align: center; 
 
\t \t \t border:1px solid black; 
 
\t \t } 
 
\t \t @media only screen and (max-width: 768px) { 
 
\t \t \t \t #heading{ 
 
\t \t \t \t \t width: 100%; 
 
\t \t \t \t } 
 
\t \t \t \t #navigation{ 
 
\t \t \t \t \t width: 100%; 
 

 
\t \t \t \t } 
 
\t \t \t \t #navigation ul 
 
\t \t \t \t { 
 
\t \t \t \t \t margin:0 auto; 
 
\t \t \t \t } 
 
\t \t \t \t #navigation ul li { 
 
\t \t \t \t \t display: block; 
 
\t \t \t \t \t margin-bottom: 5px; 
 
\t \t \t \t } 
 
\t \t } 
 
} 
 
\t </style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    \t <div id="heading"> 
 
    \t \t <h1>Connection Wellbeing Services</h1> 
 
    \t </div> 
 

 
    \t <div id="navigation"> 
 
    \t \t <nav> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">HOME PAGE</a></li> 
 
    \t \t \t \t <li><a href="#">SERVICES</a></li> 
 
    \t \t \t \t <li><a href="#">OUR CLIENTS</a></li> 
 
    \t \t \t \t <li><a href="#">ABOUT US</a></li> 
 
    \t \t \t \t <li><a href="#">CAREERS</a></li> 
 
    \t \t \t \t <li><a href="#">CONTACT US</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav> 
 
    \t </div> 
 
    \t <div class="section"> 
 
    \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    \t </div> 
 

 
    \t <div class="panel"> 
 
    \t \t <h2>Get in touch</h2> 
 
    \t </div> 
 
</div> 
 

 

 

 

 
</body> 
 
</html>

これはあなたが尋ね、それは基本的にあなたがその空白を埋めるために使用することができるの間で別のdivですされている場合、私は知りません一部のコンテンツ付き

関連する問題