Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
I have tried to center the page but haven't got any results.
I have Been Working on this website during the weekend, Please share your opinions.
Site link
Thanx a lot. -
-
CommentAuthorImpress Lab
- CommentTimeApr 2nd 2008
Consider making the navigation text on the left smaller as it is large right now, resulting in a lot of scrolling. Nice graphics, especially the form submit buttons. The background is nice as well - something different than all those wood designs we see now. Consider also centering the page (margin:0 auto; in the body { }). -
-
Thank you Chris! I am still working on it, I'll try to center it tonight.
-
An excellent approach to centering page elements is the following in CSS...
<style>#element{position:absolute;left(or right):50%;margin-left(or right):-(half element width to centre, or other adjustment)px}</style>
The trick here is negative margins (or normal) and percentage absolute position (work from 50%).
You will find this a very flexible idiom, try, for example, placing several elements independently.
There is an illustration of this approach at... http://www.rebecca-fong.net/
All the CSS is in the page.
You might also like the slide-show cross-fade effect in JavaScript/CSS -
Thank you guys for your help, but I can not get it to center yet. I'll work some more tonight.
-
to centering the page do this (margin:auto; ) in the #mainWrapper
-
Regrettably, margin:auto is not cross browser compatible.
-
-
CommentAuthorbenjitastic
- CommentTimeApr 5th 2008 edited
As far as I know margin:auto works in all common browsers except for IE5.5 and earlier. You can use text-align: center to place an element in the center in IE5.
I would suggest doing something like this:body {
text-align: center;
}
#mainWrapper {
margin: 0 auto;
text-align: left;
} -
-
There is always <center></center> ... HA HA HA.
Setting the margin of the left and right side to "auto" should do the trick, make sure you have a width applied to that element though. I don't advocate using "text-align:center" -- generally if that is the only way you can get it to work; you have bigger problems to fix. -
As benjitastic said previously I've found that the most cross browser compatible way to center pages is to use
body {
text-align: center;
}
#mainWrapper {
margin: 0 auto;
text-align: left;
} -
Go with benjitastic's suggestion, it's the easiest and best way. Also one thing that hasn't been mentioned (because it's maybe self explanatory), is that the #mainWrapper needs to have a fixed width for the centering to work.
brent
@
mimoymima.com -
Bleulemon, thanks to the webDeveloper extension for firefox I was able to edit your css in real time, and I added the following to your existing styles and it worked:
/* Align your html elements to center
html {
text-align: center;
}
body {
position: relative; /* make your body position realtive to html
text-align: left; /* align all your elements in the body to the left to make it look the way it should be
/* to center the body you need to set a fixed width and set right and left margins to auto
margin: 0 auto;
width: 1000px;
padding:10px 0;
========================================================================
Showing the first two lines of your actual css it would look like this:
/* -GLOBALS- Exclusive Teak Patio Furniture*/
* { margin:0; padding:0; }
html {
text-align: center;
}
body {
position: relative;
text-align: left;
width: 1000px;
padding:10px 0;
font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
color: #401700;
background-image: url(http://londonteak.com/includes/templates/classic/images/bg.jpg);
background-color: transparent;
} -
OK I forgot to give you some useful links.
The web developer toolbar for mozilla: http://chrispederick.com/work/web-developer/
And the answer to how to center your content, I found it in a nice book, http://www.transcendingcss.com/
Clarke, Andy. Transcending CSS: The fine art of web design. Berkeley, CA: New Riders, 2007. -
This question has been answered enough times already, but just to add my 2 cents worth I always using auto margins on a container element. I.e.
body {
text-align:center;
}
div#container {
width:800px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
With HTML like:
<body>
<div id="container">
My Text
</div>
</body>
For example used on this site. apple mac. Just check out the stylesheet and view source on the page for more information.
I always liked the <center> tag Lol... But this is the quickest and easiest solution I've found.
1 to 14 of 14