I´m currently working on a wordpress site where I want to center my page-wrap using CSS. I´ve tried to implement method 3 on this site without beeing successful.
Site: http://blog.themeforest.net/tutorials/vertical-centering-with-css/
I´m using two different divs, one with the id of floater and one with the id of page-wrap. My css looks like this
#floater { float: left; height: 50%; margin-bottom: -481px; }
#page-wrap { clear: both; color: white; width: 1594px; height: 962px; margin: auto; position: relative; }
I also want to point out that inside my page-wrap div I have plenty of other divs to build my design (they also float to both left and right) if that affects the result in any way.
Link to JSFiddle: http://jsfiddle.net/FERNX/
try
#floater{
margin-top: 25%;
}
or
position: absolute;
top: 50%;
margin-top: -25%;
if you know it's height the most east and straightforward solution is:
#page-wrap { position: absolute; height: 900px; top: 50%; margin-top: -450px; }
basically it says; position its top at 50% and substract half its height to have the div's center centered.
Related
Overview: I have a CSS3 pure navigation system on top of my page. I have a footer/copyright on bottom.
In the middle, I want a background image (parchment) cover, then on top of that parchment, I want a white layer for text with a left column and a right column. I can't seem to make it work using the relative position as my z-index doesn't seem to be working. If I put position "fixed", I can't use the right browser scroll anymore to go down. If I use position "absolute", then the background is right and the content on top is ok, but my navigation footer disappears. If I use position "relative", my navigation system is fine but the background doesn't show up anymore. It is ignoring the z-index....
The weird thing is I am using expression web 4 and it looks correct there...it just doesn't look correct on the web.
This is my site html to reproduce what I am seeing.
<!-- #BeginEditable "content" -->
<div id="page_content_back">
<div id="column_left">
<h1>About</h1>
<p>We are the best-Trust us</p>
</div>
<div id="column_right">
<h4>CONTACTS</h4>
</div>
</div>
<!-- #EndEditable -->
This is my css
#page_content_back {
position: relative;
background-image:url('../images/grayparchment_back.jpg');
background-size: cover;
z-index: 1;
width: 100%;
margin: auto;
padding: 0;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCAA77;
}
#column_left {
position: relative;
margin: 0 50px;
padding: 0 2%;
z-index: 2;
top: 0px;
background-color: #fff;
float: left;
width: 65%;
height: 100%;
color: #393939;
}
#column_right {
position: absolute;
z-index: 3;
float: right;
right: 50px;
top: 370px;
width: 20%;
height: 100%;
margin: 0;
padding: 10px;
background-color: #fff;
}
Okay, the problem is your div#column_left. It has a float: left property. Floating an element takes it out of the flow, so there's nothing within the div#page_content_back to give it any height. Remove that float: left property from the inner div and you'll see the image appear behind it. From there, you can add other elements after that nested div and the image will expand to encapsulate the new element. That said, if you use float or position: absolute, you're removing the element from the flow and that background image won't respond to its presence as a result.
Hello using a child theme, getting all the other elements working with the responsive design - just not the logo?
link to site
Using this code at the moment;
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
margin-left: 390px;
}
Many thanks
These two lines
display: block;
margin: 0 auto;
are a good place to start to center something.
Common reasons for that not to work is if the element is floating or has its position set to something besides static. In those cases you can try float: none;, or position: static; or position: relative;. In the case of relative be sure to also set the relevant top, bottom, left, and right properties.
There are a many cases where none of these things will help, but in your case and in most simple cases, the above will get you there.
Try this for your CSS
header#masthead hgroup .logo {
display: block;
float: left;
max-width: 100%;
position: relative;
left: 50%;
margin-left: -150px;
}
header#masthead hgroup .logo img {
vertical-align: bottom;
height: 80px;
width: 300px;
}
No need for big margin-left. the code on the .logo div moves the logo 50% across the screen, to center it completely, you then have to remove half the width with a margin-left: -150px.
I tried the code out on your website so it should work. Hope it makes sense.
I have an image that I want to "peek" from behind a div: the left half of the image peeks from behind a div, and the rest is hidden - like this.
The div has the following css:
#div{
float: left;
position: relative;
margin-left: 5%; }
For the peeker I have tried using:
#peeker {
position: fixed;
margin-left: 2.5%;
}
However, this only works when zoom is at 100%. When I zoom out, #peeker is no longer 50% shown.
Is it possible to do this without using javascript?
#peeker {
position: fixed;
margin-left: 2.5%;
width: 5%;
}
Can you tell me the exact functioning of position attribute in css and difference in two values i.e "relative" and "absolute". Please tell me it in context of following code:
I am absolute positioned
<section id="about" data-type="background" data-speed="10" class="pages">
<article>Simple Parallax Scroll</article>
</section>
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And may you also the proper functioning of "-webkit-box-shadow" attribute.
What is the difference:
When you use position relative you are making a div that will be relative to other divs with position absolute. Absolute will basically make the div or that element float above the document. Without having to follow the current dom or what you call it.
When you are simply using position: relative; you are not placing the div any where. But you are actually just creating a relative point for other elements if there is no relative div the position: absolute; will be following the document as relative.
From your css:
In your content, by following the CSS #home will be relative and #home article will be placed over it. Where ever you want to place it. And similarly #about article will be placed over #about.
You will not figure out what is the main idea of absolute or relative untill you write this: top: 0; this will remove all the margins from top side its similar to this margin-top: 0;. You can also try to move the div as much as you want.
Positioning simply lets you move the elements without having to follow the dom(or whatever it is). The basic difference between them is that relative will be the main place or main point from where the placement would start for children of that element. And absolute will follow any nearest parent and will get a new position.
Learn about them here:
Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/CSS/position
W3school.com: http://www.w3schools.com/css/css_positioning.asp (if you want to learn the basic).
CSS-Tricks: http://css-tricks.com/almanac/properties/p/position/
W3.org: http://www.w3.org/wiki/CSS/Properties/position
I want to make a div (my sidebar) stretch to the bottom of the page. I know that I need to add "height: 100%;" in order to do that.
But when I add height: 100%;, pages that have less content than the sidebar cuts the sidebar's height and then you can't see the sidebar content.
This is the index page . Everything looks exactly the way I want it to.
This is a sample page . Notice that the sidebar has been cut.
CSS:
#menu-container {
background-image: url('floral.png');
width: 300px;
display: inline-block;
vertical-align: top;
height: 100%;
overflow: hidden;
position: absolute;
}
#menu {
background-image: url('menubg.png');
width: 220px;
margin: 0;
padding-top: 50px;
padding-left: 30px;
padding-right: 20px;
color: #e8e8e8;
height: 100%;
}
#content {
padding: 0px 0px 30px 325px;
width: 1000px;
display: inline-block;
vertical-align: top;
}
Thanks in advance!
* #Ritabrata Gautam *
The changed CSS fixed my second problem but now I'm back to the cut off sidebar on shorter pages: See here: http://www.tarawilder.com/staging/?page_id=19
I'm leaving my house now, I'll be able to respond later tonight. Thanks again for your help!
#container {
display: inline-block;
height: 100%;
position: absolute;
width: 900px;
}
try this..it will give you the result you want..though there are many other mistakes in your html markup
some other areas where you need to be careful...
your container's width is 900px..which contains side menu and the large text...combined width of your side menu and the large text is far greater than your 900px width of your container..as you are not using overflow:hidden; you cant see the effect...why dont you apply overflow:auto; width:100% or something like that
BETTER CSS::
#container {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
}
ACCORDING TO YOUR NEW PROBLEM :: now your body height must be more than 100% now..thats why after 100% height your side menu becomes invisible
CHANGED CSS ::
#container {
height: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
your third problem ::
strange...you are now using width:100% for your cantainer..and your container contains side menu and large text...and side menu has width of 300px and then your having width of 1000px for large text..so naturally the overflowed part ot the text gets invisible; and also remove position:absolute; from container
now your css
#container {
height: auto;
overflow: hidden;
width: 100%;
}
#content {
padding: 0px 0px 30px 325px;
vertical-align: top;
}
NOTE:: don't delete your edited part of your question..you have already deleted the 2nd edit you made to your question earlier...it will create difficulties for future users to relate the answer with question
Make sure that your parent containers (#container, body, html) are height:100%; as well.
Personally, I would do something like this(if the rest of the site layout allows it):
Instead of creating separate backgrounds for #menu, #menu-caontainer and body i would create background on body something like this: http://cl.ly/image/3L060f2w3Z0s
that would repeat vertically on y axis, so no matter how high the body is the background would stretch/repeat to the bottom.