I'm having difficulty getting my banner to center correctly over the columns. Can someone take a look at my site and let me know where in the code this tweak would be? The site is here: http://mediamorgue.blogspot.com/ Also I welcome any and all suggestions for improving the site. I really want this to be a polished looking presentation and not just some fly-by-night looking amateur site. Tough love is greatly appreciated. Thanks!
Some indenting would go a long way in making the code more readable. Moving your presentational style="css stuff" out of the HTML and into one (I see widgets so you may never get to just one) external CSS sheet. Esp for something dynamic like a blog-- you want to be able to change all the pages by changing one external CSS stylesheet. You have a mild case of divitis, though it's possible the many divs are being used as sandbags for images (which you can't do a whole lot about unless you really really want to rewrite this page). : ) If you mean the banner ad at top which currently says media morgue, you've already got display: block and a set width of 730px on the header img, so all you need to add to center it better is margin: 0 auto (or change that 0 to whatever you want for top and bottom margin). This will make the side margins equal. I suppose that visually, the bottom would look nicer if the grey sidebar continued all the way down to the bottom, as the footer stretches across the entire blog width. Good luck.
I forgot to submit my reply so here I am typing it over again. I wanted to say great Blog name and awesome banner. My only suggestions were to get rid of the border on the Google ad and blend the background to match the background of the page. That way it blends in with your content rather than looking like an advertisement. You might want to also try and center it. The only other comment was to limit the amount of postings showing per page. I have about 2-3 posting per page so reading don't have a lot of scrolling to do. You can change that in the Settings on Blogger when you customize. Great site! DJ Boise, ID
Thanks for the suggestions. Right now I have 7 days worth of posts to the main page, then they drop into the archive. However with anywhere from 1-6 posts per day, the page gets a little long. I dont think 2 or 3 per page would be enough. Maybe I can find a happy medium.
I still cant figure out which header line to adjust to center the header. Those damn corner caps are driving me crazy.
If your using a table-based layout just add align="center" to the table cell. If your using a CSS based layout you use margin: 0 auto; to center. EDIT: <div id='header-inner'> <a href='http://mediamorgue.blogspot.com/' style='display: block'> <img alt='Media Morgue' height='162' id='Header1_headerimg' src='http://bp2.blogger.com/_-z33vURmwYM/R5nDPJ3DutI/AAAAAAAAAgI/lNPT2FnFVC4/S730/08-banner-2.jpg' style='display: block' width='730'/> </a> </div> Code (markup): You want to add the following to your header-inner css rule; margin: 0 auto; Code (markup):
Sorry Vitiare, here's where I found the Media Morgue: <div class='header section' id='header'><div class='widget Header' id='Header1'> <div id='header-inner'> <a href='http://mediamorgue.blogspot.com/' style='display: block'> <img alt='Media Morgue' height='162' id='Header1_headerimg' src='http://bp2.blogger.com/_-z33vURmwYM/R5nDPJ3DutI/AAAAAAAAAgI/lNPT2FnFVC4/S730/08-banner-2.jpg' style='display: block' width='730'/> </a> See that you have style='display: block' width='730'? That's great, you just need to set your margins there (at least, until you move this stuff into an external CSS style sheet : ) style='display: block; margin: 0 auto;' width='730' /> The display: block is because it's an image, which are inline by default. Since you can't normally set width and height on inlines (images are the exception to this), and thus cannot set margins on inlines, it was set to block, and given a set width... so centering it is now pretty easy. Without the display:block, you'd still have a width because it's an image with a set width, but you couldn't use margin: 0 auto tto center it. Margins are set on four sides, so usually 4 numbers. However if two, three or four sides have the same amount of margin, you can shorten it. So the above is 0px for top and bottom (why I said set it to what you want) while the sides are "auto" meaning the browser will look at the container the img is sitting in (<div id='header-inner'>), see its width and the image's, and make the side margins equal, whatever their actual dimensions. It's a pretty neat trick.
Eureka! Blogger uses nifty codes to list items, so I was having a hard time finding the code the way its viewed by the browser. But I dropped the code into the right spot and everything appears to be correct now. Thanks all!