Web Development

28-May-06 18:05

Hi guys,

Having always been in the fortunate position to work in a team where we've had a designer I've never paid too much attention to designing stylesheets, etc (yep, I am gaining a newfound respect for designers Blush | :O

)

Anyway, I've started out with a stylesheet and a single default.aspx page, and some elements on my default page work great, others don't:

body <br />
{<br />
    background-repeat: repeat-x;<br />
	margin: 1;<br />
	padding: 0;<br />
	text-align: center;<br />
	font-family: verdana, arial, helvetica, sans-serif;<br />
	font-size: 0.9em;<br />
	color: #575757;<br />
	width: 800px;<br />
	border: double: 3px 3px 3px 3px: #5f5bb2;<br />
}

The margin is great, the text aligns in the center, the font displays nicely as verdana, the font color and size are great. However, the border doesn't display and although text on my page is centered, images aren't. Am I incorrect in thinking that text-align: center; should align everything on the page in the center?

What I'm actually hoping to do is have an 800px centered body, and that containing a div with text aligned to the left so that there's always equal space on either side of the main body, regardless of monitor size, but the text is left aligned.

I really should have taken more notice of what the design team were up to. Thanks for any help Smile | :)

A mum and loving it!

-- modified at 0:06 Monday 29th May, 2006

I forgot to say - the images I'm hoping to center this way atm are my banner and links images, so they're 800px wide. Thanks!

Guffa28-May-06 19:04

Guffa

28-May-06 19:04

Corrections:

margin: 1px;<br />
<br />
border: double 3px #5f5bb2;

The text-align property only affects text, not block elements.

---
b { font-weight: normal; }

Megan Forbes28-May-06 20:16

28-May-06 20:16

Thanks Guffa, I must be working out of an old book (that's what comes of using books from the local library I guess).

Guffa wrote:
The text-align property only affects text, not block elements.

Can you tell me what property I should use for this then? Thanks Smile | :)

A mum and loving it!

Guffa28-May-06 21:33

Guffa

28-May-06 21:33

Block elements are aligned by setting style on the element itself, not on the parent element. Example:

<div class="parent"></div class="child"></div></div><br />
<br />
.parent { width: 500px; }<br />
.child { width: 200px; margin: 0 auto; }

---
b { font-weight: normal; }

Megan Forbes29-May-06 0:02

29-May-06 0:02

Thanks Guffa Smile | :)

A mum and loving it!

Shog⁹28-May-06 20:17

Shog⁹

28-May-06 20:17

In addition to what Guffa listed,

Megan Forbes wrote:
padding: 0;

Should add UOM to this as well (0px).

Megan Forbes wrote:
text on my page is centered, images aren't.

Check those images: they may have their own alignment settings.

Megan Forbes wrote:
What I'm actually hoping to do is have an 800px centered body, and that containing a div with text aligned to the left so that there's always equal space on either side of the main body, regardless of monitor size, but the text is left aligned.

Here's a thought: leave the body the width of the user's browser window, but put an 800px wide DIV centered inside it.

Example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin fermentum rutrum diam. Vivamus in arcu. Nulla feugiat ultricies elit. Nam facilisis semper enim. Sed leo felis, tristique at, imperdiet et, nonummy vel, metus. Maecenas sit amet urna. Nunc lorem enim, rutrum id, pharetra sed, consectetuer ac, tortor. Aenean vulputate augue. Phasellus malesuada. Ut rhoncus magna eget turpis. Sed dapibus blandit lorem. Fusce fringilla. Integer erat lectus, posuere ut, posuere sit amet, consequat sed, erat. Pellentesque ultricies lacinia ligula.

Sed interdum velit. Sed feugiat mi id neque. In hac habitasse platea dictumst. Phasellus vitae velit non elit porta egestas. Donec varius libero pulvinar dolor. Mauris vitae arcu ac mi aliquam accumsan. Integer molestie dui. Proin orci urna, condimentum nec, pellentesque sed, ultrices ac, est. Praesent interdum orci aliquet nisl. Etiam bibendum bibendum nisi. Ut mi. Phasellus eget diam. In molestie fringilla diam. Aenean diam nibh, vestibulum nec, tincidunt vitae, suscipit at, purus.

Last modified: Monday, May 29, 2006 1:22:12 AM -- Added example.

Megan Forbes28-May-06 20:21

28-May-06 20:21

Thanks Shog Smile | :)

Shog9 wrote:
Here's a thought: leave the body the width of the user's browser window, but put an 800px wide DIV centered inside it.

Eish, that's what I meant, just expressed it incorrectly. Man oh man - never take a one year break and then try to get back into an old career with added stuff you never did before anyway. The joys of maternity leave - who said being a woman was easy??? D'Oh! | :doh:

A mum and loving it!

Shog⁹28-May-06 20:25

Shog⁹

28-May-06 20:25

I updated my last post with a short example for you. Just select, right-click, View Selection Source (assuming you're using FireFox with the Web Developer toolbar installed... which you should be)

Megan Forbes wrote:
who said being a woman was easy?

Me. Right before being chased down and savagely beaten by my wife. Poke tongue | ;-P

Megan Forbes28-May-06 23:46

28-May-06 23:46

Shog9 wrote:
(assuming you're using FireFox with the Web Developer toolbar installed... which you should be)

No, I'm not, but I guess there's no time like the present to install it and grab your code (I'd love to put a sheepish grin here, but can't seem to remember the correct number of "a"'s in :baaaaaaaaaah: to get the sheep)

Thanks again Smile | :)

A mum and loving it!

Megan Forbes28-May-06 23:55

28-May-06 23:55

Sorted, you're right, that rocks!

I hope you're recovering from your beating Roll eyes | :rolleyes:

A mum and loving it!