I'm designing a wordpress theme for general use, all text links have a border-bottom applied on the hover state. When an image is placed into the post, it inherits this state, which I obviously do not want.
This only occurs when an unaligned image is placed in the post. Aligned right, left & centered images are placed in a div, unaligned images are placed in the p tag by default.
I can't access this unaligned image through CSS, here's the HTML hierarchy when an image is posted....
<div class="the-post">
<p>
<a href="image.jpg">
<img class="gen-class-name" src="location">
</a>
</p>
</div>
I've tired accessing it through CSS by a lot of different structures, i.e.
a:hover img
p a img:hover
p img:hover
.the-post p a img.class-name:hover
and set the border to 0. I'm ready to pull my hair out or just remove the border bottom from all links at this stage :(
I figured it out, adding vertical-align:middle fixed it
Related
I have a chart that's in a div that's set to overflow-y: scroll. The tooltips spill out of the chart to the right and part of them can't be seen.
Apparently, CSS doesn't allow overflow-y: scroll and overflow-x: visible at the same time, hence the obscuration of the tooltips. I also had the same problem with a calendar but it has a setting that changes the direction that it expands.
Is there a way that I can reposition or offset the tooltips such that they expand to the left?
Here's a pic...
I thought this hack would work but it results in the div containing the charts becoming horizontally scrollable.
https://stackoverflow.com/a/39554003/221683
The tooltip shoud be outside the oveflow box if you want to show wider area of it. You can calculate its position in js on mouseover or any other action - without the code I do not know what are you showing, how, and why it is not working as you describe. "the code works fine" - apparently not, if you asked your question...
<style>
.container { position:relative; }
.tooltip { position:absolute; }
</style>
<div class='container'>
<div class='tooltip'>Hi mum, this is long as hell tooltip, not overflowed</div>
<div class='chart'>
... chart data
</div>
</div>
I'm working on a responsive template for a Joomla site. (http://www.lyzarr.com/testsite/de/)
Which can a have a left and right sidebar as well as the main container.
Right now the content goes right up to both sides, but I like to have a margin of about 30px both left and right.
Since the template is responsive, I don't know how to do it.
You can try to add padding in css file to container-content class,
.container-content {
padding: 0 30px;
}
and in
/templates/your_template/index.php
change row class to row-fluid
so your structure will looks like here
<div class="container-content">
<div class="row-fluid">
<div id="content" class="span9"></div>
<div id="sidebarright" class="span3"></div>
</div>
</div>
in bootstrap 2.3.2 if you use row class, your span* (columns) will have fixed width [span9 = 870px and span3 = 270px]. so if you add left / right padding there will not be enough space for content and column. But if you use row-fluid class, your span* width will be set up in percent value.
<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
I'm trying to understand this inline-block behaviour. This is a simplified version of a layout issue I ran into with some responsive elements in my header and menu bars. If the intermediate div is anything but inline-block, the entire nested block will have no height (or visibility, I'm not sure). However, if the intermediate div is an inline-block, it appears to display none with the innermost child (it's shaded in Firebug code, so I'm assuming it's hidden), however the the parent div maintains some sort of default height.
The best work-around I've found, which also sheds some light on where the default height is coming from, is to give the outer div a line-height of 0 or 1px. It still shows a 2-3px height which I can live with for my particular design. However, I can imagine cases where this work-around won't work, so it seems a bit like a hack.
I'm interested in understanding why this particular structure is behaving this way. So far, with my tests, it appears to be unique in terms of not collapsing when its children have no display. When understood properly, is it a bug or the logical result of the way the nested displays are interacting? Is there a better way to control it than with line-height? Can it be forced to display no height at all?
I'm not interested in JS solutions, or solutions which suggest work-arounds involving avoiding inline-blocks. Adding CSS to the existing proposed structure is fine. In my mind, the best solution would show no height for the structure with the least consequences for elements displayed inside the structure when display is not set to none. My question is as much theoretical as it is practical.
Is it a bug or the logical result of the way the nested displays are interacting?
Inline elements (inline-block and inline - which both recreate your issue), have white space after them. This has the same effect as a single SPACE U+0020 character, by HTML specifications. This is what causes your parent div to have a height.
Is there a better way to control it than with line-height? Can it be forced to display no height at all?
It depends, really, on what you consider 'better'. You could float the 'middle' element, instead of displaying it inline. (This may require you to clear the floats in the parent element - there is a common fix for this called clearfix)
Here is sample code showing this method in effect:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
Live example: http://jsfiddle.net/16xp2m3L/2/
I have a responsive wordpress theme and have designed an image with a image mapped active area which when clicks reveals a content div.
When re-sizing window the active area moves (of course) as the image size and position is different. I have tried a plugin http://wordpress.org/extend/plugins/responsive-image-maps/ but this doesn't seem to work unless I am failing to interpret what I am supposed to do.
Below is the html and javascript call
<map name="circle"><area shape="circle" coords="58,290,53" href="javascript:unhide('welcome');"><div class="columns different sidebar right"><img class="scale-with-grid" src="../different.png" usemap="circle" /></div></a>
</map>
Any ideas where I should be putting the coords for the different media sizes? In the CSS, witihin the html calling the #media function?
this is pretty frustrating...
basically i'm creating a menubar on a site, and have used css sprite to have a hover effect where the image changes as you hover over it. this is working fine, but i can't display multiple images inline because i have to use display:block in the css for the sprite/hover class for it to work.
here is some of the css code i have:
.x a {display:block; width:100px; height:100px; overflow:hidden;}
.x a:hover img {margin-left:-100px;}
/* ie6 needs this fix*/
.x a:hover {zoom:1;}
and then here is the code in the php file (it's part of a wordpress theme, this bit going in the header.php file):
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
note: the image used is a horizontal sprite, so two images merged into one (100x100 turned into 200x100).
this alone works fine, but then when i add something to it like:
<div class='x'><a href='#' alt='#'><img src='#' /></a></div>
<div class='x'><a href='#2' alt='#2'><img src='#2' /></a></div>
it makes it go to a new line. i thought it may be a padding issue where it's overflowing on the line, but i've tried doing just two images (total area taken up maybe 210px) and it's in a 911px container area and still goes to a new line.
i've tried using < span> tags, tables, inline-block, and several other things but still no success. at one point i got it to stay inline but then the image was placed beneath all the others, in the correct horizontal position but wrong vertical position.
the goal is to have about 8 100x100 images all in a row in the menu bar, with one spacing in between each one, in a container with width 911px. they all will be in the 'x' class so that the image changes when hovered over.
sorry for writing so much but wanted to get it clear. please help!
The divs are rendering as blocks, which is why the images aren't sitting beside eachother.
If I understand what you're trying to achieve correctly, adding a rule
.x { display: inline-block }
will do what you want.
I made a JSFiddle to try it out: http://jsfiddle.net/XZWzW/