As I need to display menu list items as horizontal in IE7 but it is displayed vertically.
Menu list items:
This is the image where menu list items are displayed vertically.
If I use the float:left property then also it will not be displayed horizonatlly. What to do for this problem?
CSS is as follows:
.swMain ul.anchor {
display: inline-block;
list-style: none;
padding-left: 0px;
margin-top: 3px;
float:left;
}
.swMain ul.anchor li{
position:relative;
margin: 0;
padding: -10px;
padding-top:0px;
padding-bottom: 0px;
clear:both;
display:inline;
float:left;
}
.swMain ul.anchor li a {
display:inline;
margin:0;
padding:0px;
text-decoration: none;
outline-style:none;
}
The problem is, that IE7 does not support inline-block. Luckily there is an easy fix for that:
.swMain ul.anchor {
*display: inline;
zoom: 1;
}
The * infront of the display propertie makes sure, that it's understood only by IE7 and ignored by every other browser.
Related
How do a create menus with pure css that are evenly spaced and the li elements take the entire ul space?
I followed this solution to create the menus that are evenly spaced out: https://stackoverflow.com/a/17951253/757955
I want the li elements to take up all the area of the ul element. I have a separator image I want to put between the menu items. Also I want people to be able to click anywhere in the menu item and be taken to that page.
Here is the js fiddle: https://jsfiddle.net/prusikknot/btp6Lkos/
Notice how the red and green boxes don't touch. I want the red and green boxes to touch between each other at the midway point between the menus.
There will be a variable number of menus and the menu names will vary in length. I'm targeting IE8+ and the latest version of the other major browsers but the old IE part may get dropped.
Here is the html:
<nav id="idMainNav">
<ul>
<li>ASDF</li>
<li>QWER</li>
<li>ZXCVB</li>
<li>UIOP</li>
<li>HJKL</li>
<li>VBNM</li>
<li>TYUI</li>
</ul>
</nav>
Here is the css:
#idMainNav{
width: 900px;
}
#idMainNav ul {
margin: 0px;
padding: 0px;
text-align: justify;
line-height: 0;
background-color: #e9e8e8;
}
#idMainNav ul:after {
content: '';
display: inline-block;
width: 100%;
list-style: none outside none;
}
#idMainNav li {
position: relative;
display: inline-block;
line-height: 100%;
text-align: center;
font-size: 15px;
font-weight: bolder;
cursor: pointer;
}
#idMainNav li:first-child {
padding-left: 10px;
}
#idMainNav li:last-child {
padding-right: 10px;
}
li {
background: green;
}
li:nth-child(odd) {
background: red;
}
#idMainNav a {
color: #000000;
height: 59px;
line-height: 59px;
text-decoration: none;
}
The thing about display:inline-block; is that it behaves like text and creates white space between elements. To counteract this, make the inline-block parent element have a font-size:0; (in this case the ul) and then reset the li to a font-size value not relative to the parent (since it's now 0).
Also, you don't really need to set justify to anything here, you just need to explicitly state the width of all the lis. In my test, setting the li to width:13.95%; worked nicely but it depends on the number of lis.
I have a purely .css driven menu. Currently, I have the flyout on the sub-sub menu appearing at 180px. This obviously doesn't work because as soon as menu text that exceeds 180px is entered, the submenu text is overlayed with the sub-submenu text (In the example, Highlighting Products > Entertainment Centers USA shows the problem).
The spot in the .css where I have explicitly stated the 180px width is below. I need it to be dynamic, i.e. the desired behavior is for the flyout to align with the right side of the first level vertical menu regardless of the first level submenu's width.
/* -- Appearance of second vertical dropdown menu unhovered (submenu of first level vertical menu) -- */
.rmenu li ul li:hover ul li a {
padding: 0px 0px 0px 5px;
background: #e8dec7; /*background color for submenu hovered text*/
color: #51db29; /* this is the color of the sub-sub menu text. I made the color (#51db29) 'unusual' as an example. Should be changed to something less jarring (of course) */
word-wrap: break-word;
min-width:100px;
position: relative; left: 180px; top: -35px; /* display 3rd level to the right (180px) */ /*left: 180px*/
}
The jfiddle is here:
http://jsfiddle.net/9c8wcxju/4/
Many, many thanks.....
I have simplified everything down and made this for you. You can expand on it and do what you want with it. I couldn't really work with yours, ended up deleting most of the css.
As you can see I have added class to each level of the sub-menu so it is easier to target. What I have created is what I think you wanted, I hope this puts you on the right track.
http://jsfiddle.net/9c8wcxju/5/
.rmenu ul li {
margin: 0;
padding: 0;
position: relative;
}
.rmenu ul {
list-style-type:none;
margin:0;
padding:0;
}
.rmenu li a {
display:block;
min-height: 35px;
line-height: 35px;
font-family: "Arial", sans-serif;
font-size: 18px;
color: #000000;
background-color: #e8dec7;
text-decoration: none;
white-space: nowrap;
}
.rmenu li:hover a {
background: #d6cbb0;
}
.rmenu .hidden {
display: none;
}
.rmenu .level_1 > li {
float: left;
}
.rmenu .level_1 > li a {
padding: 0 10px;
}
.level_1 > li:hover .level_2,
.level_2 > li:hover .level_3 {
display: block;
}
.level_2 {
position: absolute;
left: 0;
}
.level_3 {
position: absolute;
top: 0;
left: 100%;
}
Following is the link of a web page.
https://pbx.wave-tel.com/register
It has a navigation bar containing verification, your details and hosting contrex.
I want to set this bar in the center of the page without using margin or padding as it disturbs the responsive display. I can only change the CSS as i do not have access to HTML, Please help me in this problem.
YOu can do this changes
CSS
.swMain ul.anchor li a {
text-align: center;
margin-top: -15px;
padding-top: 0;
}
.swMain ul.anchor li {
float: none;
display: inline-block;
}
.swMain #navSummary {
text-align: center
}
.swMain ul.anchor li {
display:inline-block;
float:none;
}
.swMain #navSummary {
text-align:center;
}
Try this then, I have edited for your requirement!!
update your css
.widget-menu-widget{
padding-left : 50%;
margin-left : -323px;
}
Add this to your css
.swMain #navSummary {
text-align-center;
}
.swMain ul.anchor li {
/*float: left;*/ remove float left
display: inline-block;
}
.swMain ul.anchor li a {
display: inline-block;
}
.nav-tabs>li {
/*float: left;*/ remove float left
}
Note: you need to add these to your existing styles
I want to add some kind of thick line underneath my currently active<li> items. Problem is, I can't set it up properly. I want the line underneath to inherit the width of its respective <li> or at least to be centered ...
Here's my fiddle
Much appreciated
If you want an absolutely positioned element to inherit the width of it's parent, you need to position that parent relatively. More info here. For your situation, you need to :
Add position:relative; to .nav li
Add width :100%; left:0; and remove margin-left: -6em; on nav li.current a:after, nav li a:hover:after
FIDDLE
You seem to be adding the :after content in two places which seems excessive.
Since you only want in on active 1i you can strip down your code as follows:
CSS
nav ul {
list-style: none;
margin-top: 1.25em;
}
nav ul li {
display: inline-block;
position: relative;
}
nav li a {
color: black;
text-transform: uppercase;
text-decoration: none;
padding: 1em 1.25em;
width: auto;
}
nav li.current a, nav li a:hover {
text-decoration: underline;
}
nav li.current:after {
background-color:black;
content: "";
height: 1em;
position: absolute;
left:0;
top: 100%;
width: 100%;
}
JSFiddle Demo
I'm in the process of making my own blog, I haven't got a domain yet so it's not live(I've been building the site from a folder with different directories as the pages). I've been working on the blog and I was looking for a simple navigation menu. I found one on the internet. I'm trying to center the navigation bar and I've tried many solutions that worked for other peoples websites but it isn't working for mine. This is the code (I've tweaked it to my own colors and nav titles)
<ul id="list-nav">
<li>Home</li>
<li>Books</li>
<li>About</li>
<li>Contact</li>
</ul>
And this is the CSS:
ul.list-nav {
list-style:none;
width:525px;
margin-right: auto;
margin-left: auto;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
padding:5px 0;
width:150px;
background:#383838;
color:#eee;
float:left;
border-left:1px solid #fff;
}
ul#list-nav li a:hover {
margin-right: auto;
margin-left: auto;
background:#cccccc;
color:#000;
}
"Help me Obi Wan Kenobi your my only hope!"
Your first CSS selector is looking for a ul with a class of list-nav, not an id of list-nav. Change your first CSS rule to:
ul#list-nav {
padding: 0;
margin: 0;
list-style: none;
width: 525px;
margin: 0 auto;
}
And your navigation bar is magically centered. Please see this jsFiddle for a working demonstration > http://jsfiddle.net/TLaN5/. Obviously you'll need to amend the width of the parent ul in order to accomodate the correct width of the elements within, but you should get the idea.
I would wrap the entire page inside <div class="wrap">. You have declared margin twice in the code, so I would remove the first occurrence and leave it like:
ul#list-nav {
padding: 0;
list-style: none;
width: 725px; //NOTE I have increased the width value.
margin: 0 auto;
}
Also, find
ul {
display: inline;
text-decoration: none;
color: black;}
[around line 20] and remove display: inline; rule. This should fix your issues. Check the live example here.
You can give a define size to the ul and center its content (remove the display-inline, indeed)
ul {
width: 960px;
margin: 0 auto;
text-align: center;
}
Then display the child li elements as inline blocks :
ul li {
display: inline-block;
}
The inline-block property won't work in ie7, so check your browser targets first...
Another way is to just use the good ol'
ul li {
float: left;
}
ul:after {
display: block;
content: "";
clear: both;
}
But the li won't be centered within the ul and you'll have to use javascript if you absolutely want to do this dynamically (without assigning a fixed with to each li).