I have this fixed positioned button within a absolute positioned wrapper.
I would like to align the button within the wrapper but to the right.
Right now I can only align it center within the wrapper or left within the wrapper.
I know the fixed position breaks the flow, but I know it is possible to do this , I just can't figure out to get this working.
Here is the markup:
<div id="nav-container">
<div id="logo-white">LOGO</div>
<div class="menuButton">menu</div>
</div>
Here is a FIDDLE
Actually you have pulled the .menuButton div from left and right both to 0 distance so just remove left:0px; and change position to position:absolute; in .menuButton
Working Demo : UPDATED
.menuButton {
height:35px;
width: 35px;
background: #39C;
position: absolute; /* Changed from fixed */
cursor: pointer;
z-index: 999;
top: 25px;
right: 0px;
/*left: 0px; ---- REMOVED */
margin: 0px auto;
}
Here is your solution to align it right:
.menuButton {
height:35px;
width: 35px;
background: #39C;
float:right;
cursor: pointer;
z-index: 999;
top: 25px;
}
Check this fiddle
.menuButton {
height:35px;
width: 35px;
background: #39C;
position: fixed;
cursor: pointer;
z-index: 999;
top: 25px;
right: 0px;
/*left: 0px; removed as its not necessary when right as 0 */
margin: 0px auto;
}
I have removed left properties as its not necessary when right set as 0
In this FIDDLE I have the setup as I want it to be.
I have have used media queries to get the wanted output.
Please let me know if this is bad pratice?
.menuButton {
height:35px;
width: 35px;
background: #39C;
position: fixed;
cursor: pointer;
z-index: 999;
top: 25px;
right: -890px;
left: 0px;
margin: 0px auto;
}
#media screen and (max-width: 960px) {
.menuButton {
right: 25px !important;
margin: 0px;
left:auto;
}
}
Related
Right now I have an absolute element, so that they're absolute positioned in relation to the bigger element. This works correctly:
.wrapper {
position: absolute;
left: 65px;
top: 6%;
max-width: 76%;
}
Inside this is up to 3 relative elements (two in example), as I want them to stack as you see in the image (if they have more than one). Which works perfectly.
Code of top box:
/* obtain box */
.obtainbox {
position: relative;
left: 61px;
background-image:
linear-gradient(to bottom, #00e887EA, #BBBBBB00 13px),
url("tbox2.png");
background-size: cover;
color: black;
text-align: left;
font-size:40px;
padding-top: 4px;
padding-bottom: 4px;
padding-left:40px;
padding-right: 7px;
z-index: 1;
margin-bottom: 25px;
border-bottom-right-radius: 25px;
}
Code of bottom box
/* play box */
.playbox {
position: relative;
left: 60px;
background-image:
linear-gradient(to bottom, #14d5f1EA, #BBBBBB00 13px),
url("tbox2.png");
background-size: cover;
color: black;
text-align: left;
font-size:40px;
padding-top: 7px;
padding-bottom: 10px;
padding-left:40px;
padding-right: 7px;
z-index: 1;
border-top-right-radius: 25px;
}
HTML Code
<div class='wrapper'>
<div class='obtainbox topcard '>
<div class='lefticon'><img src='ObtainV2_150px.png' style='width:100px'></div>
<img src='Time_150px.png' style='width:42px; position: relative; top: 9px;'>
</div>
<div class='playbox endcard'>
<div class='lefticon'><img src='Play_150px.png' style='width:100px'></div>
<img src='Time_150px.png' style='width:42px; position: relative; top: 9px;'> for each play you've used this turn. <i>Includes this.</i>
</div>
</div>
My problem is I want the top box to have an indepedent width from the bottom box, in this image the box would be padding to the right of the top hourglass, instead of the auto size from the parent.
Example image of it auto sizing correct from parent:
Add width: fit-content; to .obtainbox class.
Codepen: https://codepen.io/manaskhandelwal1/pen/NWRLxQg
I have a image the scales to the screen size. I'm trying to get a left, right and close buttons to stay on the image but I can only get them to stay on the edges of the screen.
JSFIDDLE
#full_image ul{
margin:0;
padding:0;
list-style:none;
width:100%;
white-space: nowrap;
overflow:hidden;
}
#full_image li{
display:block;
margin:0;
padding:0;
}
#full_image li a {display:block}
#full_image ul li img{ margin:0 auto; max-width:100%}
#full_image .full_close{
background-color: red;
top: 10px;
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;
width: 29px;
z-index: 999;
right: 10px;
}
#full_image .next_big{
background-color: red;
top: 50%;
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;
width: 29px;
z-index: 999;
right: 0px;
}
#full_image .prev_big{
background-color: red;
top: 50%;
cursor: pointer;
height: 29px;
opacity: 1;
position: absolute;
width: 29px;
z-index: 999;
left: 0px;
color: #222;
}
<div id="full_image">
<ul><li> <img src="http://i.telegraph.co.uk/multimedia/archive/01636/saint-tropez-beach_1636818c.jpg" alt="" /></li> </ul>
</div>
When you use display:block on the parent containers they will stretch the full width. You will have to either use display:inline-block or float the element.
If you have to support older browsers this trick may work:
#full_image{
display:inline-block;
*display:inline;/* For IE7*/
*zoom:1/* For IE7*/
text-align:left;
}
You will have to remove the display block on the li a.
You have to also add position relative to the #full_image div to make sure the absolutely positioned items are positioned inside that div rather than the screen.
Here is an updated fiddle:
http://jsfiddle.net/kvE96/15/
Format your container with display:inline-block (so that it is only as wide as the image actually), and position:relative to make it the point of reference for the absolute positioning of children.
See http://jsfiddle.net/kvE96/11/
I'm trying to make a sidebar and this is what I'm expecting:
Header fixed top and Footer fixed bottom ( I don't know if 'fixed' is the right term, but I want them not to overlap the sidebar container )
Scrollable sidebar-container
I tried to play with position of the div but it didn't work.
I also tried sticky footer's approach and It didn't work so well.
I tried googling my problem, but most answers are the whole layout of the website.
I need it working inside my sidebar.
Here's my: jsFiddle
The code is kinda long so I'm just gonna post the CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px;
}
#push, #footer {
height: 60px;
}
.container-fluid {
width: 100%;
height: 100%;
}
#content {
position: absolute;
width: 100%;
bottom: 60px;
top: 42px;
right: 0px;
left: 0px;
padding: 0px;
}
#sidebar {
position:absolute;
width:300px;
height:100%;
}
#sidebar .ul-menu {
margin:0px;
}
#sidenavbar .tabs-left>.nav-tabs>li>a{
margin: 0px;
min-width: 30px;
width: 70px;
-webkit-border-radius: 0px 0 0 0px;
-moz-border-radius: 0px 0 0 0px;
border-radius: 0px 0 0 0px;
border: 0px;
}
.sidebar-tab-content {
background: #FFF;
position: absolute;
height: 100%;
left: 94px;
width:100%;
}
#sidenavbar .tabs-left>.nav-tabs {
border: 0px;
}
#footer {
color: #FFF;
background-color: #666;
}
.side-header, .side-footer {
background: #AAF;
}
h2 {
margin: 0px;
}
Thanks for the ideas. I solve my problem just now by adding these css codes:
.side-header {
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.side-container {
position: absolute;
bottom: 40px;
top: 40px;
overflow-y: auto;
}
.side-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
Here's the JSFiddle: http://jsfiddle.net/geddemet/XCn7C/
This community is really helpful. Cheers!
I use this for my footer. it works for me, the header and footer stay in the same place and the footer will expand if the content with the scroll bar gets bigger. As for the box with the scroll bar, I believe you need to have something like overflow:hidden in the CSS for the box that you want to have a scroll bar on.
You can apply overflow: auto to your content div.
See this minimal example of how it would work.
Take a look at my sample
sample
It was not good when you set place the side bar and right content into position absolute. Your design should have to get you in trouble if right content is not predictable and make more custom on it.
.sidebar-tab-content {
background: #FFF;
width: 100%;
height: 500px; /*you could change it to 100% depend your need*/
}
Edited: Please look inside my jsfiddle sample code instead, the above proportion of CSS which I placed here was just small one of the changes
Your looking for position: fixed
FIDDLE Full screen Normal Fiddle
CSS:
.side-header{
background: #AAF;
position: fixed;
width: 100%;
}
.side-footer {
background: #AAF;
position:fixed;
bottom:60px;
width: 100%;
}
But you are going to have to play around with the width's because it's taking the container width div.
I am trying to achieve a dashed (custom) bored along the left and right of a 1000px fixed width page.
The left one is fine, this works a treat:
#border-left{
position: absolute;
float:left;
top: 0px;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
However when I do it over on the right hand side, it wont quite work. I need it to relatively position to the right of the 1000px rather than of the window.
#border-right{
position: relative;
right: 0;
top: 0;
bottom: 0;
margin-top: -90px;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
Parent element:
#container{
width:1000px;
display: block;
margin:0px auto;
text-align:left;
padding-top:90px;
}
That does not work. Can I achieve this? I need it to essentially float: right (but then i cannot make the height 100% of the browser window). Thanks
Demo: http://jsfiddle.net/iambriansreed/sAhmc/
Removed the floats on absolute elements. Added absolute position to parent and centered using left and margin. Removed unneeded margin-top on right border. Replaced border id's with classes.
Borders sit outside the 1000px width.
#container>.border{
position: absolute;
top: 0;
bottom: 0;
width: 5px;
background-image: url('../img/border.gif');
background-repeat:repeat-y;
}
#container>.border.left{
left: -5px;
background-color: red; /* demo */
}
#container>.border.right{
right: -5px;
background-color: blue; /* demo */
}
#container{
position: absolute;
top: 0;
bottom: 0;
width: 100px; /* demo */
left: 50%;
margin-left: -50px; /* half of width */
text-align: left;
padding-top: 90px;
overflow: visible;
background: #eee; /* demo */
}
I think adding a "position: relative;" rule to the #container element should work for you.
How do I place the adInfoBox1 at the bottom of the container?
Take a look at this: http://jsfiddle.net/snowman/hxXJh/
Please note that the container will not have a fixed height.
You can use position: absolute.
.container
{
height: 400px;
position: relative;
}
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0px;
width: 457px;
background-color: green;
}
.adRegularList .categoryList {
bottom: 0;
height: 16px;
position: absolute;
}
See a working example here: http://jsfiddle.net/hxXJh/5/
I'd suggest:
.adInfoBox1 {
padding: 5px 5px 5px 10px;
position: absolute;
bottom: 0; /* attaches the element to the bottom */
left: 0; /* attaches the element to the left-side */
right: 0; /* attaches the element to the right-side */
background-color : green;
}
The above will give the .adInfoBox 100% width, implicitly. This can be adjusted by removing, or amending, the right or left declarations. I removed the float because using position: absolute; will take the element out of the document flow anyway.
JS Fiddle demo.
Simple tricky solution. Div2 will be at the bottom of containerDiv.
<div id="containerDiv">
<div id="div1" style="heigth:90%;"></div>
<div id="div2">Content here...</div>
</div>
change the css of adInfoBox1 to:
.adInfoBox1 {
float: left;
padding: 5px 5px 5px 10px;
position: absolute;
width: 457px;
background-color : green;
bottom: 0;
}