I'd like to implement bar where main menu is on the left and searchbox is on the right. My codes are:
<div id="divMenu">
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Events/Services</span>
<ul>
<li><span>submenu1</span></li>
<li><span>submenu2</span></li>
<li><span>submenu3</span></li>
</ul>
</li>
<li><span>Ventures</span></li>
<li><span>Testimonials</span></li>
<li><span>Resources</span></li>
<li><span>e-Commerce</span></li>
<li><span>Contact Us</span></li>
</ul>
</div>
<div id="search">
<!--<form id="fmSearch" name="fmSearch" method="post" action="">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input name="iSearch" type="text" id="iSearch" value="Search..." size="20" maxlength="100" /></td>
<td><input id="bSearch" name="bSearch" type="image" src="images/search.gif" class="button" /></td>
</tr>
</table>
</form>-->
<form id="fmSearch" name="fmSearch" method="post" action="">
<label><span>
<input id="iSearch" name="iSearch" type="text" class="keywords" maxlength="50" value="Search..." />
</span>
<input name="b" type="image" src="images/search.gif" class="button" />
</label>
</form>
</div>
</div>
CSS style are:
#divMenu { width:100%; height:30px; background-image:url(../images/bar_menu.jpg); background-repeat:repeat-x; margin:0; padding:0; border-top:1px solid #999;}
#menu { width:75%; margin:0; padding:0; height:30px; position:absolute;}
#menu ul {float:left; margin:0; padding:0; list-style:none; font-size:0.8em;}
#menu ul li {float:left; margin:0; padding:0;}
#menu ul li a {line-height:25px; display: block; color:#fff; padding:2px 10px; text-decoration:none; z-index:500;}
#menu a:hover, #menu ul li a.active {margin:0; /*background-image: url(../images/img_nav.jpg);*/ background-color:#1D1D1D; background-repeat:repeat-x; z-index:510; color:#999;}
#menu ul li ul {display:none; position:absolute; background-color:#333; z-index:520; font-size:1em;}
#menu ul li:hover ul {display:block; z-index:530;}
#search { width:25%; padding:0; margin:0; float:right; height:30px; z-index:999;}
#search form #iSearch { height:16px; z-index:1000;}
PROBLEM: My searchbox is not working. It is displayed on page but cannot click on it and type in it as if it's being hidden under something.
Any suggestions?
It's working fine here
http://jsfiddle.net/XFse7/
Must be some CSS before that causing the problem. I think it's under your menu if it's not working on your side. And note that z-index only works with positioned tag
position: absolute, relative, fixed, etc...
Related
This is my code:
html,body,ul,li {
margin:0;
}
#container {
padding-left:5px;
height:100%;
}
#mainMenu {
font-family:Arial, Times, sans-serif;
list-style-type:none;
padding-right:30px;
}
#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;
}
#mainMenu a:hover {
color:Teal;
}
#menu {
text-align:right;
width:inherit;
height:50px;
background-color:paleGoldenRod;
position:relative;
left:0;
top:0;
}
li {
display:inline;
}
th, td {
text-align:center;
border:1px dashed grey;
width:90px;
height:40px;
}
.formText {
margin:10px 0px;
}
footer {
background-color:SlateGray;
width:100%;
height:100px;
position:relative;
bottom:0px;
left:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
<link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="menu">
<ul id="mainMenu">
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT ME</li>
</ul>
</div>
<div id="container">
<h2>Contact Me Directly</h2>
<form>
<label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
<label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
<datalist id="ageList">
<option value="18">
<option value="19">
<option value="20">
<option value="21">
<option value="22">
</datalist>
<label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
<label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
<textarea></textarea>
<input type="submit" value="Submit">
</form>
</div>
<footer>
<p>This website </p>
</footer>
</body>
</html>
I would like my footer to always be at the bottom of the page according to the content displayed in the page. I don't want to use position:absolute because some pages have more content and position:absolute just makes the content hide behind the footer.
How can I keep the footer always at the bottom of the page without position:absolute? or is there a way to use position:absolute but still make the page scroll down according to the displayed content
Just change footer style to this:
footer {
background-color:SlateGray;
height:100px;
position:fixed;
bottom:0;
left:0;
right:0;
}
Apply position: fixed on footer.
footer{position: fixed; background-color:SlateGray;width:100%;height:100px;bottom:0px;left:0px;
}
Apply position: fixed. rather than using position: relative. Your problem will be solved.
you can use this code for position fixed :
footer {
background-color: SlateGray;
bottom: 0;
height: 100px;
left: 0;
position: fixed;
width: 100%;
}
I am developing a website using the 960 Grid system.
I have 3 parts to the header. The logo, the navigation, and the login form.
I have media queries set to center both the logo and the login when the page gets below 1614 pixels. The issue is that while the logo centers, the div containing the log in does not.
Here is an screen shot with highlighting around the divs to show the issue.
Webpage
Heres an attempted fiddle
http://jsfiddle.net/6m8K7/
I'm not sure what is causing this.
HTML
<div id="header">
<div id="logoHolder">
<a href="index.html">
<img src="images/Pinnacle_ira logo_web.png" alt="Pinnacle IRA" width="125" height="84"/>
</a>
</div>
<div id="loginHolder">
<form action="https://www.theiracenter.com/customerLoginAction.gsx" method="post" >
<label for="username">Username:</label>
<input class="topLogin" type="text" name="login" />
<br />
<label for="password">Password:</label>
<input class="topLogin" id="passwordText" type="password" name="password" />
<input type="hidden" name="pd" value="C05" />
<br />
<input type="submit" />
</form>
</div>
<br />
<div class="container_12">
<div class="grid_12">
<div id="navigationHolder">
<ul id="navigation">
<li>GuidedChoice</li>
<li>Pricing</li>
<li>FAQs</li>
<li>Investment Tools</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
CSS
/*Header*/
#logoHolder{
float:left;
}
#logoHolder img{
margin:5px;
margin-top:20px;
vertical-align:bottom;
}
#media (min-width:0px) and (max-width:1614px){
#logoHolder{
width:125px;
float:none;
display:block;
margin-left:auto;
margin-right:auto;
}
}
#loginHolder{
float:right;
}
#media (min-width:0px) and (max-width:1614px){
#loginHolder{
display:block;
margin-left:auto;
margin-right:auto;
}
}
label{
font-family:Arial;
}
.topLogin{
width:175px !important;
height:20px !important;
}
#passwordText{
margin-left:22px;
}
#navigationHolder{
display:block;
margin-left:auto;
margin-right:auto;
width:775px;
background-color:brown;
height:auto;
}
/*Navigation*/
#navigation{
list-style:none;
font-family:Arial;
font-size:1.3em;
}
#navigation li{
float:left;
display:block;
color:#888888;
margin-top:20px;
}
#navigation li:hover{
color:white;
}
#navigation li a{
color:inherit;
text-decoration:none;
display:block;
text-align:center;
padding:1.25em;
padding-bottom:3.5em;
}
#navigation li a:hover{
background:#609941;
text-decoration:underline;
}
Is there any particular reason you have two decelerations of?
#media (min-width:0px) and (max-width:1614px){
Either way, simply adding float:none to the #loginHolder selector should do the trick. -This would need to be placed in your second deceleration of the same break point.
I'm learning to make a vertical menu using only css (I must say most of this code was copied from google).
When I put mouse over list1, items display in the back, and LargeNameList2 is over items of list1(since "LongNameList2" has a longer name) . So what i need are 1 of 2 things(or both if possible):
-How to "bring to front" list items?, so they display over LargeNameList2.
-How to make the other lists that are below(list 2 and 3) go down when I put mouse over list1?(and list3 when I mouseover list2)?
Code HTML:
<head runat="server">
<title></title>
<style type="text/css">
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
#nav li{
margin-right:10px;
position:relative;
}
#nav a{
/*display:block;*/
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0);/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:5px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
</style>
</head>
<body>
<ul id="nav">
<li>
List1›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<br />
<br />
<li >
LongNameList2›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<br />
<br />
<li>
List3›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
</ul>
</body>
You should add position:relative and z-index: 101 to your ul to make both of those things happen:
#nav li:hover ul{
left:0;
position: relative;
z-index: 101;
}
Here is a fiddle: http://jsfiddle.net/pj9Gd/
Add z-index to this -
#nav li:hover ul{
left:0;
z-index:1000; // Added this line.
}
z-index is the z coordinate of the item. Positive for nearer and negative for farther from user.
This you can find a Fiddle example, and here is the code :
<div class="menu-alto">
<ul>
<li>
<a title="Link" href="#">Link</a>
</li>
<li class="newsletter">
<a title="Newsletter" href="#">Newsletter</a>
</li>
<li class="last">
<label style="color:#99cc00">cerca </label>
<input type="text" style="width:116px;" />
<input type="submit" style="width:40px;" class="bottone" value="VAI" />
</li>
</ul>
</div>
.menu-alto ul
{
list-style:none;
padding:0;
margin:0;
border:0;
}
.menu-alto li
{
display:block;
float:left;
font-family:Arial;
text-transform:uppercase;
color:#7c7c7c;
font-size:10px;
padding-right:16px;
}
.menu-alto li a:link,
.menu-alto li a:visited
{
color:#7c7c7c;
text-decoration:none;
letter-spacing:1px;
}
.menu-alto li a:hover
{
text-decoration:underline;
}
.menu-alto .last
{
padding-left:5px;
position:relative;
top:-5px;
}
.menu-alto .bottone
{
position:relative;
top:2px;
height:21px;
font-size:11px;
}
As you can see (just on IE7) the label with the text CERCA is not align (as middle) with the other links, and on Chrome (for example) the button is in the botton of the vertical-middle align. How can I fix this?
You should vertically center using vertical-align:middle; on all your <li> children instead of using relative position.
display: inline; fails when <form> is present
its not lining up side by side.
ul#custom {
float:right;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
#custom li{
display: inline;
}
<ul id="custom"><li>
<form name="form1" method="post" action="checklogin.php">
<label for="field_1">Login ID (Your Email)</label>
<input type="text" name="myusername" id="field_1" class="short" />
<label for="field_1">Password</label>
<input type="password" name="mypassword" id="field_1" class="short" />
<input type="submit" class="submit" value="Login" />
</form>
</li> <li> **should appear right beside the login form not under it. **</li></ul>
ul li { display:inline-block; }
Works perfect.
Add:
#custom form { display: inline; }
<form> is a block level element. Also I'd suggest just using:
#custom { ... }
instead of:
ul#custom { ... }
You need to make the form inline.
#custom li form{
display:inline;
}
You could achieve this by giving your ul a fixed width and floating your li
ul#custom {
width:1000px;
padding:0;
margin:0;
list-style-type:none;
}
#custom li{
display: inline; float: left;
}