My problem is basically described here. I need to float a FB Like button to the right, considering that the width of the button will vary according to the language (and number of likes).
Though it's impossible to manipulate elements in an iframe belonging to a different domain, I still wonder if there is some exotic method to do something about it. I can't believe there is NO way whatsoever to float a damn Like button to the right.
give the button a wrapper.
<div id="likeWrapper">
</div>
<style>
#likeWrapper{
float:right;
}
</style>
I believe that you can't do that just by html and css, because of the fixed width of the button, you will always need to have some extra space on the right, even if you float the button to the right.
There is one quick dirty hack, but it will work only for one particular language -
.like{
position: absolute;
float:right;
right: -20px; /*change this to fit your layout */
}
But you see the problem with this: if the like button is longer in another language, it will go beyond your layout.
So we can do it by javascript (jQuery), something like getWidth of the like button first, then move it to the right by required amount of pixels. I can't help you with the exact code, i am little rusty with jQuery, but that is the basic idea: get width of the button displayed, then change the right: css property with jQuery in order to match your layout.
Just float the actual iframe to the right.
Related
I am working on asp.net webforms. I am displaying a asp:RegularExpressionValidator in a <td> element which validates entry in a textbox. When the page loads, it is displayed as a <span> element with visibility:hidden. The problem is that in Firefox, it still occupies space, which doesn't happen in IE and Chrome. Because of this the html is not displayed properly in Firefox. Is there any solution for this?
"Visibility: hidden;" renders the element but keeps it invisible.
If you intend not to load the element, you should use
.someElement { display: none; }
This would not even reserve the space for the specified element.
Hope this helps..
You should try display:none instead of visibility:hidden.
display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
I'd recommend a different approach... I know that code depends on asp.net... I presume the thing you don't want is to have a bigger spacing because of those validators, or you don't want the layout to be expanding on error highlight, considering that, I'd suggest:
Make all validator messages having position absolute (I hope you have a container for each field, that one needs to have position: relative)
As each validator have absolute position, won't take more vertical space (it's better to add the code via a css class, which should have something like:
.validatorMessage {
position: absolute;
left:0;
top: 2rem /* should be the height of the field */
}
The only issue is, when those messages fires up, will shorten the available space, but I think is a reasonable tradeoff.
Hope this can help
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
This is a longer story I'm trying to cut short. Generally I'm playing around with a website menu that is supposed to partly slide under a partly transparent background gif image, and fully reveal itself only upon mouseover. To do that, I'm using the z-index parameter on both the background image and the menu. But since you can't use z-index on a body background image, I'm using a "regular" image, which I'm setting to 100% width and height - AND for the z-index paramenter to work, I need to specify "position" as well. It seems though that with that combo, I'm basically creating an invisible shield that'll make all links untouchable. I've cooked it down to the following lines:
<style>
#style {
position: absolute;
width:100%;
height:100%;
}
</style>
<div id="style"></div>
test
If you try this, you will see that the "test" link is unclickable (cross-browser).
Does anyone have an idea how I can solve this? Thanks!
<style>
#style {
background-color:#ccc;
position: absolute;
width:100%;
height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>
<div id="style"></div>
test
<style>
#style {
position: absolute;
width:100%;
height:100%;
z-index: -1;
}
.test {
z-index: 99;
}
</style>
<div id="style"></div>
test
Will work too, along with campino2k's answer.
Thanks for the replies, which pointed me in the right direction. It seems like the div does indeed create an invisible shield, and that shield is (more or less) inpenetrable when it comes to underlying links.
Click through a DIV to underlying elements
#Logan: I'm afraid that approach doesn't work for me. You're suggesting to simply raise the link above the div shield - that, however, defeats the original purpose I've described above (the one with the background image and the menu sliding underneath it).
#campino: I thought this was it, but adding a z-index definition to "style" broke it again. The fact that you colored the entire div field helped me understand what you obvously already knew: As long as the div is over the link, it's not clickable, period.
So all in all, I'm concluding that my approach doesn't work. For the actual project I'll probably cut up my asymmetric background image into several pieces, so the div doesn't cover the entire screen, and is only where I absolutely need it.
I think setting a z-index, though it might work doesn't really address the problem but a kind of a hack that achieves what you want.
The root cause of unclickable links is mostly an element that is improperly positioned through floating, display, or position property. This element is displayed in the foreground of your link creating a shield that prevents you from clicking the link.
The solution to this I found is to use javascript/jquery to console.log or alert the id or class of the element in the foreground when you click.
$('*').click(function (){
alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id'));
});
above will alert the element in the foreground. Now that you know the cause look at its style.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page