So I've set up my HTML and I've began to start styling accordingly, however I'm trying to create a fill/covering effect so my image fits between the header and footer and covers the screen however I get this problem. What I want is for it to cover the whole page/screen.
I'm sure it's an easy fix, I just can't figure it out!
http://s28.postimg.org/he9h8lae3/screene.png
Heres my code
HTML
`<body>
<header id="page-header">
<div class="container">
<h1></h1>
<h2></h2>
</div>
</header>
<section class="page-main">
<div class="container">
<div class ="main">
</div>
</div>
</section>
<footer id="page-footer">
<div class="container">
<h4></h4>
<nav>
<ul>
<li>Got Feedback?</li>
</ul>
</nav>
</footer>
</div><!-- #container -->
</body>
</html>
CSS
body {
color: #000;
font-family: 'Rokkitt', serif;
font-size: 1em;
line-height: 1.2;
width: 100%;
height: 100%; }
#container {
max-width: 1280px;
margin: auto; }
main { display: block }
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 2em;
line-height: 1;
font-weight: bold; }
h2 {
font-size: 1.2em;
margin: 20px 0 20px 20px;
text-align: center; }
h3 { }
#page-header {
background-color: #FFB90F;
color: black;
overflow: hidden; }
#page-header h1 {
color: black;
margin: 20px 0 20px 20px;
text-align: center; }
.page-main {
background: url("../images/img_a.png") center center no-repeat;
height: auto;
background-size: cover;
overflow: hidden;
padding: 3%;
box-shadow: inset 0 0 5px rgba(0,0,0,.75); }
#page-footer {
background: #282828;
color: white; }
#page-footer nav { text-align: right; }
#page-footer nav li {
color: white;
display: block; }
#page-footer nav a {
color: white;
display: block;
margin-right: 20px; }
If you want to cover the space you may want to look into the CSS3 background-size.
element{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
CSS
I am assuming the background image is attached to div.container
.container{
background-image: url('Whateveryoururlis');
height: HeightofImage;
width: widthofImage;
}
Height and width are important.
Related
html {
background: url(/Users/king/cs50_web/project0/images/nylon_string_original.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
color: #ffffff;
}
button {
color: #fff;
border: none;
padding: 10px 20px;
font: bold 18px sans-serif;
background: #fd7c2a;
-webkit-transition: background 2s;
/* For Safari 3.0 to 6.0 */
transition: background 2s;
/* For modern browsers */
}
button:hover {
background: #3cc16e;
}
div {
min-height: 20px;
}
header {
padding: 5px;
}
footer {
background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
background-size: cover;
margin-top: -100px;
padding-top: 2px;
padding-left: 5px;
position: relative;
overflow: auto;
}
nav a {
float: left color:#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover {
background-color: #ddd;
color: black;
}
a.active {
background-color: #4CAF50;
color: #ffffff;
}
section {
text-align: center;
font-family: Arial sans-serif;
min-height: 100px;
margin-bottom: 50px;
}
.header_d {
/*div header links */
background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
background-size: cover;
min-width: 20%;
margin: 35px 0 0 80%;
padding: 2px;
height: auto;
position: absolute;
top: 0;
box-shadow: 5px 5px 10px #ffffff;
}
.header_p {
/*div header links */
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
}
.joe {
float: right;
margin: 5px 5px 5px 0;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left color:#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: #ffffff;
}
#footer_p {
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
margin-top: 15%;
}
#Joe {
width: auto;
height: auto;
padding: 0px;
float: right;
border: 5px solid black;
}
<header>
<h1>Finger Style Guitar Club</h1>
<h2>Drop That Pick!</h2>
<p class="header_p">It's <span><i>gonna</i></span> happen anyway...😎</p>
<div class="header_d">
<nav>
Home
About
Chart
Contact
</nav>
</div>
</header>
<section>
<h1>section</h1>
</section>
<section>
<h1>section</h1>
</section>
<footer>
<div id="Joe">
<img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
</div>
<h4>Connect with Joe</h4>
Tweet
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p id="footer_p">Joe Mac © 2020 Joe Mac Inc. All rights reserved.</p>
</footer>
This one doesn't have scroll bars, but I haven't been able to figure out why:
<header>
<h1>Finger Style Guitar Club</h1>
<h2>Drop That Pick!</h2>
<p class="header_p">It's <span><i>gonna</i></span> happen anyway...😎</p>
<div class="header_d">
<nav>
Home
About
Chart
Contact
</nav>
</div>
</header>
<section>
<h1>section</h1>
</section>
<section>
<h1>section</h1>
</section>
<footer>
<div id="Joe">
<img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
</div>
<h4>Connect with Joe</h4>
Tweet
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p id="footer_p">Joe Mac © 2020 Joe Mac Inc. All rights reserved.</p>
</footer>
You have problems with margin: 35px 0 0 80%; at .header_d. Take a look at the 80% which means 80% from left to right which causes element to go overflow.
Instead of margin (remove it) try to set top/right like this:
top: 20px;
right: 20px;
There is a margin problem in .header_d, this part margin: 35px 0 0 80%; . The size of the content of an element is bigger, then element itself. Marked the place in code.
html {
background: url(/Users/king/cs50_web/project0/images/nylon_string_original.JPG) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
color: #ffffff;
}
button {
color: #fff;
border: none;
padding: 10px 20px;
font: bold 18px sans-serif;
background: #fd7c2a;
-webkit-transition: background 2s;
/* For Safari 3.0 to 6.0 */
transition: background 2s;
/* For modern browsers */
}
button:hover {
background: #3cc16e;
}
div {
min-height: 20px;
}
header {
padding: 5px;
}
footer {
background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
background-size: cover;
margin-top: -100px;
padding-top: 2px;
padding-left: 5px;
position: relative;
overflow: auto;
}
nav a {
float: left color:#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover {
background-color: #ddd;
color: black;
}
a.active {
background-color: #4CAF50;
color: #ffffff;
}
section {
text-align: center;
font-family: Arial sans-serif;
min-height: 100px;
margin-bottom: 50px;
}
.header_d {
/*div header links */
background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
background-size: cover;
min-width: 20%;
/*margin: 35px 0 0 80%;*/ /*i think, this is the key*/
margin: 35px 0 0 0;
padding: 2px;
height: auto;
position: absolute;
top: 0;
box-shadow: 5px 5px 10px #ffffff;
}
.header_p {
/*div header links */
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
}
.joe {
float: right;
margin: 5px 5px 5px 0;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left color:#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: #ffffff;
}
#footer_p {
text-align: center;
text-shadow: 5px 5px 10px #ffffff;
margin-top: 15%;
}
#Joe {
width: auto;
height: auto;
padding: 0px;
float: right;
border: 5px solid black;
}
<header>
<h1>Finger Style Guitar Club</h1>
<h2>Drop That Pick!</h2>
<p class="header_p">It's <span><i>gonna</i></span> happen anyway...😎</p>
<div class="header_d">
<nav>
Home
About
Chart
Contact
</nav>
</div>
</header>
<section>
<h1>section</h1>
</section>
<section>
<h1>section</h1>
</section>
<footer>
<div id="Joe">
<img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
</div>
<h4>Connect with Joe</h4>
Tweet
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p id="footer_p">Joe Mac © 2020 Joe Mac Inc. All rights reserved.</p>
</footer>
Scroll bars will appear on divs or containers on a webpage if the content inside is too big for the container. For example, if a photo is a 400px width by 400px height, but the div/container it is in (its parent container) is only 200px by 200px, a user would need to be able to scroll to see the full photo. On your sites, if there is more content than a screen can fit with its current view, a scroll bar would appear. Maybe you have some large photos or something.
It's good to know that how the content inside its parent is displayed can be changed in CSS. You do this with the overflow property. This will allow you to decide if the content inside its parent can be scrolled, if you want any overflowing content to be cut off (hidden) or if you want it to flow over the sides of its parent. You can read more on it here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
If you would like to still be able to scroll content, but remove the actual scrollbar, there is a feature in development that you can read about here: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
Another way of explaining this issue is that your header block is already at 100% width relative to your page. When you give your header_d class a left margin of 80% and then designate its position as absolute, everything contained in header_d has a a left margin of 80% relative to your page, and not the containing header. This, combined with the minimum width of 20% for header_d, causes horizontal overflow.
This issue can be fixed by making header_d's width and left-margin relative to the size of header (e.g. change position: absolute; to position: relative), but this will require re-positioning of header_d assuming you want it to remain in its current position.
Another fix would be to make header_d's combined min-width and left-margin < 100%, but making its position relative should make it more easily updated--even though it will require more work now.
fixed problem by adding following styling to html in styles0.css:
top: 20px;
right: 20px;
scroll bars no longer appear!
thanks to all contributors...
found answer through google search, then: https://css-tricks.com/
**EDIT: I have already been able to center the div with text and image but I want the background of the div to be full width.
I can't make the logo and full width div with background and text align to center of body(responsive)
**EDIT 2: This is what I am trying to achieve:
enter image description here
I have tried placing the div inside the logo's div since it is already in center
Snippet:
body {
background-image: url('https://source.unsplash.com/random');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
div.container {
position: absolute;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
#text-container {
background-color: rgba(0, 0, 0, 0.6);
}
#title-text {
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text {
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}
<body>
<div class="container">
<img class="logo" src="http://placehold.it/300x200?text=Logo" />
</div>
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</body>
I want both logo and div with text on the center of body. Placing div under logo.
You can use flexbox property instead of positioning absolute,relative.
in body flex is used to position the img and text containers horizontally.
body {
display: flex; // so that it's content can be centered;
height: 100vh; // To make it fit the whole screen
}
then I've added center div which contained the containers:
.center {
margin: auto;
width: 100%; // to be full width
}
body {
background-image: url("https://cdn.pixabay.com/photo/2016/06/17/06/04/background-1462755_960_720.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
display: flex;
height: 100vh;
}
.center {
margin: auto;
width: 100%;
}
.container {
display: flex;
}
img.logo {
position: relative;
max-width: 128px;
max-height: 128px;
margin: auto;
}
#text-container {
background-color: rgba(0, 0, 0, 0.6);
}
#title-text {
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
}
.sub-text {
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: "Open Sans Condensed", sans-serif;
}
<div class="center">
<div class="container">
<img class="logo" src="http://ejad.solutions/cloud/elogo.jpg" />
</div>
<div id="text-container">
<p id="title-text">
CONSTRUCTION IN PROGRESS <br /><br />
<span class="sub-text"
>WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br
/></span>
<span class="sub-text"
>PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span
>
</p>
</div>
</div>
added .flex container for center the .full-containerwhich contain your logo and text
your flex container should have full screen width and height. here i used width:100vw and height:100vh
*{
margin:0;
padding:0;
}
body {
background-image: url('images/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.flex{
width:100vw;
height:100vh;
display:flex;
align-items:center;
}
.full-container{
width:100%;
}
img.logo {
position:relative;
display:block;
margin: 0 auto;
margin-bottom:20px;
max-width:100%;
max-height:100%;
}
#text-container{
background-color: rgba(0, 0, 0, 0.6);
}
#title-text{
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text{
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}
<body>
<div class="flex">
<div class="full-container">
<img class="logo" src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" width="150"/>
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</div>
</div>
</body>
I recommend use transform: translateY(-50%); in container in this case because I think is not a good idea display flex all the body.
You must include img and text-container in the same layer to work together.
Tip: You may not use id for css attributes in HTML
Here you have the result
body, html {
height: 100%;
}
body {
background-image: url('http://lorempixel.com/1600/400/abstract/');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}
#text-container {
width:100%;
background: red;
}
#text-container p{
text-align: center;
padding-top:40px;
padding-bottom:40px;
}
.logo {
max-width: 200px;
}
#text-container{
background-color: rgba(0, 0, 0, 0.6);
}
#title-text{
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text{
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}
<body>
<div class="container">
<img class="logo" src="http://ejad.solutions/cloud/elogo.jpg" />
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</div>
</body>
CSS:
<style type="text/css">
body{
background-image: url(https://cdn1.vectorstock.com/i/1000x1000/88/30/gray-checkers-background-empty-transparent-vector-14458830.jpg);
}
.ddd{
margin: auto;
width: 50%;
height: 50%;
border: 3px solid #2f2018;
padding: 10px;
background-color: #2f2018;
text-align: center;
color: #ffffff;
}
.ddd1{
margin: auto;
margin-top: 20px;
width: 100%;
border: 3px solid #695547;
padding: 10px;
background-color: #695547;
text-align: center;
color: #ffffff;
}
.asd1{
padding-top: 50px;
}
</style>
HTML:
<div class="asd1">
<div class="ddd">
<h1>LOGO HERE</h1>
</div>
<div class="ddd1">
<h1 style="color: #ed8e32;">CONSTRUCTUION IN PROGRESS</h1>
<h3>WE ARE CURRENTLYBUILDING EXCITING PROJECTS FPR YOU,<br>PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE</h3>
</div>
</div>
I want to arrange my social media icons vertically at the top right corner of my website. I tried adding clear both, but it doesn't seem to work. Please have a look at my HtML and CSS code.
HTML code:
<div id="cover">
<div class="mediaicon">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="cover-content">
<h1>Being A Technocrat</h1>
<h2>Prashant Bagga</h2>
</div>
</div>
CSS code:
.mediaicon {
padding: 0;
margin-right: 0;
padding-top: 100px;
}
.mediaicon li {
clear: both!important;
}
.fa {
padding: 10px;
font-size: 15px;
width: 15px;
text-align: center;
text-decoration: none;
margin: 5px 5px;
border-radius: 100%;
}
.fa:hover {
opacity: 0.5;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-snapchat {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#cover {
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
.cover-content {
box-sizing: border-box;
margin: 0 auto;
position: relative;
text-align: center;
top: 100px;
width: 100%;
height: 800px;
}
h1 {
color: #FFF;
font-family: 'Lobster', cursive;
font-size: 600%;
line-height: 60px;
padding-top: 0;
text-align: center;
}
h2 {
color:#FFF;
font-family: 'Josefin Sans', sans-serif;
font-size: 25px;
font-weight: 900;
text-align: center;
text-transform: uppercase;
letter-spacing: 20px;
}
Here is a minimal way to achieve this: (Before edit)
Just add float: right and a pseudo element:.mediaicon::after with property clear: both
.mediaicon {
padding: 0;
padding-top: 100px;
margin-right: 0;
float: right;
}
.medication::after {
clear: both;
}
Edit:
Changed both the top nav and the media icons to flexbox with different justify-content (center and flex-end)
Working fiddle
This answer assumes you want the text centered on the viewport.
I would actually recommend making 2 columns for this, one for the text, and one for the icons.
HTML
<div class="container">
<div class="social-menu">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div class="cover-content">
<h1>Being A Technocrat</h1>
<h2>Prashant Bagga</h2>
</div>
</div>
Changed CSS
.social-menu {
position: absolute;
right: 10px;
top: 10px;
}
.social-menu ul li {
margin: 20px 0px;
}
.container {
margin: 0;
padding: 10px;
background: url("http://moheban-ahlebeit.com/images/Texture-Wallpaper/Texture-Wallpaper-2.jpg") no-repeat center bottom;
background-size: cover;
background-attachment: fixed;
height: 800px;
position: relative;
width: 100%;
}
https://jsfiddle.net/fLnkvo2z/1/
Check your grid system. If you are using bootstrap then make grid system of your web page.
I suggest you to dnt go for margin. Use Bootstrap Instead.
I'm struggling with this project I'm doing for practice. I'm having trouble with the innovation cloud project. Please explain me how to fix this.
I can't manage to get the "Learn More" button to be below the paragraph in the header section.
I can't manage to get the image in the main section to float left of the Header and paragraph.
I also can't manage the jumbotron DIV to appear below main. The image fuses with main, it doesn't appear below it where it should be.
Here is the pen for a visual: http://codepen.io/alejoj/pen/xGBbwv
Thanks for your help.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}
/* Header */
.header {
height: 800px;
text-align: center;
background-image: url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg');
background-size: cover;
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
color: white;
}
#media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
color: white;
}
.btn{
width: 30%;
height: 40px;
border: none;
margin: 25px auto 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 15px;
background-color: black;
color: white;
}
.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}
/* Nav */
.nav{
background-color: black;
}
.nav ul {
display: table;
list-style: none;
margin: 0 auto;
padding: 30px 0;
text-align: center;
}
.nav li{
display: cell;
vertical-align: middle;
float: left;
padding-left: 10px;
color: white;
font-family: 'Roboto', sans-serif;
}
/* Main */
.main .container {
margin: 80px auto;
}
.main h2, p{
display: inline-block;
float: left;
}
.main img{
height: 150px;
width: 35%%;
margin: 50px -5px 50px 0px;
display: inline-block;
float: left;
}
/* Jumbotron */
.jumbotron {
margin: 10px 0;
height: 600px;
text-align: right;
background-image:url('https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg');
}
.jumbotron .container {
position: relative;
top: 220px;
}
/* Footer */
.footer {
font-size: 14px;
}
/* Media Queries */
#media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}
.clearfix{
clear: both;
}
.main, .jumbotron {
padding: 0 30px;
}
.main img {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> INNOVATION CLOUD </h1>
<p>CONNECT YOUR IDEAS GLOBALLY</p>
<input class="btn" type="button" value="Learn More">
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>Register</li>
<li>Schedule</li>
<li>Sponsors</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img id="mainImage" src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class="clreafix"></div>
<div class="jumbotron">
<div class="container">
</div>
</div>
</body>
</html>
Not entirely sure about your desired outcome, but it seems that this css was throwing off a lot of what you want to fix:
.main h2, p {
display: inline-block;
float: left;
}
If you remove that and change the right margin on your image from -5 to 50 it looks pretty good like this: http://codepen.io/anon/pen/BNbyEP
Floating elements can really throw off your layout if you don't "clear" the floats. Sometimes I add a br style="clear:both" after floated elements to keep the flow looking as expected (in the case of not seeing your jumbotron image where it should be)
You have your p set to inline-block. Remove this:
.main h2, p {
display: inline-block;
float: left;
}
You have negative right margin on your image. Change this:
margin: 50px -5px 50px 0px;
to:
margin: 50px 50px 50px 0px;
Not sure what you mean.
In my attempts to learn some web development, I've been trying to mimic certain websites I come across on the web. Right now I'm trying to emulate something along the lines of this website: http://www.cassidoo.co/
My question is how are you able to force the background image and navigation bar to fit the screen no matter the screen size?
My HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
</div>
<nav>
<div class="container">
<div class="about">
TEXT1
</div>
<div class="resume">
TEX21
</div>
<div class="projects">
TEXT3
</div>
</div>
</nav>
</body>
My CSS:
body {
margin: 0;
}
h1 {
font-weight: 300;
text-align: center;
font-size: 3em;
}
h2 {
font-weight: 300;
text-align: center;
font-size: 2em;
padding-top: 15px;
}
.container p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 800px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
nav {
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
nav .container {
width: 100%;
max-width: 768px;
}
nav div {
display: inline-block;
text-align: center;
width: 18%;
padding: 5px;
}
nav div a {
text-decoration: none;
color: #333333;
font-weight: 800;
font-size: 1.5em;
}
nav div a:hover {
color: red;
}
.main p {
font-weight: 200;
text-align: center;
font-size: 1.5em;
}
Feel free to give pointers or any other information that would be useful.
You're almost there. In your CSS set the body and html's margin to 0 as well as their height as 100%.
html, body {
margin: 0;
height: 100%;
}
Also change your jumbotron class's height to 100%.
Edit Again
Add margin-top: 0; to your h1. Here's all your CSS that I edited.
body, html {
margin: 0;
height: 100%;
}
h1 {
margin-top: 0;
font-weight: 300;
text-align: center;
font-size: 3em;
}
.jumbotron {
background-image:url('http://goo.gl/o9un96');
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
nav {
position: absolute;
bottom: 0;
width: 100%;
background-color: #efeff1;
height: 50px;
text-align: center;
}
<div class="jumbotron">
<div class="container">
<div class="main">
<h1>Text holder</h1>
<p>Another text holder</p>
</div>
</div>
<nav>
<div class="container">
<div class="about">
TEXT1
</div>
<div class="resume">
TEX21
</div>
<div class="projects">
TEXT3
</div>
</div>
</nav>
</div>
From my understanding of your question you'd like to have the navigation "stick" to the bottom of the page, and then be able to scroll past it... Is that right?
You'll need to change you html markup and enclose everything in the first "page" within a container. This container's height needs to be 100% of the viewport.
.jumbotron {
height: 100vh;
}
Then your navigation will need to be positioned at the bottom of this container.
nav {
position: absolute;
bottom: 0;
}
Checkout this fiddle for an example:
http://jsfiddle.net/NateW/3rr59bgg/
The particular site you are pointing to achieves this effect using javascript. The navigation bar is set to be 50px tall in CSS all the time, and then javascript sets the height of the header (your .jumbotron) to full window height minus 50px (the height of the nav). Javascript recalculates this number everytime the browser window is resized.
Imagine this HTML
<body>
<div id="headerBackground">
<h1>Content in header</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</body>
This CSS
body {
padding: 0;
margin: 0;
}
#headerBackground {
min-height: 150px;
background: green
}
nav {
width: 100%;
background-color: #efeff1;
text-align: center;
height: 40px;
}
nav ul {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
}
nav ul li {
float: left;
list-style-type: none;
padding: 10px 25px;
}
h1 {
margin: 0 0 0 0;
}
And this JavaScript (jQuery)
// The first three lines sets the height of the header when the page first load
siteHeight = $(window).height();
navHeight = $('nav').height();
$('#headerBackground').height(siteHeight-navHeight+'px');
// The rest of the code sets new height for the header every time the browser window is resized
$ (window).resize(function() {
siteHeight = $(window).height();
$('#headerBackground').height(siteHeight-navHeight+'px');
});
So, there is no height: 100%; involved here, just constant math. I have set it up for you in a codepen so you can see how it is done :)
http://codepen.io/andersedvardsen/pen/yyzjyq