[xwiki-users] centering a DIV
Hi all, Please has any body know hot to center <div id="xwikimaincontainer">? I am working with a customized network based on toucan. XE 1.3. And I am not able to figure out how to do that. Thanks! Ricardo -- Ricardo Rodríguez Your EPEC Network ICT Team
Heya Ricardo, The <div id="xwikimaincontainer"> is centered automatically when you either do not use any panels, or use both left and right panels. Mazzel, Martijn.
Hi Martin! martijn.ras wrote:
The <div id="xwikimaincontainer"> is centered automatically when you either do not use any panels, or use both left and right panels.
Thanks for the input! But I am not so sure about this "centered automatically" behaviour. For instance, in a "no side panels" scenario, fix max-width for body (you will find it under /* @group Layout */. Let's say max-width:800. This class will read: /* @group Layout */ body{ font-size: 87.5%; /* 10px */ font-family: sans-serif; color: #222; width: 100%; padding: 0; margin: 0 ; max-width: 900px; background-image: url( images/colors/gray/H4x4-GRAY.png ); background-color: #fff; } At least for me here (several browsers), the "main frame", the area with contents, is not centered but aligned left. The result is the same whatever layout you choose. Really it looks as expected as I am not able to find code that must center it. But the problem is that I am not able to find how to do that. The auto margin trick is failing. Perhaps the problem is to find what is the DIV we have to reference to get this one centered. Anyway, I keep trying and posting here any positive result. Mazzel, -- View this message in context: http://www.nabble.com/centering-a-DIV-tp16519663p16537212.html Sent from the XWiki- Users mailing list archive at Nabble.com.
[Ricardo Rodríguez] wrote:
Hi Martin!
martijn.ras wrote:
The <div id="xwikimaincontainer"> is centered automatically when you either do not use any panels, or use both left and right panels.
Thanks for the input!
But I am not so sure about this "centered automatically" behaviour. For instance, in a "no side panels" scenario, fix max-width for body (you will find it under /* @group Layout */. Let's say max-width:800. This class will read:
/* @group Layout */ body{ font-size: 87.5%; /* 10px */ font-family: sans-serif; color: #222; width: 100%; padding: 0; margin: 0 ; max-width: 900px; background-image: url( images/colors/gray/H4x4-GRAY.png ); background-color: #fff; }
At least for me here (several browsers), the "main frame", the area with contents, is not centered but aligned left.
The result is the same whatever layout you choose. Really it looks as expected as I am not able to find code that must center it.
But the problem is that I am not able to find how to do that. The auto margin trick is failing. Perhaps the problem is to find what is the DIV we have to reference to get this one centered. Anyway, I keep trying and posting here any positive result.
Mazzel,
This almost works (in intelligent browsers): #xwikimaincontainer { width: 800px; margin: auto !important; } To make it work in IE also, something like this should work (can't test as I don't have IE): #body { text-align: center; } The problem is that the background X is not suited for this kind of layout. -- Sergiu Dumitriu http://purl.org/net/sergiu/
Hi, Sergiu Dumitriu wrote:
This almost works (in intelligent browsers):
#xwikimaincontainer { width: 800px; margin: auto !important; }
To make it work in IE also, something like this should work (can't test as I don't have IE):
#body { text-align: center; }
The problem is that the background X is not suited for this kind of layout.
I am trying this solution and I am not able to get it working (perhaps this is included in your "almost"!). I concentrate first in "intelligent browsers", Firefox, OmniWeb and Safari included. I am adding... #xwikimaincontainer { width: 800px; margin: auto !important; } to the Style.css included in a XWiki.XWikiSkins object (customized skin). #xwikimaincontainer is added to the bottom of the record. Width works like a charm. Any other margin option works without a glitch. But auto doesn't produce the expected effect. The only reason I can figure out is that this is not the only class affecting position of #xwikimaincontainer and there is another class prevailing that sets border to 0pt. In this case, my doubt is why does other border settings work? Here what I see in Firebug... <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>...</head> <body id="body" class="xwiki_test01 viewbody hidelefthideright"> <div id="xwikimaincontainer"> <div id="xwikimaincontainerinner"> </div> </div> </body> </html> I interpret that only #xwikimaincontainer class must affect xwikimaincontainer div position, but it is obviously wrong. I do need to improve my CSS skills (among many other things...)! Any help will be really welcome to work out this issue. Thanks. Cheers, Ricardo -- Ricardo Rodríguez Your EPEC Network ICT Team
participants (4)
-
[Ricardo Rodriguez] Your EPEC Network ICT Team -
[Ricardo Rodríguez]
-
Martijn.Ras -
Sergiu Dumitriu