I'm trying to position my image to the center horizontally, but I can't seem to make it work, this is what I have.
.drugimg p img {
position: absolute;
align-items: center;
justify-content: center;
display: inline;
margin-left: 0 auto;
margin-right: 0 auto;
text-align: center;
width: 30%;
border: 3px solid #73ad21;
padding: 5px;
}
Margins and absolute positioning generally don't mix.
If you want to center horizontally you can either do this (relative positioning):
margin: 0 auto;
Or this (absolute positioning):
position: absolute;
left: 50%;
transform: translateX(-50%);
For the second solution, keep in mind that it will be centered horizontally relative to the nearest parent element with position:relative. This means that if the immediate parent is relatively positioned, the child will be horizontally centered relative to it. If the parent's parent is relatively positioned, the element will be centered relative to that. If nothing is relatively positioned, your element will be centered relative to the viewport.
Related
I am currently working on customising my Big Cartel website and I've ran into the issue of the header image that scrolls with the page when using the Parade theme.
This is okay for my main shop page but for my Lookbook page, it is covering my content too much and I wish for it to either be hidden or stop scrolling.
Does anybody have a solution to this?
Thank you so much!
.header {
background-color: transparent;
padding: 50px;
position: fixed;
top: 0;
width: 100%;
z-index: 97;
}
#media screen and (max-width: 767px) {
.header {
padding: 20px;
}
}
.header.overlay-header {
position: relative;
}
.header .primary-header {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 15px;
}
.header .secondary-header {
margin: 0 auto;
text-align: center;
}
.header .header-center {
text-align: center;
}
Your header is fixed so it'll be in a fixed position relative to the viewport. Just make it relative or remove the position all together to make it static.
.header {
background-color: transparent;
padding: 50px;
position: relative;
top: 0;
width: 100%;
z-index: 97;
}
It'd be very beneficial to you to understand the position property going forward, so here's a small overview.
There are 5 different position values you need to know;
Static (default)
An element with position: static; is not positioned in any special
way; it is always positioned according to the normal flow of the page. This is the definition of position if you don't explicitly set one in your CSS.
Relative
An element with position: relative; is positioned relative to its
normal position where it falls in the hierarchy.
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into
any gap left by the element.
Fixed
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. If you set a navbar to fixed at the top, it'll always be at the top of the view. If you set a footer to fixed at the bottom, it'll always be at the bottom of the view and remain there when scrolling.
Absolute
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page
scrolling.
Personally I recommend being a bit cautious with absolute
positioning and really only use it for overlays and layering as an
element positioned absolute will ignore the flow of the document.
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.
I have a background that covers the entire screen. Black line is end of viewport.
Main-div is just a container (dark blue) using position absolute.
Top-div (yellow) also using position absolute.
Middle-div (red) also using positon absolute.
Why? Well I want the Middle-div (red) to completely cover the screen vertically. Also only half should be visible - needs to scroll to see it.
Everything works fine, but how can I position the Footer-div (yellow) below the Middle-div (red)?
CSS code for Yellow Footer:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
border: 1px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
Right now it sits on the bottom, leaving too much gap above. Problem it must work on different resolutions. Setting bottom: 100px; will only work on this resolution....
Image:
You cannot position elements relative to other absolutely positioned elements unless they are children of said elements, or both children of the same element when you know the position and size of both elements.
If you make the footer a child of the middle div, you can position it absolutely within:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: -100px;
border: 4px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
I don't know all of your other CSS/HTML, but I guessed in a fiddle here, with some exaggeration of borders, etc for visual reference:
http://jsfiddle.net/jtbowden/NuG7T/
You can also create a wrapper around middle and footy:
http://jsfiddle.net/jtbowden/NuG7T/1/
The element has a variable width, so I don't know it.
Is it possible to center this element inside its wrapper element?
The wrapper has a fixed width of 960px...
Add text-align: center; to the wrapper, and then display: inline-block; to the child
Or add display: table; andmargin: 10px auto; to the child element
Or position: relative; left: 50%; float: left;
Yes, as long as you have margin:0 auto; with the variable width specified...
Here is an example: http://jsfiddle.net/traMU/
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}