#charset "utf-8";
#import url(http://fonts.googleapis.com/css?family=Roboto:200,400,300,500,700);
html {
background: url(img/img1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.top_nav ul {
list-style: none;
background-color: #333745;
text-align: center;
margin: 0;
padding:0;
}
.top_nav li {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #fff;
text-transform: uppercase;
color: #000;;
transition: background-color .5s;
}
.top_nav a {
margin: 1.3em;
text-decoration: none;
font-size: 1em;
color: #fff;
}
.top_nav li:hover {
background-color: #ea2e49;
}
#media screen and (min-width: 600px) {
.top_nav ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.top_nav li {
border: 0;
}}
.box {
height: 300px;
}
.center_elements {
padding: 20px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.center_elements p {
font-size: .9em;
font-weight: 200;
color: #fff;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="top_nav">
<ul>
<li class="home">home</li>
<li class="menu1">menu1</li>
<li class="menu2">menu2</li>
<li class="menu3">menu3</li>
<li class="menu4">menu4</li>
</ul>
</nav>
<div class="center_elements">
<p>text</p>
<button>LEARN MORE</button>
</div>
</body>
</html>
Hi guys.
I'm new to html and css.
I tried to make horizontally and vertically centered elements on the full screen background image.
Here's my code and it's pretty messed up.
Thanks for your comments guys!
Here, Use --> This Fiddle
That should solve your problem!
.center_elements {
background: none;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
First of all I would rather set up image for the background for body tag, not html (it's first time I can see background image for html tag, but might be wrong).
Tip for vertical align:
wrap whole content into wrapper and add css for it display: table, and display: table-cell to child element + height 100vh (vh properites are not fully supported ).
vertical-align: middle always center content exactly in the middle of parent element whatever size it has.
Sample here:
https://fiddle.jshell.net/ajL0tut6/2/
Related
I want to mention that I`m a beginner. ^^ I also want to mention that if I remove the div part at the beginning of the code block:
div {
background-image: url('./images/castle.png'); `I removed this line`
position: absolute;
width: 100%;
height: 100%;
I`m able to see the navbar menu, but if I keep it, I only see the background image. I don't know what to do to be able to see the menu over the image.
Below you can see the code lines.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
img {
background-size: cover;
}
body {
margin: 0;
padding: 0;
}
.bg-container {
position: relative;
width: 100%;
height: 380px;
}
.bg img {
background-image: url('./images/castle.png');
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
margin: 20px;
width: auto;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
z-index: 1;
}
.topnav a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<div class="bg-container">
<div class="bg-img"></div>
</div>
<div class="container">
<h1>Welcome to my page</h1>
<div class="topnav">
Home
About
Contact
</div>
</div>
</body>
</html>
To set the background image you can do in different ways:
One would be to use an element of type img using the posiztion: absolute, relative to the body or however to the element you want.
The second way is to set it as background-image directly from the CSS properties.
To make the navbar you should learn to use flex-box, it is very useful in different situations. To remove the margins and paddings use *(CSS universal selector) and if you want also use box-sizing: border-box;
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url('https://a.cdn-hotels.com/gdcs/production12/d1130/83f1c8c6-e12d-4e69-8433-c5bbc90b5ad6.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
padding: 1rem .8rem;
background: #333;
}
.navbar h1 {
color: orangered;
text-align: center;
font-family: Arial;
}
.navbar a {
float: left;
color: crimson;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar">
<h1>Welcome to my page</h1>
<div class="nav-links">
Home
About
Contact
</div>
</nav>
</body>
</html>
I've been playing about with media queries in hopes of getting my head around creating a responsive page.
I seem to have got it working but I've noticed that my hover effects in the navbar <li> items are no longer working when I reduce the page size to meet the media query regarding the smaller screen...is this just something that happens when you reduce the screen size or is it been overridden somewhere?
html {
scroll-behavior: smooth;
}
body{
font-family: 'Nunito';
background: linear-gradient(#47585B, #E8EFF0);
}
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: 2px;
/* border: 1px solid black; */
}
/* Underline on Company Name */
h1::after{
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 0px;
margin-top: 0.1em;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
}
header {
background-color: #e6763c90;
box-sizing: border-box;
padding: 0 2rem;
box-shadow: 2px 0px 100px 10px #e6763c90;
text-align: center;
position: fixed;
top: 0px;
right: 0px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}
ul {
margin: 0;
padding: 20px;
list-style: none;
/* border: 1px solid black; */
}
a {
color: black;
text-decoration: none;
}
li {
display: inline-block;
padding: 7px;
margin: 0 0 0 2.5em;
text-align: center;
border-radius: 5px;
transition: all 0.2s ease;
}
.container {
height: 70vh;
padding: 10rem;
text-align: center;
/* border: 1px solid black; */
}
.dropDown{
display: none;
}
/* On hover animations */
li:hover{
transform: scale(1.08);
}
/* Smaller Screen */
#media (max-width: 1100px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
li {
display: inline;
margin: 2rem;
z-index: 1000;
}
ul {
position: relative;
bottom: 1.4rem;
}
/* Adjust underline on smaller screen */
h1::after{
content: "";
display: none;
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
li::after{
content: "";
position: absolute;
width: 100%;
margin-top: 1.5em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: linear-gradient(90deg, #47585B, #47585B20);
z-index: 10000;
}
}
/* Mobile */
#media (max-width: 800px) {
header {
background-color: #e6763c90;
box-sizing: border-box;
padding-left: 0.25rem;
right: 0px;
text-align: center;
position: fixed;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.navbar {
display:none;
margin:1.2rem;
}
/* Adjust underline on mobile */
h1::after{
content: "";
position: absolute;
width: 100%;
margin-top: 0.1em;
left: 0;
height: 0px;
padding-top: 0.25rem;
background: #47585B
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito" rel="stylesheet">
<link href="styleSheet.css" rel="stylesheet"></link>
<title>Original Tombstones</title>
</head>
<body>
<header>
<h1 class="">Original Tombstones</h1>
<ul class="navbar">
<li>New Memorials</li>
<li>Additionals</li>
<li>Renovations</li>
<li>Contact Us</li>
</ul>
</header>
<div class="container" id="home">
<h2>About Us</h2>
</div>
<div class="container" id="new">
<h2>New Memorials</h2>
</div>
<div class="container" id="additionals">
<h2>Additional Inscriptions</h2>
</div>
<div class="container" id="renovations">
<h2>Renovations</h2>
</div>
<div class="container" id="contact">
<h2>Get In Touch</h2>
</div>
</body>
</html>
I apologise in advance if my code looks messy but I've not got my head round that bit yet!
Cheers!
So without a media-query you've set the <li> elements to display: inline-block; Right now your li:hover{transform: scale(1.08);} works fine.
But then in one of your media-queries you set the <li>elements to display: inline;. Not really sure why tough, guess what you want will work with inline-block as well and this breaks the scaling right now. You're hover problem would be fixed if youjust removed the display:inline; line in youre media-query .
Try to add the following keywords: only, screen on the media queries ex:
#media only screen (max-width: 800px) {
Also add the following meta tag on your html head :
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
https://www.w3schools.com/css/css_rwd_viewport.asp
I'm having trouble aligning my navigation to the top left corner of my site. I know what the issue is, it's that it's in a div with display flex and justify content center. But I cant move it out of the div or it will be above the whole page.
I feel like this must be a simple fix, but I just can't think straight right now. So how could I fix this?
I tried creating a new div outside of the header and one inside but can't fix it.
Here's the site. Thanks
Edit: Forgot about position: fixed lol
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600" rel="stylesheet">
<title>Pink</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#-ms-viewport {
width: device-width;
}
header {
background-color: #fdd1d2;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
border: 4px red solid;
}
.nav {
padding: 1vw;
font-family: 'Crimson Text', serif;
border: 1px green solid;
height: 15vh;
}
.header {
line-height: 100vh;
background-image: url('header.jpg');
background-size: cover;
border: 4px blue solid;
margin-top: 25vh;
height: 50vh;
width: 50vw;
font-family: 'Crimson Text', serif;
font-size: 1.5vw;
/*color: #fdd1d2;*/
}
.text {
/*margin-top: -.75vh;*/
}
ul {
list-style: none;
}
a {
font-size: 1.5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
body {
overflow: hidden;
}
li {
list-style-type: none;
}
/* 6+Portrait */
#media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
.text {
font-size: 3vw;
}
#-ms-viewport {
width: device-width;
}
a {
font-size: 5vw;
color: black;
text-decoration: none;
transition: color .5s ease-out;
}
a:hover {
color: #ffcccd;
}
}
</style>
</head>
<body cz-shortcut-listen="true">
<header style="
justify-content: space-between;
">
<div class="nav" style="
display: flex;
justify-content: normal;
">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="header" style="
width: 100%;
display: flex;
margin: 100px 300px;
">
<div class="text" style="
/* width: 100%; */
">
<h1>1080 Benchmarks </h1>
</div>
</div>
</header>
</body></html>
You could add this to the CSS for .nav
position: absolute;
left: 0;
That makes it independent from the rest - on small screens it might overlap, but for medium to large screens it's the easiest solution. (BTW: position: fixed has the same effect in this particular situation
Everything else would involve changing your HTML.
I created a responsive website but my home page is not responsive on any phone. I tried it on a few different ones.
This is how it should look on phones.
And this is how it looks on a few ones.
Here is the HTML of my homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="cssHomePage.css">
<title>Catalin Sandu</title>
</head>
<body id="body">
<div id="mydiv">
<div id="topMenuName"><h1 id="name">CATALIN SANDU</h1></div>
<div class="container">
<div class="nav">
<ul>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And this is the CSS for it:
#font-face {
font-family: gothic;
src: url("Fonts/century gothic.ttf");
}
body {
font-family: gothic, sans-serif;
color: #FFF;
text-shadow: none;
color: #595959;
background-color: #f2f2f2;
padding: 0;
height: 100%;
}
#body {
margin: 0 auto;
width: 100%;
height: auto;
background: url("Images/background1.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Images/background1.png", sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="background1.png", sizingMethod='scale')";
}
#mydiv {
width: 30%;
height: 250px;
border: 1px solid #FFF;
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nav a:link, .nav a:visited {
color: #FFF;
font-size: 20px;
text-decoration: none;
font-family: gothic, sans-serif;
display: inline-block;
height: 40px;
padding: 15px 15px 0px 15px;
}
.nav {
width: 100%;
text-align: center;
}
.nav ul {
list-style: none;
padding: 0;
display: inline-flex;
}
.nav ul li {
margin: 0 auto;
display: inline;
}
.nav a:hover, .nav a:active,
.nav .active a:link, .nav .active a:visited {
background-color: #5aada0;
}
#topMenuName {
text-align: center;
padding: 20px 0 0 0;
}
#name {
color: #FFF;
font-size: 2.5em;
}
#media only screen and (min-width: 150px) and (max-width: 1100px) {
#mydiv {
width: 50%;
}
}
#media only screen and (min-width: 150px) and (max-width: 770px) {
#mydiv {
width: 90%;
height: 300px;
}
.nav {
width: 100%;
float: left;
}
.nav ul {
list-style: none;
display: block;
width: 100%;
}
.nav ul li {
width: 100%;
float: left;
}
.nav a:link, .nav a:visited {
width: 40%;
padding: 10px 0 0 0;
}
}
I know that it is a lot of code right here but i have been trying to fix it for a few days and i can't find the problem. I also saw that it works mostly on iOS phones. Is it a problem in my code that android does not support?
Based on the extra info, it looks like your background-image is set on <body>. This is all you need:
body {
margin: 0;
min-height: 100vh;
}
Initial answer also contained this relevant part:
Another option is to use flexbox layout:
give your <body> display:flex; flex-direction: column;min-height:100vh;
set flex-grow: 0; on immediate children that you don't want to grow in height
set flex-grow: 1; on immediate children that you want to grow in height.
If you need a more detailed solution you should provide more details about your layout.
Note: Don't forget to prefix flexbox. Use autoprefixer with this setting in Filter (down below): >0%.
I think you need to define the height of the page by targeting html and body like this:
html{
height:100%;
min-height:100%;
}
body{
min-height:100%;
}
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.