Hi all,
I'm building a new theme for my Oxwall site. It's almost finished but I'm struggling with one thing. I can't get my user console (signed out as well as logged in) horizontal centered at the top of my page.
Does somebody have a way to manage this?
Greetz!
We build. You grow.
Get best community software hereStart a social network, a fan-site, an education project with oxwall - free opensource community software
Center user console | Forum
Benjamin
May 16 '11
Maybe it helps to show what I want to do using an example.
So, I want the user console centered at the top of the page. It had to be centered when I'm logged in AND when I'm logged out. That's the thing I'm fighting with.
Kind regards,
Benjamin
So, I want the user console centered at the top of the page. It had to be centered when I'm logged in AND when I'm logged out. That's the thing I'm fighting with.
Kind regards,
Benjamin
The Forum post is edited by Benjamin May 16 '11
Rajoo
May 16 '11
hi Benjamin
In your base.css try to change the value of right:0px and see if it works
.ow_console{
font-size: 11px;
height: 30px;
margin-top: 0px;
position: absolute;
top: 0px;
right: 0px;
z-index: 99;
}
In your base.css try to change the value of right:0px and see if it works
.ow_console{
font-size: 11px;
height: 30px;
margin-top: 0px;
position: absolute;
top: 0px;
right: 0px;
z-index: 99;
}
Benjamin
May 16 '11
Thnx for your reply! With "right:0px;", the console is positioned at the right, not in the center.
Julio Marchi
Jun 19 '11
With CSS is hard to center anything with "absolute" positioning. However, you can use the CSS "auto" statement for margin-left and margin-right and it will center your DIV! Try this:
.ow_console{
font-size: 11px;
height: 30px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: {the desired 'width' of your container }px;
display: block; /* it helps to keep items inside the container in case of overflow */
white-space: nowrap; /* It will prevent lines to break if container is smaller */
z-index: 99;
}
Keep in mind that I have no idea of how your design is. You may have to move your DIV to the exactly position you need it in the code to have it displayed in the position you want. Also make sure its size will be enough to fit the contents.
There are many "tricks" in regards to DIVs and CSS to have it positioned exactly where you want. One of my favorite tricks is to create a container with the WIDTH = Size of Page (100%) but with HEIGHT = 1px, then inside this container (DIV) I put my other container (DIV) which I want to "float centered" (but that would never do it because you can't center floated DIVs without JavaScript), and using the margin-left & right with "auto" as above described it will center the desired DIV inside the DIV with 100% attribute without affecting (pushing) any other DIV element around.
Just play with this a little bit and you will find many usages and ideas!
Good luck!
Best Regards.
Julio Marchi
.ow_console{
font-size: 11px;
height: 30px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
width: {the desired 'width' of your container }px;
display: block; /* it helps to keep items inside the container in case of overflow */
white-space: nowrap; /* It will prevent lines to break if container is smaller */
z-index: 99;
}
Keep in mind that I have no idea of how your design is. You may have to move your DIV to the exactly position you need it in the code to have it displayed in the position you want. Also make sure its size will be enough to fit the contents.
There are many "tricks" in regards to DIVs and CSS to have it positioned exactly where you want. One of my favorite tricks is to create a container with the WIDTH = Size of Page (100%) but with HEIGHT = 1px, then inside this container (DIV) I put my other container (DIV) which I want to "float centered" (but that would never do it because you can't center floated DIVs without JavaScript), and using the margin-left & right with "auto" as above described it will center the desired DIV inside the DIV with 100% attribute without affecting (pushing) any other DIV element around.
Just play with this a little bit and you will find many usages and ideas!
Good luck!
Best Regards.
Julio Marchi
