scriptygoddessI'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
