I'm trying to create a responsive site (resize the browser window to see the changes), but I'm unable to center these checkered divs.
http://arunmahendrakar.com/ktw/play.html
The divs are dynamically created and appended to one of the four 'container' divs (#topLeft, #topRight, #bottomLeft and #bottomRight).
I have tried using margin-left:auto; and margin-right:auto on various elements, but that did not help.
Please help me horizontally center the #topLeft, #topRight, #bottomLeft and #bottomRight divs. I prefer a pure CSS solution, but if it is not do-able, I'm ok with a js tweak as well.
There are a whole bunch of different way to do this with some tweaking to the way you build that structure. Here's what I'd do:
First, size things a bit more normally; make the quadrants (#topLeft for example) width: 100% and the individual square sizes padding: 5%. This will give the squares the same size as they have currently, but the 100% width ensures that things are actually centered where you want them to be. At 200% the "center" of a quadrant will be off by 50%.
Next, instead of using float and clear, use display: inline-block on the squares. This will have them all running together on a line; your Javascript can manually break them up by inserting a <br> after every 5 squares. You'll no longer need to add the clearBoth class once you've done this.
At this point, you should have almost exactly what you want. There will, however, be some extra spacing between each row of squares. This is due to whitespace in the HTML, and to get rid of it, just set make sure the quadrants (again, #topLeft for example) have font-size: 0 set.
That ought to do it!
Explanation
It's really pretty simple: display: inline-block obeys text align. By creating your checkerboards out of inline-block elements instead of floats, you can control which side they align to by just changing out text-align.
All the other stuff is just some necessary cleanup work to make this technique work nicely.
Related
For instance, I have 10 left-float divs which take 20% of the container width with an aspect ratio of 1:1 (made using jQuery):
width: 20%;
float: left;
http://i1214.photobucket.com/albums/cc494/Golitan11/example1_zps7a24eb88.png
Now, when I click one of them, they take 40% of the container width (without losing the aspect ratio of 1:1) and the image is changed to a Soundcloud iFrame. In this example, I clicked the second one:
http://i1214.photobucket.com/albums/cc494/Golitan11/example2_zps9b7a9f48.png
The problem is, as you can see, the floating. In fact, I would like to fill the hole on the left. I tried using a table instead of divs, but in this situation, it makes it too hard to move the s to other (even with jQuery) when the clicked is getting colspan/rowspan. Any idea?
Thanks!
This is a follow-up question to a previous question of mine. I am trying to find a way to find the exact location of each line of text in an element.
I was able to find the css lineHeight attribute (see previous answer). The problem is that the height of my element is slightly larger than the cumulative height of the number of lines times the lineHeight.
An example:
I have a <p> that is 2010px tall without padding, border, or margin, (scrollHeight, offsetHeight, and clientHeight all report the same,) and has 89 lines in the browser. The lineHeight of the computedStyle() is 22.
2010 / 22 = 91.37 lines
With small elements I can just floor the value to get the correct number of lines, but run into the above problem with larger elements where I cannot accurately get the exact number of lines.
My assumption is that there is some small space between these lines of text I am not taking into account. Any idea how to find it? Does it have to do with font types? Is it automatically set by the browser? Any documentation would be especially helpful.
Thanks!!
Update:
So I have 26 superscripts in my <p>, each of which protrude up 2px, extending the lineHeight of those lines on which they appear to 24px, which accounts for my missing space. (Woot! Thanks so far!)
I guess the boat I am in now is that I need to find a way to dynamically calculate how much they protrude above the normal top of the line, or discover how much higher the baseline of a <sup> is above the normal baseline. (Vice-versa for a <sub>.)
Otherwise, could I determine that with CSS?
Providing my own answer, as #lanzz's is incomplete to some extent.
If you define the block element as:
div {
font-size: 10px;
line-height: 10px;
height:30px;
margin-top: 0px;
margin-bottom: 0px;
border: 0px;
overflow-y: hidden;
padding: 0px;
}
you will get sufficient space for EXACTLY 3 lines. However, if you have sub-scripts or super-scripts less lines are visible. By removing the overflow you can force it to only display 3 lines of space.
This is demonstrable at: http://jsbin.com/ogoruy/4/
Superscript and Subscript are 'inline-block elements':
The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'.
When there is only one value of 'line-height' for all inline boxes in a block container box and they are all in the same font (and there are no replaced elements, inline-block elements, etc.), the above will ensure that baselines of successive lines are exactly 'line-height' apart.
http://www.w3.org/TR/CSS2/visudet.html#line-height
Superscripts and subscripts usually protrude above and below the line boundaries, as illustrated in this demo — you see that the left example has more apparent space between the lines than the right one, even though they have the same line-height. Unfortunately, browser "typography" (if you can call it that) does not allow you to determine how much the sub/super-scripts protrude, so you cannot take that into account when you calculate the actual line heights.
Given the following images, I'm really not sure how best to approach this issue.
I mean I could make a sprite image and position each link/icon absolute so that when the hover state occurs they don't push each other. However the problem is the clickable area will grow with the hover state thereby overlapping the other buttons and making them hard to click.
Any suggestions/ideas would be greatly appreciated.
Cheers!
My solution thanks to #ioannis-karadimas
http://codepen.io/trev/pen/overlapping-hover-states/2
If there 's no movement involved, there is no reason why you cannot separate the trigger area from the images themselves. Make all triggers invisible divs floating above the graphics, and the clickable area will stay constant and predictable. Changes in the graphics, like overlaying an image with another or changing a sprite's placement need not be related to the clickable area at all.
To help you in the initial positioning and debugging of it, you could initially place a border around each layer, then position them above the graphics. When you are done, remove the border and make the layers transparent filling them with a fully transparent GIF.
Haven't tried but I think it should work.
.button:hover:after {
display: inline;
position: absolute;
left: 60px; // button's width / 2
width: 150px;
height: 150px;
background-image:url('cross.png');
}
You need to create an absolutely positioned elments (or, pseudo-elements) inside the icon containers and show them on mouse over. Thus, it won't affect the hover area.
Here's the example with pseudo-elements, but in case you need support for IE < 8, you can just add normal ones:
http://jsfiddle.net/bFVx8/
Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.
Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/
Also, it would be great if you can explain the CSS theory behind it.
Note: Such misalignment is observed even when the browser is minimized.
Note: My desktop was configured in 1024 by 768 when this is tested.
Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/
To allow for rounding errors, take of a percent. 15% for left and 84% should work.
However, the problem is that you are adding in margins too, that obviously won't work well.
Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.
In other words, margins aren't part of the div's width.
When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...
your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same
if you are giving margin means reduce your width related to margin size
mainContainer css
#mainContainer {
width:75%; //(or) reduce your margin
}
or
#leftNavContainer {
width:15%; //(or) reduce your margin
margin:5px;
}
I have built a music player which loads songs from a database in a random order. I would like to display track info in an info panel. Because I do not know the length of artist/track names, I would like the info to scroll with a marquee effect if it's too big. I'm told browser implementations of the marquee tag are bad so I have got a jquery plugin to do that for me in a nice smooth way (I assume the auther knows why they're bad and has sorted it).
So far so good.
The trouble is the marquee doesnt work out whether it is needed, so I would like to run a check to see if it is necessary (ie if the length of the text warrants it or not) before calling it.
Now I'm sure the problem here is a simple css one but I cannot for the life of me figure it out - you know when you've been staring at something too long...
What I am attempting to do is call the marquee on an inner div if the contents of the inner div are bigger than the outer div but no matter what I do I can't seem to get my inner div to stretch horizontally beyond my outer div unless I set a fixed width (which isn't very helpful since I don't know the width of the content).
Here is my simplified HTML (wrapper contains some other stuff floated either side):
<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>
Here is my simplified css:
#mplayerinfo_wrapper{
width:545px;
height:30px;
margin-top:32px;
display:inline-block;
float:left;
}
#mplayerinfo_trackinfo{
height:30px;
width:238px;
display:inline-block;
overflow:hidden;
float:left;
}
#ti_inner{
float:left;
height:30px;
width:auto;
}
I am then hoping to use jquery to get the width of both elements, compare them and if inner is bigger than outer, launch the marquee like so:
var owidth=$('#mplayerinfo_trackinfo').width();
var iwidth=$('#ti_inner').width();
if(iwidth>owidth){$('#ti_inner').marquee();};
If this can't be solved through css, is there away to get content width with jquery/javascript. Any ideas? Thanks in advance
Since you already know the width of the outer div, it may be easier to compare against that measurement rather that ask for that width dynamically. I've tried to re-create your simplified program and the problem I ran into was that the width() function only returned the default width of the div's, not the width as modified by css.
Your CSS looks appropriate for what you are trying to accomplish. I would try this for the comparison:
if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) {
$('#ti_inner').marquee();
}
I have had better results when using JQuery's inner and outer measurements.
the ti_inner CSS needs to have
white-space: nowrap;
to prevent the div just increasing in height,
We can then check the widths to see if a marquee is required.
I prefer to check the scrollWidth and the offsetWidth of the outer mplayerinfo_trackinfo instead of comparing the width of the 2 separate divs, mainly so that and margins,borders or padding dont get in the way, but in this example it doesnt really matter.
Heres a sample on JSFiddle marquee if required
Sorry it's in mootools but I'm new to all this web stuff myself and have not used any JQuery but from what I've read it should be easy to swap.