Hello. Anybody knows how can I center my tattoo website? It looks weirdly left-aligned right now. Regards!Â
I added this to the body tag, but all it did was move the website 5 pixels to the left. The crown-like repeated patterns to the left and right seem to be fixed and unaffected no matter what I do. Only the large rectangular placeholder within these left and right borders moves.
The first one needs to be added to body, the second one to each of your main containers ( header and content ).
text-align: center; centers the text of the website (including post content), which I don't want to happen.
Yes, but even when I add text-align: center to the BODY tag, it still doesn't center the whole site - only the post contents.
first of all it looks like the layout of your website is not proper.. 1) remove the background image from the body tag 2) create one more main div tag and..add the background image to this main div tag 3) now in this main div tag...add the header,content,sidebar and footer..so the code should be something like this.. <body> <div id="main"> <div>Header</div> <div>content</div><div>sidebar</div> <div>footer</div> </div> </body> all the header,contents ,sidebars and footer should be in the main div tag 4) now the main part.. use the CSS #main{ backround : now whatever your image is.. margin-left:auto; margin-right:auto; } now this may do your stuff..it will center your whole website..Â
Here's the correct way of doing it. Before and after your <body> tag you need to place your entire web site in a wrapper. Right after <body> <div id="wrapper"> HTML: Right before </body> </div> HTML: Now that will allow you to set styles that will effect the entire web site. Next, add these lines to your stylesheet. #wrapper{ width:900px; margin:0 auto; } HTML: You can change the width to fix your needs. But, remember, you have to have the width for this to work. Also, you can remove text-align:center; from the body tag, you don't need it there. Hope this helps!
@qadeer: This is the result of your solution: http://i51.tinypic.com/34e9vm9.jpg @Zach Hornsby: This had no effect at all. Do you think this small portion of the theme's style.css file is causing the whole thing?: * { margin: 0; padding: 0; } HTML: Â
You should re-write it in strict instead of transitional. There are too many margins, background is 2 in 1 image, cut in two small pieces because its width is fixed for main content try this: (width: x% <--> "too many margins" Anyway three columns is needed: left image+content+right image. <div id="main"><div id="left"></div>+<div id="content"></div>...</div> css: #main: { width x%; margin-left: auto; margin-right: auto;} Good Luck
I look though your code. This is how you can fix it: Open your style.css, change the following lines body background:url("images/bg.gif") repeat-y scroll left top #FFFFFF -> background:url("images/bg.gif") repeat-y scroll center top #FFFFFF #header margin: 0 9px 0 -> margin: 0 auto; #wrap add margin: 0 auto; #footer margin-top:50px -> margin: 50px auto 0 auto; Done! - Rufas
Just like what Zach's said, better give your entire "content" a wrapper. your current HTML: <body> <div id="header"></div> <div id="wrap"></div> <div id="footer"></div> </body> Code (markup): change it to: <body> <div id="wrapper"> <div id="header"></div> <div id="wrap"></div> <div id="footer"></div> </div> </body> Code (markup): and add these on your style.css: #wrapper { width: 740px; margin: 0 auto; padding: 0 30px; background: url("images/bg.gif") repeat-y 50% 0; } Code (markup): remove the background and margin property from "body", and you can also remove width property from #header, #wrap & #footer
Put the whole thing in a <div> tag and the syntax should like this <div align="center"> rest of the site comes here</div>
Replace your #header #wrap #footer css with the code below: #header { height: 192px; width: 740px; background: #4376C9 url(images/header.jpg) top right; border-bottom: 6px solid #B1E100; text-align: left; padding: 1cm 1cm 0 1cm; margin: 0 auto; } #wrap { width: 825px; margin: 0 auto; } #footer { clear: both; width: 740px; margin: 0 auto; padding-left: 30px; margin: 0 auto; } Code (markup):
/*CSS File */ body { text-align:center; /* for IE */ margin:0 auto; /* for the rest */ } div#wrapper { text-align:left; width:_ _ _px; /* or a percentage, or whatever */ } /*html file*/ <body> <div id="wrapper"> /* Your rest content */ </div> </body>
here are good information. This is simple <html> <head> <title> </title> <head> <body align ="center"> </body> </html>