I'm trying to make a header which contains two buttons and a "logo". The two buttons should float right and left, relative to the browser and the "logo" should be in the absolute horizontal center, again relative to browser.
It all worked out fine until I realized that the logo sits in the center between the two buttons which differ in size, putting it off-centre.
Here's my code: Clicky
I tried some absolute positioning, but it did nothing, probably due to ignorance on my part.
#head {
position: absolute;
left: 50%;
}
It looks like you tried to use the 'text-align: center' on the parent container to make this work. And it is working, except that it's centering all 3 of those elements as a whole. You can see that here if you remove the floats: http://jsfiddle.net/aHP6D/1/.
So, one option would be to position the buttons absolutely, thus taking them out of the normal document flow. This means the only <span> that's left (and not absolutely positioned) is the one you want centered.
You can see that working here:
http://jsfiddle.net/aHP6D/2/
To center something, just set the margin to auto:
#head{
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
}
to center it completely:
#head{
position:relative:
margin:auto;
}
Setting #head’s position to absolute and left property to 50% will center its left side. Setting its margin-left property to negative half its width will pull it back to the center.
#head {
position: absolute;
left: 50%;
width: 100px;
margin-left: -50px;
}
See http://jsfiddle.net/exs78/ for an example.
Related
i want to create horizental and vertical div .
center of div popup outside like above images
and show arrow point to out side of text without bootstrap
As i have understand your questions i am trying to give you few suggestions as below:
For horizontal align you can simply give you popup div a width in px or % or any unit and add margin:0px auto;. if you are using position:absolute then give width and right:0px; left:0px; it will align horizontal your div.
For Vertical align you can either use line-height which should be same as height of your div.
or also you can use display:table; to parent div and for child div add display:table-cell & vertical-align:middle;
Hope it will work.
Generally you can just use absolute positioning, like:
.foo {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
background: lightblue; //not necessary of course
}
This way it will end in the middle of the screen (with some limitations ;)).
Another option is to use flex-box, but I would downvote it because of flex-box performance.
If you need to position it inside another div, yet absolutely centered, it will go quite similar, yet parent element has to have absolute positioning as well, in order for child element to get it right.
The div seems to center without me doing anything to center it and when I try to move it left or right, it won't cooperate very well at all and seems impossible to horizontally align. I don't understand why it starts out in the middle and I don't understand why doing things such as "margin-left:-10px" won't move it to the left at all.
*{
margin:0 auto;
}
#main_cont {
width:800px;
height:600px;
background-color:#CFA759;
position:relative;
margin-top:-20px;
margin-left:-10px;
}
You're setting auto-center margin on everything with this CSS:
* {
margin: 0 auto;
}
Remove that CSS, and rework your styling to apply auto-center margin only on the elements you need it on.
You've set all elements in the page to be horizontally centered with the code up the top:
* {
margin: 0 auto;
}
If you really need that there, then you could set position: absolute which would make the element's position relative to the first parent element that has a position other than static - W3Schools. So depending on the rest of your code, you should be okay.
I am trying to have an arrow fixed to the bottom of a div section , but for some reason its not working ,
here is my html code:
<section>
<div style="margin:auto; text-align: center; position:relative; width:61px">
<a class="scroller-arrow" href="#offset2"></a>
</div>
</section>
The CSS code :
section {
padding: 10%;
margin: 0 auto;
background-image: url("/images/text-bar-strip.png");
background-repeat: repeat-x;
height: 393px;
}
.scroller-arrow
{
background-image: url("/images/down-arrow.png");
cursor: pointer;
display: block;
height: 61px;
margin: 0 auto;
width: 61px;
position:fixed;
bottom:-11px;
}
its always showing at the bottom of my screen not the bottom of the section ?
Could you help me much appreciated :)
After clearing things up in the discussion, I believe this is what you're looking for: http://jsfiddle.net/WBF6s/
Changes include:
Removing the div.
Setting position:relative on the section.
Setting the a to be position:absolute and display:inline-block.
Setting the a to left:0, right:0, bottom:0, and margin:0 auto.
position:fixed, places the element relative to the window.
With position:absolute, the element will be moved relative to the nearest positioned parent, which means that the container must have itself a position property set.
What we usually do is make the container relatively positioned, by setting its position property to relative.
So, you should make your section or your div relative, and your arrow absolute.
as an FYI, position:fixed is reserved for placing an element on the screen regardless of the other elements there. It will fix itself to the window no matter what. If you would like it to be stuck at the bottom (or top or anything) of an element, you need to use position:absolute. The caveat with position:absolute is that you will always need its parent to have a position on it. The most non-destructive way is to give your parent position:relative and this will make sure that the parent is always in the same spot.
I've made a very quick jsfiddle to show you what's wrong:
http://jsfiddle.net/AuGe2/
When you want to position something to the bottom of an element, you need it to be
.arrow{
height:40px;
width:40px
position:absolute;
bottom:0;
left:50%;
margin-left:-20px //Or half the width of the element
}
Notice the left:50% and margin-left:-20px This is what centers an absolute element in a box. You are moving the element 50% of the way over of the parent's width, then you need to back-track a bit because it's moving the left-most side of the element. You backtrack by subtracting the same margin at half the size of the element. You can do the same with top as well.
The title and navigation bar of my website have absolute positioning so they will stay put while the images scroll under.
http://www.mikegarten.com/
I am trying to center the whole site horizontally.
I tried with this method but was unsuccessful.
I have tried to put my images into a table then centering that in a div, but then the horizontal images have empty space above and below created by the grid from vertical photos in the same row.
Is it possible to “wrap” this site, or do I need to use another approach?
There are at least three non-deprecated ways to center something horizontally.
margin: auto (explained at LearnLayout.com)
ugly hacking of position with a wrapper element (the question links to that)
even uglier hacking of position, this time setting position: absolute; left: 50%; margin-left: -<half the width of this box>
I recommend using the first method. You have to make sure the element you want to center has display: block, float: none and position set to normal or relative. Also it has to have limited width (less than 100 % of its parent), which is obvious.
You can set the left css property to 50% then add a margin-left of half the width of the element * -1, so to center your name element, set the left property to 50% and the margin-left to -132px;
#name {
position: fixed;
top: 20px;
z-index: 3;
left: 50%;
margin-left: -132px;
}
#navtext {
position: fixed;
top: 105px;
background-color: none;
width: 1000px;
left: 50%;
z-index: 3;
margin-left: -500px;
}
For your 3 columns you will need to place them in a wrapper div and set the width on it to your desired width and the margin-left and margin-right to auto.
You have made all the grid elements you have on your site position:absolute. That's why it won't center, because you've told it to be in an exact position. Also, it would help if you wrapped your grids in a wrapper div so you can position them as a whole.
Use width and margins. You can then use padding to space out the rest of the grid elements.
There is <center></center> tags in html, however I think this is outdated.
the other way is to center it using CSS giving it a width and margin:auto;
please see my fiddle: http://jsfiddle.net/qVHg8/1/
Why isn't the fixedRightCol being positioned at right:0 of the outer container div? Right now it's going outside of the container div which I don't want.
I could use position absolute, which puts the fixedRightCol in the right position but scrolls. I want the fixedRightCol to be fixed (no scroll).
so how can I get fixedRightCol position correctly and fixed on scroll?
Thanks
If you want the green div to be fixed inside the red div, you need to use position: absolute;
http://jsfiddle.net/qVHg8/2/
position: fixed; fixes the element to the viewport, rather than the parent.
EDIT:
If you're able to use a bit of javascript & jQuery, then this will work with your dynamic margins:
$(function(){
$('.fixedRightCol').css({right: $('.container').offset().left});
});
What thats doing is setting the right CSS property to be the calculated left property of the container. As the margins are the same on both side (auto), then this will shit the red div to the correct position.
http://jsfiddle.net/qVHg8/4/ is a working example of this.
When you give something a position fixed, it breaks out of any divs it may be in.
Edit:
You could just do this:
.fixedRightCol{
position: fixed;
margin-left: 350px;
width: 50px;
background: green;
}
Use margin-left: 350px; for green box with NO right: 0px; or anything...
i think you are meaning to use position:absolute;