-2
これは非常に基本的だが、私の頭を包んでいるようには見えない。私はテキストの右側にイメージを浮かそうとしていますが、そのたびにイメージが実際には右に浮かんでいますが、フッターが一番上に飛び出し、白い背景色が消えてしまいます。私はこの恥ずかしいエラーを解決しようとしているのに驚くほど2日間過ごしましたが、結果はありません。私たちと右の画像についてのコメントの下に包まれているの責任フッタが上に飛び出すことなく画像を浮かせる方法と背景色が消える
コード：ここにもコメントし、私のCSSは
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Learninghub </title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slide2.css">
<link rel="stylesheet" href="css/simple-slideshow-styles.css">
</head>
<body>
<div class = "body">
<div class = "header">
<div class = "wrapper">
<div class = "left">
<a href ="http://pac-center.com/#/ms-23/1">
<img src = "images/learninghub.png" width = "406" height = "75" alt" The learninghub and paccenter logo ">
</a>
</div>
<div class = "right">
<img src = "images/call.png" width = "15" height = "15" alt " call icon">
<div class = "today">
<small>Call us today</small></br>
<strong>09-2921465</strong>
</div>
</div>
<div class = "right_2">
<img src = "images/location.png" width = "10" height = "15" alt " location icon">
<div class = " right_1">
<a href = "https://www.google.com.ng/maps">
<small>Suite 1, Capital Hub Mall, Plot 272 Ahmadu Bello Way</small></br>
<strong> Along Wuse-Gwarinpa-Next Express Way, F.C.T Abuja.</strong></small>
</a>
</div>
</div>
</div>
</div>
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="index.php">Home</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">About Us +</label>
<a href="About us.html">About Us</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="methodology.html">Methodology</a></li>
</ul>
</li>
<li><a href="service.html">Services</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">List of Courses +</label>
<a href="#">List of Courses</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="administration.html">Administration</a></li>
<li><a href="agriculture.html">Agriculture</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Ongoing Courses +</label>
<a href="#">Ongoing Courses</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="creative.html">Creative</a></li>
<li><a href="enterprise.html">Enterprise</a></li>
<li><a href="excel.html">Microsoft Excel</a></li>
<li><a href="Hardware.html">Hardware</a></li>
<li><a href="management.html">MIS</a></li>
<li><a href="microsoft_office.html">Microsoft Office</a></li>
<li><a href="networking.html">Networking</a></li>
<li><a href="webdesign.html">Web Design</a></li>
<li><a href="webdev.html">Web Development</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="https://www.facebook.com/TheLearningHubNG/"><img src="images/soc/facebook1.png" height="32" width="32"></a></li>
<li><a href="https://twitter.com/LearningHubNG"><img src="images/soc/twitter1.png" height="32" width="32"></a></li>
<li><a href="https://www.instagram.com/thelearninghub_ng/"><img src="images/soc/instagram1.png" height="32" width="34"></a></li>
</ul>
</nav>
<div class ="about_wrap">
<div class = "aboutus">
<header><h1>ABOUT US</h1></header>
<content>
<p>
The Learning Hub was established with the objective of developing and facilitating learning processes designed
to maximise capacity building and self-development. We have extensive experience and appreciable competence
in rendering quality services to our clients. The business and work environment changes quickly.
The Learning Hub is an operating name and also the training and capacity building outfit of PACCENTER LTD. The
Learning hub has been specifically dedicated as the Training and Consultancy services of PAC CENTER LTD.
PAC CENTER LTD is accredited by the Centre for Management Development (CMD) and is duly registered with the
Computer Professionals Registration Council of Nigeria (CPN).</p>
</content>
</div>
<div class = "aboutus">
<header><h1>OUR MISSION</h1></header>
<content>
<p>
To deliver skills and knowledge that significantly increase our course participants' on-the-job productivity,
thereby enhancing their contributions to the goals of their organisation.
</p>
</content>
</div>
<div class = "aboutus">
<header><h1>OUR VISION</h1></header>
<content>
<p>
To become the preferred partner to organisations and individuals by providing the most comprehensive
professional and personal growth training.
</p>
</content>
</div>
<div class = "aboutus">
<header><h1>OUR CORE VALUES</h1></header>
<content>
<p>
Through these values we create success:
</p>
<ul>
<li><span>L: Listen with empathy to problems</span></li>
<li><span>E: Examine various opinions critically</span></li>
<li><span>A: Acknowledge and discuss the differences and similarities</span></li>
<li><span>R: Recommend the best solution</span></li>
<li><span>N: Nonstop implementation and evaluation</span></li>
</ul>
</content>
</div>
<a href="formpage.html" id = "button">Register Here</a>
</div>
<div class ="right_image">
<img src = "images/gallery/about.png" width = "100%" alt "">
</div>
<div class = "bk">
<footer>
<div class = "footer_left">
<a>
<footer><p> © 2017 thelearningHub </p></footer>
</a>
</div>
<div class = "mobile_footer">
<div class = "footer_right">
<footer><p> We are social </p></footer>
</div>
<div class = "footer_social">
<a href="https://www.facebook.com/TheLearningHubNG/"target="new" title="Facebook">
<img class="socialicon" src="images/soc/facebook1.png" height="15" width="15">
</a>
<a href="https://twitter.com/LearningHubNG" target="new" title="Twitter">
<img class="socialicon" src="images/soc/twitter1.png" height="15" width="15">
</a>
<a href="https://www.instagram.com/thelearninghub_ng/" target="new" title="Instagram">
<img class="socialicon" src="images/soc/instagram1.png" height="15" width="15">
</a>
</div>
</div>
</footer>
</div>
</div>
</body>
です：ここに私のhtmlコードです。
/***********About us************/
.about_wrap{
width:40%;
float:left;
}
.aboutus{
padding-top: 20px;
width:95%;
padding-left:30px;
font-size: 15px;
margin-bottom: 20px;
}
.aboutus h1{
margin-bottom: 20px;
text-decoration: underline;
}
ul li {
color: #FFC213;
list-style-type: square;
margin-left: 2em;
}
ul li span {
color: black;
}
/******************Right images*****************/
.right_image{
width:30%;
}
/******************event images*****************/
.imgitem{
width: 100%;
overflow:hidden;
}
.image1, .image2, .image3{
float:left;
width:31%;
height: auto;
margin: 1%;
}
/******************gallery*****************/
.imgitem{
width: 100%;
overflow:hidden;
padding-left: 25px;
}
.img1, .img2, .img3, .img4{
float:left;
width:20%;
height: auto;
margin: 2%;
}
/***************contact**********/
.backg{
float:left;
overflow: hidden;
width:50%;
background: white
}
.container{
margin: 5%;
padding:10%;
background: #FFC213;
}
.container img{
float:left;
margin-right:6px;
}
.topcontent{
padding-bottom: 20px;
}
.middlecontent{
padding-bottom: 20px;
}
/**************form button*******************/
#container {
background: white;
width:50%;
overflow:hidden;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#contact {
background:#9B9B9B;
padding:25px;
margin:32px 35px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#contact textarea {
height:100px;
max-width:100%;
resize:none;
}
#contact button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:#FFf;
color:#000000;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#contact button[type="submit"]:hover {
background:#FFC213;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#contact input:focus, #contact textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
.error {
color: black;
}
.success {
color: black;
text-align: center;
font-weight: bold;
font-size: 14px;
}
/****************Newsletter********************/
#get_email button[type="submit"] {
cursor:pointer;
width:100px;
border:none;
background:#000;
color:#fff;
margin-top: -24px;
padding:10px;
font-size:15px;
border-radius: 4px;
}
/****************Registration********************/
#reg {
background: white;
width:90%;
overflow:hidden;
}
#Course {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
#reg_contact{
padding:25px;
margin:50px;
}
#reg input[type="text"], #reg_contact input[type="email"], #reg_contact input[type="tel"], #reg_contact input[type="url"], #reg_contact textarea, #reg_contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }
#reg {
background:#ADADAD;
padding:25px;
margin:32px 35px;
}
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#reg input[type="text"], #reg input[type="email"], #reg input[type="tel"], #reg input[type="url"], #reg textarea {
width:100%;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:10px;
}
#reg input[type="text"]:hover, #reg input[type="email"]:hover, #reg input[type="tel"]:hover, #reg input[type="url"]:hover, #reg textarea:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition:border-color 0.3s ease-in-out;
border:1px solid #AAA;
}
#reg textarea {
height:100px;
max-width:100%;
resize:none;
}
#reg button[type="submit"] {
cursor:pointer;
width:100%;
border:none;
background:black;
color:white;
margin:0 0 5px;
padding:10px;
font-size:15px;
}
#reg button[type="submit"]:hover {
background:#FFC116;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#reg button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
#reg input:focus, #reg textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
/*****************Button*******************/
#button {
background-color: #FFC213;
border: none;
color: black;
padding: 8px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
margin-left: 40px;
}
/*****************Googlemap*******************/
.mymap{
margin-left: 34px;
margin-right: 35px;
background-color: #FFC213;
}
/********* footer ***********/
.footer_left{
margin-top: 20px;
margin-bottom: 20px;
float:left;
margin-left: 30px;
color: white;
}
.footer_right{
float: left;
color: white;
margin-right: 8px;
}
.footer_social{
padding-right: 30px;
}
.footer_social a{
display: inline-block;
margin-right: 5px;
}
.mobile_footer{
float:right;
margin-top: 18px;
width :18%;
}
.bk{
background:black;
height: auto;
margin: 0 auto;
overflow:hidden;
}