Site help

[Aphotic]

Hey all. I've been coding with XHTML and CSS for about a year now, and because I hadn't found this site until recently, I've let some of my questions die out. Right now I'm wondering if you all can help me a little bit on a site I'm re-designing. It's pretty bare bones at te moment, because I want to have a secure code in place before I input actual information. Anyway, the site so far can be view at Freeby Friends. The real purpose of me posting this topic is for help on three things: fixing the boxes, adding side borders, and optimizing my CSS file.I want to first address the boxes. Currently, I have 4, all with the same basic structure. The HTML is as follows (I will show just one):

<div id="box2"><div id="box2top"><img src="images/box2top.gif" alt="" title="Links" /></div><div id="box2cen">Morbi egestas elit eget dolor. Ut eros urna, molestie vel, rutrum at, ultricies quis, arcu. Ut eros urna, molestie vel, rutrum at, ultricies quis, arcu.</div><div id="box2bot"><img src="images/box2bot.gif" alt="" title="Links" /></div></div>

And the corresponding CSS is:

#box2{	padding-bottom: 7px;}#box2top{	/*background-image:url(images/box2bg.gif);*/}#box2top img{	border: 0px;	width: 190px;	height: 30px;}#box2cen{	background-image:url(images/box2bg.gif);	padding-left: 10px;	padding-right: 10px;}#box2bot img{	border: 0px;	width: 190px;	height: 12px;}

On the site itself there are (At least in Firefox 1.5, this problem doesn't occur in IE for me) lines, breaks, really, between the box2top and box2cen, and the reaswon for this escapes me. If anyone can spot the flaw, please tell me. As a temp fix, I added:

#box2top{	background-image:url(images/box2bg.gif);}

Which fixes the problem visually, but creates a rought top.My next problem is creating a simple, one pix black border to the left and right of my container division tag. The CSS reads as follows:

#container{	width: 735px;	margin-left: auto;	margin-right: auto;	text-align: left;	border-right: 1px solid #000000;	border-left: 1px solid #000000;}

The reason for this to not work also escapes me. If it is something simple, please excuse my ignorance.Finally, I was wondering if anyone could help me optimize my CSS and XHTML code itself. I would appreciate it very much so. The link to the actual CSS is CSS Code.Thanks,~Aphotic

[senzafine3]

<div id="box2"><div id="box2top"><img src="images/box2top.gif" alt="" title="Links" /></div><div id="box2cen">Morbi egestas elit eget dolor. Ut eros urna, molestie vel, rutrum at, ultricies quis, arcu. Ut eros urna, molestie vel, rutrum at, ultricies quis, arcu.</div><div id="box2bot"><img src="images/box2bot.gif" alt="" title="Links" /></div></div>

And the corresponding CSS is:

#box2{	padding-bottom: 7px;}#box2top{	/*background-image:url(images/box2bg.gif);*/}#box2top img{	border: 0px;	width: 190px;	height: 30px;}#box2cen{	background-image:url(images/box2bg.gif);	padding-left: 10px;	padding-right: 10px;}#box2bot img{	border: 0px;	width: 190px;	height: 12px;}

On the site itself there are (At least in Firefox 1.5, this problem doesn't occur in IE for me) lines, breaks, really, between the box2top and box2cen, and the reaswon for this escapes me. If anyone can spot the flaw, please tell me. As a temp fix, I added:

#box2top{	background-image:url(images/box2bg.gif);}

Which fixes the problem visually, but creates a rought top.My next problem is creating a simple, one pix black border to the left and right of my container division tag. The CSS reads as follows:

#container{	width: 735px;	margin-left: auto;	margin-right: auto;	text-align: left;	border-right: 1px solid #000000;	border-left: 1px solid #000000;}

The reason for this to not work also escapes me. If it is something simple, please excuse my ignorance.Finally, I was wondering if anyone could help me optimize my CSS and XHTML code itself. I would appreciate it very much so. The link to the actual CSS is CSS Code.Thanks,~Aphotic

<{POST_SNAPBACK}>

I dont see any reason why to have the image both as a background and as an element in the HTML. You could just specify #box2top in the CSS as

#box2top{	background:center url(images/box2bg.gif) no-repeat;	width: 190px;	height: 30px;}

and the same for #box2botfor line breaks maybe if you used margin: 0 10px; (0 for top and bottom and 10 for left and right) could fix the problem..What I've done in order to minimise the time needed to get a project running is create a HTML template like this:

...<body><div id="container">    <div id="header"><h1><a href="home" title="Home"><span>Site's Title</span></a></div>   <div id="menu">      <ul>        <li><a href="#">Link 1</a></li>       ......     </ul>   </div>  <div id="content">   <div id="primary">     <h2>Page's Title</h2>    <h3>Subtitle</h3>     <div>        Content here        ..........    </div>   </div>   <div id="secondary">     <h4>Something here</h4>     <div>Some text here</div>   </div>   <div class="clear"> </div> </div> <div id="footer">footer</div>

The first thing to do is to define .clear in your CSS as clear:both and height:0. This will allow for #primary to be floated either to the left or right and for the #secondary to be floated to the oposite direction.When styling the #primary and #secondary divs it is advisable NOT to define any padding, margin or border as different browsers will render these attributes in different ways. Width is ok of course, so a 60% for #primary and 40% for #secondary would be ok probably.Padding, margin or border can be defined in the <div> placed inside the #primary and #secondary divs. Whereas the padding of the <div> will increase its width, it will not affect the width of its container (#primary or #secondary) and therefore will not cause the page to break up - assuming you DO NOT specify a width for the <div> bigger than its container's width.I havent worked for a 3 column layout in a while so I dont remember whats the best way to do it, it actually depends on your needs. There are many ways to achieve it though, if you fiddle around with margins, paddings, floats, and positions you can see the effects of each.One important thing to note is that it is advisable to keep your CSS and HTML code to a minimum. If you see no real need for an element to exist then dont include it. Or if you see that your code becomes a bit overloaded, then try to remove some unnecessary elements.Hope I helped, cheers

[senzafine3]

also, for accessibility reasons its advisable to separate content from presentation. that means that images used for design purposes (e.g. rounded block elements, headings etc) should be based on CSS (i.e. background) rather than being included in the HTML (i.e. <img> tags)

[Aphotic]

Thank you very much. I fixed it so that the images are now backgrounds. I was under the impression before that it won't show without content (i.e. text), but by adding the height and width, it works properly now. In doing so, the break space was corrected, and it looks much better now. Thank you. I will continue to tweak the correct code.~Aphotic