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;
}
Related
hi i just wanted to code a site like BBC just for practice while doing this i got an error in li item of a ul i don't know the problem but when i give it a border-right the border take more height then the original menu, i'm pasting my code here please check it and help me??
in simple words i want list item's border to be equal to the borders of "Signin" and "logo" div
<html>
<head>
<title>BBC</title>
<style>
body{
margin:0;
font-family:Arial,Helvetica,freesans,sans-serif;
}
#top{
width:100%;
height:50px;
}
.keepcenter{
width:1100px;
margin: 0 auto;
}
#logo{
border-right:1px solid #CCCCCC;
float:left;
padding-right:5px;
height:100%;
}
#signin{
font-weight:bold;
font-size:0.9em;
border-right:1px solid #CCCCCC;
width:200px;
height:100%;
float:left;
}
#signin img{
position:relative;
top:5px;
margin-left:15px;
}
#signin p{
display:inline;
position:relative;
top:1px;
padding-left:5px;
}
#menutop{
float:left;
}
#menutop ul{
list-style-type:none;
margin:0;
padding:0;
}
#menutop li{
padding:15px 20px 10px 20px;
display:inline;
font-weight:bold;
font-size:0.9em;
float:left;
border-right:1px solid #CCCCCC;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="images/logo.jpg" />
</div>
<div id="signin">
<img src="images/signicon.png" /><p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Simply remove the top and bottom padding from the list items.
body {
margin: 0;
font-family: Arial, Helvetica, freesans, sans-serif;
}
#top {
width: 100%;
height: 50px;
}
.keepcenter {
width: 1100px;
margin: 0 auto;
}
#logo {
border-right: 1px solid #CCCCCC;
float: left;
padding-right: 5px;
height: 100%;
}
#signin {
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #CCCCCC;
width: 200px;
height: 100%;
float: left;
}
#signin img {
position: relative;
top: 5px;
margin-left: 15px;
}
#signin p {
display: inline;
position: relative;
top: 1px;
padding-left: 5px;
}
#menutop {
float: left;
}
#menutop ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menutop li {
padding: 0 20px;
display: inline;
font-weight: bold;
font-size: 0.9em;
float: left;
border-right: 1px solid #CCCCCC;
height: 100%;
}
<div id="container">
<div id="top">
<div class="keepcenter">
<div id="logo">
<img src="http://lorempixel.com/40/40" alt="BBC" />
</div>
<div id="signin">
<img src="http://lorempixel.com/g/10/10" alt="" />
<p>Sign In</p>
</div>
<div id="menutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</div>
The list is floating though, which means that its baseline is not necessarily the same as the #signin div. In my snippet, the img in the div is small enough to not have an effect, but depending on its size, the baseline of the div (and therefore the position of the p) will move down. You may have to compensate for that in the ul.
I'm doing a project on recreating the Google homepage with html and css. I am for the most part finished with the project, but I've noticed a few quirks that are irritating me. I've spent a great deal of time on each of these quirks, but can't get things to way I want them to look. These are the following quirks:
The icon in the top right-hand corner isn't inline with the rest of the text.
For some reason I can't center the buttons properly.
Not sure how to handle the white space surrounding the grey footer.
JSFiddle of The Code
If you have any input on any of the above issues, I would forever be thankful!
<body>
<div id="wrapper">
<div id="header">
<ul class="navbar">
<li class="navli"> +You
</li>
<li class="navli">Gmail
</li>
<li class="navli">Images
</li>
<li class="navli" id="icon">
<img src="http://bit.ly/1NHEwTW" height="auto" width="30" />
</li>
<li class="navli">theonlybrianlie#gmail.com
</li>
</ul>
</div>
<div id="body">
<div class="logo">
<img src="https://www.google.com/images/srpr/logo11w.png" />
</div>
<div class="searchbar">
<input type="text" id="search1" />
</div>
<div id="buttons">
<input class="button" id="googlesearch" value="Google Search" type="submit">
<input class="button" id="secondbutton" value="I'm Feeling Lucky" type="submit">
</div>
</div>
<div id="footer">
<div id="leftfoot">
<ul>
<li class="lf"> Advertising
</li>
<li class="lf"> Business
</li>
<li class="lf"> About
</li>
</ul>
</div>
<div id="rightfoot">
<ul>
<li class="rf"> Privacy
</li>
<li class="rf"> Terms
</li>
<li class="rf"> Settings
</li>
</ul>
</div>
</div>
</div>
.button {
font-family:Arial;
font-size:11px;
font-weight:bold;
display:inline;
height:30px;
border:1px solid #dcdcdc;
background:#f2f2f2;
padding-left: 10px;
}
body, html {
height:100%
}
#wrapper {
min-height:100%;
position: relative;
padding:0;
margin:0;
}
.logo img {
display:block;
width: 269px;
height:95px;
margin:auto;
margin-top: 80px;
padding-top: 112px;
}
#header {
width:100%;
height:100px;
/*background-color:green*/
;
}
.navbar {
/*background-color: red;*/
float: right;
}
.navli {
display: inline-block;
font-family: Arial;
}
.navli a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
}
.navli a:hover {
text-decoration:underline;
}
#icon {
margin-top:10px;
padding-left:15px;
bottom:0;
position:relative;
}
.searchbar {
width:400px;
height:28px;
margin: auto;
display:block;
/*background-color:red;*/
padding-top:10px;
}
#search1 {
width:400px;
height:28px;
margin: auto;
}
#buttons {
display:block;
/*background-color:blue;*/
height: 22px;
width:250px;
margin: auto;
margin-top: 10px;
}
#footer {
position: absolute;
bottom:0;
height:60px;
width:100%;
background-color:#f2f2f2;
clear:both;
display:block;
border-top: 1px solid #e4e4e4;
}
#leftfoot {
width:300px;
left:0;
/*background-color:blue;*/
display: inline-block;
}
.lf {
display: inline-block;
}
.lf a {
text-decoration:none;
color: #404040;
font-size: 13px;
font-family: Arial;
padding-left: 15px;
}
.lf a:hover {
text-decoration: underline;
}
#rightfoot {
width:250px;
float:right;
/*background-color:blue;*/
padding:0;
margin:0;
}
.rf {
display: inline-block;
margin:auto;
}
.rf a {
text-decoration:none;
color: #404040;
font-size: 13px;
padding-left: 15px;
font-family: Arial;
}
.rf a:hover {
text-decoration: underline;
}
For your top right icon not inline with the rest of the menu, i would alter the CSS like this
.navli {
display: inline-block;
font-family: Arial;
float: left;
height: 30px;
line-height: 30px;
}
#icon {
/* margin-top: 10px; */
padding-left: 15px;
/* bottom: 0; */
/* position: relative; */
}
For your buttons not centering:
Add text-align:center; to #buttons
And for the white space on footer:
There's a margin on your body, so change your body,html to this:
body, html {
height: 100%;
margin: 0;
}
UPDATE
Here's the JSFiddle - Full Screen Preview - JSFiddle View
I'll try to answer these as concisely as possible:
1- the heading is inline, and your icon is taller than the rest of the inline elements. play with the margin and padding for your text elements there.
2- place your buttons in a div or section element of their own, and use text-align: center to center them on the page
3- add a class="container-fluid" to your footer element.
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
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 ;)