Code given:
http://jsfiddle.net/95u9Q/
#wrapper_login {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
background: black;
}
#login {
z-index: 22;
width: 300px;
height: 400px;
margin: -200px auto 0 auto;
background: #000;
}
The centering works fine! The Problem is: If having a windows height below 400px the full #login should be visible and scrollable. currently a scrollbar is visible, but it is not possible to see the full #login, the scrollbar just don't contains the whole #login.
I think its because of position absolute and the negative margin-top, also I don't know how to improve the code so it works in the way it should.
Thanks in advance for the help!
Your parent container that is #wrapper_login should have a relative position instead. and the child container #login the position of absolute for this to work seamless across different Resolutions. You could use top and left values for #login to set it at the right postion.
Looks like a job for a media query
#media screen and (max-height: 400px) {
#wrapper_login { position: static; }
#login { margin: 0 auto; }
}
http://jsfiddle.net/95u9Q/2/
Related
The image on my home page is left aligned.
While it looks great on desktop, it does not look good on mobile
I am trying to "center" the image defined by .entry-image.attachment-post.gsfc-alignleft on mobile views.
I have tried the following without success :
#media all and (max-width: 675px) {
.entry-image.attachment-post.gsfc-alignleft {
width: 100%!important;
max-width: none;
text-align: center;
margin-left: auto!important;
margin-right: auto!important;
}
}
My website is : parlons-survivalisme.com
What am I missing ?
You need to set the outer a Tag to width: 100% in order to align the image above the whole width.
For instance:
a.alignleft {
width: 100%;
}
As advised by Luca, changed the code to the following, which works !!
#media all and (max-width: 675px) {
a.alignleft {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
There are 2 straightforward solutions to center an image.
The first is to set your image to 'display: inline-block' and then wrap it with an outer div where you set the 'text-align' property to center.
.wrapper-div {
width: 100%;
text-align: center
}
.img {
display: inline-block;
}
The other solution is to make sure your img is a block element (display: block) and then set the margin-right and margin-left to auto.
.img {
display: block;
margin-right: auto;
margin-left: auto;
}
If you still have a bug, look at the parent element width (to make sure it is 100% on small screens).
I have a div called #text, inside another div #box. Right now I've tried to center #text by doing this:
#box {
width: 50%;
#text {position: relative; margin-left: 48%;}
}
This code puts #text approximately in the center of #box, but when I resize the screen, the size of #text changes relative to the size of the screen, so the size of its margin-right changes, and it is no longer exactly in the center.
I've heard there is a "hack" for this involving a few wrapper divs, but I don't want to overcomplicate my css or html. Is there a simple way to horizontally position a div exactly in the center of its parent?
Using flexbox is IMO the best way to center child horizontaly and verticaly. Its support is good.
First off the CSS you posted is not valid. You can accomplish what you are looking for with something like this:
CSS
body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
#box {
width:100%;
height: 500px;
background: lightblue
}
#test {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto
}
HTML
<div id="box">
<div id="test">
hello
</div>
</div>
See the JS.Fiddle
use margin: 0 auto; in the css of #text
You want exact center of page, regardless of content? Do something like this:
p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Relative to the parent, set the following attribute on the container for your element:
div.containerOfPs {
position: relative;
}
I'm trying to achieve the following with CSS:
I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.
However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.
I can't fid a solution on my own, can anybody help me? Thanks a lot! :)
JSFIDDLE: http://jsfiddle.net/ALGpP/4/
nav {
height: 100%;
width: 300px;
position: fixed;
z-index:99;
}
#wrapper {
overflow: hidden;
position: absolute;
width: 100%;
margin-left:300px;
}
Do you mean something like this?
I gave the #wrapper element some new CSS properties:
height: 1200px;
background-color: red;
The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.
Your nav element i have given the following css properties:
height: 100%;
width: 20%;
position: fixed;
background-color: green;
The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.
Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:
* {
margin: 0;
padding: 0;
}
It basicly selects all elements and gives it a margin and padding of 0.
If you want the nav element to be 300px wide, use this fiddle.
Fix for the content that wasnt showing
Add the following properties to your #wrapper element:
width: calc(100% - 300px);
float: right;
So it looks like this:
#wrapper {
width: calc(100% - 300px);
height: 1200px;
background-color: red;
float: right;
}
Demo here
I know there are a lot of questions about a css 100% height problem.
However I've tried to follow the instructions there and still the height isn't 100%,
so I thought I'd ask the question again.
The site where you can see the problem is:
www.exendo.be
some css styles:
html {
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
}
body {
background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8;
height: auto !important;
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
wrapper {
height: auto !important;
min-height: 100%;
position: relative;
}
footer-container {
background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40;
height:146px;
}
As you can see on the site, the footer is too high on the page.
If I inspect the page with Firebug, I can see that the html is 100% height, but the body tag isn't.
The problem both occurs on Firefox and IE.
If anybody could help that would be great!
A number of people suggested position:absolute; bottom:0;
This can cause an issue if the content is taller than the container. The height will not increase so the content will no longer fit and can get cut off or result in ugly scroll bars.
If you can give a fixed height to the container, this is ideal since the height:100% will then work on the child element. In case the content is too large, you can put a background on the child with overflow:visible on the parent, so the content still displays. This helps, but it can still break unless the child is the same width as the parent.
If that doesn't work, I recommend using min-height in em or pixels. This will make sure the height fills the parent, and expands if the content is too long. This worked best for customer comments on www.baka.ca
I think this article can help you.
According to this article:
Assign "position:relative" to your "container" div - page, page-container, or wrapper (I'm not sure to which one of the three, just try), and then "position:absolute; bottom:0;" to your "footer-container" div.
I hope that helps you.
#denappel; give html & body 100% height put footer outside of your main div wrapper & give margin-bottom in minus according to the height of footer.
css:
.wrapper {
position: relative;
width: 700px;
font-size: 0.9em;
margin: 0 auto -142px;
background:yellow;
}
.header {
height: 190px;
background:green;
}
.footer {
position: relative;
width: 700px;
margin: 0 auto;
background:red;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px;
.footer, .push {
height: 142px;
}
check this example
http://jsfiddle.net/sandeep/tCdPX/3/
this functionally called stickyfooter
I'm having issues with the margins in browsers (other than Firefox) on this page:
http://jumpthru.net/newsite/commentary/
Here is the CSS:
#container3 {
float: right;
margin: 0 -240px;
width: 100%;
}
#content3 {
margin: 0 210px 0 -45px;
width:500px;
}
#primary, #secondary {
left:920px;
overflow: hidden;
padding-top: 40px;
position:absolute;
width: 220px;
}
Kind of a strange way to build up the page..
I recommend you to create a 2 column layout in main2..
Left for menu and right for the comments header, with beneath that the content and the recent comments div..
And, start using clearfix: http://www.positioniseverything.net/easyclearing.html
I fixed the issue in Chrome by changing this CSS:
#primary, #secondary {
left: 980px; /*was 920px*/
overflow: hidden;
padding-top: 40px;
position: absolute;
width: 220px;
}
I see you're using absolute position on #primary, this is based on the window so when i resize the window the "Recent Comments" section moves. So depending on the resolution of the users screen and the size of their browser this will move.
add position relative to the main2 div. Then change the left value on the #primary to right with a value of 0. this will keep it on the right side and always in the same place.
#main2 {
position: relative;
...
}
#primary, #secondary {
right: 0;
...
}
EDIT: The reason this works is when you use position: absolute the value is absolute the nearest relative parent element. if the element as no parent elements with position: relative it will be absolute to the browser window. Hope that makes sense.