Border tricks and centering issues
I'm working on redesigning a site in CSS that I did many eons ago using tables for Christine. While I'm getting the hang of CSS, I still have a long ways to go.
First of all - Christine wants a border around her photos: first a thick white one, then a one pixel black one. She had previously been doing that with photoshop, but I've suggested to her that it would be better to just do it in CSS… On my first try, I had tried wrapping the img tag in a number of divs - which not only didn't really work quite right, it added extra html that didn't need to be there. The answer was simple. Here is the CSS I used for the border (a class I add to the img tag) :
padding: 15px;
border: 1px solid #000;
background-color: #fff;
The other thing I was struggling with was another (should have been) simple issue. I simply wanted a block of text, 600px wide - centered on the page, but with the text flush left. The key I was missing was adding margin-right:auto; and margin-left:auto;. So here's the CSS for the outer div - and the div for the text block:
#content {
text-align: center;
}
#text{
width: 600px;
margin-right:auto;
margin-left:auto;
text-align:left;
}
The only way I was able to figure that out was from looking at the examples on Max Design: CSS Page Layouts
October 11th, 2004 at 7:16 am
I'm certainly no expert at CSS (yet), but here's how I was taught to do it:
#content {width: 600px;
margin:0 auto;
text-align: center;
}
#text{
text-align:left;
}
I'm always open to different approaches, though.
October 11th, 2004 at 8:42 pm
Hi Jennifer,
I have an article explaining centering with CSS here:
http://www.maxdesign.com.au/presentation/center/
October 12th, 2004 at 1:20 am
I'm sure there are a lot of different ways to do it (none of which I know, unfortunately) - but I know that you rock. I love to just look at the new layout… it makes me so happy! You rock! (That one is for public record.)
October 12th, 2004 at 9:29 am
Chris - Actually we're essentially doing it the same way - setting the margins to "auto" (whether in shorthand or longhand) and text-align to center (for the outer div) - and text-align to left for the inner div is the key.
Russ - thanks for the link. I now have it bookmarked for future reference
October 12th, 2004 at 4:36 pm
jennifer: thanks much for posting this - i was looking for something similar for my photoblog, and it worked perfectly!!. many thanks!