.jpg)
Thanks to the Freakishly Tall Husband and a lot of XML, here is the new look to Blue Ryder. I love it, and I hope that you enjoy it too! A big, fatty reason that started this whole face lift process was the ability to upload larger pictures to my blog, instead of the tiny "large" pictures that Blogger sets you up with. I now have the capability to link to a larger picture size....for better viewing all around.
If you're in the search for a new Blogger template, go here. It's not really as easy as it looks, but with a little perseverance and a persistent and stubborn freakishly tall husband, you might get everything to upload properly. Just make sure you save your previous version before you go and do anything stupid.
Have a really great 4th of July, and apparently, The Seed has something for us. Go check him out.
8 comments:
Like the new look. Except some of the alignment is not working. Is this a 3 column look?
It's 3 columns, but we haven't played with it at other resolutions- it looks funky on your iPhone? It does on mine....
Yup. It's dropped the content below the fold. Looks as if you don't have your window wide enough the main content gets dropped below you middle column.
This is just a suggestion: In your CSS for the #main-wrapper try a smaller width. All 3 of your columns add up to 1110 px.
I don't run my browser windows so wide that's why I noticed. It's also the same in iPhone.
Why can't IE and Firefox/Safari all work the same way? I changed the template to allow for various browser widths...but margins don't work the same in IE vs other browsers. If you open this in IE it looks fine, all the columns are slightly spaced apart. In Firefox, the gap between 1st and 2and column is huge. I know why (stupid IE not following CSS rules), but I can't figure out how to make it work for all browsers. Now I know why I'm not a web programmer...
By the way, how do you get images to automatically resize? BR's first column sets width based entirely on what size the user has the browser window, but the images just get cut off rather than resizing.
I am not a web programmer either. I learned most of what I needed to know about CSS here:
http://www.w3schools.com/css/default.asp
There's some really good examples there. I think they also get into the differences between IE and Mozilla. Also, they give all through all the available parameters for a css element.
They've got somethings for keeping image dimensions smaller. Have you tried percentages for width and heights for the images? This may distort whatevers posted.
Or have you tried the width property for your main-wrapper element? If you look at the CSS, you have three wrappers within another wrapper. The outer-wrapper is set to 100% to extend it to the entire browser window size.
Then you have 3 content wrappers: sidebar, newsidebar, and main. Sidebar and newsidebar have their width attribute set. Main does not. It's probably mozilla not knowing how to expand main's width that makes it look funky (or IE doing it automagically fory you).
Try adding width to main as a percentage. Or try max-width.
I had a width set for main wrapper before, but took it out after searching around the web for tips. When i took it out, it fixed the effect on the iphone where it dropped the main content below the sidebars. I also tried doing percentages here and there, but without much luck. I haven't tried max-width though...
So last night I found another hint, which basically was a cheat to put a margin on the main big enough to fit the two side bars, which should have made it more "viewable". But IE and Firefox do margins differently (IE is dumb so you have to trick it). I messed around with a few other things as well, but none really had the effect I wanted.
As for the pictures...I have messed with dimensions some. Right now I set only 1 dimension and let the browser adjust it to match the aspect ratio. What I need is a way to have the width that I give it be dependent on the width of the main wrapper (whether it's displayed on a 600 pixel wide screen or a 2000 pixel wide screen) - and that way the picture would fill the available real estate.
It's tough - I know what I want to do, but it's hard to explain it (since I know none of the terminology). Time to check out that link. Thanks!
In web design you have to try and try until you get it just right. (Or close) Especially trying to design for differing browsers.
You probably want to think about "work flow" especially wanting to publish your photos on the web. You may have to create some kind of script that would size the photos just right. Then you adjust the template to fit those photo sizes. Or pehaps a percentage would work rather than an actual value.
As far as CSS help, I think the site I pointed out is helpful for the sytax, but you may have to get down and dirty and understand what the browser is doing with the CSS. It's basically laying out each div/layer in the HTML and you have to make that match up the way you want to. So perhaps looking into using position may help set each layer where you want it to go.
What the tough part is that the content is on the left and you have some sidebars on the right. You want the content to stretch with the browser and the sidebar to remain a fixed size. My trick was to make everything positioned absolutely. I ignored the width of the entire screen going only for a small part of the real estate.
Thanks Browser!!! I 'borrowed' some code from your site to get this working again. Went back to fixed widths for everything and ended up going back to 2 columns to make sure BR had enough room for her BIG pictures. I still want to go back and have the main wrapper resize with the browser window eventually, but that's going to take a lot more work.
Now I just need to learn how to do Applescript so I can make it easy to rename, resize, and upload all these new Photoshop'd pics for her.
Thanks for the help!
Post a Comment