I am developing a tab strip. I want the selected tab has to overlap 1px on the container div so that it will have look as it is part of the container...Here is the jsfiddle.
I dont want to make it using script. I would like to prefer CSS style first.If you say that it can't be done using pure CSS, then only can go for script.
It should look as follow:
see the demo
Add this style to your fiddle
.vUiTsContainers {
z-index: 1;
top: -3px;
position: relative;
}
.irmNText {
z-index: 10;
position: relative;
}
Hi now define some css in your css as like this
.vUiTsTabs > ul{
overflow:hidden; // remove this line
}
or add this css
.vUiTsTabs > ul:after{
content:'';
overflow:hidden;
display:block;
clear:both;
}
.vUiTsTab.vUiTsTabSel{
position:relative;
}
.vUiTsTab.vUiTsTabSel:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
height:3px;
background:#F3F3F3;
}
Live demo
I also created a live demo but was beaten to it due to the awfully slow computer I'm using
Related
On my webpage I have a few divs and CSS classes setup to position the div's in the corners of the page. Unfortunately, this does not seem to work unless you submit a URL (You can submit http://google.com to test)
Why does my code only work if there was a form being submitted?
Here is my CSS:
.counter{
position:absolute;
bottom:3;
right:3;
}
.createdby{
position:absolute;
bottom:3;
left:3;
}
.changelog{
position:absolute;
top:3;
right:3;
text-align: right;
}
and the HTML is:
<div class="counter">Views: 16419</div><br>
<div class="createdby">Created by /u/Albuyeh and /u/Aiwayume</div><br>
<div class="changelog">
Giveaways DB Last Updated: 1m 43s<br>Sweepstakes DB Last Updated: 6m 40s<br></div>
Your syntax is incorrect in at least one place.
Check this rule:
.changelog {
position: absolute;
top: 3;
right: 3;
text-align: right;
}
3 what? pixels? ems? percentage?
What you've got now in your css is saying that the div should be 3 from the left. When the page opens, it doesn't know whether you mean 3 pixels, 3 feet, or 3 seconds. To fix this problem, add a unit after the number:
.counter{
position:absolute;
bottom:3px;
right:3px;
}
.createdby{
position:absolute;
bottom:3px;
left:3px;
}
.changelog{
position:absolute;
top:3px;
right:3px;
text-align: right;
}
It's hard to explain without a picture, so if your willing to help, visit this page: http://www.laoistidytowns.ie/node/2
Ok, so on this photo I have the following CSS: (note this is just one picture, but i have classes for each placename)
.ballacolla
{
float:left;
position:relative;
width:200px;
height:200px;
margin-right:40px;
margin-bottom:46px;
}
.ballacolla a
{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */ <br>
filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
.innerbox
{
position: absolute;
bottom: 0;
width:180px;
height:30px;
background-color:#000;
opacity:0.75;
filter: alpha(opacity=40);
padding-left:20px;
padding-top:10px;
z-index: +1;
}
p.boxtag
{
color:#fff;
}
HTML:
<div class="ballacolla"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
.ballacolla = the dic square container
.ballacolla a = allows the div to be clickable
.innerbox = dark grey box on the bottom
.boxtag = the writing in the innerbox
My problem is the innerbox (grey box) disappears if the link is working. How do I stop the innerbox from disappearing?
Most likely, even with HTML5, you are having difficulties with the div in the link...mixing inline with block styles.
I would take a look at some of the other threads on here pertaining to that. This one points you to a good method of styling a span as a div using a special class and the display;block method: div inside anchor
you can always go for the onclick=(); event on the div as well and eliminate the a tag all together.
In your styles, it says opacity:0 for a tags. Add a class a below.
.field-items a{
background:none;
opacity:1;
}
Ok guys I figured it out. I had to close the tag right after the first div in my html. ie my html now looks like : <div class="abbeyleix"><div class="innerbox"><p class="boxtag">Abbeyleix</p></div></div>
the reason you don't have anything between the tag is because you actually are doing all the work in the CSS... such a simple fix, but it's working now, thank you all for your help
Please see my fiddle. In this fiddle, the black box is fixed on page. If we scroll the page the black box is overlap the map also. I want to stop the fixed position before the map. If we scorll the page after the map, black box should stay before the map. How can I do?
CSS:
.item{ background:#eee; padding:10px; width:50%; margin-bottom:15px;}
.new_icon{ position:fixed; width:100px; height:100px; background:#000; right:10px;}
http://jsfiddle.net/6f8HK/
No need for javascript, add an id to your iframe, set the css to:
#map
{
position:relative;
z-index:2;
}
And give your fixed element a lower z-index:
.new_icon {
position:fixed;
width:100px;
height:100px;
background:#000;
right:10px;
z-index:1;
}
Js fiddle
Add z-index: -1; to .new_icon
DEMO
Try this Working Fiddle.
JQUERY:
$(window).scroll(function() {
if ($(this).scrollTop() > 450)
{
$('.new_icon').fadeOut();
}
else
{
$('.new_icon').fadeIn();
}
});
NOTE : use can use .show/.hide if you don't like the fadein/fadeout effect.
I have a fixed navigation(header on the homepage. I am using wordpress therefore this fixed header is in the header.php I do not want the fixed header to also work on the other pages. How can I do that:
This is the style I am applying:
#header, #footer{
position:fixed;
display:block;
width: 100%;
background: #05556d;
z-index:9;
text-align:center;
color: #f2f2f2;
}
#header{
top:0px;
}
#footer{
bottom:0px;
padding:10px 0px;
font-size:12px;
}
What Can I do to fix this ?
Look at the classes added on the body element. Multiple classes are there and differ with the template used, the current page etc caetera.
Use one of these to condition the position css property on your header.
#header, #footer{
display:block;
width: 100%;
background: #05556d;
text-align:center;
color: #f2f2f2;
}
#footer{
padding:10px 0px;
font-size:12px;
}
.homeClass #header, .homeClass #footer{
position:fixed;
z-index:9;
}
.homeClass #header{
top:0px;
}
.homeClass #footer{
bottom:0px;
}
If you can't see a different class you can add one conditionnaly in functions.php:
add_filter('body_class','custom_body_class');
function custom_body_class($classes) {
if(YOUR_ISHOMEPAGE_CONDITION) $classes[] = 'homeClass';
return $classes;
}
[EDIT]
Looking at the staging version I see you theme adds no class to the body whatsoever. Look at header.php and find the opening body tag. If it has no class attribute, then add
<body <?php body_class(); ?>>
Also
The code in page-js.js invokes the jQuery fullPage plugin on every page. You should edit it so it checks the body class before calling fullPage like so:
if(!$('body').hasClass('home')){
$('#fullpage').fullpage({...});
}
With CSS
The body class should be .home on the home page. So you can make the header fixed on the home page and not the other pages by prepending .home to your styles:
.home #header, .home #footer{
position:fixed;
...
}
Or as #Armel answered, perhaps the class differs depending on the template/theme. You should be able to look into it with a browser developer tool and replace .home with whatever class it ends up being.
Might need to do the opposite and declare that all other #header and #footer elements are set to position: static, and it might be required to declare that it's important to override other styles: position: static !important.
With WordPress PHP function
Alternatively, you could make your own class in header.php by using WordPress's is_front_page() function. Add a class or even just add the styling conditionally.
I want to keep a div on another div, which is linked to any site.
here is my css
.link_div a {
float:left;
width:80px;
height:20px;
background:yellow;
}
.over {
position:absolute;
left:0;
top:0;
background:red;
width:80px;
height:20px;
}
here is html
<div class="link_div"> HELLO </div>
<div class="over"></div>
Is this possible to keep "Over" div on top and link should be on ?
This is an awesome post:
Click through a DIV to underlying elements
Adding this css to your .over should do it:
pointer-events:none;
plus for IE:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background:none !important;
You could get something like this then:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
All credits go to this guy's post of course.