I got two divs, and ive given the divs backgrounds.
They have exactly the same attributes/css.. But one div is fully clickable (the entire image inside the div area is clickable), the other one is only clickable here and there.. Any ideas?
http://romeon.net/deffrage
Its the two buttons
"Deffrage" "Josef"
its the deffrage button that is not working..
Your .backlava item is obstructing the link below it. You'll need to adjust the dimensions of this item. You might be able to simply remove the explicitly-declared height from the li. A quick test revealed that this fixed the problem, without affecting the layout (you should test further though if you decide to go that route).
In following code, change height from 53 to 3.
<li class="backLava" style="left: 9px; top: 0px; width: 66px; height: 53px; overflow: hidden;"><div class="leftLava"></div><div class="bottomLava"></div><div class="cornerLava"></div></li>
Both link for me. But one of them has the end tags in the wrong order (</span></div></a> where it should have been </a></span></div>).
And this CSS
.robin {position: relative;float: left;margin-right: 100px;}
applies to only one of them.
(And what's the point of the span without either a class or an id? That's a no-op, I'd say).
There seems to be Javascript setting the height of the backlava class to 53px instead of it's default of 16px. Remove whatever Javascript is doing that and you should be good.
Related
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I have a dynamically generated list of moderators on a minecraft network with a tooltip generated for each head that is generated showing their username on hover. The functionality works, the tooltip generates and has the correct username in it however, the position is wrong. It's shifted to the left and falls apart as I move down the list. Here's a gif on what's happening:
I simply do not know what to do in this situation.
Well the plugin seems to work correctly (if the names are okay), I suppose it might be a css issue. Maybe the parts of the tooltip get somehow some margin on them. try to inspect them with right click and see if they have any other style attributes than the defaults.
Anyway, if you could post some of the codes, that would be easier.
Seems like this page has changed since you asked this question, but I bet it was a CSS issue. You probably needed to center the tooltip box relative to its parent. Here's some (unvetted) code that might help. I've only included the properties that would affect the centering on the tooltip container:
.parent {
position: relative;
}
.tooltip-container {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
Notice, you have to set a width on the tooltip-container. margin-left is 1/2 the width, and negative (visualize that left: 50% will put the left edge of the container at the center of the parent, and the negative margin-left will shift the container half the width of the container).
i'll try to make my question really simple 2 you
Basically, i have a DIV, in which i have a picture
What CSS styles should i apply to the picture to position it correctly inside the div
with the condition that everytime i resize the browser window it stays there (inside the div) at the same distance from the borders
Sorry for wasting your time but i'm still a newbie which needs help, thank you alot!
EXAMPLE HERE
code
html
<div id="super_div">
<img id="eyes" src="images/eyes.png" />
</div>
css
that's the question :)
You need to look at absolute positioning. First, you set the containing div's position attribute to relative. For example:
#super_div
{
position: relative;
}
Then, you set the image's position property to absolute and use the top and left or right properties to place it inside the parent div. So, for example:
#eyes
{
position: absolute;
top: 20px;
left: 20px;
}
That's how you make the image keep its current position no matter what. Here's a link to an article explaining the basics. Hope this helps.
This will get it horizontally centered:
margin:auto;
If you need it vertically centered as well then things get a bit more tricky. You can either resort to tables, use a background image (if this is appropriate to your situation) or fiddle with the css. I used the code on http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ as a basis for solving a similar situation I had a while ago..
http://jsfiddle.net/vrcQp/
I want these buttons to be centered (the three versions represent different possible versions of the same thing).. so the css and html has to be the same for all.. just the number of items must change.
I want them to have a set width so I cannot use inline elements (and just text-align center it).
I also need the html mark-up to be simple enough that it could also be used to flexibly stack the buttons vertically with a different stylesheet
Any thoughts on how to accomplish this? I'm not seeing any way to.
Right now there's 1-3 elements.. ideally it would cover potentially any number but that's not necessary. And I'd like for it to work in IE6..
I edited for you: http://jsfiddle.net/vrcQp/6/
Here just replace float:left; by display:inline-block;
But why your button are <div>? It seems to me <button> or <input /> are inline-block by default.
For compatibility, I let you check that: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
If you don't mind changing the width of your buttons from percent to px, then you can use the technique explained in this article. It basically uses position: relative; along with left: 50%; and right: 50%; to center items horizontally in a menu.
jsFiddle example
http://jsfiddle.net/vrcQp/8/
Is that what you are trying to do?
I've been trying to develop a way to make rows of an ASP.NET GridView (or table in general) clickable, whilst still maintaining all the usual actions you'd associate with links - correct right-click context menu, middle-clickability to open in a new tab, etc.
My solution uses jQuery to find <a> tags within each row and expand that <a> tag to the size of the row, thus making it appear that the row is clickable. It all works fine in Firefox and Chrome, but IE gives priority to the the text in the table rather than the <a> tag, so you get a text selector cursor and can't click the link when you hover over the text. This simple example shows what i mean:
<style type="text/css">
.link {position: absolute; z-index: 100; top: 200px; border: 1px solid pink; width: 150px; height: 150px;}
.content {position: absolute; z-index: 0; top: 200px; border: 1px solid red; width: 150px; height: 150px;}
</style>
link here
<div class="content">
You can't click the link when you hover over this text in IE
</div>
This could be by design for accessibility, but if that was the case I'd expect other browsers to follow suit. Can anyone offer any suggestions as to how to avoid the issue?
Have you tried setting the padding of the a to fill the table row?
The tricky part with that is you'd have to do the math so that it didn't exceed the row. So something like:
$("a").css("padding-top", function() {
$(this).closest("tr").height - $(this).height;
});
and so forth, based on the position of the a to the table row.
My thinking is that maybe IE sees overlapping elements (as in positioned on top of one another) as a possible conflict and thus makes a decision to try to accommodate both ("well, the link is yay big, but the text outside of it really isn't a link, so let's treat it like normal text") etc, but that elements that overlap purely for style (which I think padding is considered) would not raise any alarms because, hey, it's just a visual thing!
Just thinking out loud, let me know if it works out.
Probably one of the issues where IE creates a new z-index stacking context where it shouldn't. Either you've got a positioned parent without a z-index (known IE bug), or maybe IE just does that for table cells anyway, since that introduces a new offsetParent.
The normal approach would be to put a link in every cell (containing only a nbsp if it's empty) and use ‘display: block’ to make the link fill the width of the cell.
why not just make the <a> display:block and add the other div inside of it?
Alternative approach: instead of making the link the size of the row, why not make the entire row clickable?
$('tr').click(function(){
$(this).find('a.link').click();
});
You may want to use the css cursor property to make the row appear clickable as well.
The text wont show-through if the element has a background-color or -image set.
try...
$("a", this).css("background-image", "url(/images/spacer.gif)");