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.
Related
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.
hope someone can give me a hand with this, I've searched but can't find anyone with the same problem.
I'm re-jigging a menu for my website and I need these .float-columns to appear next to each other, but in this set-up they appear under each other.
.main{
display: inline-block;
position:relative;}
.content {
position: absolute;
}
.float-column {
background: #FFF000;
float:left;
}
<div class="main">
<div class="content">
<div class="float-column">Column 1</div>
<div class="float-column">Column 2</div>
</div>
</div>
I can make them appear as expected by removing the position from the .content or removing the position/display from the .main, unfortunately I can't do this as it breaks the rest of the menu.
I've had limited success when specifying fixed widths for the .float-column and .content, but ideally I'd like to leave it flexible (so I can add as many columns as needed)
Is there any way around this? Am I missing something obvious?
JSFIDDLE
as per your requirement, you just need to remove inline block from the main class. That will make the columns align side by side.
So what I am trying to achieve is have the text in the left side sit on top of the image in the right side
<div class="body-content">
<div class="left-side">
<p>text</p>
</div>
<div class="right-side">
<div class="img-container>
<img/>
</div>
</div>
</div>
the problem is that it seems to not work at all when image off in another div.
I can get it working when everything is within the same div, so I'm not sure if what I am trying is even possible.
heres a slice that explains whats happening
http://jsfiddle.net/F3UQr/
All you are missing is a position attribute on the left-side.
For the z-index property to apply, the element also need to have a position other than static.
.left-side {
position: relative;
z-index:1;
}
http://jsfiddle.net/dean_simcox/MnYa8/
I think I see what you're trying to do. The z-index is set for ".left-side" but the position needs to be set as well for that to take effect. I set the position to "relative" but you can also do absolute, fixed, etc. Updated fiddle here: http://jsfiddle.net/JS26k/
.left-side
{
z-index: 1;
position: relative;
{
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;}