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.
Related
I am trying to implement a menubar with submenus using CSS.
Demo http://jsfiddle.net/kgu/skg3ctu5/
HTML
<div class="menu">
<ul id="navmenu">
<li> Item1 </li>
<li> Item2 </li>
<li>
Item3
<ul class="sub1">
<li> Item3.1 </li>
<li>
Item3.2
<ul class="sub2">
<li> Item3.2.1 </li>
<li> Item3.2.2 </li>
<li> Item3.2.3 </li>
</ul>
</li>
<li> Item3.3 </li>
</ul>
</li>
<li> Item4 </li>
</ul>
</div>
CSS
* {
margin:0px;
padding:0px;
}
body {
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li {
list-style-type:none;
}
#navmenu li {
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1 {
position:absolute;
top:27px;
left:0px;
}
.sub2 {
position:absolute;
left:126px;
top:0px;
}
#navmenu a {
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
I want my (submenu 1) .sub1 to appear horizontally below the nav menu. When hovering over the item 3 the submenu item 3.1 should appear below item 1, item 3.2 should appear below item 2, and item 3.3 should appear below item 3.
Could anyone help? thanks!
Here is a complete CSS solution. Change part of your css to this:
*{
margin:0px;
padding:0px;
}
body{
padding:50px;
font-family:verdana;
background-color:#000000;
}
#navmenu li{
list-style-type:none;
}
#navmenu li{
outline:1px solid red;
width:125px;
text-align:center;
position:relative;
float:left;
}
.sub1{
position:absolute;
top:27px;
left:0px;
display:none;
}
.sub1:hover, .sub1:focus {
display:block;
}
.sub2:hover, .sub2:focus {
display:block;
}
.sub2{
position:absolute;
left:126px;
top:0px;
display:none;
}
#navmenu a{
display:block;
height:25px;
background-color:#ffffff;
text-decoration:none;
}
#navmenu a:hover + .sub1{
display:block;
}
#navmenu a:hover + .sub2{
display:block;
}
I gave your sub menu classes display:none. Then if you hover or focus them they will display, this work with the bottom 2 new selectors styles I made which check if an a tag is next to .sub1 or sub2 on hover display block them. All these components together allow for the drop down to work. You can animate with css animations on hover and focus if you want. Note the new selector I used " + " this allows you to select siblings (elements next to each other).
Adding more you can also try using this instead of the css above just add it to the bottom of your css
ul#navmenu li:hover > ul {
display:block;
}
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.
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...
I'm trying to replicate Excel's Vertical Text feature in HTML and wondering if anyone has tried this or knows of an easy way to do this?
I want my text to look like:
T
H
I
S
inside of a <th> element
You could try this. Gives a little more control over spacing than using <br />
From the site:
CSS:
#vertical {
width:15em;
padding:0;
margin:0 auto;
list-style-type:none;
font-size:1.4em;
font-family:georgia, "times new roman", serif;
}
#vertical li {
float:left;
border:0.2em solid #eee;
margin:0.1em;
}
#vertical li a {
text-decoration:none;
color:#000;
display:block;
width:1.5em;
height:1.5em;
border-top:0.1em solid #000;
height:auto;
}
#vertical li a em {
font-style:normal;
display:block;
text-align:center;
background:#fff;
border-left:0.1em solid #000;
border-right:0.1em solid #000;
}
#vertical li a em.nd {
border-bottom:0.1em solid #000;
}
#vertical li a:hover {
background:#eee;
}
#vertical li a:hover em {
background:#eee;
color:#800;
}
And the markup:
<ul id="vertical">
<li>
<a href="../menu/index.html">
<em>D</em><em>E</em><em>M</em>
<em>O</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../menus/index.html">
<em>M</em><em>E</em><em>N</em>
<em>U</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../layouts/index.html">
<em>L</em><em>A</em><em>Y</em><em>O</em>
<em>U</em><em>T</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../boxes/index.html">
<em>B</em><em>O</em><em>X</em>
<em>E</em><em class="nd">S</em>
</a>
</li>
<li>
<a href="../mozilla/index.html">
<em>M</em><em>O</em><em>Z</em><em>I</em>
<em>L</em><em>L</em><em class="nd">A</em>
</a>
</li>
<li>
<a href="../ie/index.html">
<em>E</em><em>X</em><em>P</em><em>L</em>
<em>O</em><em>R</em><em>E</em><em class="nd">R</em>
</a>
</li>
<li>
<a href="../opacity/index.html">
<em>O</em><em>P</em><em>A</em><em>C</em>
<em>I</em><em>T</em><em class="nd">Y</em>
</a>
</li>
</ul>
IE-only soltuion:
<div style="writing-mode:tb-rl;filter: flipv fliph;">
The Vertical Text
</div>
You can try same thing for th tag.