I have to style the tab slider in Wordpress, so the tab navigation div happens to be on top and the the content is under, I want to switch them but I can't
, the tab-content has position: relative already because of its content.
Here I try
css
.wrapper {
position: relative;
}
.tab-nav {
position:absolute;
bottom:0;
}
but tab-nav goes down but stick into the tab-content. so this way does not work.
<div class="wrapper">
<div class="tab-nav">
</div>
<div class="tab-content">
</div>
</div>
I want to use css to make the tab-nav is under the tab-content. its be better if we dont use "position"
In .tab-nav set z-index=-1; and then left / right and top / bottom attributes to place it where you want.
Related
I have a group list and I'm trying to make them position fixed.
I have the following HTML:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Home
Quem-somos
FAQ
<strong>Reserve agora</strong>
</div>
</div><!--/span-->
And I tried to setup this in my CSS:
#sidebar {
position: fixed;
}
And the result is this:
I fixed but not in the left side of my page. Anyone knows how to fix this?
When you do position:fixed it defaults fixing to the top left.
If you want it to the right do::
#sidebar {
position: fixed;
top:0;
right:0;
}
Using margin properties, to fix your div tag as you want within the page. Margin properties can help you align the div tag as you want it to be.
I want to place buttons On the Top of the image in three places
Bottom Left Corner of the image
Bottom Right corner of the image
Center of the image. (optional)....
How to place these button on the top of the image.
<img src="images/default_image.png" style="width:90%" id="mImage" />
This has nothing to do with jQuery or jQuery mobile really. Can be done with simple HTML and CSS. See this fiddle for am example on how I would do it: http://jsfiddle.net/rHaPH/22/
Try this:
<div id="div-1">
<img src="../img/logo.png" style="width:90%" id="mImage">
<div id="div-1a" data-role="fieldcontain">
Delete
</div>
<div id="div-1b" data-role="fieldcontain">
Delete
</div>
</div>
with this:
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
bottom:0;
left:0;
}
#div-1b {
position:absolute;
bottom:0;
right:0;
}
You can copy that into JS fiddle and it will work using JQMobile. Make sure you include the css url for JQM and make sure you tick JQMobile when adding JQuery to your JS fiddle.
Update:
You should also beware that JQMobile will inject span tags into the DOM which will be your buttons at runtime. This means the css I have provided is conceptually ok, but the selectors will need to point to those span tags (as opposed to using the ids of div tags).
As today, with jQuery mobile v1.3.2 I have implemented that in the following way:
<div data-role="page">
<div data-role="content">
<div id="wrapper">
<div id="button">
Button
</div>
<img src="i.jpg">
</div>
</div>
</div>
And with the follow css:
#wrapper{ position:relative; }
#button{ position:absolute; top: 10px; left:0px; z-index:10; }
img{max-width:100%; }
Some styles probably are not needed for what you want, but I just took the code sample from my own code.
wrapper div is relative positioned so its contents can be absolutely positioned.
z-index in the button div is to make sure it is placed on top of image.
You can add as many buttons as desired and change its css properties for top, left, right and button to move them around the image
Working example at jsFiddle
I have a box which displays the contents of a chosen file using jquery.
The code for the box is
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
I want the close-lightbox div to be always at the bottom of the box.So the css for it is
#close-lightbox{color:red;position:absolute;bottom:0;padding-left:30%;}
Div lightbox has overflow:auto.
Now, what happens is that if the lightbox-content is not big and it fits the fixed size of lightbox then there is no scrolling and the close-ligthbox does appear at the bottom as I wanted.
But if the lightbox-content is big and doesn't fit the fixed size of lightbox then there is scrolling but the close-lightbox appears at the bottom of the lightbox BEFORE that scrolls down which means it appears on the middle of the lightbox-content.
Any suggestions how I can fix that?
.lightbox{
height:auto;
overflow:hidden;
}
.lightbox-content{
height:270px;
overflow:auto;
}
Change the height of this based on your needs of your lightbox.
You could wrap lightbox in its own wrapper, and position the close-lightbox relative to it.
HTML
<div class="lightbox-wrapper">
<div class="lightbox">
<div class="lightbox-content"></div>
<div id="close-lightbox">Close</div>
</div>
</div>
CSS
.lightbox-wrapper {
position: relative;
}
#close-lightbox {
position: absolute;
bottom: 5px;
left: 30%;
}
Take a look at this fiddle - http://jsfiddle.net/joplomacedo/4chu6/
EDIT Ohgodwhy's solution is actually cleaner if you're able to move lightbox's overflow:auto to lightbox-content -> While I was at it, I made fiddle with his solution - http://jsfiddle.net/joplomacedo/4chu6/2/
I am trying to place divs next to each other of which the divs act like a sticky-footer using position:absolute and bottom:0
HTML: (note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="sticky">
<div id="s_content">
Hello
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
jsFiddle: http://jsfiddle.net/ZqaDe/
Preview: http://jsfiddle.net/ZqaDe/show
EDIT:
I don't know how many divs there are every time. The divs there are appended dynamically. In the actual app, those div's can be deleted, moved or added so it they will keep changing every time. So basically I want a way so that the are placed every time next to each other.
EDIT 2:
I don't think I am able to wrap all div's inside a main sticky footer and set a float:left so that they are placed next to each other. In the real example, the position:absolute and bottoom:0 is set dynamically. Updated fiddle: http://jsfiddle.net/u2nda/
You could have an empty footer div in which you append the divs you are minimizing. You then just need to set the position to relative, float the div left and reset top and left to 0.
So your JQuery string would become:
$(this).parent().parent().appendTo("#footer")
.css('position','relative')
.css('float','left')
.css('height','45')
.css('top','0')
.css('left','0')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/2/
Edit
Or better still, change the position to static, that way you do not need to reset the top and left values:
$(this).parent().parent().appendTo("#footer")
.css('position','static')
.css('float','left')
.css('height','45')
.find('#s_content').hide();
JSFiddle: http://jsfiddle.net/u2nda/3/
Edit 2
Or even better, just append classes that do not overwrite your inline CSS:
.tabMe {
float: left;
height: 45px;
position: static;
}
.tabMe #s_head{
border: 0;
}
.tabMe #s_content{
display: none;
}
And your JQuery to show / hide could become:
$('#s_head button').on('click', function(){
var check = $(this).parent().parent();
if( !check.hasClass("tabMe"))
check.appendTo("#footer").addClass("tabMe")
else
check.appendTo("body").removeClass("tabMe")
});
JSFiddle: http://jsfiddle.net/u2nda/4/
You just need to move the second div to the right: #s7243 { left: 200px; }. If you had a third div, you'd need to move it over even more: #third-one { left: 400px; }.
I would place the divs in a main container that had my position absolute and then float your blocks.
Example http://jsfiddle.net/ZqaDe/3/
I think that best option would be to wrap your "sticky" divs. See my demo on jsfiddle
<div class="sticky">
<div id="s6234" class="left">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class="left">
<div id="s_content">
Hello
</div>
</div>
</div>
CSS:
.sticky{position:absolute;bottom:0;left:0;width:200px;height:100px;background-color:#aaa}
.left{float: left;margin-left: 10px;background: yellow;}
I've got a simple CSS:
div.header
{
width:auto;
}
div.footer
{
clear:both;
}
div.middle
{
margin:5px 0 5px 0;
}
div.links
{
width:200px;
float:left;
}
div.content
{
width: 900px;
margin-left:210px;
}
and a simple page:
<div class="header">
<!-- some control inside -->
</div>
<div class="middle">
<!-- left navigation list -->
<div class="links">
<!-- some control inside -->
</div>
<!-- content place -->
<div class="content">
<asp:ContentPlaceHolder id="myContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footer">
<!-- some control inside -->
</div>
The control placed inside "links" div is sometimes resized by javascript. The control is resized, but the parent div ("links" div) isn't - it preserves its original height. As a result the footer doesn't move down and the control overlaps it. How can I fix this so that resizing this control will cause resizing the parent div and as a result moving the footer down?
When putting content into a div with a float property, I always place a div with clear:both at the end of its contents to ensure proper resizing. You already have a class footer which does this, if that's all it's for then use it here., e.g.:
<div class="links">
<!-- some control inside -->
<div class="footer"></div>
</div>
If you plan on having more style on footer you might want to create a new class just for this purpose.
I think there are two ways you can solve this:
overflow on .middle:
.middle {
overflow: hidden;
}
put your footer (or another div with clear:both) inside middle, after the other two divs
http://websticky.blogspot.com/2009/10/float-left-doesnt-expand-parent-div.html
heres an article about floating divs not expanding their parent divs
You could get the height of the footer div and then subtract the re-size of the links div and set the difference as the new height of that footer div. In jquery, that might be something like:
$("#links").click(function() {
var footer-height = $("#footer").css("height");
var links-height = $("#links").css("height");
var links_resize = ...code to determine how much to resize links div ....
$("#footer").css("height, " footer-height - links_resize);
$("#links").css("height, " links-height + links_resize);
});
Try adding 'float:left' to the parent div and see if that fixes it. Floated parents will contain floated children but parents are NEVER to expand just to contain floated elements.
Maybe IE8 was supposed to fix this issue, but it isn't fixed.
Take the code from that article for example
<style>
.container
{
width:300px;
background-color:green;
}
.box
{
float:left;
width:100px;
height:100px;
border:3px solid red;
}
</style>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
Try it in IE8. You get the same result with IE 5 - 7. According to the article, you also get it in opera. The only mystery here is why IE continuously disregards the css docs. Instead of floating the container left to fix it, either create an empty div after the floats and do clear:both; or as the article states, do overflow:hidden; (or auto)