I need to align a image to the center of the browser window, therefore i created the following css:
#charset "utf-8";
/* CSS Document */
html {
background-color:#CCCCCC;
}
body {
margin:0px 0px 0px 0px;
}
img {
position:absolute;
border:0px;
left:50%;
top:50%;
margin-left:-156px;
margin-top:-217px;
}
The problem is however that if you make the browser window very small, the image floats out to the top and the left. Instead it should be fixed in the top left corner, and then give the possibility to scroll to see the rest of the image.
View the problem here: ejlstrup.com
Try the following css:
img {
border: 0px;
margin: auto auto;
}
The problem will be with your negative margins, they are what is causing the image to be pushed to the left out of view. If you use margin: auto auto, it should center the image for you and you won't have to use absolute positioning with percentages.
Edit: Just tested my method and it didn't work as intended. What you can do then (if you don't mind using a div), is to wrap the image in a div. Make the div the size of the image, then the margin: auto auto; will work properly.
Edit2: Credits to Senthil for pointing out that if you set the image display property to block, you don't have to wrap the image in a div for it to center. However, auto isn't working for centering the div vertically, if it needs to be center you can use a percentage (although I'm not sure if this can cause problems with different resolutions).
img {
border: 0px;
margin: auto;
display: block;
}
Related
This website is designed for tablets, and the problem is, when the window is resized, there is a margin, or some kind of gap between the three divs and their background images (they are stacked vertically). The image is a chalkboard in three pieces. The middle div needs to be able to expand with text input while the top is static and bottom piece gets pushed down as the middle expands.
Link to site:
url no longer available
CSS for the Divs so far
.blackboard1 {
background:url(../img/chalkboardtop.png);
height: 28px;
background-size:100% auto;
background-repeat:no-repeat;
z-index:9999999;
}
.blackboard2 {
background-size:100% auto;
background:url(../img/chalkboardmiddle.png);
background-size:100% auto;
background-repeat:repeat-y;
z-index:-9999999;
padding-top:28px;
padding-bottom:35px;
overflow:visible;
}
.blackboard2 p{
color:#fff;
background-color:none;}
.blackboard3 {
background-size:100% auto;
background:url(../img/chalkboardbottom.png);
height: 28px;
background-size:100% auto;
background-repeat:no-repeat;
z-index:9999999;
}
#blackboardWrap {
background:url(../img/chalkboardmiddle.png); */
background-size:100% auto;
background-repeat:repeat-y;
}
One solution I used which i don't think is optimal, is to have the image that serves as the middle image, also serve as a fourth background that wraps around all three divs and sits behind them. This way when there are "cracks" between the divs, you can't notice as much. Using this solution it seems like it will add to loading time and also doesn't quite look right.
Gaps are because of margins:
p {
margin: 0 0 10px;
}
please remove those margins and see if gaps are still there or not.
How to horizontally center a div of 10000px (or others wider than full screen) in CSS?
e.g.
#widerdiv{
width:10000px;
height:100px;
border:#009933 1px solid;
}
it seems "margin: 0 auto" doesn't work in this situation
Try add similar to
position: absolute;
left: 50%;
margin-left: -5000px;
As ridiculous of a width as that is.. I have two solutions for you.
The margin won't work because it has nothing to align itself with so here are two possibilities.
First Solution: Use a div to wrap it. The JsFiddle and the code below:
<div id="wrapper">
<div id="widerdiv"></div>
</div>
CSS for first solution
#wrapper{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Second Solution: Define your body width. The JsFiddle and the code below(which is only CSS because I would not have modified your HTML) :
body{
width: 1000px
}
#widerdiv {
width:500px;
height:100px;
border:#009933 1px solid;
margin: 0 auto;
}
Now, by all means necessary, you can make that width as big as you want (heaven forbid the horizontal scrolling...) but if you play with those JsFiddles, you are going to realize that you absolutely need to define a width of whatever this Div is inside of.
Last, the Almanac is going to be your friend on this one. And as a quick breakdown, incase you decide to try vertical positioning, this is what happens when you use 'margin: 0 auto;' in CSS:
"The element is given a specified width
The left and right margins are set to auto
Without the specified width, the auto values would
essentially have no effect, setting the left and right
margins to 0 or else to whatever is the available space
inside the parent element.
It should also be pointed out that auto is useful
only for horizontal centering, and so using auto for
top and bottom margins will not center an element horizontally,
which can be confusing for beginners."
The quote above is also referenced in the Almanac.
in my website there is 3 vital parts
Top Bar (must remain in the top, not fixed, 40px height, 100% width)
Timeline this is always floating left to the main area, the timeline is not re sizable, it is neutral in size
main area re sizes with the window it is Horizontally scrolled so it can be small width as long as you can still keep scrolling right/left
here is my progress so far......
JSFiddle
My issues:
the top bar child elements are not aligned. like those simple inputs/text is at the bottom of the topbar and part of it is hidden, this doesnt happen with the image removed?? i need the top bar to always keep elements inline vertically centered and never resize in height
i cant get timeline and main area to take up the remaining height, i have them at 800px because nothing was working.
width: 100%;
height: 100% !important;
margin: 0px;
I added a padding and checked your fiddle it looks much better. Is it this what you are after?
.top_bar
{
z-index:100;
width:100%;
height:40px;
max-height:40px !important;
background-color:#ffff00;
color:black;
padding:40px;
overflow: auto;
}
For your top bar just float your image:
.wtblogo {
float:left; /* Add this to your current CSS */
}
and add a line height equal to your top bars height to vertically align objects with in it:
.top_bar {
line-height: 40px; /* Add this to your current CSS */
}
I am not sure what you mean for your second issue.
For #1 you can easily fix it by adding:
vertical-align: middle;
to your image class.
So you'll have:
.wtblogo {
height: 40px;
vertical-align: middle;
}
For #2, I'm not sure what you're trying to do. Could you clarify?
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
I would like to align my container div to center vertically just like it is aligning himself horizontally because of margin: auto;. I've searched some time on google on how to do that but it does not seem to be working for me. Maybe there is some kind of universal way to do that, as easy as margin: auto; method for horizontal centering? Because it seems for me very strange that we live in 2011 year and there is still no simple css command for doing this task...
#container
{
margin: auto;
width: 960px;
height: 640px;
background-color: brown;
}
There are tons of tutorials for vertical alignment, especially for IE, which needs special care. One of them: Vertically center content with CSS. Also another answer here.
Can it be even simpler...
html, body {
overflow:hidden
}
#container {
width:960px;
height:640px;
position:absolute;
top:50%;
left:50%;
margin-top:-320px;
margin-left:-480px;
background:brown
}
The overflow:hidden is to hide the scrollbar that appears (html for IE6 and body for IE5). I don't know why this happens.
But if you want to keep it scrollable if the browser window is smaller, just make the height 639px and remove the overflow:hidden.
If your div has a fixed height, you can align it vertically by adding another div (with a float) with a negative margin (half the height of the main div) and then alter your div's CSS (adding the clear).
Also don't forget to specify the 100% height of the html and body, without that it doesn't work.
Like this:
CSS:
html {
overflow: auto;
}
html, body {
margin:0;
padding:0;
height:100%;
}
#alignDiv {
float:left;
height:50%;
margin-bottom:-320px; /* half the centered div */
width:1px;
}
#container
{
margin: 0 auto;
width: 960px;
height: 640px;
background-color: brown;
clear:left; /* without the clear it won't center */
}
html:
<div id="alignDiv"></div>
<div id="container"></div>