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.
Related
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;
}
}
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 was trying to create a page like this image. But I'm stuck with the sidebar. I tried to make it float left and right. But some tricky problems! Tried to make the sidebar absolute positioned. But when the content area is large, the sidebar background is not keeping up with content area.
Can anyone help me to create a basic structure of this?
This is what I have used!
aside{
width: 215px;
background: #f9f9f9;
padding:5px 0;
padding:5px;
position: absolute;
top: 128px;
bottom:0;
left: 0
}
.main .content{
background:#fff;
padding:5px;
margin-left: 195px;
height:100%;
}
You can do it with absolute positioning on the sidebar, and a margin on the content: http://jsbin.com/ucihul/1/edit
The key properties are:
On the parent element of both sidebar and content: position: relative
On the sidebar:
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 215px; /* or whatever your fixed width is */
On the content div: margin-left: 215px (or whatever your fixed width is)
You can also have inner divs inside both the sidebar and content for additional control (they are in my demo, but I didn't do anything with them).
How about this:
HTML
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
CSS
#sidebar { float: left; width: 100px; background: red; }
#content { margin-left: 100px; background: blue; }
Fiddle: http://jsfiddle.net/j7dS5/1/
The easiest way to do this is graphically. Make an image that's as wide as the ".main" area and 1px tall that is colored appropriately for how wide you set your divs to be.
.main{
background:url(images/image.png) top center repeat-y;
}
aside{
width: 215px;
padding:5px 0;
padding:5px;
position: absolute;
top: 128px;
bottom:0;
left: 0
}
.main .content{
padding:5px;
margin-left: 195px;
}
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}
I want to place div that has absolute position in center of the screen view (scrolled or not scrolled).
I have this but its places div in mid od the document and not mid of current view.
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: 50%;
left: 50%;
margin-left:-70px;
margin-top:-50px;
}
Use the following CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Change position:absolute to position: fixed and you should be good to go!
When you say position - absolute, the reference div is the parent div that has a position - relative. However if you say position -fixed, the reference is the browser's window. which is wat you want in your case.
In the case of IE6 i guess you have to use CSS Expression
If you don't want to change your element's position to fixed, here is a solution with keeping your element absolut.
Since CSS's calc() is supported by all browsers now, here a solution using calc().
#main {
width: 140px;
height:100px;
border: 1px solid Black;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
}
A bit more complex way is to use multiple outer boxes. This method works well with or without hard coded width/height of the middle box (background colors added just to show what each box does):
/* content of this box will be centered horizontally */
.boxH
{
background-color: rgba(0, 127, 255, 0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* content of this box will be centered vertically */
.boxV
{
background-color: rgba(255, 0, 0, 0.2);
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
/* content of this box will be centered horizontally and vertically */
.boxM
{
background-color: lightblue;
padding: 3em;
}
<div>
some text in the background
</div>
<div class="boxH">
<div class="boxV">
<div class="boxM">
this div is in the middle
</div>
</div>
</div>
https://jsfiddle.net/vanowm/7cj1775e/
If you want display div in the middle regardless of the scroll position, then change position to fixed
Here is a solution using margin and position: fixed :
#main{
width: 140px;
height:100px;
border: 1px solid black;
/* Centering #main on the screen */
position: fixed;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
It centers the div by increasing the margin on all sides to fit the whole screen.
EDIT: I found out there is a shorthand for top,right,bottom,left that is inset. It has been implemented in major browsers and you can see the compatibility on other browsers here
So to absolutely center a div on a screen:
#main{
width: 140px;
height:100px;
border: 1px solid black;
/* Centering #main on the screen */
position: fixed;
margin: auto;
inset: 0;
}
I managed to place absolutely positioned text in the center with the following:
position: absolute;
text-align: center;
left: 1%;
right: 1%;
This is a variation of the answer from Kenneth Bregat. It maintains absolute positioning rather than fixed, plus it solves text wrapping issues mentioned in some answers. Don't forget that the parent will need relative positioning.
What about this trick:
position: absolute;
height:200px;
top: 0;
left: 1%;
right: 1%;
margin-left: -half_of_the_div;
left: 50%;
position: fixed;
example on codepen