I have inserted a search bar by using my websites code injection points and now trying to re position it below my site tag line. Below in an screenshot of what I am trying to accomplish.
My website is www.jobspark.ca
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$("#banner-area").prepend("<div id='banner-tagline'>Your British Columbia and Alberta Job Search</div>");
});
</script>
<div class="positionedSearch"></div>
Current CSS for the search bar includes
.positionedSearch {
width: 400px;
height: 45px;
}
I suggest actually putting it in the HTML where you want it placed, as opposed to positioning it from another place...
You can use:
.positionedSearch {
width: 400px;
height: 45px;
position: absolute;
z-index: 2;
left: 40%;
top: 330px;
}
This only works for the full screen media query. Needs to be adjusted for the smaller screens.
Like I said, it would be much better just to place it in that relative area via the JS.. then you can avoid using absolute positioning.
Based on your other question:
Find this line in your CSS and modify it to this:
.sqs-search-ui-button-wrapper {
background: rgba(255, 255, 255, 0.66);
max-width: 280px;
}
You can do:
.positionedSearch {
width: 400px;
height: 45px;
position: absolute;
top: 350px;
left: 50%;
margin-left: -200px;
z-index: 2;
}
Hey all i have a wonderful CSS problem here.
I am trying to use an APDIV that has a style of:
#name {
position: absolute;
width: 356px;
height: 25px;
z-index: 1;
left: 43px;
top: 1000px;
}
#donation_form {
margin-left:auto;
margin-right:auto;
width:785px;
height:520px;
background-image:url(../img/formBG_ChattClub.gif);
}
And that looks great in dreamweaver in design view:
BUT when i go to view it in the browser it shows like so:
The HTML code for the name is:
donation_container does not have a style associated with it.
What am i missing so that it lines up with the boxes just fine without any problem??
Thanks!
#donation_form {
position: relative;
}
#name {
top: 3px;
left: 5px;
}
Beside what you have written already
Hi just looking to see if anyone can help me out with a small problem.
I'm trying to layer images using the z-index in css but for some reason even though i have given the div that i want on top the higher index value the layer I want beneath keeps pushing it down or covering the layer I want on top:
#work-img {
background: url(../images/blots2.png) no-repeat scroll left top transparent;
width: 960px;
height: 601px;
position: absolute;
top: 610px;
left: 0;
visibility: visible;
z-index: 6;
display:block;
}
#work {
background: url(../images/my-work.png) no-repeat scroll 0 0 transparent;
position: absolute;
width:337px;
height: 35px;
left: 35px;
top: 660px;
visibility: visible;
z-index: 700;
display:block;
}
Not sure what im doing wrong so any input anyone can give me would be really great thanks!
I don't see a problem with your css. I did a quick example here and worked fine using the same properties as you.
Aren't these divs inheriting some property of another element? You can see that using firebug.
I've got 2 elements, 2 images of exactly the same dimensions, positioned one on top of the other. Say they're called A and B (A is the top one). What I've done is made it so when you hover over A, its z-index decrements by 2 so that B is now on top, and B's hover: increments its z-index by 2 so it's now higher by 1 than A's original z-index (thus image B stays on top until you remove mouse). So basically...
#A {z-index: 5;}
#B {z-index: 4;}
#A:hover {z-index: 3;}
#B:hover {z-index: 6;}
This works perfectly in Firefox and Chrome, but IE doesn't want to hear about it, and my images keep spazzing while hovering over them. Any help is appreciated. Positioning is Absolute, if that matters.
#jklm313
That actually works in my IE9 as well. Maybe I should post the full code since one of my "images" is actually a social network button. So here it is:
HTML:
<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>
CSS:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
position: absolute;
z-index: 3;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}
#myTweet:hover {
position: absolute;
z-index: 6;
}
tweet.php:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Link to demo website: ***** -- scroll down to Tweet button
This will be up only for so long, because I don't want people to have access like that <.<
Just going to rewrite my whole answer now the source code has been provided.
All "modern" versions of IE, when not in quirks mode, accept this code perfectly fine for divs and links. The problem in IE arises for iframes and other unusual elements, at which point its rendering engine seems to fail. (Shock!) You'll get this flickering for no apparent reason, except perhaps the conflicting doctypes in the iframe and page, which I would also try avoid if possible.
Presuming this link is generated by twitter, I would advise a fallback approach for IE. Instead of hovering between your button image and a twitter provided button image, I would just manipulate the css of the button twitter provided inside the iframe using javascript.
document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';
The button looks to be generated by HTML5 rather than being a static image, so it shouldn't be difficult to manipulate:
.myTweetBrown:hover {
background-image: url('../images/tweetBrown.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 20px !important;
width: 55px !important;
}
.myTweetBrown:hover * {
display: none;
}
The other approach you could take is keep doing what you were doing before, but applying the styles differently like so, dependant on display:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
opacity: 0;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 3;
}
Technically, CSS doesn't actually specify how and when elements go in and out of the "hover" state. So it sounds like when A goes under B, your version of IE removes the hover state from A and it immediately pops back in front of B, before B gets the hover state and pops further in front.
How about wrapping the two in a div, and testing for the hover state on that? Does that work?
http://jsfiddle.net/X64au/
Try wrap them in a div
.parent
{
position:relative;
z-index:1000;
}
.a
{
position: absolute;
z-index : 1001;
display: inline-block;
}
.b
{
position: absolute;
z-index: 1002;
display: inline-block;
}
This is the HTML:
<div id="target"></div>
CSS:
#target {
position: relative;
width: 200px;
height: 200px;
background: #F00;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#F00,endColorstr=#F00)";
}
#target:before {
content: "content from before";
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
}
here is the jsfiddle:
http://jsfiddle.net/8BzW6/
If you comment the filter then the "after" element is not cropped by the parent element (#target).
Do you know how to solve this?
(I need a gradient and I don't want to use an image)
Using Microsoft's filter for me is a bad practices, it will always cause issues. And if you combine it with modern technics like CSS3 its getting even worse.
What about using inline 1px gradient image using data64?
Here is a generator: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/