This is the beginning of the HTML code. Notice I put the div"dropdown" in the element in order to add the drop down button into my fixed navigation bar I learned how to create before learning the dropdown button. Another issue with the added button is the hover on the other list items is not flush to the bottom of the nav bar.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="main.css" rel="stylesheet"/>
<title>Vasilios Lambos</title>
</head>
<body>
<header role="banner">
<div id="fixed">
<nav role="navigation">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>
<div class="dropdown">
<button class="dropbtn">Process</button>
<div class="dropdown-content">
Research
Exploration
Testing
</div>
</div>
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<img src="IMG_1677.jpg" width="200" height="200"/>
<h1>Vaslios Lambos</h1>
<p>Industrial and Interaction Designer</p>
<p>Always staying hungry to learn new and inspiring ways to improve my creative process. I utilize design thinking, research methods, and ethonography to explore user experience and services. Core hard skills consist of user interface design, product rendering, and testing.</p>
</div>
<div class="pics">
<img src="VL-Logo.png" width="200" height="200"/>
</div>
<div class="info">
<div class="container">
<h3>Overview</h3>
<p> ### </p>
</div>
</div>
<div class="footer">
<h3>Soft & Hard skills</h3>
<ul>
<li>Adobe Suite</li>
<li>Axure RP</li>
<li>HTML/CSS/Javascript</li>
</ul>
</div>
</body>
</html>
Below is the CSS code for how to style the dropdown and below that you can find the #fixed class for the nav bar.
#charset "UTF-8";
#font-face {
font-family: Verdana, Geneva, sans-serif;
}
body {
font-family:Verdana, Geneva, sans-serif;
background-color: #FFF;
}
*{margin:0;padding:0;}
.dropbtn{
background-color: #999;
color:white;
padding: 20px;
font-size: 11px;
font-weight:bold;
border: none;
cursor: pointer;
text-transform:uppercase;
font-family:Verdana, Geneva, sans-serif;
z-index:-3;
}
.dropdown{
position:relative;
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color:black;
padding:12px 16px;
text-decoration:none;
display:block;
}
.dropdown-content a:hover{
background-color:#3C6;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown:hover .dropbtn{
background-color:#3C6;
}
#fixed ul{
position:fixed;
top:0px;
width:100%;
z-index:9999;
list-style-type:none;
margin: 0;
padding: 0;
overflow:hidden;
background-color: #999;
}
nav li{
float:left;
}
nav li a{
display:inline-block;
color: white;
font-size: 11px;
font-weight: bold;
padding:20px;
text-transform:uppercase;
text-decoration:none;
}
nav a:hover {
background-color: #3C6;
}
div.jumbotron {
margin-top:53px;
margin-left:auto;
margin-right:auto;
padding:10px;
height:500px;
max-width:100%;
color:white;
text-align:center;
background-color:#000
}
.jumbotron p{
width:500px;
margin-left:inherit;
margin-right:inherit;
}
.jumbotron img {
border-radius: 50%;
margin:inherit;
}
.pics{
/*float:right;*/
display:inline;
height:232px;
width:232px;
padding:0;
margin:0;
/*z-index:-1;*/
}
.pics img{
padding:15px;
border:1px solid #ccc;
background-color: #eee;
width:200px;
height:200px;
}
div.info {
max-width:100%;
background-color: #000;
color:white;
padding:20px;
height:400px;
}
div.footer{
max-width:100%;
background-color:#000;
color:white;
height:400px;
padding:20px;
}
Related
I have created a position:fixed; navbar at the top of my web page and one of its items is supposed to be a drop down list named "services" which is supposed to show the dropdown on hover but its not working.
Below is the HTML page code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>
</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li >
<a class="dropdown" href="">SERVICES</a>
<div class="dropdownlist">
AUDIT & ASSURANCE
TAXATION
CORPORATE FINANCE
SERVICES
MANAGEMENT CONSULTING
RISK MANAGEMENT
SECTORS
HUMAN RESOURCES
ACCOUNTING, AUDIT & TAX
</div>
</li>
<li>PARTNERS</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</body>
</html>
And here is the CSS stylesheet code:
body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
.nav li a:hover {
background-color:black;
}
.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover .dropdownlist {
display: block;
}
This code does not work because dropdownlist is not a child of dropdown, they're just adjacent elements so you need to use the + sign in order to achieve what you want.
Here's a working example:
body {
background-color:white;
}
.divbody {
margin-top:12%;
height:100%;
padding:0;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px;
overflow:hidden;
}
.nav li {
float:left;
}
.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
.nav li a:hover {
background-color:black;
}
.nav .dropdownlist {
display: none;
background-color: #f9f9f9;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.nav .dropdown:hover + .dropdownlist,
.dropdownlist:hover {
display: block;
}
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li >
<a class="dropdown" href="">SERVICES</a>
<div class="dropdownlist">
AUDIT & ASSURANCE
TAXATION
CORPORATE FINANCE
SERVICES
MANAGEMENT CONSULTING
RISK MANAGEMENT
SECTORS
HUMAN RESOURCES
ACCOUNTING, AUDIT & TAX
</div>
</li>
<li>PARTNERS</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</div>
Below is the code. hope this will help you.
body {
background-color:white;
}
.navdiv {
position:fixed;
top:0;
right:0;
width:100%;
background-color:white;
background-image:url("images/always_grey.png");
}
ul.nav {
list-style-type:none;
background-color:#5f5f5f;
margin:0;
padding:0;
position:relative;
top:0;
right:0;
width:100%;
font-family:"Segoe UI",Arial,sans-serif;
font-size:17px;
letter-spacing:1px; float:left;
}
ul.nav li {
float:left;
}
ul.nav li a {
text-decoration:none;
color:white;
display:block;
padding:8px 16px;
}
ul.nav li a:hover {
background-color:black;
}
ul.nav li ul.dropdownlist {
display: none;
background-color: #ccc;
color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; right:0; top:38px;
}
ul.nav li:hover ul.dropdownlist {
display: block;
}
ul.nav li ul.dropdownlist li a {
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainpage.css">
<title>Company name</title>
</head>
<body>
<div class="navdiv">
<img style="width:30%;margin-left:0;" src="images/HEH_logo_No_bd_mini.png">
<ul class="nav">
<li>HOME</li>
<li>ABOUT US</li>
<li>
<a class="dropdown" href="">SERVICES</a>
<ul class="dropdownlist">
<li>AUDIT & ASSURANCE</li>
<li>TAXATION</li>
<li>CORPORATE FINANCE</li>
<li>SERVICES</li>
<li>MANAGEMENT CONSULTING</li>
<li>RISK MANAGEMENT</li>
<li>SECTORS</li>
<li>HUMAN RESOURCES</li>
<li>ACCOUNTING, AUDIT & TAX</li>
</ul>
</li>
<li>PARTNERS</li>
</ul>
</div>
<div class="divbody">
<p>This here will serve as <br>Some text ....</p>
<p>Some text ....</p>
</div>
</body>
</html>
Below change will help you only to show drop down on hover but you need to make few CSS changes in order to display the drop down properly
You need replace the following CSS
.nav .dropdown:hover .dropdownlist {
display: block;
}
With
.nav .dropdown:hover + .dropdownlist {
display: block;
}
my problem
I just want help on how to make the footer and 'Google in different languages' fixed when I am hovering over the buttons.
I am trying to build it on my own (without referring to google homepage code in chrome dev tools), so I am unaware of what they did so as to fix the position of those two elements.
Here's my code:
<!DOCtype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css_stylesheets/stylesheet3.css"/>
<title>Google</title>
</head>
<body>
<div>
<header class="start">
<ul>
<li>Gmail</li>
<li>Images</li>
<li class="button">Sign in</li>
</ul>
</header>
<h1>
<img src="../Images/googlelogo.png" alt="Google logo"/>
<span>India</span>
</h1>
<form>
<input type="text"/><br>
<input type="submit" value="Google Search" id="text" name="search"/>
<input type="submit" value="I'm Feeling Lucky" name="search2"/>
</form>
<p>
Google.co.in offered in: HindiBanglaMalayalamMarathi
</p>
<footer>
<nav class="left">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
</nav>
<nav class="right">
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
<li>UseGoogle.com</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
My CSS stylesheet:
*
{
padding:0px;
margin: 0px;
}
body
{
font-family:Arial,sans-serif;
}
div:first-child
{
font-size:25px;
margin:auto;
text-align:center;
padding-top:0px;
}
div header ul
{
margin-right:0px;
text-align:right;
font-size: 17px;
}
body div header.start
{
padding-top:0px;
}
h1
{
display:inline-block;
font-size:20px;
}
h1 span
{
position:relative;
right: 63px;
bottom: 5px;
color:rgb(51,187,232);
font-size:small;
font-family: "Arial", sans-serif;
}
li.button a
{
display:inline-block;
outline:none;
background-color:rgb(10,125,247);
padding:9px;
border:solid 1px;
border-radius: 4px;
font-weight: bold;
color:#F5F5F5;
}
li.button a:hover
{
text-decoration:none;
outline:grey 3px;
box-shadow: inset 0 0 0px 1px #27496d;
}
li.button a:active
{
background-color:rgb(11,95,191);
border:inset 1px #C7C7C7;
}
a
{
text-decoration: none;
word-spacing:5px;
font-size: 15px;
color:grey;
}
a:hover
{
text-decoration:underline;
}
a::after
{
content: " ";
text-decoration: none;
}
input[type="text"]
{
margin:auto;
max-width:500px;
width:40%;
padding:10px;
}
input[type="text"]:visited
{
outline:blue;
}
input[type="submit"]
{
color:#727578;
border:solid 0px;
background-color:#E3E6E8;
font-weight:bold;
padding:10px;
margin: 30px 5px;
margin-bottom:0px;
}
input[type="submit"]:hover
{
border:ridge 2px;
color:black;
background-color:#f0f0f0;
}
input[type="submit"]:active
{
outline:blue;
}
p
{
margin:0px;
padding:0px;
font-size:14px;
position:relative;
top:15px;
}
p a::after
{
content: " ";
text-decoration: none;
}
p a:link
{
color: blue;
}
ul li
{
list-style-type: none;
display:inline;
word-spacing: 10px;
}
nav.left ul li
{
padding-top:2px;
position:relative;
right:590px;
top:50px;
}
nav.right ul li
{
position:relative;
left:500px;
top:0px;
}
footer nav.right ul
{
display:block;
background-color:#e3e3e3;
padding-top:20px;
margin-bottom:0px;
}
Let me tell you that I am very new to CSS3 elements. But I am pretty much familiar with most of the CSS ones.
I repeat, I don't need a complete debugging on this (unless required that is). Please help me on that issue (the text in bold at the beginning of this topic).
Your problem is input[type="submit"]:hover changing border-width from 0px to 2px, so total height and width of buttons increasing and moving below content for 4px.
Your solution is to change
input[type="submit"] {
...
border: solid 0px;
...
}
to
input[type="submit"] {
...
border: transparent solid 2px;
...
}
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 */
}
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've been battling this for the better part of the afternoon and can't find a resolution to what I'm working with. I was changing some .asp pages to reflect a new page that we were adding to the site and after added to the menu, I decided to re-align the text. I removed the padding-left: 140px CSS and replace it with text-align: center;
This caused the nav-menu to go all screwy(pic2). I changed the CSS file back to the original however, in IE and Chrome it still displays oddly but in Firefox it works fine. Here's the code, trimmed to what I feel is relevant. I can post all of it if necessary.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Description" content="CompanyName CompanyProduct">
<title>CompanyName CompanyProduct</title>
<link rel="stylesheet" type="text/css" href="_style.css" media="screen">
<!-- Use after inserting the tabs above navigation bar
<script src="_tabrollover.js" type="text/javascript">
</script>
-->
<style type="text/css">
<!--
body,td,th {
font-family: Tahoma,Arial,Helvetica,sans-serif;
}
-->
</style>
<link href="/_toolbox/_green_button_rollover.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main_container">
<div id="header">
<!--#include virtual="/_ssi/header.asp" -->
<div id="menu">
<ul>
<li><a class="current">Home</a></li>
<li>Why CompanyProduct?</li>
<li>Features</li>
<li>Services</li>
<li>Pricing</li>
<li>Resources</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="green_box">
<div class="clock"></div>
<div class="text_content">
<h1><a href="/features/index.asp">Power of<br>
stuff</a></h1>
</div>
<!--begin div for right nav w rollovers, listing top 5 features-->
<!--#include virtual="/_ssi/div_right_nav.asp" -->
<!--end div for right nav w rollovers, listing top 5 features-->
And the rest:
body {
background-color:#D7DFE2;
margin:0px;
padding:0px;
color:#416271;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1{
padding:5px 0 5px 0;
margin:0px;
font-size:22px;
color:#000004;
font-family: Tahoma, Arial, Helvetica, sans-serif;
text-align: left;
}
h3{
padding:0 0 5px 0;
margin:0px;
font-size:12px;
color:#3898ac;
}
#main_container{
height:auto;
margin:auto;
background-color:#FFFFFF;
width: 900px;
}
#header{
width:900px;
height:auto;
margin:auto;
}
#menu{
width:900px;
height:32px;
padding:0px;
background-color:#416271;
clear: both;
}
#menu ul{
list-style:none;
margin: auto;
display:block;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 140px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}
#menu ul li{
list-style:none;
display:inline;
float:left;
width:auto;
height:32px;
padding:0px;
line-height:31px;
font-family:Tahoma, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight: bold;
}
#menu ul li a{
height:32px;
width: auto;
float:left;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
position: static;
}
#menu ul li a:hover{
height:31px;
width: auto;
text-decoration:none;
color: #fff;
background:url(images/menu_arrow.gif) no-repeat left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
}
#menu ul li a.current{
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
How it should look(looks like this in FF): pic1 http://itsza.ch/pic1.png
How it currently looks(in IE and Chrome): pic2 http://itsza.ch/pic2.png
Use this as a base for the top menu, li's are blocks so you don't need to make them inline.
CSS:
#menu ul li {
list-style:none;
float:left;
}
.clear {
clear:both;
}
HTML:
<div id="menu">
<ul>
<li>...
</ul>
<div class="clear"></div>
</div>
You also have a bunch of redundant rules, try and remove them so it's easier to maintain and read. For example the following rule
#menu ul li a.current {
height:32px;
width: auto;
float:left;
text-decoration:none;
color: #fff;
padding-right: 0;
padding-bottom: 0;
padding-left: 25px;
background-image: url(images/menu_arrow.gif);
background-repeat: no-repeat;
background-position: left;
}
is equivalent to this
#menu ul li a.current {
background:url(images/menu_arrow.gif) left no-repeat;
}
This is because you've just redone rules that already exist on #menu ul li
For list based menus:
Float your LI, not your A-tag
Use display:block on your A-tag
Don't forget to clear your floats.
See my tutorial: I love Lists