CSS problems [modified]
-
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. ;P
---- Scripts i’ve known... CPhog 1.0.0.0 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.2 - printer-friendly forums Expand all 1.0 - Expand all messages In-place Delete 1.0 - AJAX-style post delete Syntax 0.1 - Syntax highlighting for code blocks in the forums
Sorted, you're right, that rocks! I hope you're recovering from your beating :rolleyes:
A mum and loving it!
-
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> .parent { width: 500px; } .child { width: 200px; margin: 0 auto; }--- b { font-weight: normal; }Thanks Guffa :)
A mum and loving it!
-
Shog9 wrote:
Megan Forbes wrote: padding: 0; Should add UOM to this as well (0px).
After the value zero, the unit identifier is optional. I always omit the unit when the value is zero. A unit after a zero value doesn't convey any information as the value is the same regardless of the unit, and I find it easier to read the code without it. Compare:
padding: 0px 0px 9px 0px;to:padding: 0 0 9px 0;--- b { font-weight: normal; }I could be wrong but I'm incline to say that it is not optional if you want your page to pass W3C compliance test or if you want to assign your document a doctype of Strict or Transitional. -Richard
-
I could be wrong but I'm incline to say that it is not optional if you want your page to pass W3C compliance test or if you want to assign your document a doctype of Strict or Transitional. -Richard
Actually, you are wrong. Quote from CSS specification[^], section 6.1: "The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional." --- b { font-weight: normal; }
-
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.
---- Scripts i’ve known... CPhog 1.0.0.0 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.2 - printer-friendly forum
Hi again Shog, Sorry to be a pain. After two days of glamorous stuff like ironing during Mikey's naps he finally gave me a chance today to get back to this. Your div contains
align="center"but VS gives me the following warning:Warning 1 Validation (XHTML 1.0 Transitional): Attribute 'align' is considered outdated. A newer construct is recommended.. Do you perhaps know what the newer construct is? Thanks again :)
A mum and loving it!
-
Hi again Shog, Sorry to be a pain. After two days of glamorous stuff like ironing during Mikey's naps he finally gave me a chance today to get back to this. Your div contains
align="center"but VS gives me the following warning:Warning 1 Validation (XHTML 1.0 Transitional): Attribute 'align' is considered outdated. A newer construct is recommended.. Do you perhaps know what the newer construct is? Thanks again :)
A mum and loving it!
You can use Guffa's method (
margin: 0 auto;). AFAIK, it doesn't work in IE though. IE does however treat thetext-alignstyle the same as thealignattribute, so you can combine techniques if you wish: use thetext-align:centerstyle on the body / outer DIV, and usemargin: 0 autoon the inner DIV.---- Scripts i’ve known... CPhog 1.0.0.0 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.2 - printer-friendly forums Expand all 1.0 - Expand all messages In-place Delete 1.0 - AJAX-style post delete Syntax 0.1 - Syntax highlighting for code blocks in the forums
Last modified: Wednesday, May 31, 2006 9:18:43 AM -- Added IE hack description
-
Actually, you are wrong. Quote from CSS specification[^], section 6.1: "The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional." --- b { font-weight: normal; }
Well isn't that special. It apparently pays to read "all" of the manual when you RTFM, DOH... :) -Richard
-
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 :-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 { background-repeat: repeat-x; margin: 1; padding: 0; text-align: center; font-family: verdana, arial, helvetica, sans-serif; font-size: 0.9em; color: #575757; width: 800px; border: double: 3px 3px 3px 3px: #5f5bb2; }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 thattext-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 :)
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!
Just to chime in and possibly help out a little late, here are a few sites that show you how to align your content in different ways... Center Horizontal: http://www.bluerobot.com/web/css/center1.html[^] Center Vertical: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html[^] Center Horizontal and Vertical: http://www.wpdfd.com/editorial/thebox/deadcentre4.html[^] -Richard
-
Just to chime in and possibly help out a little late, here are a few sites that show you how to align your content in different ways... Center Horizontal: http://www.bluerobot.com/web/css/center1.html[^] Center Vertical: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html[^] Center Horizontal and Vertical: http://www.wpdfd.com/editorial/thebox/deadcentre4.html[^] -Richard
Awesome, thanks Richard!
A mum and loving it!
-
You can use Guffa's method (
margin: 0 auto;). AFAIK, it doesn't work in IE though. IE does however treat thetext-alignstyle the same as thealignattribute, so you can combine techniques if you wish: use thetext-align:centerstyle on the body / outer DIV, and usemargin: 0 autoon the inner DIV.---- Scripts i’ve known... CPhog 1.0.0.0 - make CP better. Forum Bookmark 0.2.5 - bookmark forum posts on Pensieve Print forum 0.1.2 - printer-friendly forums Expand all 1.0 - Expand all messages In-place Delete 1.0 - AJAX-style post delete Syntax 0.1 - Syntax highlighting for code blocks in the forums
Last modified: Wednesday, May 31, 2006 9:18:43 AM -- Added IE hack description
Interesting, thanks, I'll give it a whirl next nap time :)
A mum and loving it!