The background image I have in a div on my website shows up in the inspect element and the background image is correctly pathed in css but it is covered up by something in my code ,and I can't seem to find it.If anyone can look at my code and see what the problem is,it would be greatly appreciated.
* {
margin:0;
padding:0;
box-sizing: border-box;
list-style-type:none;
text-decoration: none;
}
body,html {
width:100%;
height:100%;
}
body {
text-decoration:none;
margin:0;
padding:0;
background-color:#000;
}
.wallpaper {
background-image: url('/../images/wallpaper.jpg');
background-repeat:no-repeat;
background-size:100% auto;
background-position:center top;
width:100%;
height:100vh;
}
.nav {
position:absolute;
top:10px;
width:100%;
height:50px;
overflow:hidden;
z-index:1;
}
.nav ul {
text-align:center;
float:right;
display:block;
margin:0 auto;
margin-right:50px;
}
.nav ul li {
float:left;
cursor:pointer;
}
.nav ul li a {
color:#fff;
font-size:16px;
line-height: 50px;
padding:0 10px 7px 10px;
font-family: "Playfair Display";
text-transform: uppercase;
}
.nav ul li a:hover {
border-bottom:2px solid #fff;
}
<body>
<div class="wallpaper">
<p>Hello</p>
</div>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
</body>
Would this work for you?
Change HTML:
<body>
<div class="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="wallpaper">
<p>Hello</p>
</div>
</body>
Change CSS:
.wallpaper {
background-image: url('http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg');
background-repeat:no-repeat;
background-size:100% auto;
width:100%;
height:100vh;
}
https://jsfiddle.net/PRW69/r258vvvm/
There is nothing wrong with your code. You need to double-check the path - that's where the issue is. If you share your folder structure, maybe we could help point out the error.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is my code for navigation:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JSfiddle
If I put width:960px; for the wrapper, it will cut the margin on both sides. I need to avoid using text-align:center; for nav ul because of what happens when the window is resized. When the window is shrunk, lists should be center aligned; in window of normal size, lists should be displayed in the left side of the navigation bar.
JSFiddle - DEMO or SHOW [EDITED]
You could use CSS3 #media queries for small screen sizes.
HTML:
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME
</li>
<li>COMPANY
</li>
<li>MARKETS/SOLUTIONS
</li>
<li>PRODUCTS/SERVICES
</li>
<li>BUSINESSES
</li>
<li>INVESTORS
</li>
</ul>
</nav>
</header>
</div>
CSS:
* {
box-sizing:border-box;
}
body {
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align: center;
}
nav ul {
background-color: red;
}
nav ul li {
display:inline-block;
padding:15px;
}
nav ul li a {
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover {
text-decoration: underline;
background-color:none;
}
nav ul li:hover {
background-color:#000;
}
#media (max-width: 960px) {
nav {
text-align: left;
}
}
Here is what you looking for http://jsfiddle.net/adarshkr/ubz7Lcft/9/
Style your CSS using media quires
Changes made
.wrapper{
width:100%; /*takes full width*/
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
text-align:left; /* for normal view */
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center /* for resize */
}
}
First correct the spelling of wrapper and then set its width to 80%.
<div class="wrapper">
<header>
<nav class="nav">
<ul>
<li>HOME</li>
<li>COMPANY</li>
<li>MARKETS/SOLUTIONS</li>
<li>PRODUCTS/SERVICES</li>
<li>BUSINESSES</li>
<li>INVESTORS</li>
</ul>
</nav>
</header>
</div>
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Verdana;
font-size:12px;
}
.wrapper{
width:80%;
margin-left:auto;
margin-right:auto;
}
nav ul{
background-color: red;
}
nav ul li{
display:inline-block;
padding:15px;
}
nav ul li a{
text-decoration: none;
color: #FFFFFF;
}
nav ul li:first-child:hover{
text-decoration: underline;
background-color:none;
}
nav ul li:hover{
background-color:#000;
}
Demo on JS Fiddle
Changed made in CSS
nav {
background-color: red; /*apply color for nav instead of ul */
}
nav ul{
text-align:left;
padding-left:0
}
#media(max-width:992px){
nav ul{
text-align:center;
width:80%; /*reduce the list width */
margin:0 auto; /* to make it align center */
}
}
Some of the links in my nav bar do not function. They seem to get covered up by an iframe element, and do not change color.
The iframe element is visibly below the nav bar, but I used .wrapper1 to reposition the iframe element. When I remove the iframe element, or remove the .wrapper1 object, the problem disappears (the links work).
insight?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper1 {position:fixed; left:50%; top:80px;}
iframe {
background: rgba(256,256,256,0);
position:relative;
top:60px;
left:-400px;
}
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
}
li {
background:none;
display:inline;
width:100%;
padding-left:40px;
color:#FFF;
font-size: 16pt;
font-family:'Rammetto One', cursive;
}
a {
text-decoration: none;
color:#FFF;
}
a:hover, a:active {
color:#333;
}
</style>
</head>
<body bgcolor="#000">
<div class="wrapper1">
<ul>
<li>Introduction</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
<div>
<div class="wrapper1">
<iframe name="content_frame" width="800" height="300"></iframe>
</div>
</body>
</html>
Preview (jsFiddle)
Add
z-index: 1;
to "ul" like so:
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
z-index: 1;
}
Link to Demo
I'm trying to design a website where everything is contained withing one main div that restricts everything to 85% of the screen width. I am trying to center the outer div, which seems to have worked, and make the inner div (menubar) float to the left. But no matter what I do I can't get it to go to the left of the outer div, it goes all the way to the left of the page. Thanks for any help.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-1;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site" align="center">
<div id="menubar" align="left">
<ul class="menu">
<li><span>Home</span></li>
<li><span>About</span></li>
<li><span>Necklaces</span></li>
<li><span>Bracelets</span></li>
<li><span>Earings</span></li>
<li><span>Rings</span></li>
<li><span>Scarves</span></li>
<li><span>Contact</span></li>
</ul>
</div>
<div id="gallery" align="center">
</div>
</div>
</body>
</html>
In your CSS, add
#menubar {
position: relative;
left: 0px;
}
and remove the inline CSS:
<div id="menubar">
You might want to use HTML5 notation.
Live Demo
HTML
<main>
<aside>Menu</aside>
<section>
<article>Content</article>
</section>
</main>
CSS
html {
background-color:black;
}
main {
background-color:red;
width:85%;
height:400px;
margin: 0 auto;
padding:4px;
}
aside {
width:20%;
height:90%;
margin-top:5%;
background-color:blue;
color:white;
clear:left;
display:inline-block;
}
section {
display:inline-block;
background-color:green;
padding:4px;
}
article {
background-color:#F60;
}
I have a website with 3 iframes and none of them works, although the text is longer than the windows: in Firefox the scroll bars appear but don't work; in Chrome the bars don't even appear. They do scroll in IE 6.
So I suspect there is a problem with the CSS. Probably it's something trivial, but I fail to see it.
CSS code:
.header
{
position:fixed;
top:0%;
right:0%;
height:4%;
width:100%;
text-align:center;
background-color:#BF1E4B;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
z-index:+1;
}
.nav,.nav ul
{
list-style:none;
margin:0.5%;
padding:0;
}
.nav
{
top:0%;
left:0%;
position:absolute;
}
.nav ul
{
height:0;
left:0;
position:absolute;
overflow:hidden;
top:100%;
}
.nav li
{
float:left;
position:relative;
}
.nav li a
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
background-color:#BF1E4B;
color:#fff;
display:block;
font-size:100%;
line-height:100%;
padding:4px 35px;
text-decoration:none;
transition:0.1s;
}
.nav li:hover > a
{
background:#000;
color:#fff;
}
.nav li:hover ul.subs
{
height:auto;
width:100%;
}
.nav ul li
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
opacity:0;
transition:0.1s;
width:100%;
}
.nav li:hover ul li
{
opacity:1;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
.nav ul li a
{
background:#BF1E4B;
color:#fff;
line-height:0%;
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
transition:0.1s;
}
.nav li:hover ul li a {
line-height:150%;
}
.nav ul li a:hover
{
background:#000;
}
.iframe1
{
position:fixed;
bottom:48%;
right:0%;
height:48%;
width:50%;
}
.iframe2
{
position:fixed;
top:4%;
left:0%;
height:96%;
width:50%;
}
.iframe3
{
position:fixed;
top:52%;
right:0%;
height:48%;
width:50%;
}
Sorry for the amateur look, and thanks in advance :)
HTML code:
<div class="header">
<ul class="nav">
<li>Links
<ul class="subs">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="iframe1">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
<div class="iframe2"">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
<div class="iframe3">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
As Javid said above, overflow:scroll on the iframe elements, though I think using position:fixed might cause problems up on some browsers based on the fact it locks the elements relative to the page scrolling. Consider using position:absolute, though I don't know anything about your situation.
try playing with the z-index value, you might cover it, change it to 1000 in the iframe and see you still cant use it
{
z-index: 1000;
}
I would like to center my floated menu(ul tag)in my page and can't figure out what's wrong with my css. Please help. Thanks.
My html
<section>
<div id='index'><img src='images/index_pic.png' title='index Picture'/></div>
<nav>
<ul> ////I want to center this menu, but the 3 buttons all float to left.
<li id=browser ><a href=#></a></li>
<li id=user_management><a href=#></a></li>
<li id=log_out><a href=#> </a></li>
</ul>
</nav>
</section>
and my css
section {
color: blue;
margin: 0 auto;
color:blue;
width:980px;
height:700px;
}
ul{
list-style:none;
}
#browser a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/browser_BT.jpg');
}
#user_management a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url("../images/user_management_BT.jpg");
}
#log_out a{
color:red;
width:270px;
height:32px;
display:inline-block;
float:left;
background-image:url('../images/log_out_BT.jpg');
}
section #index img{
padding:3px;
border:1px solid #a6a6a6;
}
Try this:
ul {
list-style: none;
width: 810px;
margin: 0 auto;
}