0
ブラウザでサイズを変更しているときに、私の青いヘッドラインをビデオに残そうとしています。今は、ブラウザの上部から一定のピクセルまたはパーセンテージだけ移動しているため、ビデオから離れすぎてしまうことがあります。私は今はこれをモバイルの中心に置いておきたいので、ブラウザのサイズを今すぐ小さくする必要があります。後でメディアクエリを使ってタブレットとデスクトップで作業します。しかし、今のところ、モバイルメディアのクエリでは、1つの場所にとどまるようにしようとしています。私はこれがあまりにも混乱しないことを願っています...もし誰かが本当に助ける提案があれば！ここではスニペットでブラウザのサイズを変更できるとは思わないので、私はJSfiddleを含めます。私はここでもスニペットを含むでしょう。あなたの時間をありがとう！ヘッドラインがレスポンシブなデザインでビデオに残っていない
JsFiddle：https://jsfiddle.net/qbau0ze4/
#headline{
\t text-align: center;
\t position: absolute;
\t
\t
\t
\t
\t top: 160px;
\t left:30%;
\t color:#00E3FF;
\t line-height:20px;
\t font-family: 'Orbitron', sans-serif;
\t word-spacing: 1px;
\t font-size:18px;
\t
\t }
#primary .imgbox2 .change {
width:100%;
margin-left:15px;
padding-top:15px;
\t
}
.move{
\t width:100%;
margin-left:15px;
padding-top:15px;
\t
\t
}
/*
ul.menu, ul.menu ul.sub-menu{
padding: 0; \t
}
ul.menu li, ul.menu ul.sub-menu li{
list-style-type:none;
display:block;
\t
}
ul.menu li a, ul.menu li ul.sub-menu li a{
text-decoration: none;
color:#fff;
background:#666;
padding: 10px;
display:block;
margin:0;
\t
}
ul.menu li{
position:relative;
float:left;
\t
}
#hamburger{
\t width:30px;
\t height:25px;
\t
}
ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:37px;
left:0;
width: 150px;;
margin: 0 0 0 -20px; \t
}
ul.menu li:hover ul.sub-menu{
opacity:1;
left:30;
transition: ease-in-out all .4s;
-moz-transition:ease-in-out all .4s;
-webkit-transition:ease-in-out all .4s;
z-index:100;
margin: 0 0 0 0px; \t
}
*/
/********NAV BAR**************/
ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:30px;
left:0;
width: 200px;
margin: 0 0 0 0px; \t
float:left;
}
.fa-bars{
float:left; \t
}
ul.menu li:hover ul.sub-menu{
opacity:1;
left:30;
transition: ease-in-out all .4s;
-moz-transition:ease-in-out all .4s;
-webkit-transition:ease-in-out all .4s;
float:left;
width:100%;
z-index:100;
margin: 0 0 0 0px; \t
}
nav{
\t padding:0px;
\t }
\t
nav ul li {
\t
\t }
\t
nav ul li a {
\t display:block;
\t text-align: center;
\t padding: 10px;
\t background-color:#670809;
\t color:white;
\t text-decoration: none;
\t border: none;
\t
\t margin: 0px;
\t font-size: 16px;
\t }
\t
\t
nav ul li a:hover {
\t background-color: #5E5757;
\t color: white ;
\t }
\t
/*****FIGURE STAY SAME/ADJUSTABLE/VIDEO/logo******/
figure.stayssame {
\t width: 100%;
}
\t
\t
figure.adjustable {
\t \t width: 29%;
}
figure video {
\t width: 100%;
\t height: 80%;
}
.video-txt{
\t position: absolute;
\t top: 30%;
\t z-index: 9;
\t color: #FFF;
\t width: 100%;
\t text-align: center;
\t font-size: 40px;
}
object {
\t position: absolute;
\t left: 30%;
\t top: 80px;
\t z-index: 10;
\t width: 40%;
}
/*ALL CODE FROM DESKTOP*/
p{
\t padding: 2%;
\t }
html {
\t position: relative;
\t min-height: 100%;
\t }
body {
\t margin: 0 0 100px;
\t font-family: 'Inconsolata', monospace;
\t font-weight: 300;
\t font-size: 20px;
\t line-height: 1.4em;
}
.squish{
\t margin-right:125px; \t
}
.text{
\t padding:5px; \t
}
.button{
\t margin-bottom: 50px; \t
\t margin-right:auto;
\t margin-left:auto;
\t margin-top:auto;
}
header {
\t position:fixed;
\t z-index: 1000;
\t width: 100%;
\t top: 0px;
\t background-color:#670809;
\t height:50px;
\t letter-spacing:1px;
\t line-height: 55px;
\t padding:9px;
\t word-spacing:5px;
}
header, h1, h2{
\t
\t font-family: 'Orbitron', sans-serif;
}
.space{
\t
\t padding: 5px;
\t color:white;
}
form{
\t padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
padding-top:50px;
\t }
h2{
\t text-align: center;
\t color:#00E3FF;
\t font-size: 30px;
\t margin: 5px;
\t padding:20px;
\t }
p{
\t text-align: left;
\t }
.clearfix:after {
content:" ";
display:block;
clear:both;
}
#box{
background-color:#94DBEC ;
}
hr.style2 {
\t border-top: 3px double #00E3FF;
\t width: 300px;
}
hr.style2 {
width: 100%;
}
section{
width: 85%;
margin-left: auto;
margin-right:auto;
margin-top: 35px;
}
.adjustable{
\t width: 100%;
\t max-width:100%;
\t height:auto;
\t margin: 1 em;
\t
\t \t
}
#inner{
height: 100px;
padding:15px 0; \t
\t
}
#container{
height:100%;
\t
}
.imgbox5{
\t padding-right:30px;
\t padding-left:0px;
\t
}
.imgbox4{
\t
padding-right:30px;
\t padding-left:0px;
}
.imgbox3{
padding-right:30px;
\t padding-left:0px;
}
.imgbox2{
padding-right:30px;
\t
\t
}
.imgbox{
\t
padding-right:30px;
\t padding-left:0px;
\t
}
#firstpara{
\t background-color:#5E5757;
\t color: white;
\t
}
#secpara{
\t background-color:#5E5757;
\t color: white;
\t
}
#thirdpara{
\t background-color:#5E5757;
\t color: white;
\t
}
#fourthpara{
\t background-color:#5E5757;
\t color: white;
\t
}
#primary{
\t background-color:#5E5757;
\t color: white;
}
#enroll{
margin:0;
padding:0; \t
}
footer {
\t position: absolute;
\t left: 0;
\t bottom: 0;
\t width: 100%;
\t
\t height: 100px;
\t padding-bottom: 2%;
\t background-color:#670809;
\t font-family: 'Inconsolata', monospace;
\t \t
\t /* text */
\t
\t padding-left: 10px;
\t padding-top: 15px;
\t color: #ffffff;
\t font-size: 15px;
\t text-align:center;
\t
\t
}
a { color: white; }
a, a:active { color: white;
text-decoration:none;
}
.side{
left-margin:10px;
right-margin:10px; \t
}
\t
\t
\t
\t
\t
\t
\t #value{
\t background-color:#5E5757;
\t color: white;
\t width:90%;
\t margin-left: auto;
margin-right:auto;
margin-top:2%;
\t
\t
\t }
\t
\t
\t
#title{
color:white;
text-align:center;
padding-top:10px;
\t
}
img{
width: 100%;
}
.msum{
\t position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
left: 0;
right: 0;
margin: 0 auto;
\t
}
span{
font-size: 14px; \t
}
.smaller{
font-size: 16px;
\t
}
/*NAV BAR
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300");
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;}
body{font-size: 1.6rem; min-height: 100vh;}
h1{font-size: 3rem; margin-bottom: 1rem;}
h2{font-size: 1.6rem;}
header{position: relative;}
main{padding: 2rem;}
/***************** NAVIGATION *************
nav ul{
\t display: flex;
\t flex-wrap: wrap;
\t margin: 0 auto; \t \t
background: #670809;
}
nav ul,
nav li{
\t flex: 1; \t
}
nav li:last-child{border-bottom: none;}
nav a{
\t text-decoration: none;
\t color: inherit;
\t display: block;
\t font-size: 1.8rem;
}
nav a:hover{
\t background: /*#adacac#555;
\t color: #fff;
}
nav li{
\t position: relative;
\t line-height: 50px;
\t color: #fff;
\t text-align: center;
}
nav input,
nav label{
\t display: none;
\t width: 36px;
\t height: 36px;
\t background: #555;
\t color: #fff;
\t text-align: center;
\t line-height: 36px;
\t font-size: 1.6rem;
\t border-radius: 4px;
}
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
\t font-family: FontAwesome;
\t font-size: 24px;
\t content: "\f0c9";
\t text-align: center;
}
/*************** MEDIA QUERIES ***************
\t nav ul{
\t \t transform: translateY(0);
\t \t box-shadow: 0 0 5px rgba(0,0,0, .7);
transition: all .5s;
\t }
\t nav li{
\t \t flex: none;
\t \t width: 100%;
\t \t border-bottom: solid 1px #777;
\t }
\t nav input[type="checkbox"]:checked + ul{
\t \t transform: translateY(-100%);
\t \t width: 100%;
\t \t background: #999;
transition: all .5s;
\t }
\t nav label{display: block;}
\t nav input[type="checkbox"]:checked + ul li:nth-child(1){
\t \t background: #777;
\t \t color: #fff;
\t }
\t
\t #css-toggle-menu{
\t float:right;
\t margin: 10px;
\t }
\t
\t
/*********FORMS CSS*************/
form.contact label{
display: block;
}
span{
display:block;
border: none;
color:#4B4B4B;
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
section{
width: 95%; \t
}
fieldset{
width: 45%; \t
float:left;
border:none;
}
input.checks{
width: auto; \t
}
.left{
width: 45%;
float:left; \t
}
.right{
width:45%;
float: right; \t
}
input{
\t border: none;
border-bottom: 2px solid #959595;
\t width: 300px;
\t margin:3px;
\t color:#6C6A6A;
\t padding-top:10px;
\t padding-bottom: 10px;
\t
\t }
\t
\t .bottom{
\t \t border: none;
\t
\t margin:3px;
\t
\t color:#6C6A6A;
\t padding-top:10px;
\t padding-bottom: 10px;
\t width: 300px;
\t }
\t .fa{
margin-right: 10px;
\t }
\t legend{
\t color:#2C2A2A;
\t }
\t
.button {
display: inline-block;
padding: 15px 25px;
font-size: 14px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color:#595959;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
width: 150px;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}<body>
<header>
<nav>
<ul class="menu">
<li class="active">
\t <a id="hamburger" href="#" ><i class="fa fa-bars fa-2x " aria-hidden="true"></i>
</a>
<ul class="sub-menu">
<li class="sub-menu">
\t <a class="space" href="#" >Home</a>
</li>
<li class="sub-menu">
\t <a class="space" href="#" >Programs</a>
</li>
<li class="sub-menu">
\t <a class="space" href="#" >Assignments </a>
</li>
<li class="sub-menu">
\t <a class="space" href="#" > Enroll</a>
</li>
<li class="sub-menu">
\t <a class="space" href="#" >Contact</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
<!--
<ul class="main">
<li><a class="space" href="">Home</a></li>
<li><a class="space" href="">Programs</a></li>
<li><a class="space" href="">Assignments</a></li>
<li><a class="space" href="">Enroll</a></li>
<li><a class="space" href="">Contact</a></li>
</ul> -->
<!--
<header>
<nav>
<input type="checkbox" id="css-toggle-menu" name="css-toggle-menu">
<ul class="main">
<a class="space" href="headervideo2.html">Home</a>
<a class="space" href="about.css">Programs</a>
<a class="space" href="contact.css">Assignments</a>
<a class="space" href="msum.css"> Enroll</a>
<a class="space" href="msum.css"> Contact</a>
</ul>
<label for="css-toggle-menu" id="css-toggle-menu"></label>
</nav>
-->
<div id="content">
<!--msum logo-->
<figure class="stayssame">
<video controls loop poster="placeholder.png" autoplay>
<source src="video.mp4" type="video/mp4">
<!-- <source src="movie.ogg" type="video/ogg">-->
Your browser does not support the video tag.
</video>
<h1 id="headline">Intermediate Web Design:
<br>
Fun, Insightful, Experience
</h1>
<object type="image/svg+xml" data="comweb2.svg" ></object>
</figure>
<div id="value" >
<div id="title">We Want You</div>
<p >
Intermediate Web Design is a great class to take because it is a fun learning experience that is taught through not only traditional lecture style classes, but group projects and interactive teaching. It is the class to take to learn professional standards and programs that are used in current digital offices. </p>
</div>
<div class="video-txt" ></div>
<section >
<section>
<div id="box">
<h1> GCOM 366</h1>
<section class="clearfix" id="primary">
<div class="imgbox2">
<figure class="change">
<img id="pic1" class="adjustable" src="RDesign3.jpg" alt="example web page" >
</figure>
</div>
<h2> Benefits</h2>
<p class="side">
1. \t Learn industry standard programs
<br>
2. \t Build Portfolio
<br>
3. \t Increase collaboration skills
<br>
4. Become more creative
<br>
5. Understand good layout
<br>
6. Feel confident in HTML/CSS
</p>
</section>
<section class="clearfix" id="firstpara">
<div class="imgbox">
<img id="pic2" class="adjustable move" src="techpic4.jpg" alt="example web page" width="300" height="300">
</div>
<h2>Overview</h2>
<p class="side">
Intermediate Web Design is a class that enhances the skills learned in intro to web design. Subjects will include web hosting, text editors such as the Atom, HTML, CSS, jQuery, Responsive Design, and UI/UX, and Forms. You will learn through lectures, demonstrations, reading assignments, and hands-on experiences. We will be working with a variety of materials, typically in a teaching presentation and assignments, with listed resources.
</p>
</section>
<section class="clearfix" id="secpara">
<div class="imgbox4">
<img id="pic3" class="adjustable float move" src="techpic1.jpg" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 1</h2><p class="side"> “Many different days before sections in the course are inspirational days. These talk about the industry standards and help to inspire students to "Create"
-Tyrion Lannister
</p>
</section>
<section class="clearfix" id="thirdpara">
<div class="imgbox3">
<img id="pic4" class="adjustable move" src="techpic2.jpg" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 2</h2>
<p class="side">
"I've struggled with coding for ages but was able to finally get a grasp on it from this class"
-Tweety Bird
</p>
</section>
<section class="clearfix" id="fourthpara">
<div class="imgbox5">
<img id="pic5" class="adjustable float move" src="techpic55" alt="example web page" width="300" height="300" >
</div>
<h2>Student Review 3</h2>
<p class="side">
“This class is up to date on the latest techniques, the instructor is willing to go the extra mile, and the class is well structured”
-Pappa Smurf
</p>
</section>
</div>
</section>
</div><!-- end of the row-->
<div class="center clearfix">
<h1>Contact</h1>
<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix ">
<section class="clearfix">
<fieldset><legend>
<i class="fa fa-user" aria-hidden="true"></i>Personal Information
<hr class="style2">
</legend>
<label><span></span> <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/>
</label>
<label><span>
</span><input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/>
</label>
<label><span> </span><input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/>
</label>
<label><span>
</span><input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label>
<label ><span></span> <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label>
<select class="bottom" name="education_level">
<option value="High School">High School</option>
<option value="Undergraduate">Undergradute</option>
<option value="Graduate">Graduate</option>
</select>
</fieldset>
<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i>
Contact Information <hr class="style2"></legend>
<label><span>
</span><input class="ghost-input" name="email" value="" type="email" placeholder="[email protected]" autocomplete="off" /></label>
<label><span></span><input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /></label>
<label><span></span><input name="website" value="" type="url" placeholder="https://yourwebsite.com"/></label>
</fieldset>
</section>
<section class="clearfix column" >
<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>
What are your Interests <hr class="style2"></legend>
<section class="clearfix column left" >
<label class="bottom span" ><span ><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span>
</label>
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span>
</label>
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span></label>
</section>
<section class="clearfix column left" >
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span>
</label>
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span></label>
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span>
</label>
</section>
</fieldset>
<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true">
</i>
Continuation <hr class="style2 toosmall"></legend>
<section class="clearfix column left" >
<legend class="smaller">You can contact me by:</legend>
<br>
<div class="squish">
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label>
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span></label>
<br>
</div>
</section>
<section class="clearfix column left" >
<legend class="smaller" >I'm interested in:</legend>
<br>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span></label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span></label>
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span></label>
</section>
</fieldset>
</section>
<input class="button" name="submit_to_programmer" type="submit" value="Submit"/>
<input type="hidden" value="Message from Car Website" name="subject">
<input name="redirect" type="hidden" value="thanks.html">
</form>
<br>
<script src="https://use.fontawesome.com/8f5d316ef9.js"></script>
</div>
<footer>
<a id="enroll" href="https://www.mnstate.edu/eservices/"> Enroll Now</a>
<div class="text">
MaKayla McLain-Graning © 2016</div>
<br>
<img class="msum" src="msum copy.png" alt="msum logo" />
</footer>
</body>
私はトップが70％も持っているためにそれを少し微調整しなければならなかったが、それは働きました！どうもありがとうございます！！！ほんとうにありがとう！！！ – Cakers
問題なく、うまくいきました。 :) – sol