#container {
background-color: grey;
top: 40px;
left: 50px;
width: 500px;
height: 400px;
position: absolute;
border: 2px solid black;
}
I have a single div tag in the body with this id. Nothing else. Lets say the top-left vertex of this container displays in the browser at location x,y. Now when I change the position property to relative, ironically it displays at a location ~(x+10, y+10). Why does this happen?
Did you, by any chance, remove the default margin from the body? It's likely the default margin applied by most browsers.
Try adding this:
body { margin: 0; padding: 0; }
Fiddle: http://jsfiddle.net/5TZBf/
It's because of the default margins on the page a simple reset can be done. Fiddle
*{
padding:0;
margin: 0;
}
Related
http://cdpn.io/FykHr
I seem to have an issue with the combined CSS properties:
position: absolute;
bottom: 0;
First you can see that the .footer div doesn't isn't at the bottom. Now, change the font-size from 120px to 50px and the div seems to be working the way I inteded it to.
How do I make the .footer div stay at the bottom (not fixed at the bottom of the screen) regardless of the size of the .content div.
You need to add position: relative; to the parent container, which in this case is .wrapper.
Here's a good reference page on absolute positioning.
There is one way to do that:
body {
height: 100%;
margin: 0;
}
html {
padding-bottom: 50px;
min-height: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: relative;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background-color: red;
}
http://jsfiddle.net/n8UNM/
There is still one limitation. You have to know height of footer and set it in two places.
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.
Im very new to css and I still find hard to understand some concepts especially positioning.
Anyway, my problem is that my when I set position: relative; of the container and my footer position: absolute;
bottom: 0; the footer became small. It had the same width as the container which is supposed to be before I placed those codes. I did it because I want my footer to be at the most bottom part of the container.
Below is the screen shot:
The maroon is the footer.
In my footer I don't use div but instead I use html element <footer>.
My css codes:
div#container {
height: 100%;
width: 1000px;
margin: auto;
background-color: #C9C9C9;
position: relative;
}
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
Please help.
Add width: 1000px; to your footer
Check this, if that may help you
https://developer.mozilla.org/samples/cssref/css-positioning.html
i will also encourage, you to have firebug installed in your browser
Also above the footer, add some div container, give it some height.. so that footer will stay at bottom. don't use positioning explicitly... since you are new to this.
Get yourself some time, you will be there on top of it..with CSS position :- )
Is it necessary for you to use relative and absolute positioning ? I'm asking since it has one drawback which is that the layout of the page will not be the same as always for all the different sizes of the screen.
Since you wanted to display footer at the bottom of the container, so here it can be done in this way.
<style type='text/css'>
body{
margin: 0px;
padding: 0px;
background-color: black;
}
#inbody{ /* main page */
padding-top: 10px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding-bottom: 10px;
height: 1170px;
}
#container{ /*container */
padding: 10px;
margin-top: 10px;
margin-left: 30px;
margin-right: 30px;
height: 1130px;
background-color: orange;
}
#header{ /* header */
margin-left: 168px;
height: 51px;
}
#midbody{ /* middle body */
margin: 10px;
padding: 0px;
height: 999px;
}
#footer{ /* footer */
padding: 10px;
height: 30px;
background-color: black;
}
</style>
Moreover you can change colors of every part to see the changes. Also use inspect element which shows the HTML and CSS of the web page. Also for the box model concept try experimenting the metrics in the inspect element.
You are using;
footer {
background-color: #340B09;
height: 50px;
position: absolute;
bottom: 0;
}
If footer is some ID or Class, it should be defined in CSS like #footer or .footer and no problem if you are using html5 element footer.
If you want to stretch an element to fill container, use width: 100%. Add this to your footer if footer is inside your container. Otherwise it will stretch to screen.
I properly solved it by declaring width of footer to 980px; When I tried 1000px it became wider than the container because after researching I found out that mozilla and webkit doesn't include padding in the width.
Here's a puzzle. Basic page, one element:
http://jsfiddle.net/PZj6t/
HTML:
<div id="container"></div>
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
}
#container {
position: relative;
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
}
That one looks how I want, with the #container neatly flush to the top. But when I add a nested element:
http://jsfiddle.net/PZj6t/1/
HTML:
<div id="container">
<nav id="topnav"></nav>
</div>
CSS (new):
#topnav {
width: 100%;
height: 40px;
margin: 30px 0;
background-color: red;
}
The container jumps down. It seems that the margin-top from #topnav is somehow being passed to the container, and now the page has a scrollbar I don't want. (I'm testing in Chrome.) How do I prevent this?
(As a further mystery, if I add border: 1px solid white; to the #container's CSS, the jump disappears. Which would be fine, except that also adds two pixels worth of undesirable scroll to the page.)
This is due to a feature of CSS called margin collapsing. If there is no padding or border on a parent element, the parent and its child's margins "collapse" to the greater value of the two and is essentially applied to the parent.
For your situation, I would suggest simply adding an additional inner wrap within the container, and throwing some padding on it to simulate the margin effect you're looking for: http://jsfiddle.net/PZj6t/3/
Anything within the #inner div or below should behave as you expect, as margins only collapse when they are at the edge of their parent (and no padding or borders are present).
display:inline-block;
On Your nav element appears will fix this. Its to do with margin-collapsing see here for more detail.
Jblasco is correct, this is a neater solution though: http://jsfiddle.net/PZj6t/4/
#container {
position: relative;
margin: -1px auto 0;
width: 400px;
height: 100%;
padding-top:1px;
background-color: #666;
}
#topnav {
width: 100%;
height: 40px;
margin: 29px 0 30px;
background-color: red;
}
#container {
margin: 0 auto;
width: 400px;
height: 100%;
background-color: #666;
border:1px solid;
}
http://jsfiddle.net/PZj6t/12/
Update:
http://jsfiddle.net/PZj6t/1/
apply display:inline-block; on both container and topnav
I've got a bit of a css issue. I'm have a container div with a set size and an absolute position. Inside that I have an element of some kind and a div. the element can be a button or a input in my example. The button follows the rules and is 100% of the container, the input doen't follow the rules and is more than 100% of the container. Whats going on and how do I go about fixing it? jsfiddle - Click either widget to see its bounds.
CSS
.Object
{
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
}
.Object .Cover, .Object button, .Object input
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index:0;
}
.Object button
{
padding: 2px;
}
.Object .Cover
{
cursor: move;
z-index:1;
}
HTML
<div class="Object" id="3b089a23-7732-e743-aea4-d9dcef359d4e" name="Unnamed Widget" style="height: 30px; "><div class="Cover"></div><input /></div>
<div class="Object" id="e1bc0640-e049-eda8-05ac-0a99c21c6fe1" name="Unnamed Widget" style="height: 30px; top: 10px; left: 210px; "><div class="Cover"></div><button data-click="">Unnamed Button</button></div>
The 104 px is caused by the box-model. When set to default it will take into account the borders and padding of the element, seeing as an input has default padding and borders (ipx in this case), it added up to 4 and made it "grow" out of its parent.
If you add box-sizing: border-box; to your input selector (I moved it to a standalone selector) and set your own border styles, it works as you desire :)
.Object input
{
box-sizing: border-box;
width: 100%;
height: 100%;
/*border: 0;
padding: 0;*/
border: 1px solid #ccc;
background-color: #eee;
}
http://jsfiddle.net/K5D9z/13/
Hope it helps.
Note: afaik IE6, 7 won't work as expected, but you can just use a conditional comment and set its width/height differently.