I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:
#custommenu {
position:relative;
z-index:999;
font-size: 14px;
margin: 0 auto;
padding: 10px 16px;
width: 918px;
background-color: #FB0A51;
border-top-left-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
}
Whereas I have my search box in a separate file which looks like this:
<div class="header">
some code
<div class="quick-access">
some code
<php echo $this->getChildHtml('topSearch') ?>;
</div>
</div>
I tried adding the following to the css file so that the search box comes on top of the menu but it did not work
.header .form-search {
position:absolute;
right:29px;
z-index:1000;
top: 80px;
width:315px;
height:30px;
padding:1px 0 0 16px;
}
Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?
EDIT: Here's the css of the div's which contains the search box,
.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }
And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')
#all
Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.
The code looks like this now
.header{ position: relative; z-index: 4000; }
.header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}
This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.
Try with float? or display:block;
If I was using this code, I would write the css like this:
position:relative;
left:some value;
top:some value;
Z-index: -999
The search box appearing behind the menu sounds like a z-index issue - perhaps the container of the menu has a higher z-index to the search box, try changing the searchbox z-index to 999999.
z-index requires non-static positioning however it is not clear from your code examples which type of positioning is actually used by the elements you are trying to stack with z-index.
Either way here is a very helpful tool which might help you determine which type of positioning you have to use for your elements in regards to how they relate.
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp
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/
Div containaer and p element overlapping another Div that contains an image that needs to respond to a :hover CSS event causing only a small portion of that Div container to be able to sense the mouse hovering over it.
How do I solve this?
z-index isnt effective for some reason either.
Try and hover your mouse over the image.
Here Is The JSFiddle.
As #colandus said adding the position: relative and the z-index to the img should indeed do the trick.
However, it seems to me like you are over complicating things a bit. Why the position relative on the p? that is the one that is causing the problem...
What you are trying to do is default behavior if you use some simpler html / css. Something like this:
the HTML with some div's removed:
<div class="insp">
<h3>Thomas Edison</h3>
<img src="http://www.placehold.it/250x150">
<p>Lorem Ipsum is s...</p>
</div>
and the css with the position: relative removed from the p:
.insp {
border: 2px solid black;
margin: 10px 0px;
padding:10px;
}
.insp h3 {
margin-top:0px;
background-color:#FFDE5C;
}
.insp img {
float:left;
border: 5px solid #FFDE5C;
height:150px;
margin: 0 20px 20px 0;
}
.insp img:hover {
border: 5px solid #ffffff;
}
.insp p {
margin: 40px 40px 40px 80px;
}
And as you can see (http://jsfiddle.net/7fvcD/4/), it looks exactly the same and there is no hover issue anymore.
Put image as position: relative, then z-index will work.
Add the following CSS:
.insp-image img {
position: relative;
z-index:1000;
}
http://jsfiddle.net/7fvcD/5/
Don't need to change your markup ;)
Try this approach: Put the <div> with the <img> inside the <p> tag and set some margin to the img div.
Updated JsFiddle
It should be simple to center text in a button. Unfortunately, across different browsers and platforms, I get different results.
I've tried for hours to fix it, but nothing works everywhere.
Chrome, mac OS X:
(source: d.pr)
Chrome, Windows 8
(source: d.pr)
IE 10, Windows 8
(source: d.pr)
So, yeah. The big block doesn't appear in IE if I set a defined height, but I don't get why it breaks down in the first place.
Here's the code:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 3px 18px 3px 10px;
margin-top: 6px;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap;
.btn-call-to-action a:after {
content: url('../img/general-white-arrow.svg?1369574895');
position: absolute;
width: 35px;
right: 15px;
top: 0px; }
and the HTML (pretty simple) :
Want more ?
and the site: http://aurelieremia.be/tfa/
// edit: I think I get it. Still not centered in windows but by resetting the line height, the button looks a bit more normal. IE problem resolved, I'll try using a background-image instead (thanks Ana)
I'm not sure if this will help but cross browser centering in css is a big pain so I use Twitter Bootstrap and overwrite some of the classes.
If this sounds like something you'd consider you can check out the solution here
Leave :after in static .
vertical-align to middle or explicite value (depends of where really stand arrow in svg/img).
white-space:nowrap to parent box to secure, but not necessary:
http://codepen.io/gcyrillus/pen/vzrGj
How about something like this:
HTML:
<a href="about.html">
<div class="btn-call-to-action">
<span>Want more? <img src="http://bkids.sisuweb.co/wp-content/uploads/2013/04/postArrowR.png" />
</span>
</div>
</a>
CSS:
.btn-call-to-action{
width:160px;
height:80px;
background: #8e8287;
padding: 3px 18px 3px 10px;
margin:8px;
color: #f5f3e2;
border-radius: 2px;
display:table;
text-align:center;
}
.btn-call-to-action span{
display:table-cell;
vertical-align:middle;
}
Fiddle here: http://jsfiddle.net/MQHVE/3/
The important part here is to have the wrapper (the a tag) display:table and the content (span) display:table-cell. Then you can apply vertical-align:middle to the span.
I am implementing a design which contains elements which are semantically headers (h3, h4, etc.), are full-width block elements, and are followed by a vertically centered horizontal line which extends the full width of the header a la:
I know I could take care of this by wrapping each header in a <div> and inserting another block-level element after it but would prefer not to pollute my HTML like that. My first inclination was to use a ::after element on the headers, like so:
.line-header::after {
content:'\00a0';
display: inline-block;
float: right;
width: 55%;
margin-top: -12px;
border-bottom: 1px solid gray;
}
However, this requires making the ::after element fixed-width, which obviously doesn't work with different-width headers: http://jsfiddle.net/nbSTf/
Any ideas on how to get a variable-width line which will fill the space to the right of the header, without inserting extra elements into the HTML?
EDIT: Tyriar's answer below (suggesting drawing the line full-width behind the header and setting the background-color to erase the line behind the text) reminded me that this is taking place in front of a repeating background image - so no background tricks are possible unfortunately.
Here's a method you could do it with, unfortunately it relies on an attribute (not necessarily title), this could easily be set programmatically with JavaScript though.
It uses :before and :after pseudo elements, :after is used to draw the line the full width and :before is used to draw white background behind the text of the size of the text. The pseudo-elements need their z-index set correctly to layer in the correct order.
jsFiddle
HTML
<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>
CSS
.line-header {
margin-top: 15px;
position:relative;
}
.line-header:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: attr(title);
background-color:#FFF;
color:#FFF;
z-index:-1;
padding-right:.5em;
}
.line-header::after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:#555;
height:1px;
z-index:-2;
}
Try this for your CSS:
EDIT:
body { background: red; overflow-x: hidden }
.line-header {
margin-top: 15px;
margin-right: 5px;
display: inline;
z-index: 100;
float: left;
clear: left;
}
.line-header::after {
position:absolute;
content:'\00a0';
width: 100%;
margin-top: -12px;
margin-left: 5px;
border-bottom: 1px solid gray;
z-index: 0;
}
I only tested this in Chrome. Here's the Fiddle.
Well, how about doing it in reverse? Draw the lines (in any way you like) then use :after to insert the headers, no additional HTML, but some extra CSS.
HTML
<div id="header1"></div>
<div id="header2"></div>
To Draw the Line, simply border-top-style:solid;.
To Write the headers, :after.
CSS
div
{
position:relative;
border-top-style:solid;
margin-top:20px; /* just for spacing */
}
div:after
{
display:block;
background-color: #FFFFFF;
position:absolute;
top:-10px;
left:0px;
}
#header1:after
{
content:"Hello;"
}
#header2:after
{
content:"Hello Again";
}
You'll get something like this.
For more customization, you can enlarge the font, change the colors, add padding (for more white space), just change top the way it suits you.
I am having an issue in trying to get the 2 product ul items to sit within the first tab, they are always outside the tab
if i remove the:
float: left
from the
.featured-products-grid li.item { float:left; width:132px; padding:25px 5px 30px; }
thin it works, but the products are not aligned horizontally.
here is the page
http://khine.3b1.org/jquery/product.html
what am i missing
I think you just need to clear your floats. If you add the following style to ul.featured-products-grid you should be good:
ul.featured-products-grid {
overflow: auto;
width: 100%;
}