I'm redesigning my website, and at the moment I'm just blacking out the layout. I have a class that centres everything:
.centre
{
position:absolute;
left:50%;
top:50%;
}
everything is then offset using a margin.
I have a wrapper that gives the min-height and min-width
#wrapper {
position:relative;
left:0px;
top:0px;
min-height:600px;
min-width:600px;
}
The min-width and min-height both do their job but for some reason after this wrapper is applied the website is no longer centered vertically.
You can see the website here: http://testerwebby.tumblr.com/
I'm wondering what's the cause of this, and what's the solution.
Thanks,
Dillon Brannick.
Your problem is that your page's body does not fill the whole browser window vertically. You can check this by using Firebug and hovering your body element - not the whole browser window will get a blue hue.
Try to fix this with the following CSS:
html, body
{
height: 100%;
}
Related
So I am working on a site and I having an issue. The scrollbar seems to extend passed the window. I cant see the bottom arrow even with max res. It is even worse when I resize the window. The main problem with this is that I can see my footer, but for some users with smaller screen resolutions cant. Here is my css:
body {
display:block;
margin:0;
color:black;
width:100%;
height:100%;
overflow:scroll; }
Here are screens of what I am talking about:
full res: fullres
Resized window: resized
Any help is appreciated.
remove the overflow:scroll; from your body and put it on the specific div where you want the scroll to be
So your body css
body
{
display:block;
margin:0;
color:black;
width:100%;
height:100%;
}
Are you using any position absolute or fixed in your code ? i dont see it as a problem just this short code. I would prefer "auto" over "scroll" for overflow property.
I have some fixed pixel divs on the top and bottom and a responsive one in the middle. How can I prevent it from going into the top div when the screen is adjusted small?
Here is a working example to illustrate the problem. I want to be able to make the browser small and not have the black box go into the red. While maintaining the responsiveness.
<div style="position:relative; height:100px; width:100%; background:red;"/>
http://jsfiddle.net/RHZLr
I would forget absolute positioning in this case. Make all the boxes relatively positioned, and use margins to position the black box as you please. This way responsiveness works as desired.
Working Fiddle
#blackBox{
margin: 0 auto;
height: 200px;
width: 400px;
background: black;
}
Instead of using width:100% try using a fixed width. Fixed widths don't move so you won't have to worry about them invading other divs.
Also!
It might behoove you to use CSS media queries to give the divs a fixed (non moving) position once the screen gets to a certain size.
e.x.
#div1{
position:relative;
left:25%;
width:50%;
}
#media screen and (max-width:600px){
#div1{
width:500px;
height:500px;
}
}
Working Pen!(codepen.io example)
Hi I created a simple template for a "Backend"-Solution.
It looks kinda this :
<div id="topnavi"></div>
<div id="mainnavi"></div>
<div id="content"></div>
*{
margin:0;
padding:0;
}
body {
background-color:#FCFCFC;
}
#topnavi {
width:100%;
height:55px;
background-image:url('randomurl');
background-repeat:repeat-x;
margin-bottom:1px;
}
#mainnavi {
width:200px;
display:table-cell;
background-color:#333333;
}
#content {
display:table-cell;
}
So on TOP there is a Navigation bar with logo and stuff which is set on 55px height (+1px margin on the bottom). Now I want the sidenavigation to take 100% of the browsers window (without scrolling) but if I set
*{height:100%}
#mainnavi{100%}
I get a scrollbar because of the 55+1px from the topnavi (at least thats what I guess).
I COULD set the #mainnavi stuff first and THEN set the #topnavi to position:absolute and just let it override it - BUT that would be a dirty solution in my eyes ... is there any other useful work-a-round ?
Try this:
#mainnavi{height:calc(100% - 56px);}
You can use calc from CSS3, but it will scale up to page height. If you want to scale it up to screen size, you can add position: absolute
Example: http://jsfiddle.net/fywZT/
The calc directive is definitely a solution in case your browser supports it. Anyway, I've found some issues in the past (issues like, for example, Safari 5 does not support it). Have you tried changing the box-sizing property? Something like:
-moz-box-sizing: border-box
Here I'm leaving you a link for you to have more information about it - http://www.w3schools.com/css/css_boxmodel.asp
So I know this is another centering question but I've been roaming around Google and SO for a couple days now without a solution so I'll ask now.
What I'm trying to do is horizontally center a fluid section element with a max width that has absolutely positioned elements inside it. The problem is, as you can see in my jsFiddle, the margins take up 50% of the available space with the other 50% used by the section. What I would like to do is keep the section perfectly centered but make the margins get smaller as the browser window closes in while keeping the section from re-sizing until the edges of the window gets to it.
I'd like to keep from using any table, table-cell solution because I read on CSS-Tricks that absolutely positioning elements inside table cells can be a real pain.
Edit Basically, the goal is to have the content take up as much space as possible without resizing until the view port width forces the content to be responsive.
Thank you for any bump in the right direction.
HTML:
<section id="wrapper">
<section id="content">
<p>Absolutely positioned imgs, btns, etc. go in here</p>
</section>
</section>
CSS:
#wrapper {
position:absolute;
width:50%;
height:300px;
margin-left:25%;
margin-right:25%;
outline:1px solid red;
}
#content {
position:absolute;
width:100%;
height:100%;
max-width:500px;
background:rgb(225, 112, 75);
}
You can use
#content {
display:inline-block;
text-align:center;
}
to center your elements that will have a display:inline-block; property too.
EDIT: Now that I've better read your question, you can also use
#content {
margin:0 25%;
}
to center your second section.
here's your fiddle updated. As you can see by this fiddle everything is centered AND responsive now.
EDIT-2: Maybe you want to add some media query to reach your goal. Just add something like this at the end of your CSS file:
#media screen and (max-width:720px){
#content{width:100%; margin:0px;}
}
this says that when screen reaches the width of 720 and under, #content (and every ID/CLASS you put in there) will behave as declared.
NOTE that #media queries are not crossbrowser, you may want to add a script to make them work on every browser, I find respond.js a nice tool to do this job.
Also note that the #media queries must be placed at least under the default properties that you are about to change on screen resizing, that is why is suggested to add them at the bottom of your css file.
HERE is another fiddle with media applied (just try to resize the box to see the effect)
I wonder if this is what you were looking for: jsfiddle
I changed your wrapper to this:
#wrapper {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
width:400px;
height:300px;
outline:1px solid red;
}
So that your div now sits in the middle of the screen
I want to create a layout where I want to display an image to the left and content on the right. The image should stay constant when the content scrolls.
The css I'm using:
<style type="text/css">
#page-container
{
margin:auto;
width:900px;
background-color:Black;
}
#header
{
height:150px;
width:650px;
}
#main-image
{
float:left;
width:250px;
height:500px;
background-image:url('../images/main-image.png');
position:fixed;
}
#content
{
margin-left:250px;
padding:10px;
height:250px;
width:630px;
background-color:Teal;
}
</style>
The HTML:
<div id="page-container">
<div id="header"><img src="someimagelink" alt="" /></div>
<div id="main-image"></div>
<div id="content"></div>
</div>
Alot of time on this site and I have understood that background-attachment:fixed positions the image in the entire viewport and not the element it is applied to.
My question is how do I go about creating that kind of layout?
I do not want to give that image as a background image, as if the window is resized, it might get hidden. I want scrollbars to appear if the window size is less than 900px( my page width) so that the image can be viewed at all times.
That happens with this code, however I would like the image to start at my element instead.
How do I go about doing this??
Thanks in Advance :)
Edited:
I took the advice and added a position:fixed property to #main-image. Using the HTML and CSS as shown above.
Now, I also want to fix the header so that it does not move. Basically, only my content section should scroll.
However, if I add a position:fixed to the header, my #main-image and #content now sit on top of my header.
If I add a margin-top:150px (since my header height is 150px) to the #main-image, it works fine and moves down appropriately.
However if I add a margin-top:150px to the #content, my header moves down by 150px and still sits on top of my #content.
Can someone please explain why this is happening?
Thanks in Advance :)
Take a look at this link:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
You can learn how to position Div's with it.
This will solve your problem:
#main-image {position:fixed;}
EDIT:
I'm not sure of what caused your problem but here is the solution:
#content{
position:relative;
top:150px;
}
My Guess:
I think that happened because when using position:fixed those 2 div's were positioned relative to the the browser window, while the other one was relative to the document itself.
In this link you will see more about positioning and you can test some of these features related to the position property:
http://www.w3schools.com/cssref/pr_class_position.asp
About the fact that one div was positioned over another, you should search for the 'z-index' property. Firefox has a 3D mode so you can see this more clearly:
http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/
Set a min-width on html and body.
Have you tried setting your #page-container to relative and your #main-image container to absolute and setting the position using top, bottom, etc. Then you should also be able to float your #content container to the right.