Here is the code. That blue div with the test "new code goes here?" is the one that I'm trying to line up properly.
http://codepen.io/mlynn/pen/MYZEoM
I'm trying to place this div so that the top of it is perfectly aligned with the top of the div to its left, like so: http://i.imgur.com/3gDhrqs.png
Any help appreciated. Not sure why this is seeming so hard.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<!--
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
-->
</ul>
</div>
</div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
</section>
<section id="feety">
I believe I exist
</section>
</body>
</html>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:#ccc;
border-width:1px;
width: 132px;
border-radius: 4px;
margin-left:10px;
margin-right:5px;
font-size:14px;
height:33px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:17px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
margin-top:5px;
margin-bottom:6px;
width:100px;
}
ul.navbar li {
position: relative;
width:130px;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
.lister input, ul {
background: #eee;
border-radius: 5px;
/* width: 100%; */
box-sizing: border-box;
font-family:"Tahoma";
}
.lister input {
width:300px; /*width of todo input box*/
height:33px;
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
float:left;
margin-bottom:20px;
font-size:14px;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px; /* padding for outside area of list*/
width:447px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px; /*controls height of list items*/
font-size:16px; /*font size of list items*/
font-weight: 600;
color: #34495e;
text-align:left;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
/*.lister li:before {
content: "";
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px;
}
.CategoryIcon {
float:right;
color:red;
padding:40px 40px;
} */
The main div which holds your inputs can be given a class and floated to the left with a set width.
HTML:
<div class="inputs"></div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
CSS:
.inputs {
float: left;
width: 400px;
}
Here is the fixed code.
Try this: (Updated PEN)
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styletime.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div style="float: left; width: 50%;">
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
Category
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter" autocomplete="off">
</form>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<!--
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
-->
</ul>
</div>
</div>
<div style="float:right;vertical-align:top;width:450px;height:800px;background:blue;margin:0 0 0 0;">
New div goes here??
</div>
</section>
<section id="feety">
I believe I exist
</section>
</body>
</html>
Add a class of left column to the left div. Then do this CSS:
.leftcolumn{
width: 50%;
float: left;
}
Try this,
You should remove container class from <div class="lister">
and add below styles,
.container {
width: 50%;
margin: 0px auto;
float:left
}
Demo
Related
I am experimenting with following HTML code. It displays a paragraph and two buttons at the bottom (Back and Next).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<!-- stylesheet -->
<style type="text/css" media="screen">
<!-- for UL. Hopefully straightforward to understand-->
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
<!-- to float left.Hopefully straightforward to understand -->
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
<!-- to float right. Hopefully straightforward to understand -->
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
<!-- for a in li. Hopefully straightforward to understand -->
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:centre; <!-- this isn't effective!-->
text-decoration:none;
}
</style>
</head>
<!-- mainbody-->
I want the text in to be centrally aligned but it doesn't. I have used text-align:centre to set style of . What am I doing wrong?
<body>
<p>
1. Some Para.
</p>
<ul id="navigation" >
<!-- The Back and Next should centre up but they are left aligned -->
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
</body>
</html>
You need to use text-align: center, rather than 'centre'.
ul#navigation li a {
display: block;
padding: .2 em;
color: #fff;
width: 5em;
background-color:#00f;
text-align: center;
text-decoration: none;
}
centre;<-- wrong word... it's center
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:center;/*centre;<-- wrong word... it's center */
text-decoration:none;
}
<p>
1. Some Para.
</p>
<ul id="navigation" >
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
#navigation {
list-style-type: none;
border-top: 1px solid red;
margin: 0;
padding: 0;
}
ul#navigation .left {
float: left;
width: 5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float: right;
width: 5em;
margin: 10px 0 0 0;
}
#navigation ul li {
color: #fff;
width: 100%;
background-color: #00f;
text-align: center;
text-decoration: none;
}
<p>1. Some Para.</p>
<ul id="navigation">
<li class="left"> Back
</li>
<li class="right"> Next
</li>
</ul>
I'm having an issue where I can't see to get the 'Log in' text to be aligned with the rest of the navigation bar. Using margin or padding doesn't seem to push it up at all, and I managed to get it 3 pixels out by using line-height:0 but it wasn't enough. Ideas?
This is the design that I'm trying to achieve.
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="EvositeJS.js"> </script>
</head>
<body>
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court">
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"> </img>
</div>
<div class= "LoginContainer">
<div class="DownTriangle">
<span class="glyphicon glyphicon-triangle-bottom" </span>
</div>
<h1 class="LoginTxt">Log in </h1>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
float:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
padding-left:25px;
float:left;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
width:120px;
height:40px;
float:right;
margin-right:300px;
margin-top:40px;
}
.DownTriangle {
padding-left:90px;
padding-top:15px;
float:left;
position:relative;
}
.LoginTxtContainer {
margin-top:10px;
}
There are a couple of issues need to be fixed first.
1 <img> is a self-closing tag, remove </img> from <img src="Images/Triangle.PNG"> </img>, or use <img src="" />
2 It's missing a closing > here <span class="glyphicon glyphicon-triangle-bottom" </span>
3 Remove the ) from <a href="Evosite.html" class="NavHome" id="Current")>
The best way to get the login button in the right place is to adjust the structure slightly, to move it next to the navigation bar. And don't use <h1> for it, as it's not a headline.
I rewrote most of the CSS, removed all the unnecessary styles, see the details and demo below.
CodePen Demo
/* For Demo Only */
#import url("https://fonts.googleapis.com/css?family=Bree+Serif");
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
/* CSS Document */
body {
font-family: "Bree Serif";
}
.wrapper {
width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* NavBar formatting */
.NavBar {
overflow: auto;
font-size: 20px;
}
.VictoriaHouse,
.MainNavigation {
float: left;
}
.MainNavigation {
padding-top: 30px;
}
.MainNavigation ul {
margin: 0;
padding: 0 0 0 20px;
}
.MainNavigation li {
display: inline-block;
vertical-align: top;
}
.MainNavigation a {
margin: 0 10px;
text-decoration: none;
color: #000;
display: block;
position: relative;
}
.MainNavigation #Current:after,
.MainNavigation a:hover:after {
content: url("http://i.imgur.com/zN4WiYV.png");
color: #F68E56;
width: 100%;
text-align: center;
position: absolute;
top: -20px;
left: 0;
}
.MainNavigation a:hover {
color: #007D68;
}
.LoginContainer {
float: right;
margin-top: 25px;
border: 1px solid #F68E56;
border-radius: 5px;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
.LoginContainer .LoginTxt {
text-decoration: none;
color: #FF5A40;
}
.LoginTxt .glyphicon {
font-size: 14px;
color: #000;
}
.LoginTxt:hover .glyphicon {
color: #FF5A40;
}
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="http://i.imgur.com/eB6yyLi.jpg" alt="Victoria House & Viney Court" />
</div>
<div class="MainNavigation">
<ul>
<li> Home </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div>
<div class="LoginContainer">
<a class="LoginTxt" href="#"> Log in <span class="glyphicon glyphicon-triangle-bottom"></span> </a>
</div>
</div>
<!-- Ends NavBar <-->
</div>
<!-- Ends wrapper -->
You had a couple of problems in your HTML/CSS. I managed to simplify and fix them, check this fiddle
Also, here's the code snippets...
CSS
/* CSS Document */
.wrapper {
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
}
.VictoriaHouse {
padding-left:270px;
padding-top:20px;
padding-bottom:20px;
padding-right:140px;
float:left;
}
/* NavBar formatting */
.NavBar {
float:inline-block;
text-decoration:none;
}
ul {
display:inline-block;
padding-top:45px;
}
li {
display: inline;
}
a {
font-family: Bree Serif;
font-size:20px
}
a:link {
color:#002D62;
background-color:white;
}
a:visited {
color:#002D62;
text-decoration:none;
background-color:white;
}
a:hover {
text-decoration:none;
color: #007D68; /* Green */
}
a:active{
text-decoration:none;
color: #F68E56; /* orange */
}
.NavLink {
margin-left:20px;
text-decoration:none;
}
.NavHome {
margin-left:30px;
text-decoration:none;
}
.NavContact {
margin-left:20px;
text-decoration:none;
}
#Current {
color: #F68E56; /* orange */
}
.ActivePage {
float:left;
padding-top:25px;
padding-left:50px;
width:auto;
}
.LoginContainer {
border-style:solid;
border-width:1.5px;
border-radius:5px;
border-color:#F68E56;
float:right;
margin-right:300px;
margin-top:40px;
line-height: 40px;
padding-left: 20px;
}
.LoginTxt {
font-family: Bree Serif;
font-size:20px;
color:#FF5A40;
display: inline-block;
margin:0;
}
.LoginContainer .downArrow {
padding-left: 10px;
padding-right: 5px;
}
HTML
<div class="wrapper">
<div class="NavBar">
<div class="VictoriaHouse">
<img src="Images/VictoriaHouse.JPG" alt="Victoria House & Viney Court"/>
</div>
<div class="ActivePage">
<img src="Images/Triangle.PNG"/>
</div>
<div class= "LoginContainer">
<h1 class="LoginTxt">Log in</h1>
<span class="downArrow glyphicon glyphicon-triangle-bottom"></span>
</div>
<ul>
<li> <a href="Evosite.html" class="NavHome" id="Current")> Home </a> </li>
<li> News </li>
<li> Tenants </li>
<li> Heritage </li>
<li> About Us </li>
<li> Book the Meeting Room </li>
<li> Contact Us </li>
</ul>
</div> <!-- Ends NavBar <-->
</div> <!-- Ends wrapper -->
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;
}
here i try to fix submenu .. when i drag cursor on menu then the image slider which is below the menu goes down..
HERE IS IMAGE 1
and when i hover mouse on menu then look like this
image2
code
/* CSS Document */
body{
padding:0px;
margin:0px;
}
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*/
#top{
width:1000px;
float:left;
}
.top1{
width:500px;
float:left;
height:176px;
display:inline;
background:url(../images/top1.jpg) no-repeat;
}
.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;
}
.contecntA {
width: 400px;
height: 480px;
padding-top: 60px;
font-family: Candara;
font-variant: normal;
}
.contPersz {
width: 990px;
height: 900px;
margin-bottom: 10px;
margin-top: 210px;
padding-right: 10px;
margin-left:70px;
}
.imggsas
{
margin-left: 40px;
width:240%;
margin-top: -30px;
}
.img_wrperas
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: -90px;
margin-left: 35px;
}
.corporate
{
background-image:url("images/Malaysian-Flag.png");
width: 1050px;
height: 562px;
margin-bottom: 10px;
margin-top: 80px;
margin-left: 35px;
}
.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;
width: 109%;
margin: 0px;
padding: 0px;
}
.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;
}
/*i add this css code for link box*/
.navbar li ul li ul li {
margin-top:-50px;
margin-left:130px;
display:block;
}
.b:hover .a {
visibility:visible;
display:block;
}
.a {
margin-top:-5px;
visibility:hidden;
display:none;
}
.topnaviation
{
float:right;
display:inline-block;
margin-right: 400px;
}
div.topnaviationleft ul {
list-style: none outside none;
margin-left: 0px;
display:inline-block;
}
div.topnaviationleft li {
float: left;
}
.indxim
{
width:1050px;
height:800px;
margin-top: -20px;
}
.blankSeparator {
margin:10px 0;
display: block;
}
<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="wrap">
<ul class="navbar">
<li>HOME</li>
<li>ABOUT US
<ul id="Ul1">
<li><a id="A1" href="Company_Profile.html">Company Profile</a></li>
<li>Our Philsohpy</li>
<li>CEO Profile</li>
<li>Board of Directors</li>
<li>Our People</li>
<li>Global Partnership</li>
<li>Career</li>
</ul>
</li>
<li>TRAINING
<ul id="Ul2">
<li><a id="A2" href="Academics.html">Academics</a></li>
<li>Corporate</li>
<li>Our Personnel</li>
</ul>
</li>
<li>PUBLISHING </li>
<li>CONFERENCES</li>
<li>EXHIBITION</li>
<li>RESEARCH
<ul id="subnavlist">
<li class="b"><a id="subcurrent" href="About_gjbssr.html">About GJBSSR</a>
<ul class="c">
<li class="a"> Link
</li>
</ul>
</li>
<li>Data Collection Services
</li>
<li>Editing & Proof Reading
</li>
</ul>
</li>
<li id="active">CONTACT US
</li>
</ul>
</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('images/Malaysian-Flag.png'); width: 1050px; height: 800px;">
<div class="contecntA ">
<div class="indpara">
<h2 class="hindx">About US</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> is a consulting firm that offers training and research services in whole disciplinesof studies. Its goal is to provide a platform for Young Scholar, Academic & Corporate Researcher, and Trainers to discuss and frame strategies for the betterment of their goals and organization success...</p>
<h2 class="hindx">Training</h2>
<p class="paraindex"><strong>Global Academy of Training and Research</strong> offers broad range of academic and corporate Seminar programs for all public and private sector Universities and Companies. Global Academy of Training and Research goals is to uplift individual’s skills...</p>
<h2 class="hindx">Research</h2>
<p class="paraindex"><strong>Global Academy of Training and Research </strong>provides customized information and research collation to bring innovative and provocative insight into any emerging agenda for our clients. We excel in delivering insight needed to perform....</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 info#gatrenterprise.com</div>
<br /><br />
<div class="ffpara">
<p class="ffpara">© Copyright 2014, Global Acdemy of Training & Research</p>
</div>
<div class="ffpara2">
<p class="ffpara2">T: +603 2201 1665 E:info#gatrenterprise.com</p>
</div>
</div>
</div>
</div>
</body>
</html>
so how i fix this menu and submenu ??
Add this properties to your #headerrrr and #wrap:
Always in the top of screen:
#wrap{
position:fixed;
top:0;
}
In the top of the website:
#wrap{
absolute;
top:0;
}
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 ;)