Please go to the jsfiddle: here.
Click the last image with the "+" sign, this will open a popup with an ADD button, please click it.
The problem is, and I can't figure it out, why if I add multiple elements (clicking the ADD multiple times, like 4-5 times) the distance between the new elements is smaller than the distance between the predefined elements? I am using the same CSS for it, the same HTML structure.
The reason for that is that <li> tags have a natural spacing.
You have a few options:
Either stop using li tags and use something else.
<li> tag for each row, like it should be.
Change natural <li> behaviour
li {
display: table;
}
Edit:
Another option, as mentioned by Florin, is:
a {
float: left
}
Anyway, it's all about the li behaviour. There are many ways to solve it.
You use inline-block for the images.
The images are layout by using display: inline-block.
In your HTML code you have whitespace between the images. That whitespace is shown in the website.
The programmatically added images are inserted without whitespace between them, so they are nearer together.
Check here for strategies against the whitespace:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
I discovered that if I add to the a tags:
a {
float:left;
}
it will remove the unwanted whitespace.
Related
I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!
Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}
I have a problem. I have an Instagram feed by Instagrams API, which pulls image, likes, comments and description. The description under the image is shorted by this css:
#instagram-feed .meta-data p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #000;
}
I have also added a script which creates links on hashtags, so you can click them directly in the feed.
This works great. Until you are starting to tab the page. Since the text/hashtags is hidden after one row, it is still in the HTML-structure, just not visible.
So what happends when I am tab the the page and get to the Instagram feed is that the tabindex finds the hidden hashtags. But they are invisible. Only the focus frame shows around the hidden hashtags.
tabindex="-1" removes element from tabindex which I want to add to overflowing/hidden links, but I can't do this manually since the description is dynamically created. I need better CSS (If possible) or somekind of jQuery. But I have no idea how.
So my question is, how do I remove hidden links from tabindex? :)
Edit:
Trying this to see what elements is inside or outside the parent:
http://jsfiddle.net/fprm7mgd/8/. The link inside the third paragraph should be red.
On the site the position().left; in the third p is something like 670px, when running console.log. But in reality the a is about 130px right from its parent left side. It seems like position().left; goes from parent div, not from parent p...
The solution is to add... position:relative ... to the paragraphs.
position().left use its offset element, which in this case is <html>. In other words, position().left works exactly as position: absolute in CSS. If the parent is not position: relative it counts from the <html>-element.
Solution: http://jsfiddle.net/fprm7mgd/47/
Good evening gentlemen (and of course ladies),
I'm currently experiencing some problems with CSS and the dynamic positioning of some elements in one big container. And I hoped that anyone of you could probably know the solution for my problem.
Maybe I just start with the explanation, which I will split in three parts to make it easier to understand. In the end of this post, there are two links, one for the steps to visualize them and one for the example jsfiddle for step two.
Step one:
There is one div.container which has the height 255px and a dynamic width of 33.3%. This container contains two divs: div.left and div.right. The div.left has exactly 150px width, which should bring the div.right to fill up the whole remaining space.
I already tried to solve it this way, which works, but not for the next steps.
.left {
float: left;
width: 150px;
}
.right {
overflow: hidden;
}
Step two: Now, there should be three different elements in the div.right, a h3, span and p element. The h3 and span should just behave like a regular element, and use the space they want to use (like for displaying text). But the p element should take the whole remaining height of the div.right. I achieved this single step by using the code in the jsfiddle link in the end of this post. And it looks really cool, but it's not compatible with the next step. As you maybe already guessed it.
Step three:
As the p.description element contains a description, I want to put as much information into this small element as possible. Therefor, I hoped to use overflow:hidden in combination with text-overflow:ellipsis, but this didn't work. Due to some strange reason, the p.description element was placed right of the h3 and span elements after I added the overflow:hidden style.
And additionally, there is an extra div in the footer of the div.right, which is div.btns. This div contains about 3 plain links and is placed absolutely in the right bottom of div.right, and I only want to have the p.description element to wrap the text around it.
Right now, I doubt, that all of these steps are solvable by only using css. At least, I wanted to have the positioning of the elements with css and the truncating of the text could be done in Javascript.
Is there anybody out there, who has an idea, how I could solve my problem?
Many thanks in advance!
Attachments:
All three steps in one picture: http://cl.ly/image/2t2a3o3o2l0s/steps.png
JsFiddle for step two: http://jsfiddle.net/S8g4E/1188/
Check this Jsfiddle: http://jsfiddle.net/Mohamed_nabil/7btp2/
In css: the max-height of the ellipsis in lines(52 & 61) are now 200px,
this can be changed with jQuery if you want to, on window resize or load.
max-height: 200px; /*This value could be changed with jquery*/
I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});
I have a PHP page that is bringing in results from a Database and displaying them on a page. Certain images have a red 'ball' to the left of their name to dictate that they have more information to be seen.
For example, there is 30 on one page, 12 of which have a red ball. I need to be able to manipulate the positioning of the first ball and leave the others as they are.
<img class="premium-icon" src="../../images/ball.png" alt="Premium Listing" />
<a href="page.php?cmd=auth&src=book&id=968365&a=CVTYJH5kavEbhwSDs" target="_blank" alt="" title="">
<p><span style="">Result</span></p>
</a>
This is how they are layed out, each image has the same class and I'm unable to stop this.
I'm looking for a pure CSS solution, however a Javascript one would be appreciated.
Thankyou for any help.
EDIT
A little bit more information, all of this is brought in from a Database so I don't know if in the final product the first image will even have a premium-icon. This is all in case that image does, as that image needs to be moved. So, it will always be the first-child as I'm only trying to select the first ever premium-icon.
You can use the first-of-type pseudoclass: http://jsfiddle.net/WAG6e/.
Edit: As BoltClock mentions, :first-of-type ignores the class, so actually you'd need to build your HTML such that the first img is the one you want to style. Then, it's a matter of specifying the tag name:
img:first-of-type {
border: 1px solid red;
}
The pseudo-class that you are looking for is the :first-child. According to w3schools, it works on all major browsers, since you have a <!DOCTYPE> declared.
So, a sample CSS to your problem:
img.premium-icon:first-child {
margin-left: 10px;
}
Remember that if your img isn't the first child on the results container, then the desired pseudo-class will be :first-of-type, but it only works on IE9+.
But, as pointed by #ptriek, :first-of-type can't be used together with class names. Then, you would need to change your HTML.
Personally, what I always do is a class name like .first on the desired element, set on my serverside code, so my CSS will be simple and working on all browsers:
img.premium-icon.first {
...
}
What about img:first-child { ... } ?
$('.premium-icon:first')
use that
Assuming class "premium-icon" is reserved for the relevant pictures, this JS could help:
var a=document.getElementsByClassName("premium-icon");
if (a) if (a.length>0) {manipulate_image(a[0]);}