im having a problem when im trying to create a dropdown.(See JSfiddle) The navigation menu is going from side to side when im hovering over it.. I have not seen any other placed that can solve my problem :/
JSfiddle: http://jsfiddle.net/kavqc/2/
I think the problem is here a place:
.dropdown {
position:absolute;
top:62px;
left:0;
visibility:hidden;
background-color: red;
}
PS: sry for my bad English
as #KevinJantzer mentioned - fix the jump by changing margin-left.
Fix the menu positioning by adding position: relative to your .li class:
.li {
display:inline-block;
position: relative;
list-style:none;
}
Demo
The reason the menu jumps to the right is because of the margin-left style:
.navbar-menu:hover {
...
margin-left: 200px; // remove this
...
}
Here is your jsFiddle with the margin-left removed: http://jsfiddle.net/kavqc/3/
Related
I am observing this strange behavior with the radio buttons. Whenever I set the z-index of the parent div I am not able to select the radio buttons.
Here is the fiddle link: http://jsfiddle.net/x7rm63n9/2/. Try to select the buttons inside the main box.
The css style for the main div is:
.main_box
{
position: relative;
background-color: #444;
width: 65%;
margin: 30px auto;
height: 450px;
z-index: -6; /* IF I REMOVE THIS LINE I CAN SELECT THE RADIO BUTTONS*/
border: 12px solid #fff;
}
Why is this happening? Is there any workaround for this without changing z-index?
I tried to set up the simple demo. (http://jsfiddle.net/juruf6a8/1/) It works fine here.
Thanks in advance,
Try this I have made the update and it is working on my end.
http://jsfiddle.net/x7rm63n9/4/
Here is what you have to do:
-remove the z-index:-6 of the "main-box" div
-wrap the banner div inside another div called "banner-container" and write this code for it
.banner-container{
z-index:1;
position:relative;
}
.banner-container:after{
clear:both;
content:'';
display:block;
}
You could just make the radio buttons that are inside main_box higher if you must keep the z-index of -6 on the main_box itself.
.main_box, input[type=radio]
{
z-index:0;
}
http://jsfiddle.net/x7rm63n9/3/
I have a page top containing two menus. The problem is that when one of the submenus is unwrapped, it doesn't show (the other menu covers it). I've tried with z-index but it doesn't work. Thanks in advance.
The page and the code are avaliable in http://infoglobal.eu1.frbit.net/En/cap.php.
Your html and CSS is messed up a bit
#top{
z-index:13 //This is not needed
}
.menu{
z-index: 10 //This is also not needed
}
#canvi_idioma{
z-index:1 //Simply add this
}
You can use z-index with position.
css example
.Class{
position:relative; //You have to choose atleast one position type.
z-index:100; // value can be change according to you .
}
Apply z-index to #canvi_idioma
CSS
#canvi_idioma{
z-index:9999
}
In your css you use z-index on '.menu' but that affects both menus. You have to apply it to #menu and #canvi_idioma.
Also note that z-index only works when both elements are within the same parent node.
Also your code is kinda dirty. You may want to clean up things like this with position beeing in there two times:
#canvi_idioma {
background: transparent;
position: absolute;
right: -95%;
top: 40px;
position: relative;
}
You only need this.
.menu {z-index:100}
Im trying to accomplish the next situation;
If got a h1 tag, and right of it i want a small line (separator.png)
But my image keeps crossing the h1 text..
http://i57.tinypic.com/2m30l51.png
I've got a example of how i need it to be;
http://themes.webcreations907.com/ninezeroseven/option-two/#prettyPhoto
Those titles: "Take a Look, Recent Works"
HTML is like this;
<div class="titleBar">
<h1 class="left"><span>DIENSTEN</span></h1>
</div>
CSS;
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
}
#diensten .titleBar h1{
display: inline-block;
}
If tried a lot of things, even copied the code from the original site, but actually i have nog idea what to do.. Can someone help me with it?
Thanks
UPDATE
So i've tried all the things you guys answered.
So far none of them are working for me..
First;
The background tag, smart idea but my page background is transparant.. So transparant on transparant won't work. And even if i make the background transparent, the line will shine trough it. Are there any solutions to this problem? Because its a easy way to do it with a background tag.
Second;
Paulie_D's solution, i actually don't understand it.. Not advanced enough is guess, tried copying the exact code and change the parameters so it fits in my coding, but didn't work.. Can you help me making it fit my coding?
Simply give your h1 element a background of its own which matches the background of the page.
#diensten .titleBar h1 {
background: #f00;
display: inline-block;
}
You can then space the line apart from the h1 element by introducing some right padding (which will extend the background past the end of the text):
#diensten .titleBar h1 {
...
padding-right: 10px;
}
Your div titleBar is around the h1 title, I don't think using inline-block will solve this.
You should just wrap all around a div :
<div class="titleWraper">
<h1>DIENSTEN</h1>
<div class="titleBar">
</div>
</div>
and your css like this :
#diensten .titleBar{
background:url('images/sep.png') repeat-x;
background-position:center;
display: inline-block;
}
#diensten .titleWraper h1{
display: inline-block;
}
You can get the same kind of style. But the thing, they used some background color around h1 tag to avoid to show the stripped line(used as a background for titlebar). If you are ok with the effect do the following. Add your css like below and check the jsfiddle below.
.titleBar{
background:url('http://themes.webcreations907.com/ninezeroseven/option-two/wp- content/themes/ninezeroseven/assets/img/theme/sep.png') repeat-x 0 55%;
background-position:center;
padding-top:0;
}
.titleBar h1{
display: inline-block;
background-color:#f2f2f2;
}
Jsfiddle link below..
http://jsfiddle.net/vapnF/
A pseudo element will work although it does require an additional span but you can dispense with the image if required.
Codepen.io Demo
HTML
<h1 class="left"><span>Some Text</span></h1>
CSS
h1 {
overflow:hidden; /* hides all extra pixels */
font-size:2em;
}
h1 > span {
diaplay:inline-block;
position:relative;
}
h1.left > span:after {
content: "";
position: absolute;
left:100%;
top: 50%;
height: 1px;
width:2000px; /* some really large number*/
background:red;
margin-left:0.5em; /* or remove and add padding-right to span */
}
I have been searching over the internet for the past few hours looking for a solution to this problem and have been unable to find anything, although a few similiar issues, none appear to be the same as this.
I have a list, which contains 2 span elements. I wish the first span element to float to the left, and the second to float to the right.
In all browsers besides IE 7, which makes has the the right element appearing on the next line.
like so :
LEFT
LEFT RIGHT
LEFT RIGHT
RIGHT - (this is not meant to be in a code block, unsure how to remove it)
(there is more then 3 elements, but that is a general example - the page with the issue is located at : http://www.blisshair.com.au/testing/)
I am unsure of which modifications to make to correct this.
If anyone is able to help me out I would be much appreciative.
Regards.
Try Add this to your CSS this might help you
#basic_info ul {
padding:0px;
margin:0px;
list-style-position:inside;
list-style-image:url(tick.png);
width:100%;
position: relative;
font-size:0.8em;
float: left;
}
#basic_info li {
border-top:0.1em solid #DFDFDF;
background:#F7FEF3;
position: relative;
width:100%;
float: left;
}
try adding clear:right to the li element like
#basic_info li {
border-top: 0.1em solid #DFDFDF;
background: #F7FEF3;
clear: right;
}
I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:
The languages menu should be on top of the blue bordered box, but instead it's beneath.
It works great in FF, this is a IE7 screenshot
blue bordered box css:
.categoryBox {
width:100px;
background-color:#000;
border-style:solid;
border-width:1px;
border-color:#007CF7;
padding:5px;
float:left;
height:260px;
margin-right:25px;
margin-bottom:20px;
text-align:center;
width:200px;
position:relative;
}
language menu css:
#ChooseLanguageDlg
{
display: none;
position: absolute;
width: 87px;
height: 180px;
padding-left: 10px;
padding-right: 10px;
padding-top:0;
margin-top: -9px;
border: none 1px White;
left: 751px;
top: 10px;
font-size:11px;
overflow:hidden;
text-align:center;
}
Note: the languages menu is using a javascript toggle to show/hide.
EDIT:
Adding z-index to the language box does not change the visibility in IE
IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
IE7 Z-Index Layering Issues
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.
Good luck!
Setting the z-index of the language box manually may help. Of course, if you don't want to do this, putting the language box after the blue box in the markup will do the trick too.
You could try adding a z-index. This'll define which element is on top of which element:
z-index
add a z-index to the style for the language box?
IE has some problem with z-index (see Google). As I had to fix a similar problem I was forced to use javascript to hide the background elements, which isn't really suitable for you.
You could try to change the order of creation in the html code, if possible.