CSS background-image not showing - html

Nothing shows up when I try to put a background image in a div via CSS. I've tried adding properties like position, width, height. And, I am also able to place the photo via CSS in the <body> tag. But, obviously, I'd like to not have to leave it there. Here's my html:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div id="photo">
</div>
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</body>
</html>
Here's my CSS:
#photo{
background-image: url('../images/bandbanner.png')
}

<div id="photo">
</div>
in your dive you haven't set the size. for example:
#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}

The div photo contains nothing, try adding
#photo{
background-image: url('../images/bandbanner.png');
width: 100%
padding : 100px;
//hopefully this will make the photo appear and you can go from there
}

Set height & width property of #photo.
See working example: http://jsfiddle.net/ihkawiss/2n0o9t9x/

The HTML:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div class="photo">
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</nav>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</div>
</body>
</html>
And the CSS:
.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}

set your height and width
width: px;
height: px;

Related

The dots from my nav-bar are not being removed

I have read through my small code and want the dots removed from my nav-bar. I have already explored other similar questions on stack over flow and tried their answer. But the outcome that I have seen is that is still not removing the dots but when I type in the code in code.io it removes it for me: https://codepen.io/abhirajsb/pen/xxVLrpW.
My HTML code in my code editor(VS-CODE):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS code:
li {
list-style-type: none;
padding: 0%;
margin: 0%;
}
The output on my extension live is always showing the dots:
Try This in the header replace styles.css with ur css:
<head>
<link rel="stylesheet" href="styles.css">
</head>
You just try list-style: none instead of list-style-type: none;
li {
list-style: none;
padding: 0%;
margin: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
Could you please show us your CSS code? if this is all you have. Could you please try to do a hard reset. by clicking Ctrl + shift + R in your browser and check again with our answers.
Or try to run it on your local device. I don't see ay problem with your code as it run without any problem. anyway I tried it with list-style: none; and it worked
ul {
list-style: none;
}
that would solve your problem. if that doesn't work please let me know.
ul {
list-style: none;
}
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
I simply forgot to reference CSS style sheet to my HTML sheet.
solved it.

Struggling to get my text to display inline

I'm trying to get my ul section to display my code on the same line yet it still presents it in a vertical list. I'm new to this and so can't figure out why it won't go on the same line. I've tried display:inline-block; and float:left; but that hasn't worked.
HTML:
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
CSS:
body nav ul li {
display: inline-block;
}
You have it right. Check that the css file is named correctly and that main2.css is in the same directory as your html file.
works as expected when put into a snippet - see below. Check the filepath for the stylesheet and typos...
body nav ul li{
display:inline-block;
}
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet">
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>

Hyperlinks change the content of the object tag

I have created a navigation menu that I have been inserting into my pages using the "object" tag. Whenever I click a link on the navigation menu, it takes me to the correct page but it is inside the object tag. The rest of the page remains the same including the original address in the address bar. I cannot seem to find anyone else having the same issue as I am.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="/css/body.css" />
<body>
<object id="navigation" type="text/html" data="/includes/inc.nav.php"></object>
<div id='page'>
<div id='pageTitle'>Knowledge Base</div>
<p>Here is the body</p>
</div>
</body>
</html>
inc.nav.php
<link rel="stylesheet" href="/css/navbar.css" />
<ul id="menu">
<li>Tickets
<ul>
<li>BLAH</li>
<li>Haha</li>
<li>Woohoo</li>
</ul>
</li>
<li>Equipment
<ul>
<li>Trucks</li>
</ul>
</li>
<li>Reports
<ul>
<li>Reports</li>
<li>User List</li>
</ul>
</li>
<li>Knowledge Base</li>
<li>Logout</li>
</ul>
I'm sure I am missing something simple. Any help would be appreciated.
Found information on the answer here
Links should look like this:
<li><a target="_parent" href="/vision/tickets.php">BLAH</a></li>

Page is not top aligned when we redirect to it from another page

When I click on a button to redirect to a new page, new page is not at the top position. I have to scroll down to have a look. Please have a look at below pictures.
Page titled 'LIST' is the page I am redirecting to.
HTML of the page I'm redirecting to is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Some Title</title>
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
</head>
<body>
<div id="innerheader">
<div class="innerwrapper">
<h1 id="someId" onClick="location.href='index.html'"></h1>
<div class="mobileMenu"></div>
<div id="mainNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div id="mobileNav">
<ul>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
<li>xxx</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="priceList">
<h4>List</h4>
<div class="innerwrapper">
<div class="leftsection">
<div class="listSec">
<h5>ABC</h5>
<ul>
<li>
<p>A</p>
<span>70</span>
<div class="clear"></div>
</li>
<li>
<p>B)</p>
<span>300</span>
<div class="clear"></div>
</li>
<li>
<p>C</p>
<span>100/150/200</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
The CSS
.innerwrapper {
width:1140px;
height:700px !important;
margin:0 auto;
position:relative;
z-index:99999
}
#priceList{
background:#fff;
padding-bottom:80px;
}
#priceList h4{
font-size:24px;
color:#37444d;
line-height:65px;
font-weight:300;
text-align:center;
text-transform:uppercase;
border-bottom:solid 1px #f0f0f0;
border-top:solid 1px #f0f0f0;
}
If I remove height from above class, it works fine.
The reason that the #priceList div is being pushed down is because your div innerwrapperhas height: 700px set to it which pushes the content beneath it(i.e. priceList) down 700 pixels.
Edit:
To solve this you need to remove/change height: 700px !important on innerwrapper.
If it's crucial for your design that innerwrapper is 700 pixels high you have two options. Either absolute position your price list and place it exactly where you want it or you can move your pricelist to within the innerWrapper.
Your script is doing something here.
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
Try removing the script part and see how it works. Then, you can recode it as per the need.

Float left not working for the menu

i want to create menu bar and its contents as below but the contents are appearing on below the other :
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div class="menuheader"> Facebook, Twitter, Youtube </div>
<div class="menu">
<ul> Home </ul>
<ul> About Us
<li> Establishment </li>
</ul>
<ul> Careers
<li> Current Openings </li>
<li> Working with us </li>
<li> Work Culture </li>
</ul>
<ul> Contact Us </ul>
</div>
CSS:
.menu{
background-color:#999999;
color:#FFFFFF;
width:940px;
height:50px;
margin:20px;
padding:20px;
font-size:12px;
float:left;
}
The float:left is working, however, your padding of 20px to the right is causing the problem. I made a fiddle for you, http://jsfiddle.net/tsJ7r/1/
Change:
padding:20px;
to:
padding:0px;
and it should work
If you want the padding to be there on all sides except the left, you can use
padding-top:20px;
padding-bottom:20px;
Your unordered list markup is not correct. Try something like this:
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Careers
<ul>
<li>Current Openings</li>
<li>Working With Us</li>
<li>Working Culture</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Then your CSS would look like this:
ul.menu {
float: left;
}
ul.menu li {
float: left;
padding: 20px;
// etc.
}