0
我試圖讓我的藍色標題留在我的視頻，當我在瀏覽器中調整它。現在，它只是從瀏覽器的頂部開始移動某個像素或百分比，導致它被推離視頻太遠。我現在只希望這一切都以移動爲中心，所以你現在必須調整瀏覽器的尺寸來縮小尺寸。之後我將在平板電腦和桌面上處理媒體查詢。但是現在我只是想在移動媒體查詢時將它留在一個地方。我希望這不是太混亂......如果任何人有任何建議，真的會有所幫助！我將包含一個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