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
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 have this nav menu:
http://jsfiddle.net/laziale/T45tD/4/
I want to know how I can fix the menu that the nav menu will be expandable with submenus. I entered some sample data.
Here is the source code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
<link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="pagetop">
<div class="head pagesize">
<div class="head_top">
<div class="topbuts">
<ul class="clear">
</ul>
</div>
<div class="user clear">
<span class="user-detail">
</span>
</div>
<div class="logo clear">
<a href="#" title="Home">
<img src="Images/logo.jpg" class="picture" />
<span class="textlogo">
</span>
</a>
</div>
</div>
<div class="menu">
<ul class="clear">
<li class="active">Client
<ul>
<li class="subNav">Client Summary</li>
</ul>
</li>
<li>Agent
<ul>
<li class="subNav">Agent Summary
<ul>
<li class="subNav">Link1y</li>
<li class="subNav">Link2</li>
</ul></li>
</ul>
</li>
<li>System Utility
<ul>
<li class="subNav">Link1
<li class="subNav">Link2
<li class="subNav">Link3
</ul>
</li>
<li>Report</li>
<li>Maintenance</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
and the css:
body {
min-width:1000px;
text-align:center;
margin:0px;
font-family:Arial;
font-size:12px;
color:#666666;
background:#8D8D8D;
}
.pagetop {
width:100%;
min-width:1000px;
background-color: #333333;
border-bottom: 4px solid #007FAA;
position:relative;
z-index:100;
min-height:149px;
}
.head_top {
position:relative;
min-height:114px;
}
.topbuts {
position:absolute;
top:0px;
right:0px;
}
.topbuts ul {
float:right;
}
.topbuts li {
float:left;
margin-left:2px;
font-size:11px;
font-weight: bold;
}
.topbuts li a {
background:#007FAA;
text-decoration:none;
display:block;
color:#FFFFFF;
line-height:16px;
padding:1px 12px 2px 12px;
}
ol ul {
list-style:none;
}
.head {
padding:0px;
}
.pagesize {
width:1000px;
margin: 0px auto;
text-align:left;
}
.user {
clear:both;
float:right;
padding-top:27px;
}
.user-detail {
display: block;
float:right;
text-align:right;
}
.user-detail .name {
display: block;
line-height:normal;
text-align:left;
float:right;
font-size:18px;color:#FFFFFF;
padding:2px 0px 7px 0px;
}
.user-detail .text {
color: #bbbbbb;
clear:both;
font-size:11px;
line-height:18px;
color:#FFFFFF;
display:block;
}
.logo {
padding-top:20px;
}
.logo a {
text-decoration:none;
}
.logo .picture {
float:left;
margin-right:10px;
}
.logo .textlogo {
float:left;
}
.logo .title {
display:block;
font-family:Arial;
font-size:20px;
color:#FFFFFF;
font-weight: bold;
margin-top:5px;
letter-spacing: -0.02em;
}
.logo .text {
display:block;
font-weight: bold;
color: #BBBBBB;
position:relative;
top: -2px;
}
.menu ul {
font-size:13px;
}
.menu li {
float:left;
margin-right:3px;
padding-bottom:5px;
position:relative;
}
.menu li .active a {
background: #FFFFFF;
color: #333333;
text-shadow: 1px 1px 1px #BBBBBB;
}
.menu li a {
display:block;
line-height:16px;
padding: 7px 15px 7px 5px;
color: #FFFFFF;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 1px 1px #333333;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background:url('..images/button_glas1.png') center center repeat-x #555555;
}
a {
color: #006577;
text-decoration:none;
}
You can use the superfish jQuery plugin.
Here is a demo
Either you can use javascript and hide all unwanted elements until you hover the right menu element, either you do it with CSS using something like this:
#navmenu .submenu{
display:none; /* dosen't show sub menus */
overflow:visible; /* shows overflow */
}
#navmenu li:hover > .submenu{ /* when you hover an li element change children following settings */
display:block; /* display elements */
}
HTML code example that works:
<div id="navmenu">
<ul>
<li>Réalisations
<ul class="submenu">
<li>Web</li>
<li>T-shirt</li>
<li>Autres prestations</li>
</ul>
</li>
<li> Galeries
<ul class="submenu gallery">
<li>Boston</li>
<li>Brig</li>
<li>Fleurs</li>
<li>Grèce</li>
<li>Nocturne</li>
<li>Noir&blanc</li>
<li>Paris</li>
<li>Portrait</li>
<li>Perspective</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
There are many tutorials on the web for more examples ;)
<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;.
I have developed my website on my desktop.All divs are in their place but when I open the same page in a laptop or larger screen desktop all the divs are getting disordered.What should I do.even the same problem is coming on zoomin and zoom out. some of my css code is-
body {
margin:0;
padding:0;
width:100%;
color:#5f5f5f;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html, .main { padding:0; margin:0; background:url(images/body_bg.jpg) repeat-x top; }
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
/* header */
.header { margin:15; background-color:White;}
.header_resize { margin:5px auto; padding:0; width:970px;}
.header .logo { width:auto; float:left; padding:5px 0 0 25px;}
.header .menu ul { margin:38px 20px 0 2px; padding:0; float:right; width:auto; list-style:none;}
.header .menu ul li { margin:0 4px; float:left; background:url(images/menu.jpg) repeat-x top; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.header .menu ul li a { display:block; margin:0; padding:3px 8px 3px 8px; color:#5f5f5f; text-decoration:none;}
.header .menu ul li a:hover, .header .menu ul li.active a { color:#fff; background:url(images/menuover.jpg) repeat-x top; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
/* hbg */
.hbg {
background-color:transparent;
float:left;
margin:0 0 0 45px;
padding:65px 456px 0 56px;
width:137px;
height:160px;
background:#fff url(images/soluinfo.jpg) no-repeat top left;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto; }
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list-style:none; }
.solu .smenu ul li { margin:0 0; float:left; }
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text-decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
/*sidebar*/
.sidebar {
margin:0 40px 0 0;
padding:0;
float:right;
width:260px;
}
/* content */
.content { padding-bottom:1px; }
.content_resize {border-top:none; }
.content .mainbar {
margin:3px 0 0 -12px;
padding:0; float:left;
border-width:1px;
border-style: solid;
border-color: Lightgray;
width:649px;
min-height:320px;
background-color:white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.content .mainbar .article_vert {
margin:0;
padding:10px 0px 10px 10px;
float:left;
width:313px;
background-color:White;
}
I dont know what's the problem.
HTML code
<div class="main">
<!--start header-->
<div class="header">
<div class="header_resize">
<div class="logo">
<img src="images/logo.jpg" width="95%" alt="Airlink" border="0" />
</div>
<div class="menu">
<ul>
<li class="active">HOME</li>
<li >COMPANY</li>
<li >SOLUTIONS</li>
<li >SERVICES</li>
<li >NEWS & EVENTS</li>
<li >BLOGS</li>
<li >CONTACTS</li>
</ul>
</div>
<div class="clr">
</div>
</div>
</div>
<!--end header-->
<!--start mouseover info panal-->
<div class="hbg">
<div class="solu_info" id="loadinfo">
<div class="solu_head" >
<font size="3" ><b>Complete Solution For<br> Wireless Connectivity</b></font>
</div>
</div>
</div>
<div class="sidebar">
<div class="serv">
<font size="3" ><b>Services</b></font><img src="images/serv.jpg" align="right">
<hr size="0px" width="78%" color="#4AA02C" align="left" >
<ul class="sb_menu">
<li >Managed Services</li>
<p id="servinfo1" class="servinfo"> Service Info 1 </p>
<li >Turnkey Services</li>
<p id="servinfo2" class="servinfo">Service Info 2 </p>
<li>Value Added Sevices</li>
<p id="servinfo3" class="servinfo">Service Info 3 </p>
</ul>
</div>
</div>
<div class="solu">
<div class="solu_resize">
<div class="smenu">
<ul>
<li id="d1"><img src="images/menu_hosp.jpg" border="0"></li>
<li id="d2"><img src="images/menu_edu.jpg" border="0"></li>
<li id="d3"><img src="images/menu_enter.jpg" border="0"></li>
<li id="d4"><img src="images/menu_retail.jpg" border="0"></li>
<li id="d5"><img src="images/menu_health.jpg" border="0"></li>
<li id="d6"><img src="images/menu_real.jpg" border="0"></li>
<li id="d7"><img src="images/menu_tel.jpg" border="0"></li>
</ul>
</div>
</div>
</div>
.....
Use a wrapper with a fixed width to avoid these kind of problems.
<div id="wrapper">
// All the HTML in body
</div>
#wrapper{width:960px;}