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.
I've tryed to implement a simple dropdownmenu without using links ( ).
It's list based. My list elements-width are with procentual values that all together comes to 100%. My last element breaks out in a new line thats what I dont understand. Maybe it has something to do with my margin..
Thanks in advance.
Here is a link to my code:
Fiddle
HTML
<div class="dropDown-menu-container">
<ul class="dropDownMenu">
<li style="width: 20%;">
Initiating
<ul>
<li>punkt</li>
<li>punkt</li>
</ul>
</li>
<li style="width: 20%;">
Planning
<ul></ul>
</li>
<li style="width: 40%;">
Monitoring and Controlling
<ul></ul>
</li>
<li style="width: 20%;">
Closing
<ul></ul>
</li>
</ul>
CSS
.dropDown-menu-container {
position:relative;
width:100%;
float:none;
clear:both;
display:inline;
text-align:center;
}
ul {
position:relative;
float:left;
width:100%;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
text-align:center;
height:50px;
margin:4px;
box-shadow:0px 0px 2px 2px grey;
background-color:grey;
position: relative;
float: left;
}
ul li:hover {
background-color:lightgrey;
}
li ul {
display: none;
}
li {
position: absolute;
height:50px;
margin-bottom:5px;
top:0px;
}
li:hover ul {
display: block;
top:32px;
}
li:hover li {
float: none;
font-size: 11px;
}
Kind regards!
You're not including your margins in your calculations
Set your width to calc(20% - 8px)
Fiddle: http://jsfiddle.net/bjPrK/16/
The total of your element area is the sum of margin, padding and border.
See http://www.w3.org/TR/CSS2/box.html
You must include the four pixels of each margin in your calculation.
Nested list navigation is not displaying the second list as I'd expect (block listed down vertically). Instead all items are placed directly on top of one another.
http://jsfiddle.net/HL69H/3/
<div id="linksLeft">
<ul class="menu">
<li class="current">about</li>
<li class="current" id="active">portfolio
<ul class="subMenu" id="subNav">
<li>editorial</li>
<li>advertising</li>
<li>packaging</li>
<li>photography</li>
</ul>
</li>
</ul>
</div>
#nav {
width:48em;
margin:auto;
text-align:center;
padding-top:6em;
list-style-type:none;
}
#outerBox {
margin:0;
padding:0;
}
#linksLeft{
float:left;
border-top:2px solid #93b9bb;
border-bottom:2px solid #93b9bb;
margin-top:60px;
padding:5px 0px;
}
#linksLeft li {
display:inline-block;
padding:0 3em;
position:relative;
}
#linksLeft li ul li {
display:block;
}
#subNav li{
position:absolute;
padding:1em;
left:50%;
/*display:none;*/
}
#linksRight li{
display:inline-block;
padding:0 3em;
position:relative;
}
The position: absolute; was stacking them. Changing this to relative, and use absolute positioning on the parent container to position it where you want it.
#subNav li{
position:relative;
padding:1em;
left:50%;
/*display:none;*/
}
the problem is your css for '#subnav li'. The style you apply you want for the ul but not the li.
CSS
#subNav {
position:absolute;
padding:1em;
left:0;
/*display:none;*/
}
#menu li{
position:relative;
}
That gives you what you want
I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot:
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;
}