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
Related
So, I have a header on black background, and I don't want to grow that header background size as the text grows.
Here is the code:
<body>
<div class="header">
<nav class="nav">
Test 1
Test 2
Test 3
</nav>
</div>
</body>
css:
body {
margin: 0;
}
.header {
background: black;
text-align: center;
padding: 30px;
}
.nav {
font-size: 60px;
}
Add height to the header
.header {
background: black;
text-align: center;
padding: 30px;
height: 80px
}
I have tried to make an image exceed bottom and top of a div. but i can make it in bottom portion how i will do it for top?
Here is the Online fiddle.
.about {
background-image: linear-gradient(100deg, #483dec, #4074eb);
}
.about img {
width: 100%;
margin-bottom: -100px;
}
.about .desc-section {
margin: auto 0;
}
.about h2 {
font-size: 24px;
color: #ffffff;
}
.about p {
font-size: 16px;
line-height: 2;
color: #ffffff;
}
<section class="about">
<div class="container">
<div class="row">
<div class="col-6">
<img src="https://images.unsplash.com/photo-1558981001-1995369a39cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="col-6 desc-section">
<h2>This is heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is.</p>
</div>
</div>
</div>
</section>
You can add position: relative to the .img selector and specify a bottom: 30px or whatever value you want to move it by. I used 30px on top and bottom in this updated fiddle. I hope it helps
.about {
background-image: linear-gradient(100deg, #483dec, #4074eb);
margin-top: 30px;
}
.about img {
width: 100%;
margin-bottom: -100px;
position: relative;
bottom: 30px;
}
.about .desc-section {
margin: auto 0;
}
.about h2 {
font-size: 24px;
color: #ffffff;
}
.about p {
font-size: 16px;
line-height: 2;
color: #ffffff;
}
/* add margin top for about section */
.about {
background-image: linear-gradient(100deg, #483dec, #4074eb);
margin-top: 100px;
}
/* change margin-bottom to margin-top for image */
.about img {
width: 100%;
margin-top: -100px;
}
I've seen many websites have a container with a 950px width and they have a top header which contains some links and they're aligned with container's margin. Header also have a background color which fills all the area out of container and that's what I want to do too. Probably not well explained, so let's get some example:
StackOverflow has an "header" where there are links like "Questions" "Jobs" "Documentation" "Tags" "Users" and they're aligned with the container, but it also has the background color filling the area out of container. My question is how to get the same header "layout" which has text/links aligned with container and the background color which is stretched over div container.
HTML CODE
<body><div class="container">
<div class="switcher">
<div class="platform-switcher">
<div id="pc-switcher"><img src="pc-logo.png"> PC Games</div>
<div id="xbox-switcher"><img src="xbox-logo.png"> Xbox</div>
<div id="ps4-switcher"><img src="ps4-logo.png"> PS4</div>
</div>
<div class="flags">
<div class="language"></div>
<div class="currency"></div>
</div>
</div>
<div id="search">
<form id="search-form">
<input type="text" id="searchbar">
</form>
</div>
</body>
CSS CODE
.container {
width: 950px;
margin: 0 auto;
}
.platform-switcher {
background-color: black;
height: 40px;
display: inline-block;
}
#search-form {
float: right;
}
.platform-switcher div {
}
#pc-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#xbox-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
#ps4-switcher {
color: #cc5a00;
height: 17px;
padding-left: 29px;
padding-top: 12px;
padding-right: 18px;
font-weight: bold;
float: left;
font-size: 11px;
position: relative;
}
What I want is to stretch the div's background color of ".platform-switcher" out of "container" and keep aligned, to the container, "platform-switcher" content (PC Games/Xbox etc...).
If I understand, you want to have full-width elements that wrap an element that defines your "container" or "viewport" or "content" width. Here's an example.
* {
margin:0;padding:0;
box-sizing:border-box;
}
header,footer {
background: black;
color: white;
}
.viewport {
width: 90%;
margin:auto;
max-width: 960px;
padding:2em 0;
}
<header>
<div class="viewport">
header
</div>
</header>
<main class="viewport">
content
</main>
<footer>
<p class="viewport">footer</p>
</footer>
I don't know if i understand but i try :D
try this: (add this to the div you want)
background-color: red;
width: 100%;
border-bottom: 1px solid grey; */ for the border */
z-index: 999;
im getting a white space when im putting text into the div. How to remove that ? i would like to ask you aswell how to make the text "welkom op dennis website" automatic center in the middle of the div.
here you can see the code :
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 550px;
color: white;
font-family: Arial;
font-size: 25px;
{}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
The space between your navigation and blue text field is from collapsing margins. You'll need to remove the margins created by your <p> element in .top, more on Collapsing Margins.
If you need the text vertically centered as well, you can use relative positioning and translate.
Other Notes
<text> is not a valid HTML element, use <p>, <span>, <div>, <a> etc. instead. I switched it to an <a> in my answer.
I see that you're using percentage heights. Those can be tricky. In order for percentage heights to work a height has to be set on the parent element. If that parent element's height is a percentage, then it's parent needs a height set. So on and so forth all the way to the root element <html> if percentages are used. In my answer I switch the heights to px values.
A number of block level elements (<div>, <nav>) had width: 100%; applied to them, I removed them as they're not needed. A block level element will always take up 100% width of it's containing element by default.
To vertically center your navigation items I set the line-height of the <a> elements equal to the height of the <nav> element.
I removed your .container element as it wasn't doing anything useful. You might need it later (likely in a different location) if you decide to add media queries and limit it's width for various viewport sizes.
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 45px;
background-color: white;
}
.top {
height: 300px;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav .logo {
float: left;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 0 20px;
text-decoration: none;
line-height: 45px;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
p.center {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
color: white;
font-family: Arial;
font-size: 25px;
text-align: center;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="nav">
<a class="logo" href="#">Dennis Zwart</a>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</body>
This is because p element has natural margins (defined by browser). Remove it:
p {
margin-top: 0;
}
Then remove the p horizontal padding and center your text with
text-align: center;
In order to remove the blank area on the right side of the screen.
p {
margin-top: 0;
text-align: center;
}
.container {
max-width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: inline-block;
}
html,
body {
margin: 0px;
padding: 0px;
}
.nav {
height: 5%;
width: 100%;
background-color: white;
}
.top {
height: 40%;
width: 100%;
background-color: #1E90FF;
}
.nav {
background-color: #444;
}
.nav a {
display: inline-block;
background-color: #444;
font-family: Arial;
padding: 10px 20px;
text-decoration: none;
color: white;
float: right;
}
.nav a:hover {
background-color: #1E90FF;
}
.logo {
color: white;
display: inline-block;
padding: 10px 20px;
font-family: Arial;
text-decoration: none;
}
p.center {
padding: 150px 0px;
color: white;
font-family: Arial;
font-size: 25px;
}
<header>
<title>Dennis Zwart Home Pagina</title>
<link href="css/MyStyle.css" rel="stylesheet" style="css" />
</header>
<body>
<div class="container">
<div class="nav">
<text class="logo">Dennis Zwart</text>
Contact
Games
Foto's
Hobby's
Home
</div>
<div class="top">
<p class="center">Welkom op de website van Dennis Zwart</p>
</div>
</div>
</body>
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.