| SitePoint Sponsor |
Off Topic:
Is it just me but that Zeldman site gives me an instant migraine for some reason? The very large #222 text on a #f9f9f9 background seems to flicker and dance all over the place. I find it totally unusable and could not continue to read. I'm still having trouble focussing now as though its burned into my retinaOriginally Posted by deathshadow60
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Off Topic:
Hm, 'twas OK for me. It's the white text on black backgrounds that makes my eyes go all funny.
I usually bump up the text like this anyway, so Zeldy has saved me the trouble. Though I much preferred his previous design (sigh). And although I've been on a personal campaign to obliterate sidebars, I find the lack of one on his site now very disconcerting.
Off Topic:
Just goes to show that no matter what you do you will upset someone
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Off Topic:
Indeed, it's worth remembering that. A mentor once warned me against trying to be "all things to all people", and it was helpful advice.Just goes to show that no matter what you do you will upset someone
Ok gentlemen, quick question...does one have to use RBGA for transparent graphics without having to resort to sliced images? I saw an article by Chris Coyier on his CSS Hacks site about this little hack.
However, some of the posts say it doesn't work in IE 7 (or 8) and older.Code:<!--[if IE]> <style type="text/css"> .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); zoom: 1; } </style> <![endif]-->
Is there a way to do the RGBA and images? No that would use up precious bandwidth. I need to get Jason's template to have the transparent backgrounds that I originally designed for the client and that the client wants. I am trying to decide what would be the best way to handle this.
You could have a small, semi-transparent brown image repeating in that content area instead of using rgba. In Photoshop, choose the brown you want, then reduce the opacity to about 20% or so.
I wouldn't bother with all that horrid Microsoft code.
Ok so it is best go to with a sliced image to support older IE browsers. Start slicing! I wish that IE 6, 7, and 8 would just disappear so that we can enjoy doing what we do without fighting with browsers that DON'T like what we do.
I also have to embed a font for the main text heading. I can't use what I used in the mockup as that is a MS font and it has a different kind of license. I found similar fonts to Segoe Script and will get the font kit from fontsquirrel.com. Do all browsers understand font kits?
It's best to forget you ever heard the word "slice" in relation to the web. It's a term for the bad old table days. Just sayin'You don't need to slice anything. Just make a single, small image about 20px x 20px and let it repeat across the background of the element as a background image.
Then stop paying lip service to them! Let users of those browsers get their solid backgrounds and square corners, which is what they deserve. Pandering to them only maintains the status quo.I wish that IE 6, 7, and 8 would just disappear so that we can enjoy doing what we do without fighting with browsers that DON'T like what we do.
There are various options, some free and some that come at a fee, but FontSquirrel is the best service I've used yet, and it's free. Yes, it works well in all browsers.I also have to embed a font for the main text heading ... Do all browsers understand font kits?
I am stuck again. I am trying to get flexslider to work with this site and I can't get it working correctly. The site is at http://foxdenwebsolutions.com/CACNR/index.html. Instead of posting a bunch of code you can view the code at the site. I am thinking that what Jason built for the Webtrak area (which is now the flexslider area) is preventing the slider from working properly. I know Jason will be mad at me for adding this but oh well! I still appreciate you, Jason!
The first problem seems to be that the images are not in the right place. Where are they stored in relation to that page? According to the links, they should be in the same folder as the page itself (i.e. /CACNR/).
OMG how stupid of me! The images are in the images folder. I corrected this and removed some other JS that I didn't need any more and now it's working for the most part. The bottom nav buttons are way out of whack and I need to drastically downsize the images but it functions and resizes with the rest of the page when I shrink my browser window. Now I just have to figure out what CSS controls everything. If I need more help, I will be back. I appreciate your help Ralph. See all of you on the Sitepoint forums make a great team!
I have gone over the flexslider css code and can't get the background of the slider smaller. The images will be approximately 600x430something. I do want the transparent background but not so large. I also need the bottom nav buttons to be higher and not in the content area. There also seems to be bullets that I can't get rid of on the left side of the slider. I can't figure out where they are coming from. HELP?!?!? Suggestions?
Not sure what you mean by that.
Add this to the CSS:I also need the bottom nav buttons to be higher and not in the content area.
and remove the bottom: -30px from here:Code:.flexslider {position: relative;}
Code:.flex-control-nav { margin-left: -31px; position: absolute; bottom: -30px; left: 50%; }Add this:There also seems to be bullets that I can't get rid of on the left side of the slider. I can't figure out where they are coming from.
Code:.flex-direction-nav {list-style: none;}
If a block element has a tiling background image, the way to shrink that is to make the element itself smaller.
So you could for example set the width of the flexy div to something just set a width on it (and then center it with automargins). Right now that div doesn't have any styles in it except a min-height (which I don't think it needs, since there's a bunch of padding in there as well anyway).
I have made the changes suggested to me by Ralph and Stomme. Now I need to figure out how to have 2 columns on the other pages without screwing up what Jason built for the responsive layout and still have it work. I tried just removing the left sidebar but that didn't work too well. Do the other pages need to be refigured completely?
I don't know if anyone has had a chance to look at my last post, but I am still lost. I am looking at the CSS pages for screen and smallscreen. I am not sure what triggers the content area when shrinking the browser to test the site. I have 6 pages besides the home page (which will remain 3 column) that need to be changed to 2 column. I took out the left sidebar but that messes things up so I know that I have to change the behavior of the other pages within the content CSS code. I am just not sure what I need to change or what to change it to. The site is uploaded with the new pages but they are just copies of the home page for now. http://foxdenwebsolutions.com/CACNR/index.html. Also the image slider will only be on the home page.
I think I finally figured it out. For the screen.css I added #noise_content {margin-right: 21em;}; on the bigScreen.css I added #noise_content {margin:0 21.15em 1em .5em;} on the HTML page I changed the <div id="content"> to <div id="noise_content">. I think I will change noise_content to something else that will be for all other pages so there is not a lot of code. I am not sure about the image slider...it seems to take forever to load so I am considering talking me client out of having it. Once I get all the content added, then I will be heading over to the WP forum to get it coded properly for WP.
Glad you are making progress
Your images are about 10 times too large (filesize). The one I looked at was 715k and I'm guessing you could get that down to about 70k without too much loss.
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
Ok I had all the images including the background at png 32 and dumbed it down to png 8. Seems to load faster now.
Now I have another dilemma, the client sent me some of the content and it is all in pdfs and formatted word docs. There are a bunch of charts and graphs because this is for a county counsel on noise around the airport. Would it be best to embed a PDF viewer? However, can that viewer be built so that it is responsive? I believe that it would not be a good idea to cut and paste the text as there are pages and pages of this stuff that would cause the viewer to have to scroll forever to read it all. Remember this will be a WP site so these can be considered articles. I was thinking about taking the first part of the different documents and typing it in and then having a "read more" but having the link download the documents. Not sure that is the answer either. Any suggestions?
PDF content can be a slippery slope. My advice is—If a client sends you a PDF, upload the PDF and create a link to it. (If they want the content as real text, they can send me the text. I'm not pulling it out of a PDF.)
Browsers each have their own way of displaying PDFs. I wouldn't worry about PDF viewers etc.
Well the site is looking pretty good so I am heading over to the WP forum to get this coded for use as a WP theme so my client can take over once I have finished with building it. Thanks to everyone on this forum for all your help. Jason, Ralph, Paul, and others. I really appreciate your time, patience, and expertise in guiding me though creating a responsive site.
Posting Permissions
Reply With Quote
Bookmarks