Needing help on Navigation Bar HTML and CSS [duplicate]

Needing help on Navigation Bar HTML and CSS [duplicate] - html

This question already has answers here:
div get shrinked when using postion: fixed
(3 answers)
Closed 5 years ago.
I'm new to HTML and CSS. I'm trying to do a website, and I'm starting by the navbar, but whenever I try to do position:fixed; my navbar shrinks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webhosting</title>
<link rel="stylesheet" type="text/css" href="cssone.css"/>
</head>
<body>
<div class="body_div">
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li>
<li class="navbar_li_About">About</li>
</ul>
</div>
<div>
</body>
</html>
CSS
body{
background-image:url(imgs/background3.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.navbardiv{
font-family:Rockwell;
font-size: 30px;
}
.navbar_ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
border-radius:5px;
border-left:2px solid white;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
margin: -8px;
width: auto;
min-width:416px;
height:80px;
display: flex;
justify-content: space-between;
/*position:fixed;*/
}
li {
float:left;
padding:15px 100px;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration: none;
border:2px solid white;
/*border-bottom:2px solid white;*/
border-radius:5px;
}
li a:hover{
background-color:gray;
}

try width: 100%; in .navbar_ul in css... that'll work.. ;)

You can use width: 100% or left: 0; right: 0;, depending on which works better for you.
body{
background-image:url(imgs/background3.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
.navbardiv{
font-family:Rockwell;
font-size: 30px;
}
.navbar_ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
border-radius:5px;
border-left:2px solid white;
border-right:2px solid white;
border-top:2px solid white;
border-bottom:2px solid white;
margin: -8px;
left: 0; right: 0;
min-width:416px;
height:80px;
display: flex;
justify-content: space-between;
position:fixed;
}
li {
float:left;
padding:15px 100px;
}
li a{
display:block;
color:white;
text-align:center;
padding:8px 16px;
text-decoration: none;
border:2px solid white;
/*border-bottom:2px solid white;*/
border-radius:5px;
}
li a:hover{
background-color:gray;
}
<!DOCTYPE html>
<html>
<head>
<title>Webhosting</title>
<link rel="stylesheet" type="text/css" href="cssone.css"/>
</head>
<body>
<div class="body_div">
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting"><a class="active" href="#index.html">Webhosting</a></li>
<li class="navbar_li_About">About</li>
</ul>
</div>
<div>
</body>
</html>

Just add this css to your #navbardiv
.navbardiv{
position: fixed;
top: 0;
}
It should work

Related

Strange Behavior of li element in responsive webpage

Hi I am a novice at coding and am learning by myself at home. I have run into a problem which I simply cannot solve.
Firstly, here is the codepen link for the site:
http://codepen.io/sheahan/pen/ygKabM
The website is working pretty much seamlessly except for one issue.
Take a look at the 'item' list on the left side of the page. I have set it up so that on a hover the font color, background color, and font size change (i had to change the padding in order to ensure that the li stayed the same size). This works fine when the screen size is above 900px.
Now I have made the page responsive and set a media query to change the layout below 900px. The item list moves to the top of the page with a new format its laid out in a grid rather than a single column. This looks to work fine except for the last item on the right of each row (item 3 and item 6). Whenever I hover over it it pushes the next item in line over two spaces to the right leaving two empty spaces. One of the HTML editors I am using shows the presence of two "ghost" li items that aren't there.
Any guesses?
I'm also open to any comments or criticisms of the site, eager to learn.
Here's the raw code
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700|Alegreya:900" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<ul class="menunav">
<ul class="Products">
<li><a href="#" >Products</a>
<ul class="productsnav">
<li>Products</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
</ul>
<ul class="AboutUs">
<li><a href="#" >About Us</a>
<ul class="aboutusnav">
<li>About Us</li>
<li>History</li>
<li>Mission</li>
<li>Personel</li>
</ul>
</li>
</ul>
<ul class="Contact">
<li><a href="#" >Contact</a></li>
</ul>
</ul>
<div class="ProductMain">
<div class="sidebar">
<div class="logoholder">
<img src="https://c1.staticflickr.com/1/501/32498772122_9137841b84_o.png" alt="Company Logo Letters Only" height="130" width="130">
</div>
<div class="sidebarlinks">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li class="lastitem">Item 8</li>
</ul>
</div>
</div>
<div class="maincontent">
<h1 class="productname">Item Name</h1>
<img src="http://pngimg.com/upload/mango_PNG9168.png" >
<div class="Attributes">
<div class="Titles">
<ul>
<li>Country:</li>
<li>Variety:</li>
<li>Season:</li>
</ul>
</div>
<div class="Names">
<ul>
<li>Australia</li>
<li>Tastey</li>
<li>October-December</li>
</ul>
</div>
</div>
<div class="Description">
You can add a description of the item. Mention the history, the taste and other attributes of the product.
</div>
</div>
</div>
<div class="foot">
<div class="footer left">Website Designer<br>Happy Designs Inc.<br>Qatar</div>
<div class="footer center">&copy Food Supply Company</div>
<div class="footer right">P.O.Box 11111<br>Doha<br>Qatar</div>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
padding:0;
border-radius:5px;
font-family: 'Verdana',sans-serif;
}
body{
background-image: url(https://c1.staticflickr.com/1/470/32498869432_082f3cf148_o.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
.container{
width: 900px;
margin:auto;
position:relative;
}
h1{
font-family: 'Alegreya:900','Verdana',sans-serif;
padding:20px 0 15px 0;
text-align: center;
font-weight: 900;
font-size:65px;
letter-spacing: 2px;
color:coral;
text-shadow: 3px 3px 1px grey;
Width: 100%;
margin:10px 0 20px 0;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
}
p{
font-family: 'verdana', sans-serif;
}
li{
list-style-type:none;
}
.menunav{
margin:5px 0 30px 0;
overflow:auto;
font-size: 20px;
}
.menunav a{
float:left;
margin:0px 3px 5px 3px;
width:293px;
padding: 5px 0px 5px 0px;
background-color: rgba(255,127,80,0.85);
color: bisque;
box-shadow: 2px 2px 2px 0px darkgray;
}
.menunav a:hover{
background-color: bisque;
color: coral;
}
.productsnav, .aboutusnav{
position:absolute;
top:134px;
background-color:rgba(0,0,0,0);
z-index: 1;
}
.aboutusnav{
margin-left:298px;
}
.productsnav a, .aboutusnav a{
width:293px;
display: none;
background-color:coral;
}
.Products:hover .productsnav a{
display:block;
}
.AboutUs:hover .aboutusnav a{
display:block;
}
.ProductMain{
position:relative;
overflow: auto;
margin-bottom:18px;
padding-bottom:5px;
}
.sidebar{
float:left;;
width:250px;
margin-left:3px;
}
.sidebar a{
font-size: 16px;
display: block;
padding: 15px 0px;
background-color: rgba(255, 228, 196,0.85);
color:coral;
font-weight: bold;
margin-bottom:5px;
box-shadow: 2px 2px 2px 0px darkgray;
}
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:20px;
padding:13px 0px;
}
.sidebar .logoholder a{
background-color:rgba(0,0,0,0);
box-shadow: none;
}
.sidebar .logoholder a:hover{
padding:15px 0px 13px 0px;
}
.logoholder img{
background-color: rgba(0,0,0,0);
}
.lastitem a{
margin-bottom: 0px;
}
.maincontent {
background-color:rgba(244,164,96,0.8);
position:absolute;
left: 270px;
height: 99.2%;
width: 600px;
box-shadow: 2px 2px 7px 2px darkgray;
box-sizing:border-box;
}
.productname{
font-size:35px;
margin:0;
padding: 20px 0 15px 0;
background-color: rgba(0,0,0,0);
color: bisque;
border-bottom-style:double;
border-bottom-width: 4px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-color:bisque;
box-shadow: none;
}
.maincontent img{
float:left;
width:250px;
height:240px;
background-color:rgba(0,0,0,0);
margin: 20px -5px 0px 30px;
}
.Attributes{
position:relative;
right:-8px;
top:35px;
overflow:auto;
height:auto;
padding: 0px 5px;
background-color:rgba(255, 228, 196,0.5) ;
border-style:inset;
border-width: 3px;
margin-bottom:90px;
width:270px;
}
.Titles, .Names{
display: inline-block;
line-height:3.7em;
}
.Titles li, .Names li{
border-radius: 0;
font-weight: bold;
color:chocolate;
}
.Titles li{
font-size:17px;
text-align: center;
}
.Names li{
padding-left:5px;
}
.Description{
width:500px;
height:180px;
overflow:auto;
margin:auto;
padding: 10px 15px ;
background-color:rgba(255, 228, 196,0.5);
border-style:inset;
border-width: 3px;
color:chocolate;
line-height:1.5em;
}
.foot{
width: 860px;
height:70px;
background-color: rgba(255, 228, 196,0.9);
margin: 10px 0px;
box-shadow: 2px 2px 2px 0px darkgray;
padding: 10px 20px 20px 20px;
color:coral;
}
.footer{
display:inline-block;
width:33%;
background-color: rgba(0,0,0,0);
height:100%;
padding:10px;
box-sizing:border-box;
margin:-3px;
font-size: 15px;
line-height:1.5em;
}
.right{
text-align: right;
}
.center{
text-align:center;
}
#media screen and (max-width:920px){
.container{
width: 600px;
margin:auto;
position:relative;
}
.menunav a{
float:left;
width:32%;
}
.productsnav{
position:absolute;
top: 213px;
}
.aboutusnav{
position:absolute;
top: 213px;
margin-left:198px;
}
.productsnav a, .aboutusnav a{
width:190px;
}
.ProductMain{
position: relative;
height:800px;;
margin-bottom:18px;
margin-right: 0px;
padding-bottom:5px;
width:600px;
}
.logoholder{
display:none;
}
.sidebar{
width:99%;
position:relative;
float:none;
display:inline-block;
padding-left:10px;
}
.sidebar a{
width:32%;
float:left;
margin-right:5px;
}
.maincontent
{
position:static;
margin-top:15px;
height:600px;
width:99%;
}
.foot{
width:100%;
padding:0;
height:90px;
}
.footer{
margin-top:0;
}
.left{
margin-left: 13px;
}
.center{
width:30%;
}
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:24px;
padding:10px 0;
}
}

A shortest way to resolve the issue is to set font-size:23px; for .sidebar a:hover
.sidebar a:hover{
color:lightgray;
background-color:coral;
font-size:23px;
padding:10px 0;
}
codepen

Drop-Down Menu (Hovering)

I'm not quite sure what I'm doing wrong here. I want a standard dropdown navigation block when someone hovers over a nav item (in this case the "Products" Link). I haven't used an unordered list, just links. I manage to get all the elements in the right place with the right formatting looks great. The only issue is that I can't get the sub menu to show up when I hover over the main menu button? Can't figure out why, it looks fine to me. I'm previewing in google chrome
<!DOCTYPE html>
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
Products
About Us
Contacts
</div>
<div class="productsnav">
Fruits
Vegetables
Dry Foods
Spices
</div>
</div>
</body>
</html>
The CSS Style Sheet
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:33%;
margin-bottom:3px;
}
.productsnav a{
width:100%;
display: none;
margin-top: 5px;
}
.Products:hover .productsnav a{
display:block;
}
The last few in the CSS code is what seems to be wrong, but I cannot figure out what exactly is amiss. I have watched a number of videos on this and have formatted the css code to display the submenu in a few different ways but I could not figure it out.
Thanks

You should really consider using unordered lists to make it easier to display your sub-menus.
I did a quick plunk of your problem without the other menu items.
https://plnkr.co/edit/pBtp39zKpRL5YqCZvxK0?p=preview
I changed your html and css to the following:
HTML
<html>
<head>
<title>Food Supply Company</title>
<link href="style.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<ul>
<li class="products">
Products
<ul class="productsnav">
<li>Fruits</li>
<li>Vgetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
ul {
display: inline-block;
}
ul li a{
width: 100%;
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:33%;
margin-bottom:3px;
display: none;
}
.productsnav a{
width:100%;
margin-top: 5px;
}
.products:hover .productsnav{
display:block;
position: absolute;
}
Please change it to the desired style.

Yes thanks, I've done that now it looks much better. The issue I have now is that when the sub menu pops up the next main menu item gets pushed to the bottom of the sub menu. And also after the sub menu appears when I try to hover over it quickly disappears as soon as my mouse is removed off from the main nav item.
<!DOCTYPE html>
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<ul class="menunav">
<ul class="Products">
<li><a href="#" >Products</a>
<ul class="productsnav">
<li>Fruits</li>
<li>Vegetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul></li></ul>
<ul class="AboutUs">
<li><a href="#" >About Us</a>
<ul class="aboutusnav">
<li>History</li>
<li>Mission</li>
<li>Personel</li>
</ul></li></ul>
<ul class="Contact">
<li><a href="#" >Contact</a>
</li></ul>
</ul>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
li{
list-style-type:none;
}
.menunav{
margin-bottom:3px;
}
.menunav a{
float:left;
margin-top:5px;
margin-right:3px;
}
.productsnav, .aboutusnav{
width:33%;
margin-bottom:3px;
}
.productsnav a, .aboutusnav a{
width:100%;
display: none;
margin-top: 5px;
}
.Products:hover .productsnav a{
display:block;
}
.aboutusnav{
margin-left:33.3%;
}
.AboutUs:hover .aboutusnav a{
display:block;
}

If you want to use CSS hover style for your drop-down menu then it must be a child item of hovered element.
Otherwise, you can use jQuery/javascript for this drop-down menu.
I have another idea to solve this problem. Please check this link:
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav a{
display:inline-block;
margin-top:5px
}
.productsnav{
width:100%;
margin-bottom:3px;
display: none;
position:absolute;
}
.Products{
display:inline-block;
width:33%;
position:relative;
}
.Products a{
display:block;
width:100%;
}
.Products:hover .productsnav{
display:block;
}
<html>
<head>
<title>Food Supply Company</title>
<link href="FoodSupplyStyle.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<div class="Products">
Products
<div class="productsnav">
Fruits
Vegetables
Dry Foods
Spices
</div>
</div>
About Us
Contacts
</div>
</div>
</body>
http://codepen.io/shiplo_R/pen/VPyMzp
Also, you can add some animation to show your drop-down menu smoothly instant of "display:none".

You can try this
https://jsfiddle.net/uhg84d8d/
HTML:
<html>
<head>
<title>Food Supply Company</title>
<link href="style.css" rel="stylesheet" text="text/css">
<link href="https://fonts.googleapis.com/css?family=Volkhov:700" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="title">
<h1>Food Supply Company</h1>
</div>
<div class="menunav">
<ul>
<li class="products">
Products
<ul class="productsnav">
<li>Fruits</li>
<li>Vgetables</li>
<li>Dry Foods</li>
<li>Spices</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contacts
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
*{
Margin:0;
background-color: aliceblue;
padding:0
}
.container{
width: 900px;
margin:auto;
height:900px;
}
h1{
padding:20px 0px 10px 0px;
background-color:bisque;
text-align: center;
font-family: 'Verdana',sans-serif;
font-weight: 700;
font-size:50px;
letter-spacing: 2px;
color:coral;
text-shadow: 2px 2px brown;
Width: 100%;
background-color:bisque;
}
a{
text-decoration: none;
text-align: center;
font-family: 'verdana', sans-serif;
width:33%;
text-align: center;
list-style: none;
padding: 5px 0px 5px 0px;
background-color: coral;
color: bisque;
box-shadow: 2px 2px 2px rgb(40,0,0);
}
.menunav {
width: 100%;
float: left;
}
.menunav ul {
width:100%;
float: left;
margin: 0px;
}
.menunav ul li{
list-style: none;
float:left;
width: 33.3%;
}
.menunav ul li a{
width: 100%;
}
.menunav ul li a:hover{
font-family: 'verdana', sans-serif;
background-color: bisque;
color: coral;
}
.menunav ul li a{
display:inline-block;
margin-top:5px
}
.menunav ul li .productsnav{
width:33%;
margin-bottom:3px;
display: none;
}
.menunav ul li .productsnav li{
width:100%;
margin-top: 5px;
float: left;
}
.menunav ul li .productsnav li a{
width:100%;
margin-top: 5px;
float: left;
}
.menunav ul li.products:hover .productsnav{
display:block;
position: absolute;
width: 300px;
}
Then it will work...:)

one element is overlaping another element

I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}

Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}

Floating images without affecting container

I Need to float two similar images to left and right of section container without affecting Div container. I need them to occupy the left and right side of the green boxy without affecting the position of the red box or overlapping.Please help. Heres my code:
Html:
<!Doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Envy</title>
<link rel="stylesheet" href="Envy.css">
</head>
<div id="M_wrap">
<body>
<div id="F_head">
<header id="M_head">Nhere</header>
<nav id="M_nav">
<ul>
<li class="Esec">New in stock</li>
<li>Men</li>
<li>Women</li>
<li>Children</li>
<li>Accessories</li>
</ul>
</nav>
</div>
<section id="M_section">
<img class="SE1" src="Bg2.jpg">
<img class="SE2" src="Bg2.jpg">
<div id="S_wrap">
</div>
</section>
</body>
</div>
</html>
Css:
body{
}
#M_wrap{
background-size:cover;
width:70em;
margin:.8em auto;
}
#F_head{
width:100%;
margin:.2em auto;
}
#M_head{
color:#000000;
font: Italic bold 80px/50px "Times New Roman" Arial, Tamoha;
text-align:center;
text-shadow:2px 2px #33ff00;
text-decoration:underline;
}
#M_nav{
height:3em;
width:37.5em ;
margin:2em auto;
background-color:black;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
word-spacing:80px;
text-align:center;
font:Italic bold 30px/20px Times "Times New Roman", tamoha;
}
#M_nav ul li{
display:inline;
}
li.Esec{
word-spacing:0px !important;
}
#M_nav li a {
display:inline-block;
padding: 0px 15px;
font-weight:bold;
border-right: 1px solid #ccc;
}
#M_nav a:link{
color:white;
font:Italic bold 30px/40px Times "Times New Roman", tamoha;
text-decoration:none;
}
#M_nav a:hover {
color:white;
text-shadow: 2px 2px black;
text-decoration:underline;
color:#33ff00 !important;
}
#M_nav a:active{
color:red;
}
#M_nav a:visited{
color:white;
text-shadow:2px 2px black;
}
#M_section{
margin:-3.75em 0 0 0;
width:100%;
height:50em;
border-style:solid;
border-color:#33ff00;
}
#S_wrap{
margin:3em auto;
width:80%;
height:85%;
position:center;
border-style:solid;
border-color:red;
}

Something like this?
Here is part of CSS I changed:
.SE1 {
float:left;
}
.SE2 {
float:right;
}
#S_wrap{
margin:0 auto 3em auto;
/* didn't touch rest of rules you have for this ID */
}

Submenu with z-index doesn't want to go over content

For some unknown reason z-index doesn't seem to work. I try to make the submenu. i.e. the 2nd bar. To go over the #content which it fails to do....
http://jsfiddle.net/PaD2v/
HTML
<html>
<head>
<title>Мэрия Skrillax-RP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="master.css" />
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=cyrillic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="master.js"></script>
</head>
<body>
<div id="wrapper">
<div id="banner"><img src="http://i.imgur.com/f2EWgQP.png?1"><p id="banner text"></div>
<ul id="navigation">
<li>Главная Страница</li>
<li>Задачи
<ul class="submenu">
<li>Охрана</li>
<li>Министерство Обороны</li>
<li>Министерство Юстиций</li>
<li>Министерство Культуры</li>
<li>Министрество</li>
</ul>
</li>
<li>Список Сотрудников
<ul class="submenu">
<li>Hello</li>
<li>Hello2</li>
</ul>
</li>
<li>Вакансии</li>
<li>Авторизация</li>
</ul>
<div id="content">
<p>Hello! Welcome to the www.mayor.freeiz.com!<br><br> Currently I am working on adding different types of information</p>
</div>
</div>
<div id="footer">Hello</div>
</body>
</html>
CSS
html {
height:;
}
body {
background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
background-attachment: fixed;
background-size: 100% 100%;
height:100%;
}
#wrapper {
width:1024px;
min-height: 100%;
margin:0 auto;
}
#banner {
height:216px;
}
#navigation {
position:relative;
list-style-type:none;
font-size: 18px;
background-color: orange;
font-family: 'EB Garamond', serif;
opacity:0.8;
z-index: 15000001;
}
#navigation>li {
float:left;
}
#navigation a {
display:block;
padding:10px 10px;
color:white;
font-weight: bold;
width:183.81px;
height:40px;
text-align: center;
background-color: blue;
border-left:1px solid black;
text-decoration:none;
}
#navigation a:hover {
background-color:white;
color:blue;
border-top:3px solid red;
opacity:0.9999;
margin-bottom: -3px;
}
#banner h1 {
font-size: 20px;
text-align: center;
position: relative;
top: 1024px;
}
#content {
position:relative;
height:500px;
background-color:white;
opacity:0.9;
clear: both;
z-index:1;
}
#content p{
position:relative;
top:6px;
font-size: 30px;
z-index:1;
}
#footer {
vertical-align: bottom;
background-color: orange;
width:1024px;
height:50px;
margin:0 auto;
}
.submenu {
display:none;
position:relative;
}
.submenu li {
border-top: 2px solid black;
}
#navigation li:hover .submenu {
display:block;
z-index:99999999999999999999999999999999999999;
}

instead of relative position in your .submenu use absolute position
css
.submenu {
display:none;
position:absolute;
}
working demo

Relative positioning doesn't take the element out of the normal document flow. Consequently, when it appears it takes up space like a normal div and pushes everything beneath it down.
To remove it from the normal document flow so that it just sits on top of everything, use position: absolute. In this case, the thing we want to sit on top of everything is the submenu, so apply it to .submenu.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Needing help on Navigation Bar HTML and CSS [duplicate] - html

try width: 100%; in .navbar_ul in css... that'll work.. ;)

Just add this css to your #navbardiv .navbardiv{ position: fixed; top: 0; } It should work

Related

Strange Behavior of li element in responsive webpage

Drop-Down Menu (Hovering)

one element is overlaping another element

Floating images without affecting container

Submenu with z-index doesn't want to go over content

Categories

Resources