I don't know why this not working properly on ie8.
<div id="bluemenu" class="bluetabs">
<ul>
<li class="">
<a rel="dropmenu3_c" href="company/">Company
<span><img width="11"height="7" src="images/arrow_btn.png"></span>
</a>
</li>
</ul>
</div>
This is the css for the navigation ul
.bluetabs ul {
color: #FFFFFF;
float: right;
font: 13px 'Open Sans','Lucida Grande',Arial,"Verdana sans-serif";
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
text-transform: uppercase;
}
This is the css for the navigation li
.bluetabs li {
display: inline;
float: left;
height: 36px;
margin: 0;
padding: 0;
}
This is the css for the navigation li a
.bluetabs li a {
background: url("../images/menu_nav_hover_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
margin: 0;
padding: 5px 15px;
text-decoration: none;
}
Any CSS hacks that I can make this work on IE 8?
I can kind of reproduce this locally, but not entirely.
Gonna take a shot in the dark...
Try:
.bluetabs li a {
background: #ccc;
color: #FFFFFF;
margin: 0;
padding: 5px 15px;
text-decoration: none;
display: inline-block; /* Add this */
}
/* Add this */
.bluetabs li a > span {
display: inline-block;
}
Related
I have this code for my menu
I got some list items i wanna center in the black box.
The 4 Li-items are floating left to get them inside the black box
nav {
display: block;
width: 900px;
overflow: hidden;
}
nav ul {
width: 900px;
padding: .7em;
float: left;
margin: 0px;
list-style: none;
background: #444;
}
nav li {
float: left;
}
nav a {
float: left;
padding: .8em 1.5em;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font: bold 1.1em/1'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #999 #eee;
background: #c1c1c1;
background: linear-gradient(#f5f5f5, #c1c1c1);
}
nav a:hover,
nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
background: #fac754;
background: linear-gradient(#fac754, #f8ac00);
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 4px 0 0 4px;
}
<nav>
<ul>
<div>
<li><a href='storingsoverzicht.php'>Storingen</a>
</li>
<li><a href='Contacten.php'>Contacten</a>
</li>
<li><a href='nieuwestoring.php'>Nieuwe Storing</a>
</li>
<li><a href='uitloggen.php'>Uitloggen</a>
</li>
</div>
</ul>
</nav>
I like to have the Li-items centered in the middle of the black box.
How do i do this?
Remove float from ul and li and add display: inline-block; and for parent nav add text-align: center; I just corrected css, have a look:
nav {
display: block;
width: 900px;
overflow: hidden;
text-align: center;
}
nav ul {
width: 900px;
padding: .7em;
margin: 0px;
list-style: none;
background: #444;
font-size: 0;
}
nav li {
float: none;
display: inline-block;
font-size: 18px;
}
nav a {
float: left;
padding: .8em 1.5em;
text-decoration: none;
color: #555;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font: bold 1.1em/1'trebuchet MS', Arial, Helvetica;
letter-spacing: 1px;
text-transform: uppercase;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #999 #eee;
background: #c1c1c1;
background: linear-gradient(#f5f5f5, #c1c1c1);
}
nav a:hover,
nav a:focus {
outline: 0;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
background: #fac754;
background: linear-gradient(#fac754, #f8ac00);
}
nav a:active {
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .3) inset;
}
nav li:first-child a {
border-left: 0;
border-radius: 4px 0 0 4px;
}
<nav>
<ul>
<li><a href='storingsoverzicht.php'>Storingen</a>
</li>
<li><a href='Contacten.php'>Contacten</a>
</li>
<li><a href='nieuwestoring.php'>Nieuwe Storing</a>
</li>
<li><a href='uitloggen.php'>Uitloggen</a>
</li>
</ul>
</nav>
Though your HTML is invalid, since you should not have a div inside you r `ul, Just make the following changes/addition to your css.
Demo : http://jsbin.com/quluhevibe/edit?output
nav ul {
width: 900px;
padding: .7em;
float: left;
margin: 0px;
list-style: none;
background: #444;
text-align: center;
box-sizing: border-box;
}
nav ul div {
display: inline-block;
}
I'm creating a website using Zurb's Foundation Framework for the first time , and I love it so far but I'm stuck on this one annoying thing! I'm not sure if I'm missing something obvious or not but I'd love it if you could help me!
Basically, in the desktop version, I have several social media icons that display above the top bar navigation, aligned one after the other horizontally. In the mobile version, I've hidden the top set of social media icons, and revealed a second set below the list of more important navigation items so that they aren't popping up first in the menu drop-down. This all works fine, my problem is that since the social media icons are all very small, I'd like them all to be in one row, horizontally aligned like in the desktop version, but I can only get them to display vertically.
I've tried having them in a single < li > element, and I tried using nonbreakable spaces, but neither thing worked. Does anyone have any idea how to fix it?
By the way here is the website I'm working on: http://cakebattermusic.com
Just to be clear, here is how I want it to pop up: (assume F, T, I are facebook twitter instagram)
HOME
CONTACT
WHATEVER
F T I
Here is how it pops up now:
HOME
CONTACT
WHATEVER
F
T
I
Is it possible to maybe list LI elements horizontally in only PART of a list and not the whole list? That would solve the problem but I haven't been able to figure out how to do that or if it's possible.
Here's the html:
<!-- /////////////////////// HEADER ////////////////// -->
<!-- HEADER SECTION -->
<div class="contain-to-grid header-section">
<!-- TOPBAR SECTION -->
<nav class="top-bar important-class" data-topbar>
<!-- TITLE AREA & LOGO -->
<ul class="title-area">
<li class="name">
<img src="img/logo.jpg" width="100px" alt="" id="logo-image">
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul> <!-- END TITLE AREA & LOGO -->
<!-- MENU ITEMS -->
<section class="top-bar-section">
<ul class="right">
<div id="hidden"> <!-- hidden in mobile view -->
<li><img src="img/facebook.00_png_srz" border="0"></li>
<li><img src="img/twitter.00_png_srz" border="0"></li>
<li><img src="img/instagram.00_png_srz" border="0"></li>
<li><img src="img/tumblr.gif" border="0" width="20px"></li>
</div>
</ul>
<br>
<ul class="right">
<li>HOME</li>
<li>BIO</li>
<li>MUSIC</li>
<li>VIDEOS</li>
<li>TOUR</li>
<li>CONTACT</li>
<div id="hidden2"> <!-- hidden in desktop view -->
<li><img src="img/facebook.00_png_srz" border="0">
<img src="img/twitter.00_png_srz" border="0">
<img src="img/instagram.00_png_srz" border="0">
<img src="img/tumblr.gif" border="0" width="20px"></li>
</div>
</ul>
<br>
</section> <!-- END MENU ITEMS -->
Header CSS:
/*
HEADER SECTION
========================================================================== */
.header-section {
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
position: fixed;
z-index: 999;
min-width: 100%; }
.contain-to-grid {
background-color: #fff;
}
.header-fill {
background: #fff;
height: 120px; }
.header-fill .tablet-mobile-logo img {
padding-top: 30px; }
.padding-on-my-header {
padding: 17px 0.9375rem 62px 0.9375rem; }
.padding-on-my-header ul.title-area img {
margin: -5px 0 0 0; }
.full-width {
min-width: 100%; }
p {
line-height: 3rem;
padding-bottom: 30px; }
/*
TOPBAR NAVGATION
========================================================================== */
.top-bar {
background: #fff;
padding: 20px 0.9375rem 90px 0.9375rem;
transition: all 0.5s ease 0.1s; }
.top-bar ul.title-area img {
margin: -10px 0 0 0; }
.top-bar .top-bar-section ul {
background: #fff; }
.top-bar .top-bar-section ul li a:not(.button), .top-bar .top-bar-section ul li.active a:not(.button) {
background: #fff;
line-height: 30px;
font-size: 16px;
padding: 0;
margin: 5px 0 0 0;
text-transform: uppercase; }
.top-bar .top-bar-section ul li a:not(.button):hover {
background: #fff;
border-bottom: 2px solid #c3c3c3;
color: #333; }
.top-bar .top-bar-section ul li.active a:not(.button) {
border-bottom: 2px solid #c3c3c3;
color: #333; }
.top-bar .top-bar-section ul li.active a:not(.button):hover {
background: #fff; }
.top-bar .top-bar-section ul li {
margin-left: 30px; }
.top-bar .top-bar-section ul li a {
color: #333; }
.top-bar .top-bar-section ul li:hover:not(.has-form) > a {
color: #333; }
.top-bar .top-bar-section li ul.dropdown {
background: #fff;
border: 1px solid #ddd;
color: #333; }
.top-bar .top-bar-section li ul.dropdown li {
border-bottom: 1px solid #ddd;
margin: 0;
padding: 5px 15px 5px 15px; }
.top-bar .top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar .top-bar-section li ul.dropdown li a:not(.button) {
background: #fff;
color: #222;
border-bottom: none;
padding: 20px -4px 40px 45px; }
.top-bar .top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) {
background: #fff;
color: #222; }
.top-bar .has-dropdown > a:after {
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
margin-top: -5px; }
/*# sourceMappingURL=scss.css.map */
#hidden{
display: inherit;
}
#hidden2{
display: none;
}
#media only screen and (max-width: 600px) {
#hidden{
display: none;
}
#hidden2{
display: inherit;
}
.top-bar {
margin-top: 0;
padding: 0;
float: none; }
.top-bar .toggle-topbar.menu-icon a {
color: #222; }
.top-bar .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222; }
.top-bar ul.title-area img {
margin: -2px 0 0;
width: 50px; }
.top-bar .top-bar-section ul {
background: #333; }
.top-bar .top-bar-section ul li {
margin-left: 0; }
.top-bar .top-bar-section ul li > a {
background: #fff;
border-radius: 0;
font-size: 0.9rem; }
.top-bar .top-bar-section ul li:not(.has-form) a:not(.button) {
background: none;
color: #222;
padding: 10px 15px;
margin-top: 0; }
.top-bar .top-bar-section ul li:not(.has-form) a:not(.button):hover {
background: #fff;
color: #222;
margin-top: 0; }
.top-bar .top-bar-section ul li.active:not(.has-form) a:not(.button) {
background: #fff;
color: #222;
padding: 10px 15px;
margin-top: 0; }
.top-bar .top-bar-section ul li.active:not(.has-form) a:not(.button):hover {
background: white;
margin-top: 0; }
.top-bar.padding-on-my-header ul.title-area img {
margin: 5px 13px 0;
width: 35px; }
.top-bar.expanded {
margin-top: 0;
padding: 0;
float: none; }
.top-bar.expanded .toggle-topbar.menu-icon a {
color: #222; }
.top-bar.expanded .toggle-topbar.menu-icon a:after {
box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222; }
}
/* ////// END HEADER //////*/
You can do this with a little CSS. I use the Chrome inspector to find the right selectors to target.
example - http://codepen.io/rafibomb/pen/KpXEVe?editors=110
#media only screen and (max-width: 40.063em) {
.top-bar-section ul.social-icons li {
display: inline-block;
width: 25%;
float: left;
text-align: center;
}
}
I have a dropdown menu and it's not working with Internet Explorer 10 (and compatibility mode) and Chrome. It does however work with Firefox (latest).
CSS:
#menu_items
{ float: left;
width: 600px;
}
#menu
{ margin:0;
float: left;
}
#menu li
{
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
#menu li a{
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li ul li a {
float: left;
font: bold 90% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li:hover ul {
display: flex;
float:inherit;
text-shadow: 0px 1px 0px #000;
padding: 1px 40px 0px 0px;
background: #669CD8;
background: -moz-linear-gradient(#90B9E2, #4B75AF);
background: -o-linear-gradient(#90B9E2, #4B75AF);
background: -webkit-linear-gradient(#90B9E2, #4B75AF);
margin: 50px 0px 0px 0px;
border-style:solid;
border-width:1px;
z-index: 2;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li.current a, ul#menu li:hover a
{
color: #FFF;
text-decoration: underline;
}
HTML:
<div id="menu_items">
<ul id="menu">
<li class="current">Home</li>
<li>Werkwijze</li>
<li>Producten
<ul>
<li>Klimaat</li>
<li>Voerbakken</li>
<li>Voerinstallatie</li>
<li>Kraamhokken</li>
<li>Boxen</li>
<li>Biggen hokken</li>
<li>Roosters</li>
<li>Silo's</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
In the rules for #menu li:hover ul, use display: block; instead of display: flex;. (See demo at http://jsfiddle.net/8LaLa/1/.)
display: flex isn't supported by all browsers - see https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility.
Your menu may not be clearing properly. You have a lot of floated elements and that can cause errors with your rendering. When you float an element you are taking that element "out of flow". Basically the element will disregard its position in the DOM and try to slide to the side you set in your float. If all child elements inside of a wrapper are floated the parent no longer knows how tall it should be (since all the elements are out of flow) and it sets itself to 0px height or to the height of the tallest in-flow element. To fix this you need a clearfix. This will tell the browser to make the container clear its children. Hopefully this fixes your issue!
quick html question:
how can I align the text in this unordered list to the top of the div?
<div id="menucontainer">
<ul id="menu">
<li style="vertical-align:top">Home</li>
<li>About</li>
</ul>
</div>
/* TAB MENU
----------------------------------------------------------*/
ul#menu {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline-block;
list-style: none;
vertical-align:top;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
Seems like it would be by default, but this should fix any styles that are getting in the way.
ul#menu li {display: inline-block; vertical-align: top;}
http://jsfiddle.net/uyhHh/
i found this menu that's exactly what i want. It works in all modern browsers and IE 7/8. I need to find a fix for it to work in IE6. Any help would be greatly appreciated.
http://lab.returnwt.net/htmlcss/tabmenu/
The problem with this menu in IE6 is that it's using selectors like this:
header ul#menu li:hover ul
IE6 only supports :hover on a elements.
Fortunately, there's a really easy fix to make this menu work in IE6.
It's called Whatever:hover
Download the (minified) csshover3.htc file.
Add this CSS:
body {
behavior: url("csshover3.htc");
}
Here's a self-contained file that I tested to work with IE6, provided that the csshover3.htc file is in the same folder:
<!DOCTYPE html>
<html>
<head>
<title>Simple Tabbed Navigation - CSS3</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta charset="utf-8" />
<style>
body {
behavior: url("csshover3.htc");
}
body
{
background: #efefef url(images/bg_main.png);
font: 13px Helvetica, Arial;
margin: 0;
}
header
{
background: url(images/bg_head.png);
display: block; /* Compatibility fix */
}
header:after
{
background: rgba(0, 0, 0, 0.1);
content: ' ';
height: 1px;
position: absolute;
width: 100%;
z-index: 10;
}
header ul#menu
{
border-bottom: 5px solid #fff;
margin: 0;
overflow: hidden;
padding: 0 10px;
padding-top: 100px;
list-style: none
}
header ul#menu li
{
float: left;
}
header ul#menu li a
{
background: #b1d0dd;
border-top: 1px solid #d0e2ea;
color: #fff;
font-weight: bold;
display: block;
line-height: 34px;
margin-right: 2px;
padding: 0 20px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
border-radius: 3px 3px 0 0; /* Currently working on Firefox 4.0b (Nightly), Chrome 8.0.xxxx and Opera 10.63+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B1D0DD), to(#89b8cc));
background-image: -moz-linear-gradient(top, #B1D0DD, #89B8CC);
}
header ul#menu li > ul
{
display: none;
}
header ul#menu li a:hover
{
background: #fff;
border-top-color: #fff;
color: #666;
text-shadow: none;
}
header ul#menu ul {
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: none;
margin-left: 0;
margin: 0;
padding: 5px 0 0 0;
position: absolute;
z-index: 999;
}
header ul#menu ul li
{
border: 1px solid rgba(0, 0, 0, 0.1);
border-width: 0 1px;
float: none;
list-style: none;
margin: 0;
padding: 0;
}
header ul#menu ul li a
{
background: none;
border-bottom: 1px solid #ededed;
border-top: none;
color: #666;
font-weight: normal;
font-size: 12px;
margin: 0 20px;
padding: 0;
text-shadow: none;
width: 118px;
}
header ul#menu li a.home-icon span
{
background: url(images/home-icon.png) no-repeat center center;
display: block;
text-indent: -999em;
overflow: hidden;
text-align: left;
direction: ltr;
width: 16px;
}
header ul#menu li a.home-icon:hover span
{
background-image: url(images/home-icon-hover.png);
}
header ul#menu ul li:last-child a
{
border-bottom: none;
}
header ul#menu li:hover ul
{
display: block;
}
header ul#menu ul li a:hover
{
color: #000;
}
header ul#menu ul li:last-child
{
border-bottom: none
}
</style>
</head>
<body>
<header>
<ul id="menu">
<li><span>Home</span></li>
<li>
Community
<ul>
<li>Recent Activity</li>
<li>Member Forum</li>
<li>Member List</li>
<li>Member Groups</li>
</ul>
</li>
<li>Pet Help</li>
<li>Pets for Sale</li>
<li>Pet Services</li>
</ul>
</header>
</body>
</html>