Trying to do my first solo project after spending over a year learning, and feeling like I've learned nothing.
For some reason, creating a banner is proving extremely difficult.
At first, I wanted to tag my nav-bar to the bottom of my banner. I gave up on that, and am now just trying to get my banner to work in the most basic of ways.
If I put the image inline with HTML, it stays at the forefront of everything and scrolls with the page. No bueno. background-image is not working at all.
I want it to stay at the top of the page. I want the navbar to stay at the top of the user's visible area (so, it scrolls with the page).
I've spent three hours on this!
Here's my code:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
</head>
<!-- MASTHEAD -->
<body> <!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
Who
</li>
<li>
What
</li>
<li>
Where
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div class="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
body{
font-family:'Open Sans Condensed', sans-serif;
color:white;
margin:0;
padding:0;
}
h1{
padding: 0;
margin-top: -1%;
text-align: center;
color:black;
font-size: 6.5vw;
}
p{
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav{
font-family:'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand{
font-family:'Open Sans Condensed', sans-serif;
font-size:2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
background-image: url(https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg);
height: 405px;
background-color: purple;
background-position: center;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover{
color:#FEEE8B;
}
.btn:active{
color:white;
}
.btn{
align-text: center;
margin-bottom:3%;
margin-right:5px;
margin-left:5px;
border-radius: 0 !important;
font-size:1.5vw;
color:white;
}
article{
padding-bottom:10px;
}
.block{
background-color:rgba(157,178,197,.6);
opacity:1;
padding:1em;
width:50%;
height:12%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
object-border:10px;
}
.portblock{
text-align:right;
padding:1em;
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-top:10%;
margin-right:1%;
margin-left:auto;
object-border:10px;
}
.portrait{
width:40%;
height:auto;
border-radius:50%;
margin-bottom:3%;
margin-top:3%;
opacity:.9;
}
.img-thumbnail{
background:rgba(157,178,197,.6);
margin-top:8%;
padding:1em;
margin-right:1%;
margin-left:1%;
}
#who{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg?X-Amz-Date=20161019T232852Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=3b5a5267c478a5ea16ade4496e34221342748dbda8813840fa9867fe3270b6f7&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#what{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#where{
background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D");
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
Please note that I copy-pasted most of the CSS from another project, so there's a lot of yet-to-be-used stuff in here.
You have a few issues here. First , you have created a head section twice, once within the body section. Keep the head together, have one head section and one body section. Opening and closing these sections off more than once will cause problems.
As for the background image, you have a semi-colon before your no-repeat (etc), in your who/what/where css; if your remove this semi colon, it works.
You also have 2 other minor issues in your css; it's text-align not align-text, also replace object-border with just border
EDIT: Your main issue was that you had background-image: where there should have been just background: in the css (because you had all the information there and not just the image url). Also I removed the background-size:cover from the small images, as these would have covered the main background image that was set to cover. Your big background image had no inverted commas around the filepath in the url brackets. Also your banner-image is an id, not a class as it was originally being called in the HTML.
I created a snippet, so if you run it you can see the output.
Hope this helps.
body {
font-family: 'Open Sans Condensed', sans-serif;
color: white;
margin: 0;
padding: 0;
}
h1 {
padding: 0;
margin-top: -1%;
text-align: center;
color: black;
font-size: 6.5vw;
}
p {
font-family: 'EB Garamond', serif;
font-size: 2.5vw;
}
header {
height: 70px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 2px;
z-index: 66666;
}
.navbar-nav {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
/* MASTHEAD */
#masthead {
position: relative;
}
.custom-header {
display: block;
height: auto;
}
#mast-img {
max-width: 100%;
display: block;
height: auto;
position: fixed;
}
#brand {
z-index: 100;
position: absolute;
color: white;
font-size: 40px;
font-weight: bold;
line-height: 50px;
left: 150px;
top: 325px;
}
#masthead .wrap {
position: relative;
}
#topMenu {
z-index: 1;
}
/* END MASTHEAD */
#page {
position: relative;
}
#bannerimage {
width: 100%;
height: 405px;
background-image: url('https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg');
background-repeat:no-repeat;
background-position: center center
background-size:cover;
}
.bannerWrapper {
width: 94%;
max-width: 960px;
margin: 0px auto;
}
.btn:hover {
color: #FEEE8B;
}
.btn:active {
color: white;
}
.btn {
text-align: center;
/*not align-text*/
margin-bottom: 3%;
margin-right: 5px;
margin-left: 5px;
border-radius: 0 !important;
font-size: 1.5vw;
color: white;
}
article {
padding-bottom: 10px;
}
.block {
background-color: rgba(157, 178, 197, .6);
opacity: 1;
padding: 1em;
width: 50%;
height: 12%;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
border: 10px;
}
.portblock {
text-align: right;
padding: 1em;
background-color: rgba(157, 178, 197, .6);
opacity: 1;
width: 50%;
height: 12%;
margin-top: 10%;
margin-right: 1%;
margin-left: auto;
border: 10px;
/*it's just border, not object-border*/
}
.portrait {
width: 40%;
height: auto;
border-radius: 50%;
margin-bottom: 3%;
margin-top: 3%;
opacity: .9;
}
.img-thumbnail {
background: rgba(157, 178, 197, .6);
margin-top: 8%;
padding: 1em;
margin-right: 1%;
margin-left: 1%;
}
#who {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg") no-repeat center center fixed;
/*the reason why the bg-image wasn't working was you had a semi-colon before no-repeat*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#what {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
#where {
background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/*background-size: cover;*/
height: 800px;
padding: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
<title>Teo Hannum | Teacher of the Alexander Technique</title>
<!-- MASTHEAD -->
<body>
<!-- data-spy="scroll" data-target=".navbar" data-offset="0"> -->
<div id="page">
<header role="banner">
<!-- NAVBAR -->
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a>
</div>
<ul class="nav navbar-nav navbar-right" id="topMenu">
<li class="active">
Who
</li>
<li>
What
</li>
<li>
Where
</li>
</ul>
</div>
</nav>
<div id="brand">
<p>Move with Fluidity and Intention</p>
</div>
</header>
<div id="bannerimage">
<div class="bannerWrapper">
<div class="bannerText">
<p>Move with Fluidity and Intention</p>
</div>
</div>
</div>
<!-- WHO SECTION -->
<div id="who">
</div>
<!-- WHAT SECTION -->
<div id="what">
<article>
<div class="portblock">
<h1>Portfolio</h1>
<p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.</div>
</article>
<div class="container-fluid img-thumbnail">
<div class="row">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081">
<img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044">
<img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012">
</div>
</div>
</div>
</div>
<div id="where">
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src="js/index.js"></script>
Related
I am trying to create a footer for my page. I have tried to make it stick at the absolute bottom of the page and after some online research it told me to modify the height value of my body. However, once I do that, nothing changes. Here is my code:
*{
margin:0;
padding:0:
}
html{
height:100%;
min-height:100%;
}
#wrapper{
height: 100%;
}
/*****************/
/*****HEADER******/
/*****************/
#header{
width: 100%;
margin-top:0px;
margin-bottom:2.5%;
margin-right:0px;
margin-left:0px;
padding-top:2%;
padding-bottom:0.5%;
padding-left:0%;
padding-right:0%;
border-bottom-style:solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1{
color:black;
margin: 0px 0px 0px 10px;
}
#header>p{
font-style: italic;
text-align: left;
color:black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content{
position: relative;
height:100%;
min-height: 100%;
max-height: 100%;
}
#content>p{
margin-left:2.5%;
}
#intro_text{
font-style: italic;
margin-bottom:2.5%;
}
#main_nav{
margin-top:1%;
margin-left:5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer{
font-style: italic;
text-align: center;
position: relative;
bottom: 0;
}
EDIT: Added HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
</body>
</html>
This is the core logic of the solution:
html{
position: relative; /* Allows the footer to notice content height */
min-height: 100vh; /* My page will always take the full screen */
}
main{
margin-bottom: 100px; /* prevents footer overlap (footer height + 20px) */
}
footer{
position: absolute; /* I don't care about other things */
bottom: 0; /* I want to be on the bottom... */
left: 0; /* ...and to the left */
}
JSBin
I tried to keep it as simple as possible.
This answer does not use flexbox its pure ol' css.
Try this just modifying #footer
*{
margin:0;
padding:0:
}
html{
height:100%;
min-height:100%;
}
#wrapper{
height: 100%;
}
/*****************/
/*****HEADER******/
/*****************/
#header{
width: 100%;
margin-top:0px;
margin-bottom:2.5%;
margin-right:0px;
margin-left:0px;
padding-top:2%;
padding-bottom:0.5%;
padding-left:0%;
padding-right:0%;
border-bottom-style:solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1{
color:black;
margin: 0px 0px 0px 10px;
}
#header>p{
font-style: italic;
text-align: left;
color:black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content{
position: relative;
height:100%;
min-height: 100%;
max-height: 100%;
}
#content>p{
margin-left:2.5%;
}
#intro_text{
font-style: italic;
margin-bottom:2.5%;
}
#main_nav{
margin-top:1%;
margin-left:5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer{
font-style: italic;
text-align: center;
position: fixed;
background:#f00;
width:100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script src="./js/script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
</body>
</html>
Using flexboxes, you can extend the content area to fill the wrapper
JSfiddle: jsfiddle.net/sabgu8r4
body {
height: 100%;
}
/*****************/
* {
margin: 0;
padding: 0:
}
html {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
/*****************/
/*****HEADER******/
/*****************/
#header {
width: 100%;
margin-top: 0px;
margin-bottom: 2.5%;
margin-right: 0px;
margin-left: 0px;
padding-top: 2%;
padding-bottom: 0.5%;
padding-left: 0%;
padding-right: 0%;
border-bottom-style: solid;
border-bottom-color: black;
background: lightgrey;
}
#header>h1 {
color: black;
margin: 0px 0px 0px 10px;
}
#header>p {
font-style: italic;
text-align: left;
color: black;
margin: 0px 0px 0px 20px;
}
/*****************/
/*****Body******/
/*****************/
#content {
/*position: relative;*/
flex-grow: 1;
/*height: 100%;
min-height: 100%;
max-height: 100%;*/
}
#content>p {
margin-left: 2.5%;
}
#intro_text {
font-style: italic;
margin-bottom: 2.5%;
}
#main_nav {
margin-top: 1%;
margin-left: 5%;
}
/*****************/
/******FOOTER*****/
/*****************/
#footer {
font-style: italic;
text-align: center;
/*position: relative;
bottom: 0;*/
}
<div id="wrapper">
<div id="header">
<h1>My Web Space</h1>
<p> First HTML Page using Sublime Text</p>
</div>
<div id="content">
<p id=intro_text>Hello, my name is Alex and I am an aspiring web designer</p>
<p>Links to various test pages I am working with</p>
<ul id=main_nav>
<li><a href=test_link.html>Linking to another page test</a></li>
</ul>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
<p>CONTENT</p>
</div>
<div id="footer">
<p id=footer_text>Me, 2016</p>
</div>
</div>
I would like 3 responsive columns in a section where the ".service-icon" are centered in each column. I have an image for the background of the column (dirtcolumn.png but this can be replaced by a full height div... all i want is it to be centered inside the div/column). You can see where the problem occurs on my first website in the first section under the cover ----> MOST RECENT SCREENSHOT - http://aleven.netne.net/CDH/
HTML: (after arranging every markup i could possibly think of which included giving all divs classes col-md-4 col-xs-4 ETC. ETC.)
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
<div class="columndirt col-md-4 text-center">
<div class="service-icon">
<div class="icon-daycare">
</div>
</div>
</div>
</div>
</div>
</section>
CSS:
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
}
.columndirt {
float: none;
margin: 0 auto;
background-image: url(../images/cdh/newheader/ps/dirtcolumn.png);
background-size: cover;
background-repeat: no-repeat;
background-size: 70% 100%;
top:0;
bottom:0;
max-height: auto;
max-width: 37%;
min-width: 37%;
background-position: center center;
text-align: center center;
vertical-align: middle;
position: absolute;
}
.service-icon {
float: none;
margin: 0 auto;
margin: 158px;
margin-top: 180px;
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
}
Div or section's height always depends on the contents height. But if you want to give it a height, you can use min-height or you can use contents padding. Change the padding and give the height you want.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<section id="services">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="columndirt">
<div class="service-icon">
<div class="icon-daycare">
<div class="box text-center"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BEGIN LINK --><img src="http://files.namecheap.com/graphics/linkus/200x200-4.gif" width="200" height="200" border="0" alt="Namecheap.com"><!-- END LINK -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
#services {
background-color: #291501;
/*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
padding-top: 100px;
//height: 500px;
}
.columndirt {
border: 1px solid #fff;
background: #fff;
}
.service-icon {
float: none;
/* margin: 0 auto;
margin: 158px;
margin-top: 180px;*/
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
vertical-align: middle;
margin: 100px 0;
}
.icon-daycare {
vertical-align: middle;
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
}
.box{
height: 30px;
width: 30px;
background: green;
margin: 25px 0 0 70px;
}
I am trying to have a three column section that has three different divs, each containing an h2 and a p element. I want to make the left when align right, the middle one align center and the right one align left. I achieved this using nth-of-type however I can't figure out how to get them in the right position so that everything lines up with each other.
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
width: 105%;
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
width: 105%;
margin-left: -2.5%;
height: 900px;
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
width: 105%;
margin-left: -2.5%;
height: 250px;
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
width: 105%;
margin-left: -2.5%;
height: 250px;
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
max-width: 360px;
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
Also I'm not sure how to get bootstrap to work in jsfiddle sorry :(
https://jsfiddle.net/5bep97xw/
The nth-child idea is the good one. but looks like you need to update the mediaqueries too and what is this 105% width ?
body {
background-color: #EAE8EB;
}
wrap {
margin: auto;
}
#topbar {
/* width: 105%; why ? */
height: 50px;
background-color: #000;
margin-left: -2.5%;
margin-top: -10px;
}
#jumbotron {
/* width: 105%;
margin-left: -2.5%;
height: 900px; why ? */
background-repeat: no-repeat;
background-size: cover;
background-image: url('http://www.arcanemarketing.com/wp-content/uploads/2013/05/placeholder.png');
}
#recent {
margin: auto;
background-color: #3C5F7C;
/* width: 105%;
margin-left: -2.5%;
height: 250px; why ? */
margin-top: -20px;
}
#recent h1 {
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
font-size: 38px;
font-weight: 700;
padding-top: 10px;
color: #EEF0F2;
}
#galleries {
/* width: 105%;
margin-left: -2.5%;
min-height: 250px; do not fix an height and not too sure about margins and width */
background-color: #3c5f7c;
}
#galleries h2 {
font-size: 32px;
font-family: 'Alegreya Sans SC', sans-serif;
font-weight: 500;
color: #EEF0F2;
}
#galleries div:nth-of-type(1) h2 {
text-align: right;
}
#galleries div:nth-of-type(2) h2 {
text-align: center;
}
#galleries div:nth-of-type(3) h2 {
text-align: left;
}
#galleries p {
font-size: 18px;
font-family: 'Catamaran', sans-serif;
font-weight: 300;
color: #eef0f2;
/* max-width: 360px; better fix a max-width on parents container ? */
padding:1em;/* might be usefull */
margin:0;/* might be usefull */
}
#galleries div:nth-of-type(1) p {
text-align: right;
margin: auto;
}
#galleries div:nth-of-type(2) p {
text-align: center;
margin: auto;
}
#galleries div:nth-of-type(3) p {
text-align: left;
margin: auto;
}
#media (max-width:990px){
div div#galleries div[class] p,
div div#galleries div[class] h2 {
text-align:center; /* or left or right */
}
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Catamaran:400,300,500' rel='stylesheet' type='text/css'>
<div id="wrap">
<div id="topbar">
</div>
<div id="menu">
</div>
<div id="logo">
</div>
<div id="jumbotron">
</div>
<div id="recent">
<h1>Recent Work</h1>
<div id="thumbnail"></div>
</div>
<div id="galleries">
<div class="row">
<div class="col-md-4">
<h2>Website Design</h2>
<p>Extensive experience with image editing software, html and css code, and a unique perspective of an IT major formerly in graphic design.</p>
</div>
<div class="col-md-4">
<h2>Software Engineering</h2>
<p>Information Technology second-semester Sophomore at State University of New York at Cobleskill. Passion for solving problems with logic and code.</p>
</div>
<div class="col-md-4">
<h2>Other Work</h2>
<p>Former graphic artist with a background in a hobbyist form of art known as forum signatures.</p>
</div>
</div>
</div>
<div id="sn">
</div>
</div>
I am making a lovely website and though I would like a constant fixed navbar at the bottom of the page, it seems fixed and at the bottom but on the left it seems to start after about a centimeter. The slight start to the right is killing me. I certainly did not tell it to do this. I would like one constant navbar fixed at the bottom. What am I missing in my CSS here?
html {
background: url(../images/mexicobeach.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
h1 {
font-family: 'Sansita One', cursive;
font-size: 82px;
text-align: center;
margin: 60px 0 0 0;
}
h2 {
font-family: 'Sansita One', cursive;
font-size: 120px;
text-align: center;
margin: 60px 0 0 0;
}
.nav {
position:fixed;
bottom:0px;
font-family: 'Sansita One', cursive;
width:100%;
height:50px;
padding: 0px;
text-align: center;
}
ul {
padding: 10px;
background: rgba(8, 102, 112, 0.5);
}
li {
display: inline;
padding: 10px 20px 0px 30px;
}
a {
color: white;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/mexicostylesheet.css" />
<link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
<title>Smithies in Mexico</title>
<style>
</style>
</head>
<body>
<div class="nav">
<div class="container">
<ul id="navigation">
<li>About</li>
<li>Stay</li>
<li>Do</li>
<li>Eat</li>
<li>Mexican Mad Libs</li>
<li>Taco Game</li>
<li>Countdown</li>
<li>Quiz</li>
</ul>
</div>
</div>
<div class="jumbotron"
<div class="container">
<h1>Smith Ladies Go To</h1>
<h2>Mexico</h2>
</div>
</div>
</div>
</body>
You need to add the left value for the fixed nav:
.nav {
position:fixed;
bottom:0px;
left:0; /*ADD THIS*/
font-family: 'Sansita One', cursive;
width:100%;
height:50px;
padding: 0px;
text-align: center;
}
The Demo on JsFiddle
http://i.imgur.com/mFtXm.jpg here is a screenshot.
The areas marked in red are where the problems are. When I view the page in firefox it looks fine, in chrome there are tiny gaps, I don't deal with ie.
What is the correct way to size these divs such that each div will "connect" with other divs without leaving any gaps whenever the browser changes? something with jquery or js?
html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div id="header">
<h1>New York Tech Map</h1>
</div>
<div id="navlinks">
<div class="topnav">
About Us
</div>
<div class="topnav">
Contact Us
</div>
<div class="topnav">
Sign Up
</div>
<div class="topnav">
Help
</div>
</div>
<div id="sidebar">
</div>
<div id="map">
</div>
<div id="footer">
© 2012 NYC Tech Map
</div>
</body>
</html>
css:
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #F0F0F0;
}
a { text-decoration: none; color: grey; }
a:hover{ color: red; }
#header {
width: 100%;
height: 75px;
background: red;
margin-top: -21px;
}
#navlinks { float: right; width: 80%;}
.topnav {
width: 25%;
height: 25px;
float: left;
padding-top: 5px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-size: 15px;
font-weight: bold;
}
#sidebar {
width: 20%;
height: 500px;
float: left;
background: blue;
}
#map {
height: 80.8%;
width: 80%;
float: right;
}
.
.popa:hover {
background: #D6D6D6;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 25px;
background: #2D2D2D;
text-align: center;
font-family: arial, sans serif;
font-weight: bold;
padding-top: 5px;
color: grey;
}
it is better just resize dynamically, use js to get the window size then have that element adjust accordingly.