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">© 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
Related
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...:)
In this image, on left side there is half side view of website and on the right side there is extra space which I want to omit. Also look at the bottom there is a bar which I don't want.
How do I remove this extra space?
css
/* CSS Document */
body{
padding:0px;
margin:0px;
background-image: url(../images/tile.jpg);
background-repeat: repeat;
}
img{
border:0px;
}
.flt{
float:left;
}
#wh_bg{
width:1000px;
margin:auto;
}
#bg_bg{
width:1000px;
float:left;
margin-left: -40px;
margin-top: -50px;
}
/*top panel starts here*/
.logo{
float:left;
margin:89px 0px 0px -15px;
position:relative;
top: 0px;
left: 0px;
}
#menu{
width:1000px;
float:left;
height:56px;
}
.men_tp{
width:900px;
float:left;
display:inline;
padding:24px 0px 0px 70px;
}
.men_tp a{
float:left;
color:#686666;
font:bold 12px/15px tahoma;
text-decoration:none;
margin-left:25px;
}
/*top panel ends here*/
/*content panel starts here*/
#content{
width:1000px;
float:left;
}
.img_txt{
float:left;
position:relative;
margin:-10px 0px 0px 10px;
}
.img_tp{
width:865px;
float:left;
background:url(../images/img_tp.gif) no-repeat;
height:15px;
}
#con{
width:865px;
float:left;
background:url(../images/part_bg.gif) repeat-y;
}
.con1{
width:560px;
float:left;
display:inline;
padding-left:4px;
padding-top:10px;
}
.con2{
width:280px;
float:left;
padding-left:20px;
display:inline;
padding-top:10px;
}
.txt{
width:560px;
float:left;
margin-top:35px;
color:#515455;
font:12px/18px georgia;
}
.wor{
float:right;
position:relative;
margin:-30px 10px 0px 0px;
}
#part2{
width:1000px;
float:left;
}
#cen{
width:640px;
float:left;
height:237px;
background:#009BD9;
}
.cont{
float:left;
margin:10px 0px 0px 0px;
}
.con_txt{
width:211px;
color:#515455;
float:left;
font:12px/16px georgia;
margin:10px 0px 0px 20px;
}
.abt_txt{
width:550px;
float:left;
margin-top:15px;
color:#FFF;
font:12px/18px georgia;
}
#link{
width:257px;
float:left;
padding:10px 0px 0px 15px;
}
.copy{
width:700px;
float:left;
margin:10px 0px 0px 200px;
color:#D4D0D0;
font:12px/18px georgia;
}
.copy a{ color:#D4D0D0; font:12px/18px georgia; }
/*footer panel ends here*/
.contecnt1
{
width:400px;
height:480px;
margin-top: 100px;
padding-top : 60px;
font-family:Candara;
font-variant:normal;
}
.imgg
{
margin-left:40px;
margin-top:-40px;
}
.imggss
{
margin-left:40px;
margin-top: -100px;
}
.para
{
text-align:justify;
color:Black;
float:left;
width:990px;
padding-left:20px;
}
.img_wrper
{
background-image:url("images/Malaysian-Flag.png");
width :990px;
height:492px;
margin-bottom:10px;
margin-top:150px;
}
.contPers
{
margin-bottom: 10px;
margin-top: 230px;
padding-right: 10px;
margin-left:65px;
}
.contPers1
{
width: 990px;
height: 800px;
margin-bottom: 10px;
margin-top: 230px;
background-color:#E6E6FA;
padding-right: 10px;
}
.contPers2
{
width: 990px;
height: 1100;
margin-bottom: 10px;
margin-top: 210px;
background-color:#E6E6FA;
padding-right: 10px;
margin-left:70px;
}
.pers
{
font-family:Candara;
font-size:18px;
padding-left:18px;
padding-top:30px;
font-weight:normal;
}
.persjbssr
{
font-family: Candara;
font-size: 18px;
padding-left: 18px;
padding-top: 30px;
font-weight: normal;
}
.pes1
{
font-family:Candara;
font-size:20px;
padding-left:18px;
font-weight:normal;
margin-left: -70px;
}
.para1
{
padding-left:18px;
font-size:15px;
font-weight:normal;
font-family:Candara;
text-align:justify;
margin-left:-70px;
width:1000px;
}
.imggs
{
margin-left:10px;
margin-right:40px;
width:100px;
}
.imggs1
{
margin-left:20px;
width:100px;
height:120px
}
.imggs2
{
margin-left:20px;
width:150px;
}
html of index file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/MyMenu1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
<!--
function Text_Newsletter_onclick() {
}
// -->
</script>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<div id="headerrrr">
<ul>
<li>Home</li>
<li>About Us</li>
<li>+603 2201 1665</li>
</ul>
</div>
<div id="wh_bg">
<div id="bg_bg">
<div><img class="logo" src="images/logo.png" alt="" width="320" height="60" /></div>
<div class="social">
<ul>
<li>Connect US :</li>
<li><img src="images/fb.jpg" alt="facebook" /></li>
<li><a><img src="images/linkde.jpg" alt="facebook" /></a></li>
</ul>
</div>
<div id="menu">
<div id="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="">abc</a></li>
<li>def</li>
<li>xyz</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li><a href="">ddd/li>
</ul>
</li>
<li>eee
<ul id="Ul2">
<li><a id="A2" href="">fff</a></li>
<li><a href="">ggg/a></li>
<li>hhh</li>
</ul>
</li>
<li>iii </li>
<li></li>
<li>ghj</li>
<li>
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="#"></a>
<ul class="c">
<li class="a">A</li>
</ul>
</li>
<li>Data Collection Services</li>
<li>Editing & Proof Reading</li>
</ul>
</li>
<li id="active">CONTACT US</li>
</ul>
</div>
</div>
</div>
<div align="center"><img class="imaeslidr" src="images/Slider Animation/Slider2.gif" alt="" width="1050" height="375" /></div>
<div class="blankSeparator"> </div>
<div class="indxim" style="background-image: url(''); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex">Read More</a></p>
<h2 class="hindx"></h2>
<p class="paraindex"></p>
<h2 class="hindx">Research</h2>
<p class="paraindex"></p>
</div>
<div class="sidebar">
<h2 class="indxparaz">HOT LINKS</h2>
<ul class="sidebar">
<li>Up Coming Events</li>
<li>Membership</li>
<li>Registration</li>
<li>Our Personnel</li>
<li>Gallery</li>
</ul>
<br /><br />
<h2 class="indxparaz2">Our Personnel</h2>
<span class="con_txtslider"> <img src="images/personeslider.gif" alt="" /> </span></div>
</div>
</div>
<div class="blankSeparator"> </div>
<div class="footer22">
<h2 class="footerhead">Newsletter</h2>
<hr /><input id="Text1" class="footertxt" type="text" /><br /> <input id="Submit1" class="footerbutton" type="submit" value="submit" />
<div>
<h2 class="footerhead1">UpComing Events</h2>
<div class="foopara2"><a class="eventss" href="Upcomngevents.html">Events Available</a></div>
</div>
<h2 class="footerhead2">Contact Us</h2>
<div class="foopara">Call now to find out how: +603 2201 1665 <br /><br /> <a class="email" href="https://secure.ipage.com/secure/login.bml" target="_blank"> <img src="images/email-login.png" alt="signin" /> </a></div>
<br /><br /><br /><hr />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, </p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: E:</p>
</div>
</div>
</div>
</body>
</html>
ok i notice it where is mistake in menu bar when i remove width=140% it is fine and extra space is gone but when i add width=140% it occur extra space and also menu look like this see this link
image
menu bar code
.wrap {
width: 100%; /* Spans the width of the page */
height: 40px;
margin: 0; /* Ensures there is no space between sides of the screen and the menu */
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
border-right: 1px solid #54879d;
margin: 0px;
padding: 0px;
position:absolute;
margin-left:40px;
}
.navbar li {
height: auto;
width: 131px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
.navbar a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbar li:hover, a:hover {background-color: #54879d;}
.navbar li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbar li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbar li ul li {background-color: #54879d;}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {background-color: #366b82;}
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}
I am having problems trying to put these buttons at the bottom rather rather than at the middle. I have searched through the internet, tried many things and still doesn't work.
Here's a snippit of my HTML Code:
<table class="table">
<tr>
<td class = "td"><img class = "logo" src="images/CoffeeLogo.jpg"></td>
<td>
<ul>
<li><a class = "bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</td>
</tr>
</table>
And here's my CSS Code for the buttons:
ul
{
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom;
margin-bottom: -10;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
.table, .td, .th
{
border-collapse:collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border:0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
Any suggestions?
Change your first two CSS rules to:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
padding-top:20px;
}
jsFiddle example
You had been putting a margin on your ul with no units so that was basically being ignored, but you didn't want to do it that way anyway. Instead put top padding on the li elements.
If absolutely nothing is working for you, give the body a height of 1000 or something:
body {
height:1000px;
}
make a div the height of the difference between your nav bar and the body height:
div {
height:850px
margin:auto;
}
and make sure your div is on auto margin. This should push your nav bar down to the bottom.
I hope this helps.
<style type="text/css">
ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin-bottom: 0;
}
li {
float: left;
padding-top:20px;
}
a:link, a:visited {
display: block;
height: 18px;
width: 122px;
color: #FFFFFF;
background-color: #ca3838;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
.table, .td, .th {
border-collapse: collapse;
moz-box-shadow: 0 0 2px 2px #888;
webkit-box-shadow: 0 0 2px 2px#888;
box-shadow: 0 0 2px 2px #888;
border: 0px;
border-left: 10px solid white;
margin-left: auto;
margin-right: auto;
padding: 0;
background-color: #ca3838;
}
</style>
float: bottom doesn't exist in CSS.
The key to putting things on the bottom in HTML layout is to first ensure that the container reaches the bottom, then either position at the bottom with absolute positioning, or make sure that the flowing content above pushes your content down.
Here's the easiest way I know to do it, assuming you want the menu to always appear at the bottom, even before scrolling, and assuming your menu is 20px tall.
HTML:
<div class="page-container">
<div class="scrolling-content">
<!-- Your other stuff here -->
</div>
<ul class="bottom-menu">
<!-- The content of your menu -->
</ul>
</div>
CSS:
html, body {
height: 100%;
}
.page-container { /* This takes up the whole window */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scrolling-content {
position: absolute;
top: 0;
bottom: 20px;
left: 0;
right: 0;
overflow: auto;
}
.bottom-menu {
position: absolute;
height: 20px;;
bottom: 0;
left: 0;
right: 0;
}
Try this: http://jsfiddle.net/kuroisuna/TKY4p/1/
In your CSS:
ul {
list-style-type:none;
padding:0;
overflow:hidden;
float: bottom; /* This doesn't exist */
margin: 20px 0 4px 0;
}
li {
float:left;
margin: 0;
}
But, this will be much natural without a table: http://jsfiddle.net/kuroisuna/5heFE/2/
HTML
<ul>
<li class="logo"><img class="logo" src="images/CoffeeLogo.jpg" width="20" height="18"></li>
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign Up</li>
<li>Extra</li>
</ul>
CSS
ul {
list-style-type:none;
padding:0;
overflow:hidden;
margin: 0;
}
li {
float:left;
}
a:link, a:visited {
display:block;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:20px 4px 4px 4px;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
a:hover, a:active {
background-color: #FF8080;
}
li.logo {
background-color:#ca3838;
padding:24px 4px 4px 4px;
}
Change on li:
remove float property
add display as inline-block
add position as relative
add bottom to -20px or so
Change on ul:
remove overflow property
You're done!
See it live in this jsFiddle.
DON'T ever use table for website layouts.use DIVES (divisions )
HTML
<div id="box">
<ul>
<li><a class="bt" href="#home">Home</a>
</li>
<li>About
</li>
<li>Menu
</li>
</ul>
</div>
CSS
#box{
background:#000;
height:200px;
position:relative;
}
ul {
position:absolute;
bottom:0;
}
li {
float:left;
margin-right:20px;
list-style-type:none;
}
a:link,a:visited
{
display:block;
height: 18px;
width:122px;
color:#FFFFFF;
background-color:#ca3838;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
font-family: "Gill Sans MT";
font-size: 13.5pt;
}
a:hover,a:active
{
background-color: #FF8080;
}
DEMO
Something like this will be much easier to achieve: http://jsfiddle.net/C2NEY/1/
CSS:
#header {
background-color:#ca3838;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
}
#nav li {
display:inline-block;
margin:0;
padding:0;
height: 25px;
width:122px;
padding:4px;
text-align:center;
}
#nav li:hover {
background-color: #FF8080;
}
#nav a {
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
font-family:"Gill Sans MT";
font-size: 13.5pt;
}
HTML:
<div id="header">
<img class="logo" src="images/CoffeeLogo.jpg" />
<ul id="nav">
<li><a class="bt" href="#home">Home</a></li>
<li>About</li>
<li>Menu</li>
<li>Sign up</li>
<li>extra</li>
</ul>
</div>
Instead of "margin-left:auto" write "margin-left:" and the margin value like 12Px or whatever you want, and the same for margin-top:
this will position it to its right place.
I have this html code
<div id="navbar">
<ul>
<li>Page1</li>
<li>page2</li>
<li id="NavItem">
page3
<div id="PopOver">Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here<br>Some text here</div>
</li>
<li>page4</li>
</ul>
</div>
<div id="banners">
<div class="wrap">
<div class="left"><img src="http://www.mountainecho.bizland.com/banex1.jpg"></div>
<div class="right"><img src="http://www.mountainecho.bizland.com/banex1.jpg"</div>
</div>
</div>
And CSS code
#navbar { position: relative; margin: 3px; }
#navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
#navbar li { display: inline; margin-right: 80px; }
#navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#NavItem:hover #PopOver {display:block}
#banners { padding-top: 25px; padding-bottom: 25px; position: relative; }
.wrap { width: 1000px; margin: 0 auto; }
.left { float: left; }
.right { float: right; }
The problem :
In many of cases the nav bar will disappear under the other div
For example i have added "#banners" div and i think the problem because of "position: relative;"
But as i said "#banners" div is just for the example and if i need to fix this, i should in #navbar #NavItem:hover #PopOver
Any idea please ?
Thank you.
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
z-index:1;
}
Set z-index:2; or greater in #PopOver
Set a z-index value on the #navbar item. http://www.w3schools.com/cssref/pr_pos_z-index.asp
<div id="header">
<div id="logo">
<h1>Look Around You</h1>
</div>
<div id="horNav">
<ul class="horNav">
<li class="horNav">HOME</li>
<li class="horNav">SUBMIT-CONTACT</li>
</ul>
<ul class="horNav-last">
<li class="horNav">TAGS</li>
</ul>
<ul class="advertisment">
<li>ABOUT</li>
<li>ADVERTISEMENT</li>
</ul>
</div>
</div>
css is:
#wrapper{
width:80%;
margin:0 auto;
min-width:920px;
}
#header, #logo{
width: 100%;
float:left;
}
#horNav{
background:black;
width: 80%;
color:white;
margin: 0 auto;
}
#horNav a{
background: black;
}
.horNav li{
float:left;
border-right:1px solid #828282;
}
.horNav-last li{
float:left;
}
.advertisment li{
float:right;
border-left:1px solid #828282;
}
#horNav a{
display:block;
padding:5px 10px;
color:white;
font-size: 13px;
}
#horNav a:hover{
background:#828282;
}
what happens is that unordered lists are colored black in separate corners and middle of #horNav is white as you can see it HERE but of course it needs to be all black. how to fix this?
#horNav {
overflow: hidden;
display: block;
width: 100%;
}
#horNav can be whatever width you want e.g. 80% as it is now, and if you want it to be centred you can reintroduce the margin: 0 auto;.