I have a very simple JavaScript and CSS hover menu setup apart of the menu on my website. It works great almost everywhere, EXCEPT - there is an issue with the z-index on IE8.
.rolloverMenu {
background-color: #4A5508;
border-bottom: 1px solid #AC4718;
border-left: 1px solid #AC4718;
border-right: 1px solid #AC4718;
box-shadow: 2px 2px 2px #AC4718;
float: left;
margin-left: -15px;
margin-top: -12px;
padding: 10px 10px 6px;
position: absolute;
width: 200px;
z-index: 1000;
}
It goes behind my content and doesn't stay on top of, as supposed to. I know theres different stacking rules in IE, so any suggestions??
(Also have tried setting to z-index:9999;)
Set the z-index to the div that your menu is hiding behind to a lower z-index than your menu.
The solution for this is:
Add z-index to parent container (div, table, ul... etc).
Example:
<div class="menu_container">
menu here..
</div>
<div class="other_content">
other data here
</div>
The div.menu_container should have a z-index value to make its content goes over the other divs.
Related
I am trying to create this style directly through CSS. I have the whole button figured out except the tail on the top left corner. How do I add that through CSS? Here is what I want it to look like;
You can use pseudo css/html elements for this
:before and :after
See this hyperlink for a fuller understanding https://css-tricks.com/almanac/selectors/a/after-and-before/
Basically the opening paragrap states
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:
div::before {
content: "before";
}
div::after {
content: "after";
}
this makes your HTML have fake elements that can be styled in the HTML
<div>
before
<!-- Rest of stuff inside the div -->
after
</div>
You can use the border css attribute on the :before pseudo element
HTML example
** DISCLAIMER ** the following CSS was borrowed from Code Pen https://codepen.io/RajRajeshDn/pen/QpYqMW and this user rajeshdn deserves the credit
<div class="speechBubble">
Will do!
</div>
.speechBubble {
padding: 20px;
background-color: #888;}
.speechBubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #888; // medium grey
border-top: 15px solid #888;
border-bottom: 15px solid transparent;
left: -16px;
top: 0px;}
.speechBubble {
padding: 20px;
background-color: #888;
width: 25%}
.speechBubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 15px solid transparent;
border-right: 15px solid #888; // medium grey
border-top: 15px solid #888;
border-bottom: 15px solid transparent;
left: -16px;
top: 8px;}
<div class="speechBubble">
Will do!
</div>
How does it work
By using the border and position property and clever use of color (or colour if your British but that doesn't work in HTML/Web design - have to use the American spelling)
every (most) HTML elements can have a border - even pseudo (fake) elements
the position attribute is set to 'absolute' see css positioning
it is postioned or steered into position using the top and left attributes (I use trial and error to get the right location though smarter people probably calculate the positioning)
as each element has 4 borders: top, right, left, bottom you have to manipulate them so the result ends up looking like a triangle using color and transparency (set the color to the same background coolor as your main speech bubble)
It takes (me anyway) a bit of time to get these things looking perfect and sometimes there are cross browser or device issues (PCs, phones, tablets etc) so sometimes a small effect can require heaps of work
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
i have a div (which is a 200x200 square) inside which i'd like to place a 180x60 image at the top and then some text.
<div class='box_item'>
<img src="<? echo base_url(); ?>img2/avengers_assemble_small.jpg" class='box_item_img'/>
<h4>some text...</h4>
</div>
CSS is:
.box_item {
float: left;
height: 190px;
width: 190px;
overflow: hidden;
border: 1px solid grey;
padding: 5px;
margin: 5px 5px 0px 0;
}
.box_item_img{
width: 180px;
height: 60px;
margin: 5px;
}
i would expect the image to appear at the top of the box with the dimensions specified by the box_item_img class.
instead, i get a stretched image that expands to almost the entire box (a 5px margin is left at the top and on the left).
ideas?
The CSS rules you gave are working fine. There must be some other styling rules interfering, for example, a generic img rule.
Just inspect the img and div elements in FireBug or Chrome developer tools and look what rules are applied to each of them. Then try removing the most suspicious rules one by one to find the real cause.
I want to be able to draw a border OUTSIDE of my Div! So if my div is say 20px by 20px, I want a 1px border outside of this (so in essence, I get a div 22x22px large).
I understand that I can just make the div 22x22 to start with, but for reasons I have, I need the borders to be on the outside.
CSS outline works, but I want only border-bottom or border-top thingy, so something like outline-bottom, which does not work, is what I want.
Is there a way to do this?
Thanks
I think you've got your understanding of the two properties off a little. Border affects the outside edge of the element, making the element different in size. Outline will not change the size or position of the element (takes up no space) and goes outside the border. From your description you want to use the border property.
Look at the simple example below in your browser:
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>
Notice how the border pushes the bottom div over, but the outline doesn't move the top div and the outline actually overlaps the bottom div.
You can read more about it here:
Border
Outline
Try the outline property CSS Outline
Outline will not interfere with widths and lenghts of the elements/divs!
Please click the link I provided at the bottom to see working demos of the the different ways you can make borders, and inner/inline borders, even ones that do not disrupt the dimensions of the element! No need to add extra divs every time, as mentioned in another answer!
You can also combine borders with outlines, and if you like, box-shadows (also shown via link)
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
Usually by default, 'border:' puts the border on the outside of the width, measurement, adding to the overall dimensions, unless you use the 'inset' value:
div {border: inset solid 1px black};
But 'outline:' is an extra border outside of the border, and of course still adds extra width/length to the element.
Hope this helps
PS: I also was inspired to make this for you : Using borders, outlines, and box-shadows
IsisCode gives you a good solution. Another one is to position border div inside parent div. Check this example http://jsfiddle.net/A2tu9/
UPD: You can also use pseudo element :after (:before), in this case HTML will not be polluted with extra markup:
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
Demo: http://jsfiddle.net/A2tu9/191/
Why not simply using background-clip?
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
See:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac/properties/b/background-clip
I shared two solutions depending on your needs:
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
example: https://codepen.io/danieldd/pen/gObEYKj
Way late, but I just ran into a similar issue.
My solution was pseudo elements - no additional markup, and you get to draw the border without affecting the width.
Position the pseudo element absolutely (with the main positioned relatively) and whammo.
See below, JSFiddle here.
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
Put your div inside another div, apply the border to the outer div with n amount of padding/margin where n is the space you want between them.
I have following HTML and CSS, now I would like to position my popup window in middle of screen in any browser window size. Is this possible without JavaScript?
CSS:
.floating-window {
z-index: 9999;
position: absolute;
width: 200px;
height: 200px;
cursor: default;
-moz-box-shadow: 1px 1px 1px #888;
-webkit-box-shadow: 1px 1px 1px #888;
box-shadow: 1px 1px 1px #888;
}
HTML:
<div class='floating-window box'></div>
With percentages, you can set your box such that half of it is on the left side. So
width: 30%;
left: 45%; /* 50% (center) - 15% (half of 30) */
You could also use px but then you'll be limited to an absolute container width. Have you searched around? I know there are some articles explaining this method more extensively than I have.
Sure, it's possible, but how are you going to make it go away?
That's going to need JavaScript...