I've been trying to put an image as a background in the HTML element for the past few hours, however, the background somehow won't show up after I put in the navbar, I assume it has something to do with the navbar background taking priority but honestly I have no idea.
HTML, CSS
#charset: "utf-8";
html {
background-image: url(../design/background.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: right;
}
li a {
display: block;
color: #fff;
text-align: center;
padding: 27px 60px;
text-decoration: none;
font-family: 'Abel', sans-serif;
}
li a:hover {
background-color: #7446ad;
}
#logo {
float: left;
width: 100px;
height: 60px;
padding: 5px 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<div>
<ul>
<li>SUPPORT</li>
<li>STORE</li>
<li>TEAMS</li>
<a class="navbar-brand">
<img src="asd2.png" id="logo">
</a>
</ul>
</div>
</nav>
</body>
</html>
The background image won't show up as the background for some reason, even if i change the html selector to body selector.
.
It seems you moved your css into it's own file styles.css but forgot to get rid of the enclosing html <style> tags.
Remove them and in theory i'm confident the image will load.
Also change
#charset: "utf-8";
to
#charset "utf-8";
but this is not relevant to the question.
I tried replacing the image you provided, its working. It doesnt look like css issue, but rather with image path you provided in css.
html{
background-image: url(https://placeimg.com/640/480/animals);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li{
float:right;
}
li a{
display: block;
color: #fff;
text-align: center;
padding: 27px 60px;
text-decoration: none;
font-family: 'Abel', sans-serif;
}
li a:hover{
background-color: #7446ad;
}
#logo{
float:left;
width: 100px;
height: 60px;
padding: 5px 5px;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Abel&display=swap" rel="stylesheet">
</head>
<body>
<nav >
<div>
<ul>
<li>SUPPORT</li>
<li>STORE</li>
<li>TEAMS</li>
<a class="navbar-brand">
<img src="asd2.png" id="logo">
</a>
</ul>
</div>
</nav>
<div>
</div>
</body>
</html>
Related
I have tried changing the display and getting rid of some code? probably erased the wrong thing or some code is overlapping? Im new to web development so if you can explain what I did wrong that will be great thanks. Check out Code on this JSFiddle link. https://jsfiddle.net/galbruh/htsrmy0L/2/#&togetherjs=PjjPVg1cOR
.toc-nav {
float: left;
/*list-style: none;*/
margin-top: 2%;
/*margin-left: 10%;
margin-right: 0%;*/
width: 100%;
text-align: center;
}
.toc-nav li {
display: incline;
list-style-type: none;
}
.toc-nav li a {
color: white;
text-decoration: none;
padding: 10px 70px;
font-family: "Roboto", sans-serif;
font-size: 16px;
}
.toc-liv li.active a {
border: 1px solid white;
}
.toc-nav li a:hover {
border: 1px solid white;
}
#media screen and (max-width: 500px) {
.toc-nav li a {
float: left;
/*display: none;*/
width: 100%;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="js/classie.js"></script>
<style>
body,html {
height: 100%;
margin: 0;
background-color: #2f3036;
}
b {
color: black;
font-family: "Teodor";
font-size: 25px;
}
.bg {
/* The image used */
background-image: url("images/logo.png");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
label {
color: white;
}
</style>
</head>
<body>
<header id="top"></header>
<nav role="navigation">
<ul class="toc-nav">
<li>About</li>
<li>Albums</li>
<li>Music</li>
<li>Contact</li>
</ul>
</nav>
<div class="bg"></div>
You have a spelling error in display: incline, it's actually spelled inline. That fixes it.
I have looked online and tried different things to make the contact form be centered when the screen is or gets smaller. The header and navbar are responsive, the contact form is not. Also, my code was in two separate sheets on here and then the website randomly combined them. You can break them apart if you know how.
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color: #ffb6c1;
color: #ffffff list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
img {
max-width: auto max-height: auto;
}
.nav>li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav>li>a {
text-decoration: none;
color: #ffffff
}
.nav>li>a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner>.bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav {
margin: 0;
}
.cognito {
margin: 0 auto;
width: 100px;
}
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Events.css">
<link rel="stylesheet" type="text/css" href="contactusmobile.css" media="screen and (max-width: 900px)">
</head>
<body>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.cognito {
position: absolute;
margin-top: 20px;
margin-left: 450px;
}
body {
background: url('heartcoffee.jpeg');
background-repeat: no-repeat;
background-size: 2000px 1000px;
}
</style>
<div class="cognito">
<script src="https://services.cognitoforms.com/s/q8sF4QFeokuqNI1bQZm3vg">
</script>
<script>
Cognito.load("forms", {
id: "1"
});
</script>
</div>
</body>
</html>
It’s useless post all code of your problem request.
However, for center a form inside a div container you can use:
.center{
margin:0 auto;
}
Else inside a position:relative; container:
.center{
position:absolute;
left:50%;
transform:translateX(-50%);
top:0;
}
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.
I know that multiple questions has been discussed on this subject, I coped and pasted every suggestion/answers.. None of them work, please help!
Remember I would like the content, when scrolled to not overlap the menubar.
My Problem
Here is the image.
When ever I scroll the center div(the one that says "this website is dedicated to games") overlaps the menu bar.
How do I prevent this from happening?
Here's another image
Code Id(s)
Center div that is colored black. id="divCenter".
Element that is being overlapped("menu bar). id="NavDivef"
Code, html
<!DOCTYPE html>
<html>
<head>
<title>Home:</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id="nav">
<div id="maindic">
<div id="NavDivef">
<ul>
<h1>CPG</h1>
<li>Contact</li>
<li>Find out more</li>
<li>Contact</li>
<li>Find out more</li>
</ul>
</div>
</div>
</nav>
<center>
<div id="divCenter">
<p>
This website is dedicated to games.
</p>
</div>
</center>
<img alt="" id="gameImage" src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/07/Video-Game-Wallpapers-and-Backgrounds-0.jpg"/>
</body>
</html>
Code, css
body{
font-family: arial, sens-serif;
background-size: cover;
}
*{
padding: 0px;
margin: 0px;
}
#NavDivef ul{
width: 100%;
height: 80px;
background-color: black;
line-height: 80px;
position: fixed;
line-height: 80px;
opacity: 0.8;
}
#NavDivef ul li{
list-style-type: none;
display: inline-block;
float: right;
}
#NavDivef ul a{
text-decoration: none;
padding: 30px;
color:White;
}
#NavDivef ul li:hover{
background: orangered;
color: #cc0000;
}
#NavDivef h1{
color:red;
width: 300px;
float: left;
font-size: 480%;
margin-left: 15px;
}
#divCenter{
position: absolute;
width: 50%;
height: 54%;
background-color: black;
margin-top: 280px;
margin-left: 350px;
}
#divCenter p{
color:red;
margin-top: 30px;
margin-left: 30px;
font-size: 40px;
}
#divExample{
width: 600px;
height: 700px
}
Thank you in advance.
I have a white space under the navigation bar of my webpage.
The only way I can get it to go away is to add a border to the header section below.
I've double checked my code so many times, please help me identify where I am going wrong.
I'm a beginner, so let me know if I'm totally off base with my structure.
In this snippet, you can see the result by simply un-commenting the on the header css.
I really want to learn what I'm doing wrong here. Thanks.
body {
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
/******************************
NAV
******************************/
nav {
background-color: #393D44;
margin: 0;
padding: 10px 0;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
font-weight: 300;
padding: 15px 10px;
color: #fff;
}
nav ul li a:hover, .active {
color: #4BAF70;
}
/******************************
HEADER
******************************/
header {
margin: 0;
background-image: url("http://easylivingmom.com/wp-content/uploads/2012/07/grocery-store-lg.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 600px;
/*border: 1px solid green;*/
<DOCTYPE html>
<html>
<head>
<title>Grocery Shopping</title>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<div class= "container">
<ul>
<li>Home</li>
<li>What</li>
<li>Where</li>
<li>When</li>
<li>How</li>
</ul>
</div>
</nav>
<header>
<div class= "container">
<h1>Grocery Shopping</h1>
<a href="#" class=btn>Get Involved</a>
</div>
</header>
<section>
<div class= "container">
<!- Need to figure this section out ->
</div>
</section>
<footer>
<div class= "container">
<p>© Brianna Vay 2015</p>
<p>Careers</p>
</div>
</footer>
</body>
</html>
Your <h1>Grocery Shopping</h1> inside the header have a margin. try removing the margin.
ie, header .container > h1{ margin-top: 0}
This will solve the white space
PS: add a class to the h1 tag and target only this element
see this
body {
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
/******************************
NAV
******************************/
nav {
background-color: #393D44;
margin: 0;
padding: 10px 0;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
text-decoration: none;
font-weight: 300;
padding: 15px 10px;
color: #fff;
}
nav ul li a:hover,
.active {
color: #4BAF70;
}
/******************************
HEADER
******************************/
header {
margin: 0;
background-image: url("http://easylivingmom.com/wp-content/uploads/2012/07/grocery-store-lg.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 600px;
/*border: 1px solid green;*/
<DOCTYPE html>
<html>
<head>
<title>Grocery Shopping</title>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
<div class="container">
<ul>
<li>Home
</li>
<li>What
</li>
<li>Where
</li>
<li>When
</li>
<li>How
</li>
</ul>
</div>
</nav>
<header>
<div class="container">
<h1 style="margin-top: 0">Grocery Shopping</h1>
<a href="#" class=btn>Get Involved</a>
</div>
</header>
<section>
<div class="container">
<!- Need to figure this section out ->
</div>
</section>
<footer>
<div class="container">
<p>© Brianna Vay 2015</p>
<p>Careers</p>
</div>
</footer>
</body>
</html>