This is my HTML:
<div id="mitte"><img id="img_mittig" src="tienda.png" /></div>
And this my css:
#img_mittig{ display: block; margin-left: auto;margin-right: auto;}
The img is center right, but when I try, for example, to move down the image with top: 200px;, it doesn't work. Why ?
You need to add position on your element to be able to use top.
So for example:
#img_mittig { position: relative; top: 200px; }
top:200px will only work with position:absolute or position:relative; or position:fixed
what you are trying to achieve can be achieved using margin-top:200px;
You cant move block element with no positioning with "top, left, right, bottom". Use margins and paddings. For example margin-top: 200px;
If you want move img by setting top: 200px then set position: relative for img.
Related
I'm currently changing a PSD design to a HTML site. I've come into an issue however. I am unable to center a certain element. I've tried all the usual tricks.
http://lowhop.net/
See here the main blue header is out of line (not centered). I tried
#slider{
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
Before, however it didn't work reliably. (Appeared only to work on my screen resolution/browser).
Thanks
You need to explicitly define a width on the element when using margin: 0 auto to center.
Block elements take up the full available viewport width unless you explicitly give them a width.
Since you explicitly set the width of the slider DIV, you can use another trick to center it:
#slider
{
z-index: 2;
background-image: url(../img/sliderbg_09_09.png);
position: absolute;
display: block;
width: 982px;
height: 251px;
left: 50%;
margin-left: -491px; /** half DIV width */
}
I'd probably steer away from having this as a position absolute DIV, doesn't look like it needs it but that's a quick and dirty centering :)
Hope that helps
If you must use absolute positioning, you can use something like my answer here.
Basically, you declare an explicit width for your element, then give it
left: 50%;
margin-left: -[your width/2];
like user showdev mentioned :
Does it need to be positioned absolutely? Does it even need to be centered? It looks like you've positioned div#navBar simply by adding margin-left: 85px. It seems that you could use that same method for div#slider.
you have
#navBar {
background-image: url("../img/navbg_07.png");
display: block;
height: 38px;
margin-left: 85px; /* attention on this */
margin-top: 31px;
position: relative;
width: 879px;
z-index: 1;
}
and this
#slider {
background-image: url("../img/sliderbg_09_09.png");
display: block;
height: 251px;
position: absolute;
width: 982px;
z-index: 2;
}
so, try 'margin-left: 85px;' your #slider.
The final ancestor div in my page needs a margin on all four sides, to give it a panel effect. Here is my code:
CSS:
html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner { /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}
HTML:
<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>
As you probably guessed, there is a lot more going on here than what is written. I have several columns with divs that all need this margin for the panel effect on the .inner div. Thanks for any help.
BTW, I have tried absolute positioning and it only positions based on the window, not on the parent element, even if I set the parent to position: relative.
If you set .inner to width 100% and add a margin, it will be wider than its container. You can set a padding or a border instead. For example, you can add a white or transparent border of 10px.
Another option is to make #bibletree position relative, then make .inner position absolute and specify top, bottom, right and left:
.inner {
bottom: 10px;
top: 10px;
left: 10px;
right: 10px;
position: absolute;
}
This will make it the same size as #bibletree, minus 10px on every side.
Margin:10px is working right?? you need not no specify the width for inner div, as div is already has block option. check here updated demo http://jsfiddle.net/QShRZ/5/
Is it possible to position a DIV relative to another DIV? I imagine this can be done by first placing it inside of the reference DIV, and then using position: relative. However, I can't figure out how to do this without affecting the contents of the reference DIV. How can I do this properly?
See: http://jsfiddle.net/CDmGQ
First set position of the parent DIV to relative (specifying the offset, i.e. left, top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want.
It's simple and should do the trick well.
You need to set postion:relative of outer DIV and position:absolute of inner div.
Try this. Here is the Demo
#one
{
background-color: #EEE;
margin: 62px 258px;
padding: 5px;
width: 200px;
position: relative;
}
#two
{
background-color: #F00;
display: inline-block;
height: 30px;
position: absolute;
width: 100px;
top:10px;
}
You want to use position: absolute while inside the other div.
DEMO
you can use position:relative; inside #one div and position:absolute inside #two div.
you can see it
Here's the site link with the "backbone" structure: http://www.vomow.net
Basically what i need to to is to put a div centered on the page, the same height, but 800 px width. The div needs to be with no background.
I've tried with "z-index" but didn't have any luck.
Can someone help?
I tried on your website this :
element.style {
margin-left: auto;
margin-right: auto;
width: 800px;
}
and it helps.
Good Luck !
If you just want to center a div, you could do like this:
#myDiv {
width: 800px;
margin-left: auto;
margin-right: auto;
}
But I'm not sure whether you want this div to cover some of the ones you have at the top. In that case, you could use position: relative; and then adjust the top property.
Some code would be useful, but I think you should use:
position: absolute;
To center div with absolute position use:
left: 50%;
margin-left: -400px; //this is because your div's width is 800px
It can also be written as follows:
#yourdiv{
margin: 0px auto;
width:800px;
}
Good luck!
I'm trying to achieve an image flowing out of a div. Basically, in my heading I have a fixed width of 960px, the logo image has something coming off of it, which I would like to sit outside that 960px.
Is there a nice clean method of achieving this?
The simple method of doing it (that works in most browsers), is that you make your main wrapper have position:relative, and the make the div (that you want to flow outside) have position: absolute; left: -25px; top: -25px;.
Having position:relative as the wrapper makes the position:absolute relative inside the parent container.
put your logo in fixed div and give that div a style overflow:hidden
You could also absolute positioning to achieve this. Quick example below:
http://jsfiddle.net/spacebeers/9QJ4w/1/
You can use the position property of CSS to accomplish this:
HTML:
<div><p>Some content<img src="http://placehold.it/50x50"></p></div>
CSS:
div
{
width: 100%;
height: 175px;
}
div p
{
width: 960px;
margin: 0 auto;
background-color: #333;
height: 175px;
text-indent: 20px;
}
div img
{
position: relative;
right: 140px;
}
http://jsfiddle.net/FpTDc/
Your friend will be overflow:visible.
Your containing div will have the 960px width with overflow:visible. Inside, you will have a relatively or absolutely positioned image (you will need to offset 'left' to center it)
<div>
<img src="" />
</div>
div { width:300px; height:100px; background:red; margin:100px; }
img { width:100px; height:100px; background:green; margin:-20px 0 0 -20px; }
code: http://jsfiddle.net/cSQrR/