I have "Awkward Showcase" running in my page, but above I have a dropdown menu. The thing is that the showcase overlaps the menu and it is not completely visible.
I could correct that changing z-index, but it only works when I put:
negative Index to Awkward Showcase
positive index to DropDown Menu
Because of this, as the showcase has arrows to navigate trough sliders, there is no way to click on each. It seems like they (arrows) arre behind a transparent layer, because they arre visible, but inactive.
My codes:
Menu
<div id="navmenucontainer">
<ul id="navmenu">
<li class="main" onclick="javascript: Mostrar(this);" id="menitem1">Productores
<div class="sub" onmouseout="setTimeout('Cierro(this)', 1000);" onmouseover="Sigue(this);" style="width:204px; overflow:hidden;">
Some menu items
</div>
</li>
</ul>
</div>
Slideshow
<div id="showcase" class="showcase">
<div class="showcase-slide">
<div class="showcase-content">
<div class="showcase-content-wrapper">
<img src="images/1.jpg">
</div>
</div>
<div class="showcase-caption">
</div>
</div>
CSS
#navmenucontainer {
z-index:999999;
}
*/ul#navmenu div.sub{
display: none;
background: url('images/menu/bgcat.png') repeat-x bottom #FFF;
position: absolute;
top:26;
left:0;
vertical-align:top;
padding-top:0;
padding-bottom: 22px;
width:1240px;
/*border-right:1px solid silver;*/
border:1px solid silver;
z-index:99999;
zoom:1;
}
ul#navmenu li {
margin: 0;
/*border: 0 none;*/
padding: 0;
float:left; /*For Gecko*/
display: inline;
list-style: none;
height: 20px;
}
ul#navmenu ul {
margin: 0;
padding: 0;
float:left;
width:100%;
}
.showcase
{
position: relative;
z-index:-1;
margin: 0;
}
The overlapping occurs with ".sub" div, and ".showcase".
This is a longshot, but since it is IE after all... It could be either (almost)correct or disaster.. I have encountered the same problem, and it is a different solution every time depending on ones luck.. (IE sucks, just to quote and agree on the earlier comments)
Add this to your html
<!--[if IE]>
<style type="text/css">
#navmenucontainer {
z-index:3000;
}
ul#navmenu {
z-index:2000;
}
ul#navmenu div.sub {
z-index:1000;
}
.showcase {
position: relative;
z-index:0;
margin: 0;
}
</style>
<![endif]-->
Inspired from http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Related
I have problem with creating a webpage menu - I must do something like in this picture below. This black parts is just a background around content in the middle. I want to make this left black part is extended to the left side of screen and right black part extended to right side of screen, but I can't use width:100% on the outer div because I want to leave a empty spaces between every red square.
…and on the wider screen this must be like this:
It is indeed.
Codepen Demo
HTML
<header>
<div class="inner"></div>
</header>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
overflow:hidden; /* prevent scrollbar */
}
header {
position: relative;
}
.inner {
height:100px;
width:980px;
margin:0 auto;
border:1px solid black;
}
header:before, header:after {
content: "";
position: absolute;
background-color: lightblue;
top: 0;
bottom:0;
width:50%;
}
header:before {
left:0;
margin-left:-490px;
}
header:after {
right:0;
margin-right:-490px;
}
Edited
I have updated the code as per your comment, there was a slight error, and I have removed it. check out this new link
http://jsfiddle.net/24eDx/1/
As far as I understand your question, you want to create menu bar which will be aligned center, and which looks like the one you http://i.imgur.com/s6keh9f.jpg
I have created one JSFiddle for you
http://jsfiddle.net/24eDx/
HTML:
<div class="header">
<div class="header-wraper">
<div>
<ul class="menu">
<li><div class="menu-li">Menu 1</div> </li>
<li><div class="menu-li">Menu 2</div> </li>
<li><div class="menu-li">Menu 3</div> </li>
<li><div class="menu-li">Menu 4</div> </li>
</ul>
</div>
</div>
</div>
CSS:
.header{
background : black;
height:50px;
width:100%;
}
.header-wraper
{
width : 80%;
margin:0 auto;
}
.header .header-wraper .menu li
{
list-style: none;
background: red;
float: left;
padding: 16px 14px;
border: 2px solid #FFF;
border-width: 0 1px;
}
.header .header-wraper .menu li:first-child
{
border-width: 0 1px 0 2px;
}
.header .header-wraper .menu li:last-child
{
border-width: 0 2px 0 1px;
}
P.S. : Please, Next time do add a code you working on, that will be helpful for everyone and Also read the documentation that will help you understand how to ask a question on stack overflow.
Hi I'm trying to style the tab sample i found on net.
here is the sample :
<html>
<head>
<meta charset="utf-8">
<title>Tabs 2</title>
<style>
body {
font: 0.8em arial, helvetica, sans-serif;
}
#header ul {
list-style: none;
padding: 0;
margin: 0;
}
#header li {
float: left;
border: 1px solid;
border-bottom-width: 0;
margin: 0 0.5em 0 0;
}
#header a {
display: block;
padding: 0 1em;
}
#header #selected {
position: relative;
top: 1px;
background: white;
}
#content {
border: 1px solid;
clear: both;
}
h1 {
margin: 0;
padding: 0 0 1em 0;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
</body>
</html>
the problem is i want to add the background color for header and set it's width to 100%.
see the difference when i add this css code:
#header{
width:100%;
background-color:#b6ff00;
overflow:hidden;
}
before ( selected tab is merged with content )
after ( selected tab has a border-bottom )
how to fix this?
It's because you are adding overflow:hidden to header and
you haven't cleared floats
below are solutions
Clear:both
Here is definition of clear
A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats you'll have to command the browsers somehow to stretch up the container all the way.
Here is your solution and A Quick Fix
"Clearing", 21st Century Style
ul:after {
clear: both !important;
content: ".";
display: block;
float: none;
font-size: 0;
}
Here is Fiddle http://jsfiddle.net/krunalp1993/g9N3r/4/
Older Solution
HTML
<div id="header">
<ul>
<li>This</li>
<li id="selected">That</li>
<li>The Other</li>
<li>Banana</li>
<li class="clear"></li>
</ul>
</div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
CSS
#header {
background-color: #B6FF00;
overflow: visible;
position: relative;
top: 1px;
width: 100%;
}
.clear { clear : both; float:none !important}
Fiddle http://jsfiddle.net/krunalp1993/g9N3r/3/
I have just shown a quick clearing technique there are many others
You can see more ways http://www.quirksmode.org/css/clearing.html
Hope it helps you :)
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
I am trying to create a mega menu like those at http://rackspace.com. I have tried the tutorials given at some of the other questions about this already asked, but one of them used a lot of images, and one of them didn't work with the version of jQuery they linked to. I would like to keep this all CSS, but if I must I could use some JavaScript.
I don't understand how to make complex mega menu's but only the simple drop-down's. If someone could provide me with the code for this I would be very happy. I am learning CSS now and I think this will allow me to sharpen my knowledge as well.
Thanks,
Scott
Here is a very nice looking solution a quick Google search turned up. Haven't tried it myself but looks promising: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Your question is too general. What you're trying to achieve is not going to happen with a simple HTML and CSS code that we can write here.
So you may be interested in this this jQuery plugin and CSS framework:
https://myflashlabs.github.io/24component-bars/
It helps you to create responsive mega menu, header, sidebar, and footer with lots functionalities fast and easy, without any hassle... It's exactly what you want :)
You don't need to code it yourself all from the beginning when there's already a solution out there!
Extremely quick sample of what you need to do:
http://jsfiddle.net/KqZd4/
I know this looks nothing like those, but that really is all the functionality you need. Just expand what is in the dropdown
<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>
<ol>
<li>Tablets</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
add more you want
then simple style
#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;
}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}
if you have any problem understanding here is a complete tutorial
http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php
Try This
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* {
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
/* Style Navigation bar */
.navbar {
display: -webkit-flex;
display: flex;
background-color: #e3e3e3;
}
.navbar a {
display: block;
text-decoration: none;
color: black;
padding: 1.1em 1em;
font-size: 1.1em;
border-bottom: 3px solid transparent;
transition: 0.1s;
}
.navbar > a:hover, .dropdown > a:hover {
border-bottom-color: #FA7D19;
}
/* Style Mega Menu */
.dropdown-content {
display: none;
position: absolute;
width: 90%;
left: 5%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
}
.dropdown-content .header {
padding: 16px;
color: #777;
background: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that stacks next to each other */
.row {
display: -webkit-flex;
display: flex;
}
.column {
width: 100%;
padding: 10px;
background: #f8f8f8;
}
.column a {
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Makes the three columns stack on top of each other instead of
next to each other (when screen width is 600px or less) */
#media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
<div class="navbar">
Home
<div class="dropdown">
Dropdown <i class="fa fa-caret-down"></i>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
Pricing
</div>
<div style="padding:10px 15px;">
<h1>Create a Mega Menu</h1>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
</div>
Reference:How To Create a Mega Menu
This is a follow-up to my last question. Thanks to "mu is too short" I can now demonstrate my problem in a fiddle.
I have the following code.
I want the code to show the list circles to the left of the text but to the right side of the .img DIV. This works in Firefox and in Opera but in IE they are positioned to the very far left. I can't understand why they are positioned differently in the two browsers. Help would be much appreciated.
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0;
background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
Here is a fiddle
Demo 1
I did a couple of things based on my experience. Most importantly:
I have floated the UL towards left
I have zeroed out all margin/padding on the UL (except padding left so that the bullet stays there)
I have zeroed out all margin/padding on the LI
Note that different browsers have different defaults for margin/padding on UL and LI hence the normalization.
Demo 2
This is almost the same as above except UL is not floated, instead a left-margin is used.
My CSS isn't great, but I think you need something like this:
.fp1 .col ul { display: inline-block; float: left; margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
I can't explain why IE does nonsense like this, save for saying IE does this kind of thing all the time!
The solution is condintional comments.
These allow you to point different css at IE versions only: http://www.quirksmode.org/css/condcom.html
so
<!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
Would target all IE versions, just as
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
Would target IE6 only .
so this should fix your problem
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style><!--
.fp1 .row { overflow: hidden; }
.fp1 .img { display: inline-block; float: left; width:105px; height:80px; margin:25px 0 10px 0; background: yellow; no-repeat scroll 0 0 transparent; }
.fp1 .col { float: left; width:50%; margin:0px; }
.fp1 .col ul { margin:15px 20px 0 0; padding-left: 25px; font-size: 1.2em}
.fp1 .col ul span { color:#222; font-size: 0.85em; }
.fp1 .col ul li { line-height:15px; }
--></style>
<!--[if IE]>
<style><!--
ul li {
margin-left: 80px;
color: red;
}
--></style>
<![endif]-->
</head>
<body>
<div class="fp1">
<div class="col">
<div class="img" id="img1"></div>
<ul>
<li><span>Test </span></li>
<li><span>Test </span></li>
<li><span>Test </span></li>
</ul>
</div>
</div>
</body>
</html>