I want CSS for Working All Browser Same Look IE6, IE7, IE8, Mozilla, Google Crome, any browser... IE6 is show different layout, IE7 and Mozilla Some issue in Padding Div.. I don't want to use conditional Css.. Please Let us know if any buddy know what the pure css working for all browser.
1) Can someone translate that into English? 2) You might want to include WHAT you are trying to translate from a PSD or what code you are having trouble with. 3) Starting with a PSD before writing your HTML is putting the cart before the horse - Photoshop should be the last step in the process, not the first. Starting out from a PSD is responsible for more broken/poorly accessible websites than Dreamweaver and Frontpage COMBINED. Whoever started that trend of letting graphics people think they know the first ***** thing about web design needs a beating with a wet trout. My advice: Step 1: Take the content of the page (or demo dummy content) and mark it up semantically pretending that the PSD doesn't even EXIST with little concern for final appearance apart from some standard sandbags and groupings. Appearance is CSS' job, and has no **** place in your HTML. Step 2: Create the layout in the CSS adding as few extra hooks as necessary. When it comes to HTML the less code you use, the less there is to BREAK. Bend that existing markup to your will with the CSS. You may need an extra sandbag span for gilder-levin or extra DIV for sliding doors, but really you shouldn't have to change the markup all that much to create the layout. Step 3: NOW that you have the content elements placed in your layout you can start up the goof-assed paint program to create the images to hang on the layout. When forced to work from a PSD I usually end up having to recreate all the graphics anyways since most graphic designers working in photoshop know jack **** about image optimization, image recombination techniques, or accessibility norms. Hell, most of the time they don't even know what's practical to do in HTML/CSS and what's going to be more headaches than it's worth even trying to do. I can't be certain though from your engrish, but it SOUNDS like you already have a layout and code for that layout? If you post a link to a live copy or the full code we can probably point out where you're going wrong on cross-browser design.
Not sure where you learned how to develop websites, but concept and design is ALWAYS the first step in developing anything. Buildings, clothing, cars, the list goes on and on.
I've got a background in architecture, print and engineering, both conventional and electrical. Usually you start out with a frame and truss structure to handle the expected load capacity of a building before you draw it's pretty outside. You hire some art *** to draw a pretty picture of a building for a few million dollars you end up with a fiasco like the WTC memorial. You might let some art *** draw a pretty picture of a car and THINK they had something to do with the design - forgetting the team of engineers who pretty much ignored that goofy picture exists until it came time to hang the body panels on it and tweak them in the wind tunnel. Literally, HTML is the chassis, CSS is the unibody panel mounts, the images are the body panels which trick the 'concept artist' into thinking they had anything to do with building a working automobile. ... and coming from print, you work with the content FIRST, and create a layout USING the content. Add the internet to that where you cannot rely on font sizes, faces, or widths being consistent, and drawing a goofy picture in photoshop before you even have markup is completely backwards - and when/if you are forced into an environment where you have to work from some trash picture, you end up spending half your time telling the 'artist' things like "Well, we can't have this fixed height image behind the text since that will break when the metric changes, unless of course you want fixed metric fonts which are an accessibility /FAIL/. Then of course you have these transparencies which frankly are going to consume so much bandwidth to implement there is no way we are going to put that on a production website." - in other words like the fancy automotive artist who thinks it would be really cool to draw a car without a grille or any way to suck air in the front. Shall I go on? Markup the content semantically, create the layout with CSS, THEN start up the paint program to create graphics to hang on the layout. Even if you are going to work from a PSD, in step one you kind-of need to pretend the PSD doesn't exist, and the realities of what HTML/CSS can do and the REQUIREMENTS of things like accessibility will often make entire sections of the PSD meaningless/useless or not worth the time/bandwidth/effort to implement... in other words basically how you end up with a 800k website filled with bandwidth chewing animations and hundreds of k of javascript and markup for nothing.
I also have a background in engineering. Your telling me framework comes before concept? Tell you what. Hire a builder to build a house. Tell him you want him to build a working frame, and that you will have a concept drawn up, when the concept is completed, tell the builder to adapt his framework to the new design. You will more than likely get a look of disgust, and possibly a "hell no". Granted, it can be done this way, but it is definitely not the most efficient way to develop.
Depends, are you actually BUILDING it? Does the pretty picture take into account the structure needed to support itself, or does it end up like what made it take seven years to build the "freedom tower" where the first person hired had no experience in actually making a building? If the person drawing the pretty picture is QUALIFIED to know about things like loads, stresses, need for entrances and exits then you're in good shape - while if they know nothing about the underlying structure required to make the thing stand on it's own, you're going to be pretty well boned. ...and when it comes to HTML, CSS and accessibility guidelines like the WCAG - most of those people drawing the pretty pictures (and most of them are much prettier than anything I could draw on a computer, colored pencil on paper being my medium of choice) end up a complete accessibility /FAIL/ in terms of fonts, widths, scalability, device independence, and a whole host of other things that in a way are the entire point of HTML and CSS in the first place. They end up relying on half-assed broken bloated tools like Dreamweaver, Fireworks or frontpage vomiting up code not even fit to wipe with... or using inlined tools like tinyMCE that don't even generate HTML despite the claims of doing so.
deathshadow has pretty well argued his points, but I'm going to beat on this horse for a bit, myself. Your premise here is specious. The builder never does work from what you are calling the "concept". He works from architectural blueprints; in web development terms, that's the informational architect's site specifications. If there is a house building / concept correlation to web development, it is web:graphic designer::building:interior designer. Just as the guy picking out the wall colors and coverings doesn't determine the construction of the house, the graphic designer doesn't determine how the web site is built. It is the other way 'round. They are used a lot, but the construction/web analogies are not particularly robust. What is important is that the information architect (you may not call him that, but that is his function) in conference with the client stake holders determines the functions of the site, the content for each document on the site, the vocabulary used throughout the site, and the relationships among elements of each page. The interior/graphic designer will be consulted early on, but does not have more than trivial influence on the various structures. Using the house building metaphor again, the designer will have a say as to whether a given floor is carpeted or hardwood, or if the kitchen counters are marble, epoxy composite or butcher block, or which bathroom/kitchen plumbing fixtures to install, all of which are visible parts of the infrastructure, but not a part of the actual structural decisions. The graphic designer is important to establishing consistent branding through the site, for establishing an appropriate mood, and perhaps critically, for adding affordance to the elements. None of these functions have anything to do with the structure of the site or of the individual page. They can only enhance what's already there. None of this is meant to denigrate the graphic designer's contribution to the web site. I only mean to limn graphic design's role in web development, and to show its boundaries. cheers, gary
I just went from lurker to member due to this particular thread. look forward to more as I am a "interior designer" (graphic artist) and want to be a DEVELOPER!
Welcome Anna, Don't give up your day job. The developer has done his best when no one notices that it isn't difficult to navigate the site, that it isn't confusing to do what he came to do, that it isn't that hard to locate just the page he needed, that no one has to reach for their spectacles to read the text because it isn't too small or doesn't blend into the background. Nobody notices the really good web developer. The visitor does notice the cool colors, the pretty pictures, and the lights-out logo. He thinks the designer deserves all the credit for a good site. Unfortunately, so do most clients until they've been sent to a re-education camp. If you're already a seasoned graphic designer, then learn to code enough to be competent in html, css, javascript, php,and sql. You don't need to be a star code monkey, just reasonably competent. You'll be able to build web sites, and your graphics will wow the customer as coding can't. Then for your studies toward real web developer status, learn all you can about library science. Its the only recognized discipline that really applies to web development. They're both about organizing information. cheers, gary
I always designed in PSD first, then slice images to get the size and such before I create the style sheet. If this is not the correct way to do it.. . then how do you do it?
deathshadow has pretty much laid it out, step by step. Try working through his instructions a time or three. You must know the content and structure before you can start prettifying. Match your graphics to the structured content, not the other way around. cheers, gary
I didn't realize he actually wrote it out. I skimmed through his post thinking the whole post was just bashing. Anyway, thanks.
I love it. Now it's starting to make sense. ok, Ps and Dw are officially put away. Problem is I'm not working for a client right now so I don't have any content. I need a dummy company, an assignment. Lorem Ipsum just doesn't lend it's self to that. teacher?
well i start to develop website, frm photoshop,. once i got knwn abt client colors and his expectation, given web samples, once the layout is confirmed , i start to create html with css..