I am trying to make my DIV(MainPageImage) fill the entirety of the screen, between the header and the footer.
My HTML:
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Aerial;
font-size: 18px;
}
#nav {
background-color: #222;
Height: 50px;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #F00;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul a:hover {
color: #C03;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #F00;
}
#nav ul ul li a:hover {
color: #099;
}
footer {
position: fixed;
bottom: 0;
background-color: #333;
border: 5px solid grey;
color: #F00;
font-size: 24px;
text-align: center;
width: 100%;
Height: 40px;
padding-top: 15px;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home
</li>
<li>About us
</li>
<li>Games
</li>
<li>Social
<ul>
<li>Youtube
</li>
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact me
<ul>
<li>Email
</li>
<li>Form
</li>
</ul>
</li>
<li>Bugs
</li>
</li>
</ul>
</div>
</div>
<div id="MainPageImage">
<img src="http://i.imgur.com/MHHu946.jpg" style="width:100%; height:auto;" >
</div>
<footer>
<p>Copyright #DcoltGaming 2016</p>
</footer>
</body>
</html>
I have tried to set the height to auto, and the other solutions that I have found don't seem to work.
I hope that someone can solve this.
Thanks
DcoltGaming
remove the image from html and add it in the css under body and add background-size: cover; like this
background: url("http://i.imgur.com/MHHu946.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
here is a snippet
#charset "utf-8";
/* CSS Document */
body{
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Aerial;
font-size : 18px;
background: url("http://i.imgur.com/MHHu946.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nav{
background-color: #222;
Height:50px;
}
#nav_wrapper{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
padding:0;
margin: 0;
position:relative;
text-align:center;
}
#nav ul li{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited{
color: #F00;
display:block;
padding: 15px;
text-decoration:none;
}
# nav ul a:hover{
color: #C03;
text-decoration: none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul{
display: none;
position: absolute;
background:#333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li{
display: block;
}
#nav ul ul li a,visited{
color: #F00;
}
#nav ul ul li a:hover{
color:#099;
}
footer{
position:fixed; bottom:0;
background-color:#333;
border:5px solid grey;
color:#F00;
font-size:24px;
text-align:center;
width:100%;
Height:40px;
padding-top: 15px;
}
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home
</li>
<li>About us
</li>
<li>Games
</li>
<li>Social
<ul>
<li>Youtube
</li>
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact me
<ul>
<li>Email
</li>
<li>Form
</li>
</ul>
</li>
<li>Bugs
</li>
</li>
</ul>
</div>
</div>
<div id="MainPageImage">
</div>
</body>
<footer>
<p>Copyright #DcoltGaming 2016</p>
</footer>
Related
i'm new with css. i'm trying to make a navigation menu with sub items, but i think i'm missing something. the sub items are over lapping with the main items.
so the way i see it that the top list items are floated so are removed from the normal content flow. Which means i need to clear the float after so that the sub items display under the main items.
But its not working for me..Any ideas
https://jsfiddle.net/madubuko/szqk5be9/
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
Please Replace this code with your old code :
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/corecss.css" type="text/css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
</body>
</html>
Add Some CSS
#container nav ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding-top: 7px;
opacity: 0.8;
position: relative;/*Add This Property*/
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
https://jsfiddle.net/szqk5be9/2/
You can set it using position, check updated snippet below
* {
padding: 0px;
margin: 0px;
}
body {
background-image: url("../images/background.jpeg");
}
#container {
width: 100%;
}
nav {}
#container nav ul {
list-style: none;
}
#container nav ul li {
float: left;
width: 100px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
padding: 7px 5px;
opacity: 0.8;
position: relative;
}
#container nav ul li a {
color: white;
text-decoration: none;
display: block;
}
#container nav ul li ul li {
clear: both;
}
#container nav ul li ul {
position: absolute;
top: 100%;
display: none;
}
#container nav ul li:hover ul{
display:block;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>
News
<ul>
<li><a>Football News</a></li>
<li><a>Team News</a></li>
<li><a>Players News</a></li>
<li><a>Other News</a></li>
</ul>
</li>
<li>Contact</li>
<li>About us</li>
</ul>
</nav>
</div>
You can select only the first ul with direct children selector >, then it works.
#container nav > ul li {
float: left;
width: 100px;
height: 40px;
color: white;
background-color: black;
text-align: center;
border-right: solid #fff 1px;
border-bottom: solid #fff 1px;
line-height: 40px;
opacity: 0.8;
}
So we have to create our own webpage using css and html in IT class and I decided that I wanted my navigation menu a little bit shorter than I had at the beginning but now I can't figure out how to change the css so that when I hover over my navigation menu the hover isn't all over the place like it is now.
Can someone help me out please.?
#nav {
height:28px;
background-color:#222;
position: fixed;
top: 92px;
left: 0;
margin-bottom:0;
box-shadow: 10px 2px 5px #888;
blur: 3px;
spread: 2px;
}
#nav_wrapper {
width: 1185px;
height:28px;
margin-left: 260px;
text-align: left;
margin-top:-10px;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
font-family:arial;
font-size: 15px;
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li img{
width: 8px;
height:8px;
vertical-align:middle;
padding-left: 10px;
}
#nav ul li a,visited{
color: #ccc;
display:block;
padding: 15px;
text-decoration:none;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -1px;
min-width: 80px;
padding:0px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited{
color: #ccc;
}
#nav ul ul li a:hover{
color: #099;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="home.html">
<img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
</a>
</li>
<li>HTML <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basic</li>
<li>Tags</li>
<li>Links</li>
<li>Classes</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
<li>CSS <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basics</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
</ul>
</div>
</div>
I would suppose this is what you want? (remove negative margin in #nav_wrapper and reduce padding in #nav ul li a)
#nav {
height:28px;
background-color:#222;
position: fixed;
top: 92px;
left: 0;
margin-bottom:0;
box-shadow: 10px 2px 5px #888;
blur: 3px;
spread: 2px;
}
#nav_wrapper {
width: 1185px;
height:28px;
margin-left: 260px;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
font-family:arial;
font-size: 15px;
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li img{
width: 8px;
height:8px;
vertical-align:middle;
padding-left: 10px;
}
#nav ul li a,
#nav ul li a.visited{
color: #ccc;
display:block;
padding: 4px;
text-decoration:none;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -1px;
min-width: 80px;
padding:0px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited{
color: #ccc;
}
#nav ul ul li a:hover{
color: #099;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="home.html">
<img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
</a>
</li>
<li>HTML <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basic</li>
<li>Tags</li>
<li>Links</li>
<li>Classes</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
<li>CSS <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basics</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
</ul>
</div>
</div>
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
I just started code and i decieded to make a school project website but i can't make a box transparent without affecting the text. Here is a link for my code:
I hope you guys can help me :)
I tried
Css
.boxed {background: transparent;}
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Bjerg</h1>
<div id="wrapper">
<div id="nav">
<ul id="menu">
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</div>
</body>
And my Css:
h1{
text-align:center;
}
Body {
text-align: ;
background: url("http://goo.gl/wkzbXp");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
#wrapper
{
width: 1024px;
height: auto;
margin: auto;
}
#menu
{
margin:auto;
width:400px;
height: 100px;
}
#content
{
margin:auto;
width: 760px;
height: auto;
}
.container {
overflow:hidden;
list-style:none;
}
.container li {
float:left;
text-align:center;
margin:20px;
}
.container img {
border:2px solid #000;
display:block;
}
.sortfarve {
color:#000;
}
.hvidfarve {
color:#fff;
}
You can use rgba() , the last parameter can be use to define opacity
.boxed {
background: rgba(123,0,0,0.5);
/*........................^......opacity......_*/
}
Fiddle Demo
I tried making a dropdown menu only with css, now the problem is that my dropdown menu is hiding behing my content. I don't know why its not working, I tried using z-index but nothing worked. Here is a jsfiddle example and some code.
Please help me, thank you.
http://jsfiddle.net/42c6q/
HTML
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="images/logo.png" alt="De Pannenkoekenbus Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
</div>
</div>
</div>
CSS
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background: url("images/kaart_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
overflow: hidden;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 50px;
margin-left: 30px;
width: 130px;
text-align: center;
margin-top: 40px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 15pt;
}
#main_menu .logo{
background: none;
width: 224px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 12pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
}
In your #main_menu you have this overflow:hidden remove that:
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
/*overflow: hidden; Remove this*/
z-index: 2;
}
The demo http://jsfiddle.net/42c6q/2/
Remove overflow: hidden from #main_menu
working demo
#main_menu {
overflow: hidden; /*remove overflow */
}