birdbrain
msg:4319480 | 7:20 am on May 30, 2011 (gmt 0) |
Hi there manu08,
and a warm welcome to these forums. ;)
Apply width:940px; to your #wrapper and .footer rules, then adjust to suit your taste. :)
birdbrain
|
manu08
msg:4323878 | 8:46 am on Jun 9, 2011 (gmt 0) |
I tried that, but then the width is fixed to 940pixels and there is a white background all around the "wrapper".
I want it such that the background colors still flow to the left and right of the centered content, if that makes sense? Similar to how most modern websites are today.
|
lucy24
msg:4324215 | 7:05 pm on Jun 9, 2011 (gmt 0) |
Take a closer look at the code of those modern websites and you'll find an explicit width declaration. Depending on how the site was constructed, it is either hard-coded into the html and css-- one size fits all-- or built dynamically based on a reading of your own window width (or, worse, total screen width: if you've got a 27" monitor I can jolly well force you to use the whole thing for my page).
Most but not all current browsers will support this format:
div.maintext {margin-left: auto; margin-right: auto; width: 24em;}
(width based on your personal needs) but at least one browser will ignore the "auto" and left-align the whole thing.
For anything beyond centering all text everywhere-- which is trivial but not what you want-- there has to be an explicit width declaration of some kind. That is, you can't simply say "make this part as wide as it needs to be and no wider". There has to be something in ems or pixels. (Not both in the same declaration, or the validator will yap-- for good reason.)
The minimalist version is
div.maintext {margin-left: 10%; margin-right: 10%;}
but this is really only sufficient for text-intensive pages.
|
SuzyUK
msg:4324377 | 1:56 am on Jun 10, 2011 (gmt 0) |
@manu08.. that is what happens - you fix the width so the browser knows how much it's got to center. The backgrounds you speak of then need to go on the containing div, body or html elements so that the space is not "white" anymore
the other way is to use a "faux column" kind of background but that still goes on the overall containing element and only makes it look as if the text portion is magically centered, most every site is centered using margin: 0 auto unless it's a table using the <center> tag.. gasp!
|
LinCor
msg:4325268 | 8:00 pm on Jun 12, 2011 (gmt 0) |
For text, set your <div class="content">
DIV.content{
TEXT-ALIGN: center
}
For tables or box
TABLE.XXHH{
MARGIN: auto;
}
Usually I use tables to control the look and feel of the page.
|
lexipixel
msg:4325324 | 1:20 am on Jun 13, 2011 (gmt 0) |
Or go old school...
<table align="center" cellspacing="0" cellpadding="0" width="400" border="1">
<tbody>
<tr>
<td align="right" width="400">
table centered, stuff right aligned
</td>
</tr>
</tbody>
</table>
or
<center>stuff is centered</center>
or mix it up...
<center>
<div style="width:400px; border:1px solid black;">
<p style="text-align:left;">div is centered, stuff is left</p>
</div>
</center>
|
|
