So, I added a customized live tweet feature to the website, using something called 'twitter-post-fetcher, and I'm trying to get rid of this random bullet-point next to the live tweet. I tried adding it 'list-style'but that doesn't seem to be working.
Thanks in advance.
<!-- Custom CSS -->
<link href="css/customstyle.css" rel="stylesheet">
<style type="text/css">
.border{
border-right:1px solid #000;
}
footer{
margin-top: 300px;
}
.audio-peri-soc{
width:190%;
line-height: 45px;
}
.social-media{
display: block;
}
.unstyled{
list-style-type: none;
}
.border{
border-right:2px solid #ccc;
height:100px;
}
.col-lg-4{
width:30%;
list-style-type: none;
}
.compress .col-xs-9{
width: 200%;
padding-left: none;
}
.compress .col-xs-4{
padding-left:0;
}
.compress .col-lg-8 div{
margin:0;
padding: 0;
color:black;
font-size: 15px;
width:100%;
}
.blue{
color:#fff;
bottom:0;
margin-top:-10px;
margin-left: 10px;
font-size: 10px;
}
.compress{
width:100%;
margin: 0;
}
.twitter-fav-icon{
margin-left: 5px;
}
.compress p, a {
font-family:Arial,Sans-Serif;
font-size:13px;
color:black;
text-decoration:none;
margin: 0;
}
.compress ul li {
list-style:none;
overflow:hidden;
margin:50px;
padding:5px;
width:100%;
}
#example1{
margin-left: -40px;
padding: 0;
list-style-type: none;
}
.interact a{
margin: 0 0 0 5px;
padding: 0;
text-decoration: none;
}
.compress ul li:hover {
background-color:#fff;
}
.compress .user, .tweet, .timePosted {
float:none;
}
.compress a, a:visited {
color:#999;
}
.compress a:hover {
color:#ccc;
}
body{background:url('http://www.placehold.it/1200x800/cccccc/000000') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin: 0;}
.effect{
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 10px 100px 0 #000000;
box-shadow: inset 1px 0 10px #000000;
}
.col-md-7 p{
font-size:15px;
line-height: 230%;
text-align: justify;
width: 500px;
margin-top: -30px;
}
#footerSlideButton {
background-image:url('http://placehold.it/50x50');
background-repeat:none;
position: absolute;
top: -55px;
right: 20px;
width:50px;
height:50px;
border: none;
cursor: pointer;
}
.container .pull-left p{
margin: 0;
color:blue;
padding:0;
}
.navbar-fixed-bottom p{
margin: 20px;
font-size: 15px;
}
.navbar-fixed-bottom {
position: fixed;
bottom: -20px;
height: 0;
width: 100%;
background-color:#ffffff;
padding: 10px 0;
margin: 0;
}
#media (max-width:630px) {
ul{
color: blue;
}
}
</style>
</head>
<body>
<footer>
<div class="container" id="contact" name="contact">
<div class="row">
<br>
<h1 class="centered">THANKS FOR VISITING US</h1>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
<script>...</script>...
</div><!-- col -->
<div class="col-lg-4 border">
<form class="form-horizontal" role="form">
<div class="form-group">
</div>
</form><!-- form -->
</p>
</div><!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<div id="example1"></div>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div><!--End mc_embed_signup-->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="60%" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/226657681&color=999999&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false"> </iframe>
</div>
</div>
</footer>
</body>
</html>
Assuming you want no bullet points at all.
* {
list-style-type: none;
}
Related
I have a problem with my stupid and awful code.(HTML&CSS)
It's a copy of Airbnb's top page to study.
reference: https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1568702785_MTQxMDA4ZDc4ZmM0
1.header-width
Somehow, My header-size of width is very short.
I make it become longer the width of this site to 1050px.
so the [header-right] has to become align right.
2.footer positon
My footer stands around the center of the site somehow.
3.the position of picture
In the div class[host-voice-wrapper],
there is a picture(Emma) in the bottom.
But I want it to be the right of sentences.
1.check the original source code of Airbnb
1.
~HTML~
-----------
<header>
<div class="header-left">
<div class="header-logo">
<img src="./img/246x0w.jpg">
</div>
<div class="header-list">
<ul>
<li>概要</li>
<li>準備</li>
<li>安全</li>
<li>マネープラン</li>
</ul>
</div>
</div>
-----------
~CSS~
-----------
header{
height:60px;
padding: 10px 20px;
position:fixed;
z-index:10;
background-color: white;
}
.header-left{
float:left;
display:flex;
}
.header-logo img{
width:50px;
}
.header-list li{
float:left;
padding-right:30px;
font-weight:bold;
}
.header-list li:hover{
border-bottom:1px solid #7f7f7f;
}
.header-right{
float:right;
}
.expect-income{
}
.amount{
font-size:25px;
font-weight:bold;
}
.start{
padding:10px 15px;
background-color:#dc143c;
color:white;
border-radius:5px;
margin:10px;
}
.start:hover{
cursor:pointer;
transition:0.3s;
}
-----------
2.
~HTML~
-----------
<footer>
<img class="footer-logo" src="./img/246x0w.jpg">
<a>
Airbnb Global Services Limited
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)
© 2019 Airbnb, Inc. All rights reserved.</a>
</footer>
-----------
~CSS~
-----------
footer{
height:40px;
border-top:1px solid #808080;
padding:10px 0 30px 20px;
}
.footer-logo{
width:20px;
}
footer a{
font-size:15px;
}
-----------
3.
~HTML~
-----------
<div class="host-voice-wrapper">
<div class="container">
<div class="contents">
<div class="voice">
<i class="fas fa-quote-left fa-2x my-orange"></i>
<br></br>
<a class="voice-text">「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</a>
<br>
<a class="host-introduce">Emmaさんはロンドンのホスト。自由度の高さに魅力を感じています</a>
<br>
<a class="btn example">ホスト実践例をチェック</a>
</div>
<div class="Emma">
<img src="./img/Emma.jpg">
</div>
</div>
-----------
~CSS~
-----------
.host-voice-wrapper{
margin-top:100px;
}
.contents{
float:left;
}
.voice{
width:40%;
}
.voice-text{
font-size:30px;
}
.host-introduce{
color:#808080;
}
.example{
padding:15px 20px;
border:2px solid #404040;
border-radius:5px;
margin-top:20px;
}
.Emma{
width:400px;
}
-----------
Can you please check this code. hope it will work for you.
body {
margin: 0px;
padding: 80px 0px;
}
.container {
width: 1170px;
margin: 0 auto;
padding: 0px 15px;
}
header {
height: 60px;
padding: 10px 20px;
position: fixed;
left: 0;
top: 0;
width: 100%;
;
z-index: 10;
background-color: white;
}
.header-left {
float: left;
display: flex;
}
.header-logo img {
width: 50px;
}
.header-list li {
float: left;
padding-right: 30px;
font-weight: bold;
}
.header-list li:hover {
border-bottom: 1px solid #7f7f7f;
}
.header-right {
float: right;
}
.amount {
font-size: 25px;
font-weight: bold;
}
.start {
padding: 10px 15px;
background-color: #dc143c;
color: white;
border-radius: 5px;
margin: 10px;
}
.start:hover {
cursor: pointer;
transition: 0.3s;
}
footer {
height: 40px;
}
.footer-logo {
margin-right: 10px;
width: 20px;
}
footer a {
font-size: 15px;
}
.host-voice-wrapper {
padding: 80px 0px;
}
.footer-content {
border-top: 1px solid #808080;
padding: 10px 0 20px;
}
.footer-content,
.contents {
display: flex;
display: -webkit-flex;
align-items: center;
}
.voice {
width: 40%;
}
.voice-text {
font-size: 30px;
}
.host-introduce {
color: #808080;
}
.example {
padding: 15px 20px;
border: 2px solid #404040;
border-radius: 5px;
margin-top: 20px;
display: inline-block;
}
.Emma {
width: 50%;
text-align: center;
}
<header>
<div class="header-left">
<div class="header-logo">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
<div class="header-list">
<ul>
<li>概要</li>
<li>準備</li>
<li>安全</li>
<li>マネープラン</li>
</ul>
</div>
</div>
</header>
<div class="host-voice-wrapper">
<div class="container">
<div class="contents">
<div class="voice">
<i class="fas fa-quote-left fa-2x my-orange"></i>
<br></br>
<a class="voice-text">「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</a>
<br>
<a class="host-introduce">Emmaさんはロンドンのホスト。自由度の高さに魅力を感じています</a>
<br>
<a class="btn example">ホスト実践例をチェック</a>
</div>
<div class="Emma">
<img src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-content">
<img class="footer-logo" src="https://image.shutterstock.com/image-illustration/logo-g-letter-on-white-260nw-497276758.jpg">
<a>
Airbnb Global Services Limited <br>
観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日) <br>
© 2019 Airbnb, Inc. All rights reserved.
</a>
</div>
</div>
</footer>
I am trying to add an eye icon at the right side. In my origin code it shows at the right side but is not responsive and moves when the screen size is changed.
Below is a loose implementation. I want that it should show at the right side right before when the input field ends in both password fields. Currently it shows but not properly. Test it in full screen.
.login-form {
margin: 20px 0 0 0;
}
.login-form input[type=text] {
background: #fff;
border: none;
border-radius: 8px;
position: relative;
font-size: 15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 20px;
margin-bottom: 15px !important;
color: #666 !important;
border: 1px solid grey;
}
.login-left {
width: 44%;
margin: 0 0 0 5%;
display: inline-block;
float: left;
}
.login-right {
width: 44%;
margin: 0 5% 0 0;
display: inline-block;
float: right;
}
#media screen and (max-width:767px) {
.login-width {
width: 95% !important;
}
.login-left {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
.login-right {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
}
.p-viewer {
z-index: 9999;
position: absolute;
left: 560px;
margin-top: -60px;
}
.fa-eye {
color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="login-form">
<div class="login-left">
<div class="clearfix"></div>
<input type="text" placeholder="Email *"/>
<div class="clearfix"></div>
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="login-right">
<div class="clearfix"></div>
<input type="text" placeholder="Confirm email *"/>
<div class="clearfix"></div>
<input type="text" placeholder="Confirm password *"/>
<span class="p-viewer2">
<i class="fa fa-eye" aria-hidden="true"> </i>
</span>
<div class="clearfix"></div>
<br>
</div>
css:
.login-form {
width: 100%;
margin: 20px 0 0 0;
}
.login-left {
width: 50%;
float: left;
}
.login-right {
width: 50%;
float: right;
}
.login-form input[type=text] {
background: #fff;
border: none;
border-radius: 8px;
position: relative;
font-size: 15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 0px;
margin-bottom: 15px !important;
color: #666 !important;
border: 1px solid grey;
}
.pwd{
position: relative;
}
.p-viewer {
z-index: 9999;
position: absolute;
top: 30%;
right: 10px;
}
.fa-eye {
color: #000;
}
#media screen and (max-width:767px) {
.login-width {
width: 95% !important;
}
.login-left {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
.login-right {
width: 90%;
margin: 0 auto;
display: block;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="login-form">
<div class="login-left">
<div class="clearfix"></div>
<input type="text" placeholder="Email *"/>
<div class="clearfix"></div>
<div class="pwd">
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
<div class="clearfix"></div>
</div>
<div class="login-right">
<div class="clearfix"></div>
<input type="text" placeholder="Confirm email *"/>
<div class="clearfix"></div>
<div class="pwd">
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
in your code page responsive problem is here:
.login-form input[type=text] {
padding: 18px 0 18px 20px;}
because first you give 100% width + padding so problem is generateed.
and your eyes problem is solved to these code:
<div class="pwd">
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
simply add div tag with position:responsive and next class = p-viewer in add position:absolute so position problem is not generated...
this code is fully responsive and simple changes
use position:relative instead of position:absolute for span and margin-top is modified
.login-form{margin:20px 0 0 0;}
.login-form input[type=text]{
background: #fff;
border: none;
border-radius:8px;
position: relative;
font-size:15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 20px;
margin-bottom:15px !important;
color: #666 !important;
border: 1px solid grey;
}
.login-left{width:44%; margin: 0 0 0 5%; display:inline-block; float:left;}
.login-right{width:44%; margin: 0 5% 0 0; display:inline-block; float:right;}
#media screen and (max-width:767px) {
.login-width{width:95% !important;}
.login-left{width:90%; margin: 0 auto; display:block; float:none;}
.login-right{width:90%; margin: 0 auto; display:block; float:none;}
}
.p-viewer, .p-viewer2{
float: right;
margin-top: -55px;
position: relative;
z-index: 1;
cursor:pointer;
}
.fa-eye {
color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="login-form">
<div class="login-left">
<div class="clearfix"></div>
<input type="text" placeholder="Email *"/>
<div class="clearfix"></div>
<input type="text" placeholder="Password *"/>
<span class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="login-right">
<div class="clearfix"></div>
<input type="text" placeholder="Confirm email *"/>
<div class="clearfix"></div>
<input type="text" placeholder="Confirm password *"/>
<span class="p-viewer2">
<i class="fa fa-eye" aria-hidden="true"> </i>
</span>
<div class="clearfix"></div>
<br>
</div>
use this code :
.login-form{margin:20px 0 0 0;}
.login-form input[type=text]{
background: #fff;
border: none;
border-radius:8px;
position: relative;
font-size:15px !important;
display: inline-block;
outline: none;
width: 100%;
height: 30px !important;
padding: 18px 0 18px 20px;
margin-bottom:15px !important;
color: #666 !important;
border: 1px solid grey;
}
.login-left{width:44%; margin: 0 0 0 5%; display:inline-block; float:left;}
.login-right{width:44%; margin: 0 5% 0 0; display:inline-block; float:right;}
#media screen and (max-width:767px) {
.login-width{width:95% !important;}
.login-left{width:90%; margin: 0 auto; display:block; float:none;}
.login-right{width:90%; margin: 0 auto; display:block; float:none;}
}
.p-viewer {
position: relative;
margin: -50px 10px;
float: right;
}
.fa-eye {
color: #000;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="login-form">
<div class="login-left">
<div class="clearfix"></div>
<input type="text" placeholder="Email *"/>
<div class="clearfix"></div>
<input type="text" id='icon' placeholder="Password *"/>
<span for='icon' class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
<div class="clearfix"></div>
</div>
<div class="login-right">
<div class="clearfix"></div>
<input type="text" placeholder="Confirm email *"/>
<div class="clearfix"></div>
<input id='icon2' type="text" placeholder="Confirm password *"/>
<span for='icon2' class="p-viewer">
<i class="fa fa-eye" aria-hidden="true"> </i>
</span>
<div class="clearfix"></div>
<br>
</div>
I made this navigation bar using flexbox, but I want the right side buttons to be on the extreme right.
Here's my code : https://codepen.io/mayankkamboj/pen/XKbdOY
HTML:
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search'/>
</div>
</div>
<div class='container'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>
CSS:
*{
box-sizing:border-box;
}
body{
padding:0;
margin:0;
}
nav{
border-bottom:1px solid #ddd;
font-family:'Roboto';
display:flex;
justify-content:space-between;
font-weight:300;
}
nav:after{
content:" ";
display:block;
clear:both;
height:0.01px;
}
.container{
display:flex;
}
.nav-btn{
height:4em;
padding:0em 1em;
border-right:1px solid grey;
display:flex;
min-width:100px;
justify-content:center;
align-items:center;
}
.no-border{
border-right:0px solid white;
}
img{
height:60%;
}
.fa{
color:#ccc;
}
nav .search{
height:4.5em;
width:20em;
font-family:'Roboto';
font-weight:400;
border-style:none;
text-indent:1em;
}
nav .search:focus{
outline-style:none;
}
nav .btn{
font-weight:400;
color:grey;
border:2px solid #aaa;
padding:0.5em 0.7em;
letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
cursor:pointer;
background-color:#f8f8f8;
}
#media (max-width:500px){
nav{
flex-direction:column;
}
}
It looks fine on mobile screens but causes a problem on higher resolutions. I want the buttons to be on the extreme sides with space in between them. How do I do it?
You don't need a clearfix here as you are dealing with flexboxes and not floating containers - so you can remove nav:after.
The issue is that the nav:after is a flex item and justify-content: space-around will consider that too - see demo below after removing the nav:after:
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
nav {
border-bottom: 1px solid #ddd;
font-family: 'Roboto';
display: flex;
justify-content: space-between;
font-weight: 300;
}
/*
nav:after {
content: " ";
display: block;
clear: both;
height: 0.01px;
}
*/
.container {
display: flex;
}
.nav-btn {
height: 4em;
padding: 0em 1em;
border-right: 1px solid grey;
display: flex;
min-width: 100px;
justify-content: center;
align-items: center;
}
.no-border {
border-right: 0px solid white;
}
img {
height: 60%;
}
.fa {
color: #ccc;
}
nav .search {
height: 4.5em;
width: 20em;
font-family: 'Roboto';
font-weight: 400;
border-style: none;
text-indent: 1em;
}
nav .search:focus {
outline-style: none;
}
nav .btn {
font-weight: 400;
color: grey;
border: 2px solid #aaa;
padding: 0.5em 0.7em;
letter-spacing: 0.01em;
}
.b-a-host {
white-space: nowrap;
}
.nav-btn.hoverback:hover {
cursor: pointer;
background-color: #f8f8f8;
}
#media (max-width:500px) {
nav {
flex-direction: column;
}
}
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400' rel='stylesheet' type='text/css'>
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search' />
</div>
</div>
<div class='container'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>
You can add a class to the another container and make it justify-content: flex-end and more over please add flex:1 to container so that both container can have same width and remove clearfix. i hope it is helpful to you
*{
box-sizing:border-box;
}
body{
padding:0;
margin:0;
}
nav{
border-bottom:1px solid #ddd;
font-family:'Roboto';
display:flex;
justify-content:space-between;
font-weight:300;
}
.container{
display:flex;
flex: 1;
}
.container.right {
justify-content: flex-end;
}
.nav-btn{
height:4em;
padding:0em 1em;
border-right:1px solid grey;
display:flex;
min-width:100px;
justify-content:center;
align-items:center;
}
.no-border{
border-right:0px solid white;
}
img{
height:60%;
}
.fa{
color:#ccc;
}
nav .search{
height:4.5em;
width:20em;
font-family:'Roboto';
font-weight:400;
border-style:none;
text-indent:1em;
}
nav .search:focus{
outline-style:none;
}
nav .btn{
font-weight:400;
color:grey;
border:2px solid #aaa;
padding:0.5em 0.7em;
letter-spacing:0.01em;
}
.b-a-host{white-space:nowrap;}
.nav-btn.hoverback:hover{
cursor:pointer;
background-color:#f8f8f8;
}
#media (max-width:500px){
nav{
flex-direction:column;
}
}
<nav>
<div class='container'>
<div class='nav-btn hoverback'>
<img src='https://upload.wikimedia.org/wikipedia/commons/6/69/Airbnb_Logo_B%C3%A9lo.svg' />
</div>
<div class='nav-btn no-border'>
<i class="fa fa-search fa-2x" aria-hidden="true"></i>
<input type='text' placeholder='Where to ?' class='search'/>
</div>
</div>
<div class='container right'>
<div class='nav-btn hoverback'>
<div class='btn b-a-host'>Become a Host</div>
</div>
<div class='nav-btn hoverback'>
Help
</div>
<div class='nav-btn hoverback'>
Sign Up
</div>
<div class='nav-btn hoverback'>
Log In
</div>
</div>
</nav>
I am trying to get my blue headline to stay on my video when I am resizing it in browsers. Right now it is just goes a certain pixel or percentage from the top of the browser which causes it to be pushed off the video too far. I only want this to be centered in mobile for now so you'll have to resize the browser to be smaller right now.Then later I will work on tablet and desktop with media queries. But for now I'm just trying to get it to stay in one place when in a mobile media query. I hope this isn't too confusing... If anyone has any suggestions that would really help! I will include a JSfiddle since I don't think you can resize the browser in the snippets on here. I will also include a snippet here though. Thank you for your time!
JsFiddle: https://jsfiddle.net/qbau0ze4/
#headline{
text-align: center;
position: absolute;
top: 160px;
left:30%;
color:#00E3FF;
line-height:20px;
font-family: 'Orbitron', sans-serif;
word-spacing: 1px;
font-size:18px;
}
#primary .imgbox2 .change {
width:100%;
margin-left:15px;
padding-top:15px;
}
.move{
width:100%;
margin-left:15px;
padding-top:15px;
}
/*
ul.menu, ul.menu ul.sub-menu{
padding: 0;
}
ul.menu li, ul.menu ul.sub-menu li{
list-style-type:none;
display:block;
}
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;
}
ul.menu li{
position:relative;
float:left;
}
#hamburger{
width:30px;
height:25px;
}
ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:37px;
left:0;
width: 150px;;
margin: 0 0 0 -20px;
}
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;
}
*/
/********NAV BAR**************/
ul.menu li ul.sub-menu {
opacity: 0;
position: absolute;
top:30px;
left:0;
width: 200px;
margin: 0 0 0 0px;
float:left;
}
.fa-bars{
float:left;
}
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;
}
nav{
padding:0px;
}
nav ul li {
}
nav ul li a {
display:block;
text-align: center;
padding: 10px;
background-color:#670809;
color:white;
text-decoration: none;
border: none;
margin: 0px;
font-size: 16px;
}
nav ul li a:hover {
background-color: #5E5757;
color: white ;
}
/*****FIGURE STAY SAME/ADJUSTABLE/VIDEO/logo******/
figure.stayssame {
width: 100%;
}
figure.adjustable {
width: 29%;
}
figure video {
width: 100%;
height: 80%;
}
.video-txt{
position: absolute;
top: 30%;
z-index: 9;
color: #FFF;
width: 100%;
text-align: center;
font-size: 40px;
}
object {
position: absolute;
left: 30%;
top: 80px;
z-index: 10;
width: 40%;
}
/*ALL CODE FROM DESKTOP*/
p{
padding: 2%;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
font-family: 'Inconsolata', monospace;
font-weight: 300;
font-size: 20px;
line-height: 1.4em;
}
.squish{
margin-right:125px;
}
.text{
padding:5px;
}
.button{
margin-bottom: 50px;
margin-right:auto;
margin-left:auto;
margin-top:auto;
}
header {
position:fixed;
z-index: 1000;
width: 100%;
top: 0px;
background-color:#670809;
height:50px;
letter-spacing:1px;
line-height: 55px;
padding:9px;
word-spacing:5px;
}
header, h1, h2{
font-family: 'Orbitron', sans-serif;
}
.space{
padding: 5px;
color:white;
}
form{
padding-left: 20%;
}
/* header tags */
h1 {
text-align: center;
color:#013397;
font-size: 40px;
padding-top:50px;
}
h2{
text-align: center;
color:#00E3FF;
font-size: 30px;
margin: 5px;
padding:20px;
}
p{
text-align: left;
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
#box{
background-color:#94DBEC ;
}
hr.style2 {
border-top: 3px double #00E3FF;
width: 300px;
}
hr.style2 {
width: 100%;
}
section{
width: 85%;
margin-left: auto;
margin-right:auto;
margin-top: 35px;
}
.adjustable{
width: 100%;
max-width:100%;
height:auto;
margin: 1 em;
}
#inner{
height: 100px;
padding:15px 0;
}
#container{
height:100%;
}
.imgbox5{
padding-right:30px;
padding-left:0px;
}
.imgbox4{
padding-right:30px;
padding-left:0px;
}
.imgbox3{
padding-right:30px;
padding-left:0px;
}
.imgbox2{
padding-right:30px;
}
.imgbox{
padding-right:30px;
padding-left:0px;
}
#firstpara{
background-color:#5E5757;
color: white;
}
#secpara{
background-color:#5E5757;
color: white;
}
#thirdpara{
background-color:#5E5757;
color: white;
}
#fourthpara{
background-color:#5E5757;
color: white;
}
#primary{
background-color:#5E5757;
color: white;
}
#enroll{
margin:0;
padding:0;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
padding-bottom: 2%;
background-color:#670809;
font-family: 'Inconsolata', monospace;
/* text */
padding-left: 10px;
padding-top: 15px;
color: #ffffff;
font-size: 15px;
text-align:center;
}
a { color: white; }
a, a:active { color: white;
text-decoration:none;
}
.side{
left-margin:10px;
right-margin:10px;
}
#value{
background-color:#5E5757;
color: white;
width:90%;
margin-left: auto;
margin-right:auto;
margin-top:2%;
}
#title{
color:white;
text-align:center;
padding-top:10px;
}
img{
width: 100%;
}
.msum{
position: absolute;
bottom: 5%;
width: 100%;
display: block;
width: 200px;
height: 50px;
left: 0;
right: 0;
margin: 0 auto;
}
span{
font-size: 14px;
}
.smaller{
font-size: 16px;
}
/*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{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
background: #670809;
}
nav ul,
nav li{
flex: 1;
}
nav li:last-child{border-bottom: none;}
nav a{
text-decoration: none;
color: inherit;
display: block;
font-size: 1.8rem;
}
nav a:hover{
background: /*#adacac#555;
color: #fff;
}
nav li{
position: relative;
line-height: 50px;
color: #fff;
text-align: center;
}
nav input,
nav label{
display: none;
width: 36px;
height: 36px;
background: #555;
color: #fff;
text-align: center;
line-height: 36px;
font-size: 1.6rem;
border-radius: 4px;
}
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
font-family: FontAwesome;
font-size: 24px;
content: "\f0c9";
text-align: center;
}
/*************** MEDIA QUERIES ***************
nav ul{
transform: translateY(0);
box-shadow: 0 0 5px rgba(0,0,0, .7);
transition: all .5s;
}
nav li{
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul{
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label{display: block;}
nav input[type="checkbox"]:checked + ul li:nth-child(1){
background: #777;
color: #fff;
}
#css-toggle-menu{
float:right;
margin: 10px;
}
/*********FORMS CSS*************/
form.contact label{
display: block;
}
span{
display:block;
border: none;
color:#4B4B4B;
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
section{
width: 95%;
}
fieldset{
width: 45%;
float:left;
border:none;
}
input.checks{
width: auto;
}
.left{
width: 45%;
float:left;
}
.right{
width:45%;
float: right;
}
input{
border: none;
border-bottom: 2px solid #959595;
width: 300px;
margin:3px;
color:#6C6A6A;
padding-top:10px;
padding-bottom: 10px;
}
.bottom{
border: none;
margin:3px;
color:#6C6A6A;
padding-top:10px;
padding-bottom: 10px;
width: 300px;
}
.fa{
margin-right: 10px;
}
legend{
color:#2C2A2A;
}
.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">
<a id="hamburger" href="#" ><i class="fa fa-bars fa-2x " aria-hidden="true"></i>
</a>
<ul class="sub-menu">
<li class="sub-menu">
<a class="space" href="#" >Home</a>
</li>
<li class="sub-menu">
<a class="space" href="#" >Programs</a>
</li>
<li class="sub-menu">
<a class="space" href="#" >Assignments </a>
</li>
<li class="sub-menu">
<a class="space" href="#" > Enroll</a>
</li>
<li class="sub-menu">
<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. Learn industry standard programs
<br>
2. Build Portfolio
<br>
3. 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="youremail#email.com" 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>
Add position: relative to the container, in this case the element with class stayssame. Then position your headline with position: absolute.
.stayssame {
position: relative;
}
#headline{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
margin: auto;
}
jsfiddle: https://jsfiddle.net/Le0rrzf5/1/
I want to add a profile icon at the top right corner that should have 'My account' and 'logout' as options like shown in the image.Please let me know how can i add it to the below code.
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
#nav {
display: table;
table-layout: fixed;
text-align: center;
}
#nav li {
display: table-cell;
width: 25%;
padding-right: 1px;
height: auto;
vertical-align: bottom;
}
#nav a {
display: block;
min-height: 100%;
padding: 12px 50px;
background-color: #222;
color: white;
border-radius: 6px 6px 0 0;
}
.logoutLblPos{
position:fixed;
right:10px;
top:5px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-push-3 col-xs-4 col-xs-push-2">
<h1 class="text-center" style="font-family:Colonna MT;font-size:50px;color:ForestGreen ;">Welcome</h1>
<p class="lead text-center" style="font-size:20px;color:DarkSalmon;"><i>"This is caption"</i></p>
<label class="logoutLblPos">
<span class="glyphicon glyphicon-user" style="height:50px;width:20px"></span> User
<input name="submit2" type="submit" id="submit2" value="log out">
</label>
<ul id="nav">
<li>Home</li>
<li> tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
</div>
</div>
</div>
</div>
Also, I need to include "Post your Ad' beside profile icon.
Please see example fiddle
HTML
<div style="background:color:#fff; border:solid 1px #333; float:left; text-align:center; padding:5px;">
<i class="fa fa-user"></i><br>
User
</div>