Kimbh Posted July 2, 2010 Share Posted July 2, 2010 Hello, I am horrible with css and have to pick here and there to leaven things. I been working with codes like background-color: transparent; color: whitebackground-color: #ffffff; opacity: 0.5; and all kind of other combo's but nothing working right. What I am trying to do: At http://www.momsbreak.com/printable/index.shtml I was trying to get the part where the articles are, the white background, to be just a very small bit transparent so the background show through but everything I try make the text and image transparent also. I tried the codes in several place but mainly in this spot: #wrap { width: 900px; background-color: #ffffff; repeat-y center top; margin: 0 auto; text-align: left}or #content-wrap { clear: both; width: 870px; padding: 0; margin: 0 auto;}Any advice would be much appreciatedKimber Link to comment Share on other sites More sharing options...
real_illusions Posted July 2, 2010 Share Posted July 2, 2010 You can use a few options.Use a semi-transparent PNG or GIF, 1pixel squared image, repeated.Or use RGBA in CSS - although this is not supported in IE 8 (and lower). All other modern major browsers support RGBA though.background: rgba (255, 255, 255, 0.8);where the 255, 255, 255 is the RGB values for white, and 0.8 indicates the opacity (alpha value, its called), from 0 to 1, in increments of .1If you use the background png image or a plain background colour first, then use the RGBA, then those browsers who dont support RGBA will use those fallbacks where appropiate. Link to comment Share on other sites More sharing options...
wirehopper Posted July 2, 2010 Share Posted July 2, 2010 .dBlock{float:left;opacity:1;filter:alpha(opacity=100);}There are two different ways to specify opacity - an IE way and a FF way. I don't know how other browsers do it - but these work.opacity:1 and filter:alpha(opacity=100%) are the same, that means the layer is all the way opaque.To let some of the background through, you can reduce the 1 to .something and the 100% to something else.http://www.w3schools.com/Css/css_image_transparency.asp Link to comment Share on other sites More sharing options...
Kimbh Posted July 2, 2010 Author Share Posted July 2, 2010 You can use a few options.Use a semi-transparent PNG or GIF, 1pixel squared image, repeated.Or use RGBA in CSS - although this is not supported in IE 8 (and lower). All other modern major browsers support RGBA though.background: rgba (255, 255, 255, 0.8);where the 255, 255, 255 is the RGB values for white, and 0.8 indicates the opacity (alpha value, its called), from 0 to 1, in increments of .1If you use the background png image or a plain background colour first, then use the RGBA, then those browsers who dont support RGBA will use those fallbacks where appropiate.Thanks, I do a lot of graphic design so I can do a png. would have never thought of that Link to comment Share on other sites More sharing options...
knystrom18 Posted July 3, 2010 Share Posted July 3, 2010 would have never thought of thatWhere there's a will there's a way. Link to comment Share on other sites More sharing options...
Kimbh Posted July 4, 2010 Author Share Posted July 4, 2010 Where there's a will there's a way.That helped more than I can possible say. I have a whole new design up now. It needs some tweaking here and there but I am slowing getting there. Driving my family and friends nuts making them give me input ever step of the way but getting there Link to comment Share on other sites More sharing options...
wirehopper Posted July 5, 2010 Share Posted July 5, 2010 Persistence will get you far.Validate, test, tweak, validate, test, tweak ... Link to comment Share on other sites More sharing options...
Kimbh Posted July 5, 2010 Author Share Posted July 5, 2010 Persistence will get you far.Validate, test, tweak, validate, test, tweak ...I have been doing the "Validate, test, tweak, validate, test, tweak ... " for several days now and now walking away for a few days so I can look at it again with fresh eyes in the middle of the week. Now I am trying to learning how to set up a membership area on a web site section (different site) then I come back to this "Validate, test, tweak, validate, test, tweak ... " -- The real questions is: How crazy do I want to drive myself tweaking. Hope you are having a good Independence Day HolidayKimber Link to comment Share on other sites More sharing options...
wirehopper Posted July 5, 2010 Share Posted July 5, 2010 How crazy do I want to drive myself tweaking.Until you have used up the allocated funds.This may sound cold-hearted, but even it the site is for a friend, start each task with a value - either dollars spent or time invested. Strive to complete the task in that allocated time, which usually corresponds to a dollar amount (cost per hour). When the time's up - work stops and if more work is to be done, you negotiate for more time and/or money.The keys to success are understanding what the client needs and wants, communicating your solution to them, ensuring you deliver what you promise, with a tiny amount of adjustments allowed at the end. Otherwise, you'll suffer scope creep, where the project never ends, and someone, usually the web developer, loses a lot of money (or time) Link to comment Share on other sites More sharing options...
Kimbh Posted July 5, 2010 Author Share Posted July 5, 2010 Until you have used up the allocated funds.This may sound cold-hearted, but even it the site is for a friend, start each task with a value - either dollars spent or time invested. Strive to complete the task in that allocated time, which usually corresponds to a dollar amount (cost per hour). When the time's up - work stops and if more work is to be done, you negotiate for more time and/or money.The keys to success are understanding what the client needs and wants, communicating your solution to them, ensuring you deliver what you promise, with a tiny amount of adjustments allowed at the end. Otherwise, you'll suffer scope creep, where the project never ends, and someone, usually the web developer, loses a lot of money (or time)But I am not working for a client. I owned my online business since 1999 and I like tweaking stuff ever so year or two just for a different look semi-updated but always the same logo. When I first did this site all there was was HTML and JavaScript pull down menu, it was all hand coding or copy and paste a code. I have moved to Article Manager but that was before their where CMS as we know them today. blogging was not even a word then. I do like to ever couple of years try to make my site a bit more up to date design. Right now I just trying to leave a few CSS things I can work in to make the site look a big more up to date for the younger crowd while keeping the basic layout for my long time visitor.I very very rarely ever hire help because I don't that six times in the past and got ripped off ever time. As for time to cost effectiveness, I have nine web so always lay out a plan each month. I put out three days for this project of this holiday weekend because my traffic is always way down this one weekend each year. I have till Aug 15 th to do any web site tweaking then my busy season hits and there no more time for that stuff. I am a work at home one women business and with my mild CP and time I must spend at the gym each week to be able to walk without assistance posting on forums is how I learn and print what I learned and add it to my knowledge book I made for myself. None of my project ever end, I learn, I add, my business grows. Just my 2 cents - explaining my situation:) Link to comment Share on other sites More sharing options...
Fmdpa Posted July 8, 2010 Share Posted July 8, 2010 You can use a few options.Use a semi-transparent PNG or GIF, 1pixel squared image, repeated.GIFs don't offer transparency; PNGs do. Link to comment Share on other sites More sharing options...
real_illusions Posted July 8, 2010 Share Posted July 8, 2010 GIFs don't offer transparency; PNGs do.Uhh, GIF's do indeed support transparency. It was the only way to get it in the days when IE6 was widely used (how refreshing it is to use that phrase) as IE6 didnt support PNG transparency. Link to comment Share on other sites More sharing options...
Synook Posted July 9, 2010 Share Posted July 9, 2010 More correctly, the GIF format does not have a mechanism for alpha transparency, and only supports index transparency, where one colour is rendered as "transparent". The PNG format can have a whole extra channel for alpha transparency, which allows for a whole range of "semi-transparent" values. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.