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>
Related
I was told to add a fixed nav bar to the code I had made previously.
Here is the CSS for the code. I reviewed it a lot but can't seem to find the issue with it.
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: auto;
/* overflow: hidden;*/
background-color: #c4a1a2;
}
.container {
position: relative;
text-align: center;
color: white;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
text-align: center;
color: #ffffff;
font-size: 5vw;
}
h2{
text-align: center;
color: #ffffff;
font-size: 3vw;
}
.table{
width: 100%;
/* height: 00px;*/
}
.table img{
width: 49.5%;
}
.table td{
width: 49.5%;
}
#wrapper
{
width: 99%;
/* max-width: 1500px;*/
min-width: 700px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
/* box-shadow: 3px 3px 3px #666666;*/
}
.navbar {
/*
overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
Here's the actual code. I think it's an issue with the container class but I'm not sure. When I commented out the Wrapper ID it was like the nav bar didn't even exist.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kayak Spot</title>
<link rel="icon" type="image/x-icon" href="images\RVC-Circles-Logo.jpg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="layout.css">
<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=Roboto+Mono:wght#200&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
Home
News
Contact
</div>
<div id="wrapper">
<div class="container">
<img src="Images/woman-kayaking.jpg" alt="Kayaking" style="width:100%;">
<div class="centered">
<h1>Kayaking, The pastime to calm your nerves.</h1>
</div>
</div>
<div class="table container">
<tr>
<td><img src="Images/sport%20(1).jpg">
<div class="centered">
<h2>Be it for sport or for leisure, Kayaking is one activity you can't miss.</h2>
</div>
</td>
<td><img src="Images/sport%20(2).jpg"></td>
</tr>
</div>
</div>
</body>
</html>
If you want to have a fixed bar at the top of the page, use this piece of code for the navbar class in your css. With this piece of code, your navbar class will be placed at the top of the page.
.navbar {
background-color: #333;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
}
.navbar a {
display: flex;
justify-content: center;
align-items: center;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Better than using a flex display.
If the navbar falls on the rest of the elements, just give the body or #wrapper margin
#wrapper {
width: 99%;
margin-top: 50px;
}
or
body {
margin-top: 50px;
}
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.
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%;
}
#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/
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.