I have a problem with navigation tabs on my site on http://chillicom.pixia.cz/.
Each tab is a formatted absolutely positioned anchor element. Once you click on a tab, it becomes active, which basicaly means that background image of clicked anchor will change to its "active version". Active version has a z-index 9999, inactive version 1 so an active version can overlap an inactive one. It works fine, even in IE. However, when I click on the last tab and than again on the first one, the first active tab will appear to be under the second inactive one. Why? This problem occurs only in IE8 and IE7. Can anyone help me, please? Thanks
<div id="menu">
about us
services
contact
</div>
#menu {
width: 500px; height: 27px;
margin-left: 300px;
margin-top: -27px;
overflow: hidden;
}
#menu a {
display: block;
background-repeat: no-repeat;
float: left;
position: absolute;
font-size: 15px;
color: #808080; text-decoration: none; text-align: center;
}
#menu .active {
width: 139px; height: 27px;
line-height: 29px;
background-image: url('/images/button-active.png');
z-index: 9999 !important;
}
#menu .inactive {
width: 117px; height: 22px;
line-height: 20px;
margin-top: 5px;
background-image: url('/images/button-inactive.png');
z-index: 1px !important;
}
#menu .about.active {
margin-left: -10px;
}
#menu .services {
margin-left: 120px;
}
#menu .services.active {
margin-left: 110px;
}
#menu .contact {
margin-left: 240px;
}
#menu .contact.active {
margin-left: 230px;
}
z-index: 1px !important;
Change this to:
z-index: 1 !important;
Simple error, hard to debug.
Related
I thought my navigation bar css code bordeless but when I refresh the website window it still shows a blank betwin border of screen and the navigation bar (even I have a width at 100%)
issue screenshot
ul {
position: fixed;
top: 0;
margin: 0;
padding-left: 0;
width: 100%;
background-color: #333;
}
li {
float: left;
list-style-type: none
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
padding-left: 10px;
margin: 0;
text-decoration: none;
}
Thank you for your help.
i added left:0; for ul
ul {
position: fixed;
top: 0;
left:0;
margin: 0;
padding-left: 0;
width: 100%;
background-color: #333;
}
You should use a CSS Reset to prevent automatic browser margins and paddings:
https://meyerweb.com/eric/tools/css/reset/
Write a code from the link at the top of your CSS document
So I have an "in-development" website and I'm seeing a weird issue in Google Chrome (Edge/Internet Explorer is not showing this bug, but works as intended, which is a first!)
The two "Next" and "Previous" controls for cycling through the header images have a z-index of 666 and are floated left and right, but it seems that Google Chrome is not detecting a) the hover event, b) the click (as far as I can tell). I don't know if this is related to the menu at the bottom of the header...
Any help would be much appreciated!
CSS Code below:
#header #coverControls-prev,
#header #coverControls-next {
position: relative;
height: 100%;
width: 100px;
background-color: rgba(0,0,0,0.0);
opacity: 0.25;
text-align: center;
transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
z-index: 666;
}
#header #coverControls-prev:hover,
#header #coverControls-next:hover {
background-color: rgba(0,0,0,0.25);
opacity: 1;
}
#header #coverControls-prev {
float: left;
clear: none;
}
#header #coverControls-next {
float: right;
clear: none;
}
#header #coverControls-prev p,
#header #coverControls-next p {
display: block;
position: absolute;
top: 50%;
margin-top: -50%;
width: 100%;
font-size: 10vmin;
text-align: center;
z-index: 667;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
display: block;
padding: 5px 2vw;
height: 3em;
width: 100vw;
background-color: rgba(255,255,255,0.5);
text-align: left;
white-space: nowrap;
overflow: hidden;
color: #000000;
z-index: 777;
}
Website in question: http://dev1.deliriousdreams.co.uk/
add this to your a tags in css. Your anchor tag needs a width and height. And display:block allows you to add width and height for an anchor tag.
width: 100px;
height: 100px;
display: block;
i have a menu that has the following css:-
#top-navigation {
padding: 45px 0 0 0;
position: relative;
z-index: 200;
float: right;
}
Now i have a notification that is displayed over the top of this menu with the css:-
.SmallBox {
position: absolute;
right: 0;
top: 20px;
padding-right: 30px;
width: 420px;
color: #fff;
font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
z-index: 9999;
}
the problem is that due to the relative attribute of menu it is giving me problems and the notification box does not totally display over the menu in chrome.
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.
i have two buttons in menu on mouse over the button change image to another image but on mouse out it remains back to its original image what i want to do is to when i click this button it stat should be active so that one can know that which page he is visiting now.
my code is
#menu
{width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul { list-style: none;}
#menu li { display: inline;}
#menu a { float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover { width: 107px;
height: 28px;
}
#emailUs
{ display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
and the html code is
#menu
{
width: 628px;
height: 69px;
padding-left: 380px;
}
#menu ul {
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
float: left;
width: 107px;
height: 28px;
display: block;
}
#menu a:hover {
width: 107px;
height: 28px;
}
#emailUs
{
display: block;
width: 107px;
height: 28px;
background: url("../images/add_1.png") no-repeat 0 0;
}
#emailUs:hover
{
background: url("../images/add_h.jpg") no-repeat 0 0;
}
Note: my images are seperated images not a sprite image.
you can see the demo what i want to achieve (www.daniweb.com)
Send a varible from program which page you are on. And add a class active or inactive and css the class
for eg :
Home
My Account
Now give background-image for the class selected menu so only the home image will have the active background . If you are not using sprite then do like this
<li id="home">Home</li>
<li id="myaccount">My Account</li>
then call
#home .selectedmenu{
background-image:url('homeselected.png');
}
To send variable
<?php
$menuSelected ='home';
?>
Home