1
私は、コースに関する情報を提供するdivを作成しています。この情報は、コースの価格と、購入ページにリンクする「Take Class」と表示されるボタンです。しかし、リンクは他の情報に漏れています。私のdivが私の他のコンテンツにリンクするのはなぜですか？
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
a {
text-decoration: none;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* courses.php */
/* course intro */
#course_body {
background: #F4F4F4;
}
#course_intro {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: 40px;
left: 50px;
}
#intro_title {
width: 562px;
position: relative;
top: 2px;
}
#intro_video {
width: 375px;
height: 210px;
position: relative;
top: -7px;
}
/* end of course intro */
/* course facts */
/* Price Information */
#price_tag {
font-size: 32px;
font-weight: bold;
color: #373737;
position: relative;
top: -15px;
}
#price_div {
background: #17AA1C;
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 18px;
width: 116px;
font-weight: normal;
position: relative;
top: 12px;
border-radius: 3px;
}
#price_div:hover {
background: #159D1A;
}
#price_div {
text-decoration: none;
}
/* End of Price Information */
#course_facts {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: -311px;
left: 675px;
font-size: 20px;
height: 115px;
}
.Rating {
position: relative;
width: 125px;
height: 25px;
top: -111px;
left: 180px;
}
.Rating svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}
#facts_ratings {
position: relative;
top: -110px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
left: 175px;
}
#course_length {
position: relative;
top: -100px;
left: 185px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#course_time {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
}
/* end of course facts */
/* skill level */
#course_skillText {
position: relative;
top: -190px;
left: 310px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
.fillSquare, .emptySquare {
display: inline-block;
position: relative;
left: 80px;
}
.fillSquare {
width: 12px;
height: 12px;
background: #666;
}
.emptySquare {
width: 12px;
height: 12px;
background: #B8B8B8;
}
#skill_level {
position: relative;
left: 85px;
top: -2px;
font-size: 12px;
letter-spacing: 1px;
font-weight: normal;
color: #2E3D49;
}
/* end of skill level */
/* language */
#course_language {
position: relative;
top: -154px;
left: 235px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}
#language_type {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
position: relative;
left: 153px;
}
/* end of language */
/* Wish List button */
#course_wish {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
position: absolute;
width: 87px;
padding: 5px;
position: relative;
top: -65px;
cursor: pointer;
box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
border-radius: 3px;
}
#empty_heart {
color: #FF827F;
}
#course_wish_text {
position: relative;
left: 5px;
}
/* End of Wish List button */
/* Teacher div */
#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
text-align:center;
}
#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
}
#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
}
#teacher_div a {
text-decoration: none;
color: #00698C;
}
#teacher_div a:hover {
text-decoration: underline;
}
#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
}
#course_line {
width: 325px;
height: 1px;
background: #DDD;
}
#teacher_info {
width: 325px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align:left;
}
/* End of Teacher div */
/* Course Learn */
#course_learn {
background: white;
border: 1px solid #DDD;
width: 280px;
position: relative;
top: -660px;
left: 674px;
font-family: 'Open Sans', sans-serif;
padding: 15px;
max-height: 240px;
font-size: 18px;
overflow: hidden;
background-image: rgba(244,244,244,0);
}
#course_learn li {
font-size: 15px;
color: #353535;
padding: 5px;
text-align: left;
}
/* End of Course Learn */
/* end of courses.php */<?php
require "connect.php";
?>
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>
<body id='course_body'>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Development</a>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">Mobile Apps</a></li>
<li><a href="#">Programming Languages</a></li>
<li><a href="#">Game Development</a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Software Testing</a></li>
<li><a href="#">Software Engineering</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">E-Commerce</a></li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Finance</a></li>
<li><a href="#">Entrepreneurship</a></li>
<li><a href="#">Communications</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Strategy</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Project Management</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Data and Anylytics</a></li>
<li><a href="#">Home Business</a></li>
<li><a href="#">Human Resources</a></li>
<li><a href="#">Industry</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">IT & Software</a>
<ul>
<li class="dir"><a href="#">IT Certification</a></li>
<li class="dir"><a href="#">Network & Security</a>
<li><a href="#">Hardware</a></li>
<li><a href="#">Operating Systems</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
<ul>
<li class="dir"><a href="#">Microsoft</a></li>
<li class="dir"><a href="#">Apple</a>
<li><a href="#">Google</a></li>
<li><a href="#">SAP</a></li>
<li><a href="#">Intuit</a></li>
<li><a href="#">Salesforce</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
<ul>
<li class="dir"><a href="#">Personal Transformation</a></li>
<li class="dir"><a href="#">Productivity</a>
<li><a href="#">Leadership</a></li>
<li><a href="#">Personal Finance</a></li>
<li><a href="#">Career Development</a></li>
<li><a href="#">Parenting & Relationships</a></li>
<li><a href="#">Happiness</a></li>
<li><a href="#">Religion & Spirituality</a></li>
<li><a href="#">Personal Brand Building</a></li>
<li><a href="#">Creativity</a></li>
<li><a href="#">Influence</a></li>
<li><a href="#">Self Esteem</a></li>
<li><a href="#">Stress Management</a></li>
<li><a href="#">Memory and Study Skills</a></li>
<li><a href="#">Motivation</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Design</a>
<ul>
<li class="dir"><a href="#">Web Design</a></li>
<li class="dir"><a href="#">Graphic Design</a>
<li><a href="#">Design Tools</a></li>
<li><a href="#">User Experience</a></li>
<li><a href="#">Game Design</a></li>
<li><a href="#">Design Thinking</a></li>
<li><a href="#">3D & Animation</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Architectural Design</a></li>
<li><a href="#">Interior Design</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Marketing</a>
<ul>
<li class="dir"><a href="#">Digital Marketing</a></li>
<li class="dir"><a href="#">Search Engine Optimization</a>
<li><a href="#">Social Media Marketing</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Marketing Fundamentals</a></li>
<li><a href="#">Analystics & Automation</a></li>
<li><a href="#">Public Relations</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Video & Mobile Marketing</a></li>
<li><a href="#">Content Marketing</a></li>
<li><a href="#">Non-Digital Marketing</a></li>
<li><a href="#">Growth Hacking</a></li>
<li><a href="#">Affiliate Marketing</a></li>
<li><a href="#">Product Marketing</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Lifestyle</a>
<ul>
<li class="dir"><a href="#">Life Hacks</a></li>
<li class="dir"><a href="#">Arts & Crafts</a></li>
<li class="dir"><a href="#">Food & Beverage</a>
<li><a href="#">Beauty & Makeup</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Home Improvement</a></li>
<li><a href="#">Pet Care & Training</a></li>
</ul>
<li><a href="#">Photography</a>
<ul>
<li class="dir"><a href="#">Digital Photography</a></li>
<li class="dir"><a href="#">Photography Fundamentals</a></li>
<li class="dir"><a href="#">Portraits</a>
<li><a href="#">Landscape</a></li>
<li><a href="#">Black & White</a></li>
<li><a href="#">Photography Tools</a></li>
<li><a href="#">Mobile Photography</a></li>
<li><a href="#">Travel Photography</a></li>
<li><a href="#">Commercial Photography</a></li>
<li><a href="#">Wedding Photography</a></li>
<li><a href="#">Video Design</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Health & Fitness</a>
<ul>
<li class="dir"><a href="#">Fitness</a></li>
<li class="dir"><a href="#">General Health</a></li>
<li class="dir"><a href="#">Sports</a>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Mental Health</a></li>
<li><a href="#">Dieting</a></li>
<li><a href="#">Self Defense</a></li>
<li><a href="#">Safety & First Aid</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">Meditation</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Language</a>
<ul>
<li class="dir"><a href="#">English</a></li>
<li class="dir"><a href="#">Spanish</a></li>
<li class="dir"><a href="#">German</a>
<li><a href="#">French</a></li>
<li><a href="#">Japanese</a></li>
<li><a href="#">Portuguese</a></li>
<li><a href="#">Chinese</a></li>
<li><a href="#">Russian</a></li>
<li><a href="#">Latin</a></li>
<li><a href="#">Arabic</a></li>
<li><a href="#">Hebrew</a></li>
<li><a href="#">Italian</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Music</a>
<ul>
<li class="dir"><a href="#">Instruments</a></li>
<li class="dir"><a href="#">Production</a></li>
<li class="dir"><a href="#">Music Fundamentals</a>
<li><a href="#">Vocal</a></li>
<li><a href="#">Music Techniques</a></li>
<li><a href="#">Music Software</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Academics</a>
<ul>
<li class="dir"><a href="#">Social Science</a></li>
<li class="dir"><a href="#">Math & Science</a></li>
<li class="dir"><a href="#">Humanities</a>
</ul>
</ul>
</nav>
<!-- end of info nav -->
<!-- Course Introduction -->
<div id='course_intro'>
<div id='intro_title'>
Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
<video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
</div>
<!-- End of Course Introduction -->
<!-- Course Facts -->
<div id='course_facts'>
<!-- Purchase Information -->
<span id='price_tag'> $30 <br>
<a href='#'> <div id='price_div'> Take Class </div> </a>
</span>
<!-- End of Purchase Information -->
<!-- Star Ratings -->
<span id='facts_ratings'> 400 Ratings </span>
<div class="Rating">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>
<meter min="0" max="5" value="4.28"></meter>
</div>
<!-- End of Star Ratings -->
<!-- Length -->
<span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
<!-- End of Length -->
<!-- Skill Level -->
<span id='course_skillText'> Skill Level <br> <span id='course_skill'>
<!-- Skill Boxes -->
<div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div>
<!-- End of Skill Boxes -->
<span id='skill_level'> Intermediate </span>
</span> </span>
<!-- End of Skill Level -->
<!-- Language -->
<span id='course_language'> Language <br> <span id='language_type'> English </span> </span>
<!-- End of Language -->
<!-- Wish List Button -->
<div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
<!-- End of Wish List Button -->
</div>
<!-- End of Course Facts -->
<!-- Teacher Div -->
<div id='teacher_div'>
<a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>
<a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>
<div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div> <br>
<div id='course_line'></div> <br>
<div id='teacher_info'> Hello! My name is Andy and I am a professional voice actor. Top-Rated & Featured Seller on Fiverr. Over 5K+ people served worldwide! Proud to be the voice for the Fiverr App! Providing voice services for Commercials, Narrations, E-Learning, Explainer Videos, Apps and more! See my reviews... </div>
</div>
<!-- End of Teacher Div -->
<!-- What you'll learn -->
<div id='course_learn'>
<span id='learn_text'> What you'll learn </span>
<ul>
<li> Build a polished and fun platform game using GameMaker Studio. </li>
<li> Import image, sound, and background assets into GameMaker Studio. </li>
<li> Program using GameMaker Studio's built in scripting language GML (GameMaker Language). </li>
<li> Create game objects and control them using Events and Actions. </li>
<li> Design game levels using Rooms. </li>
</ul>
</div>
<!-- End of What you'll learn -->まだボタンを超えたリンクであるボタンから渡って行を探し、このエラーを複製します。スキルレベルと言語の途中で試してみてください。
この問題を解決するにはどうすればよいですか？
を試してみてください、あなたの例のコードを含む、気になります。私はあなたに従っていないと思う。 '＃prize_div'は親要素ではありません。私は '116px'の幅を設定していませんか？ –
price_divの親はアンカーです。私が何を意味するかを見るためにprice_div要素を左に浮かべてください。 – Rob
@JackManあなたは今何を意味しているのか分かります。あなたがしたことは、 "コンテンツ"の幅を116pxに設定しますが、要素自体は依然として全幅を占めています。その要素を左に浮かせれば、div自体が崩壊し、幅が116pxになります。 – Rob