So I have some problem with the way the pagination buttons remain in the same place(at the bottom) even though there are only 2 entries in the last page
http://srikanthrajan.com/test-table/tablesorter.html
Can I do something about it so that the pagination buttons move on top depending on the number of entries?
currently it is positioned as "absolute" in css, try to change it to relative
instead of top: 280px; position: absolute;
write these in style:
clear:left; float:left;
and also dont forget to float the table to left as well, hope this helps!
Related
I have three buttons that set different output text when clicked and I'm trying to use W3.CSS animations to "slide" the text in and out. I almost have it working using two separate divs but cannot get them to align correctly under the buttons; the div for every other button click displays lower than the previous one.
I've tried float, vertical-align: top, display: inline-block, and a few other things so far but either used them incorrectly or something else (a conflicting parent div style, maybe?) is causing problems.
Image with a button's output displaying right under the buttons (as it should)
Image with the next button's output displaying lower than the first
I trimmed code that wasn't relevant while also leaving what was necessary to show the div structure for this particular section.
HTML: The divs with IDs old_output and new_output are what I'm trying to align below the buttons
CSS: div.button_output_container and div.button_output are used for the output divs and their container
JS: Handles button clicks, decides which animation should be used, and sets the output text (aside from demonstrating the issue I think it's mostly irrelevant)
JSFiddle link
I am not sure I totally understand your alignment requirement,
but if you just want your divs to render on the same height, you could opt for position:absolute like so:
div.button_output_container {
position: relative;
}
div.button_output {
margin: 16px 24px;
width: 450px;
position: absolute;
}
I am trying to cycle through two sets of images using some Javascript. In order for each image to replace the old one as it cycles, I need to use css and set the position to absolute.
I'd like to align the image sets in a html table. If I don't specify positions within the css, the two image sets are on top of each other. If I do, they ignore the table, which I think is caused by the absolute positioning.
Rather than display a lot of code here, I will share a JSFiddle: http://jsfiddle.net/n342aadc/3/
Add:
td {
position: relative;
width: 50px;
}
.container img.
.container1 img {
position: absolute;
}
fiddle
I think you need to specify a width for td otherwise it seems to collapse.
I've got HTML+CSS code. I need 1st div (row-1, white colored) to take first half of the container height, and 2nd div (row-2, orange-colored) to take the second part.
Here is my html:
http://pastebin.com/ipiEKHBZ
and my css:
http://pastebin.com/jtxw695F
Revised answer: After realising the default approach did not work with your HTML, this should work. You have classes .content-row-1 and 2 respectively. You can use those to tell the corresponding rows to always use a certain portion of the height. For this to work you also need to manually fix the positioning. (Someone correct me if this can be done more elegantly) For example those classes could look something like:
.content-row-1 {
background: #eee;
position: absolute;
top: 10%;
display: block;
height: 40%;
width: 100%;
}
I noticed that your footer already takes 10% of the height and and assumed you did not want any overlap or gaps. For that to work you should also give your header a percentage for height (10% in my example to keep things simple).
And for the future: try using https://jsfiddle.net/ when showing your code samples. I put it together at https://jsfiddle.net/kvbyk3f1/.
I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!
I am doing a javascript slider for practice.
However, the picture in the slider is not centered.
Here's the link: http://eddieli.org/flee/
Which part of the coding have I done wrong?
The pictures are not aligned with the slider...
Thanks for helping.
well, i added position: relative; left: -40px; to the li of the sliders #container #left_col #slider li, and they get aligned, i don`t know which size images are, but you must always check the starting position before doing the slider itself, you must check all styles fit right.