I'm making a website right now and there are currently little gaps in between some of my pages and I do not know what's causing them. I was hoping that somebody on this site would know a way to make the transitions between the pages seamless and smooth. I have provided a link so you can see what I am talking about.(You have to open up the full page in the code snippet to see what I'm talking about)
https://imgur.com/a/WrSNy
CSS AND HTML
body{
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">
</div>
</body>
</html>
There is a gap at the bottom of those elements because they're inline-block and by default, inline-block will leave space at the bottom for trailing characters. To remove that, set a vertical-align like vertical-align: top.
You could also just remove display: inline-block; width: 100%; on those elements to make them block and they'll be 100% by default.
body{
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
display: inline-block;
height: 1000px;
width: 100%;
padding-top:5%;
}
.page {
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne page text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo page">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree page">
</div>
</body>
</html>
I removed inline-block from the style for the pages. Let me know if this solves all your issues. It looks the same to me otherwise.
body{
line-height: 0;
background-color: white;
font-family:Orbitron;
color:white;
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
opacity: .7;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
padding-top: 5%;
}
.pageTwoblock{
background-color: #008B8B;
opacity: .7;
border-radius:5px;
}
p{
font-size: 2.5em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url("https://images.pexels.com/photos/477230/pexels-photo-477230.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb");
background-repeat: none;
background-size: cover;
height: 1000px;
width: 100%;
padding-top:5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="#">Reddit</a>
<a class = "btn btn-default" href="#">GitHub</a>
<a class = "btn btn-default" href="#">Linkedin</a>
<a class = "btn btn-default" href="#">Facebook</a>
</div>
</div>
<div class= "pageTwo">
<div class= "col-md-6 pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p>
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree">
</div>
</body>
</html>
Related
I was hoping someone can help me out. When I open my page I'm trying to create in Firefox it is zoomed right in. also when I open in safari it is a different layout (the col-md-1 from the left side had disappeared.) I am new to this so I'm sorry if my code is terrible or the answer is quite obvious. I have been trying a few things to fix it but nothing seems to work. thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Life Atlas</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400i" rel="stylesheet">
<style>
/* Style the links inside the navigation bar */
a:hover { text-decoration: none; }
.topnav {
text-align:center;
z-index: 99;
color: black;
text-decoration:none;
border:1px solid #ccc;
border-radius: 6px;
border-width:1px 0;
position:absolute;
left: 0;
top: 20;
list-style:none;
padding:0;
background-color: white;
width: 100%;
}
.topnav li
{
display:inline;
font-size: 30px;
}
.topnav a{
display:inline-block;
padding:50px;
text-decoration: none;
color: #BFBFBF;}
/* Change the color of links on hover */
.topnav a:hover {color: black;}
/* Add a color to the active/current link */
.topnav a.active {
color: black;}
#title{font-family: 'Alegreya', serif;
font-size: 250px;
text-align: center;}
.stories{font-size: 50px;}
.leftstories{font-size: 50px; display: block;}
.title-stories{font-size: 100px;
font-family: 'Lora', serif;
color: #BC9B5D;
padding-right: 100px;
padding-left: 100px;
width: 80%;}
.text-insert {text-align: justify;
padding-top: 50px;
padding-right: 100px;
padding-left: 100px;}
.right{
text-decoration: none;
padding-bottom:0px;
list-style: none;}
.right li{margin-top: 75px;}
.right li img{margin-top: 75px;
margin-bottom: 0px;}
.left{
text-decoration: none;
padding-bottom:0px;
list-style: none;}
.left li{margin-top: 75px;}
.left li img{margin-top: 75px;
margin-bottom: 75px;}
#import url(https://fonts.googleapis.com/css? family=Noto+Sans:400,700);
* {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; }
.image {background: url(photos/main-image-web.jpg) no-repeat fixed; background-image: no-repeat fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 1000px;}
.banner h1, .banner h3, .banner h6, .banner p{
margin: 0;
text-align: center;
color: #7F7F7F;
background-color: white;}
.banner {
color: white;
background: url(photos/mornington.jpg) top left/cover no-repeat;
height: 2000px;
display: flex;
justify-content: center;
align-items: center;}
.banner h1{font-style: 'Lora', serif;
font-size: 100px;
padding-top: 30px;
padding-bottom: 50px;
padding-left: 150px;
padding-right: 150px;}
.banner p{font-size: 50px;
font-weight: normal;
padding-top: 50px;}
.banner h1: hover{color: black;
opacity: 0;}
</style>
</head>
<BODY>
<div class ="container-fluid">
<h1 id="title">Life Atlas</h1>
<div class="container-fluid">
<ul class="topnav">
<li>HOME</li>
<li>ABOUT</li>
<li>PHOTOGRAPHY</li>
<li>TRAVEL BLOG</li>
<li>COLLABORATION</li>
<li>CONTACT</li>
</ul>
</div></div>
<div class="image"></div>
<section class="content">
<div class="container-fluid" class="row">
<div class="col-md-1"></div>
<!-- Left Hand Column -->
<div class="col-md-5" style="margin-top: 450px">
<ul class="left">
<li>
<img src="photos/USA-2.jpg" style="width: 100%" class="pull-right">
</li>
<li>
<img src="photos/Bridge.jpg" style="width: 100%" class="pull-right">
</li>
<div class="leftstories">
<li>
<p style="padding-left: 100px">PHOTOGRAPHY</p>
<h2 class="title-stories">Looking for a dedicated and loveable photographer? You're in the right place.</h2>
<p class="text-insert">Whether it’s a relaxed family portrait session, a special event, a personal portrait session, the day you marry the love of your life; Life Atlas is dedicated to capturing beautiful passing moments and making sure that they can live forever..</p>
</li>
</div>
<li>
<img src="photos/homepageprofile.jpg" style="width: 100%">
</li>
</ul>
</div>
<!-- right hand column -->
<div class="stories">
<div class="col-md-5" style="padding-left: 50px">
<ul class="right">
<li>
<p style="padding-left: 100px;">TRAVEL</p>
<h2 class="title-stories">Stories from around the world</h2>
<p class="text-insert">Journey with me around the world, across the country, and sometimes even just down the street. A compilation of stories and advice, this is the atlas of my travels, written to help improve your travels.
This is advice straight from my heart, about all those things closest to it; adventure, photographic opportunities that take your breath away, and culinary delights that pair best with a glass of red.</p></li>
<li>
<img src="photos/Inspo.jpg" style="width: 100%">
</li>
<li>
<img src="photos/event.jpg" style="width: 100%">
</li>
<li>
<img src="photos/homepagewedding.jpg" style="width: 100%">
</li>
<li>
<p style="padding-left: 100px;">PERSONAL</p>
<h2 class="title-stories">So who is Life Atlas?</h2>
<p class="text-insert">The more suitable question may in fact be 'what is Life Atlas'? Each of our lives are a journey, and inevitably a story. My quest as a photographer is to add to your Life Atlas; to capture moments and memories that become part of your life story.
Life Atlas is the sum of your adventures, of my adventures. It is the every growing and ever evolving story of who I am, what I seek, how I work, where I've travelled and who I've met along the way.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<div class="banner">
<div class="banner-text"><a href="">
<p>READ MY LATEST BLOG</p>
<p>TRAVEL TO THE</p>
<h1>Mornington Peninsula</h1>
</div></a>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<p></p>
</section>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">. </script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script src="/parallax.js.1.5.0"></script>
</BODY>
</html>
I am currently making a website and I have run into a little snag. One of my pages currently has a parallax effect on it. I tried to apply the same effect to another page(third page) and for some reason it will not work on that page. I was wondering if anyone knew why my method is not working?
CSS and HTML
body{
background-color: teal;
font-family:Orbitron;
color:white;
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: teal;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
}
.pageTwoblock{
border-radius:5px;
}
p{
font-size: 1.8em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.pageFour{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p class"text-center">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container>
<h1 id="heading">All Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
</ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">
</div>
</body>
</html>
Please check this. background-attachment: fixed; is missing from other divs.
body{
background-color: teal;
font-family:Orbitron;
color:white;
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
}
.block{
background-color: #337ab7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: teal;
background-repeat: none;
background-size: cover;
height: 400px;
padding-top: 5%;
background-attachment: fixed;
}
.pageTwoblock{
border-radius:5px;
}
p{
font-size: 1.8em;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.pageFour{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
padding-top:5%;
background-attachment: fixed;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<div class= "pageTwoblock">
<div class="row">
<div class ="text-center">
<h1>Daniel Collins</h1>
<p class"text-center">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container>
<h1 id="heading">All Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"</li>
</ul>
</div>
</section>
</div>
<div class= "pageFour text-center" id="p4">
</div>
</body>
</html>
So I am working on an assignment, and in full screen on the desktop it looks fine. However in mobile the top o fthe page background doesn't extend right, the middle section is not centered, and the bottom section does not extend right. Also when I shrink the page in my browser the text in the top third gets cut off rather than scaling. I am at a bit of a loss and am hoping for some sort of guidance. I am new to web applications. I have included the code as well as links to the page and my repository oif the code
https://profile-josh-adams.herokuapp.com/
https://github.com/ender554/profile
HTML
<head>
<title>Josh Adams</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#index-page">Josh Adams</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#index-page">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume-page">Resume<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#links-page">Links</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="mailto:joshadams554#gmail.com">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="index container-fluid" id="index-page">
<div class="headline">About Me</div>
<hr>
<div class="media col-8 offset-2">
<span class="media-left">
<%= image_tag("profilephoto.jpg") %>
</span>
<div class="media-body">
<h2 class="media-heading">Joshua Adams:</h2>
<hr class="title-rule">
<h3 class="about-body">
I am a 37 year old student with an extreme eagerness to learn, and be
<br /><br />a key contributor in any profession. I love the academic setting and
<br /><br />the skills it has helped me build, but I understand that in this field it is
<br /><br /> most important to learn in a real world environment, and I hope to
<br /><br />extend my abilities greatly.
</h3>
</div>
</div>
</div>
<div class="resume col-6 offset-3" id="resume-page">
<h1 class="resume">Resume:</h1>
<div class="resume-itself">
<%= image_tag("resume.jpg") %>
</div>
</div>
<div class="links" id="links-page">
<h1 class="links-title">Links:</h1>
<div class="actual-links col-8 offset-2">
<div class="row">
<div class="col">
<%= link_to image_tag("linkedin.png"), "https://www.linkedin.com/in/joshua-adams-061901b6/", :target => "_blank" %>
</div>
<div class="col">
<%= image_tag("piazza.png") %>
</div>
<div class="col">
<%= link_to image_tag("github.jpg"), "https://github.com/ender554", :target => "_blank" %>
</div>
</div>
<ul>
<li>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
#import "bootstrap";
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 100%;
min-height: 100%;
background-position: center;
}
#index-page {
background: image_url('indexbackground.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-width: 100%;
min-height: 100%;
}
h1 {
color: white;
}
.media {
margin-top: 50px;
}
.headline {
font-size: 80pt;
text-align: center;
color: white;
margin-top: 50px;
font-family: 'chunkfiveroman';
}
hr {
width: 75%;
color: black;
height: 2px;
background-color: white;
margin-top: 0px;
padding-top: 0px;
}
.title-rule {
width: 95%;
color: black;
height: 2px;
background-color: white;
margin-top: 0px;
padding-top: 0px;
}
.media-heading {
margin-left: 25px;
color: white;
}
.index {
padding-top: 50px;
height: 1000px;
width: 100%;
}
.about-body{
margin-left: 20px;
color: white;
}
.resume {
margin-top: 20px;
text-align: center;
color: Black;
font-size: 50pt;
padding-top: 20px;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
z-index:1;
}
.media-left img{
border-radius: 5%;
border: solid white 2px;
}
.links {
margin-top: 20px;
text-align: center;
background-color: Black;
width: 100%;
font-size: 50pt;
height: 1000px;
padding-top: 50px;
}
.links-title {
margin-bottom: 80px;
font-size: 80pt;
padding-top: -10px;
}
you need to add this two lines in your head tag, this will fixed your responsive issue
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
last line is for responsive purpose
you have one more css issue your image is too large
apply below css and it will take care of it
.resume-itself img{
max-width: 100%;
}
use proper classes which bootstrap provided. you are using bootstrap classes in wrong way
use this link to learn more about bootstrap
bootstrap 3 tutorial
you may need to add following lines inside element.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Ex - .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
I want make a web site and I developing my website design but I have a problem.
I have Image and two button and 4 li element in my page , but them not true!
I upload my css and html and another files with image , please help me.
my request : I want buttons in center of picture , and picture fix all page size and li elements down of background - picture , but it's not true!
problem
problem_2
I want show all in center
and background image is fixed
this is my css code :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
direction: rtl;
}
#font-face {
font-family: 'BYekan';
src: url('/fonts/BYekan.eot');
src: local('b BYekan'), url('fonts/BYekan.woff') format('woff'), url('fonts/BYekan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html {
background-color: #fff;
color: #141414;
font-weight: normal;
font-family: 'BYekan','tahoma';
font-size: 16px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: linear-gradient( rgba(0, 0, 0, 0.7) , rgba(0, 0, 0, 0.7) ), url(img/Header.png);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
right: 50%;
transform: translate( +25% , -50% );
}
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited{
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-left: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active {
/*background-color: #3498db;*/
}
.btn-full:hover,
.btn-full:active{
background-color: #3498db;
border: 1px solid #3498db;
color: #fff;
}
.btn-ghost:hover,
.btn-ghost:active{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
}
and this is my html code :
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/col.css">
<link rel="stylesheet" type="text/css" href="vendors/css/4cols.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<title>Techtime</title>
</head>
<body>
<nav>
<div class="row">
<img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</nav>
<header>
<div class="hero-text-box">
<h1>به دنیای برنامه نویسی سلام کنید</h1>
<a class="btn btn-full" href="#">سلام</a>
<a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
</div>
</header>
</body>
please help me
If I understood you correctly, you want to make the background cover everything, including <nav>?
In this case, you simply need to move <nav> inside <header>.
<header>
<nav>
<div class="row">
<img src="resources/css/img/Logo.jpg" alt="TechTime Logo" class="Logo">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>به دنیای برنامه نویسی سلام کنید</h1>
<a class="btn btn-full" href="#">سلام</a>
<a class="btn btn-ghost" href="#">اطلاعات بیشتر</a>
</div>
</header>
farzam i suggest you to use bootstrap then you will get a lot of built in classes for styling your site which makes your styling pretty much easier.
so using bootstrap, this html would work as you want.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<div class="container-fluid" style="margin-top:30%;">
<div style="width:500px;margin:auto;">
<h1 style="text-align:center;">به دنیای برنامه نویسی سلام کنید</h1>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="btn btn-full" href="#" style="margin:auto;float:right;">سلام</a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<a class="btn btn-ghost" href="#" style="margin:auto;">اطلاعات بیشتر</a>
</div>
</div>
<div style="bottom:0;clear:both;position:fixed;">
<ul class="main-nav">
<li>صفحه اصـلی</li>
<li>دسته بنـدی</li>
<li>دربـاره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</body>
</html>
and custom css that i used
html{
width:100%;
height: 100%;
}
body{
height;100%;
width:100%;
margin:0;
background: url("../img/slide1.jpg") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.