Forum Moderators: open
I have moved beyond conventional image slicing to methods that allow me to create a "montage" image for a background using my graphics program (photoshop), arranging my presentation I wish, then removing "sliced" segments to save as traditional image files while saving the "canvas" as a background image.
I move to my html editor, begin a new page and start writing my CSS into the HEAD of the document where I will "adjust" my layout and other style elements until the page is finished. Then I'll cut and paste the CSS into a text editor (RadPad) or TopStyle Pro (if I need to work between style sheets).
The first thing I do when writing my css is create the BODY styles which will include the background graphic created in Photoshop.
body {
font: 11px/15px Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #f09 url(../assets/bk_montage.gif) no-repeat;
margin: 0px;
}
Then I create divs to contain the "sliced" images that I saved as .jpg or .gif files.
An image container styled <div> may look like this:
#montage-one {
position:absolute;
left:60px;
top:192px;
width:337px;
height:350px;
}
This places the "sliced" image precisely were it "fit" in the original graphic design.
I can place as many "slices" as needed to recreate my layout. I cannot emphasize the HUGE amount of possibilities available with this technique. It is very easy to do once you understand the power of CSS positioning.
Using Homesite, it is easy for me to switch between the "Edit" and "Browse" windows. Since my CSS is in the HEAD of my document (not in an external CSS editor!) I can adjust the positioning a few pixels at a time. It takes only a minut (if that) to get the exact orinal position.
If you are a graphically orientated developer, and you have not yet worked with CSS postioned images, you are in for a HUGE treat! Trust me... your CREATIVITY will be given free reign. You will LOVE it!
- papabaer
(edited by: papabaer at 6:53 am (utc) on May 9, 2002)
anybody notice the extra space added around CSS form elements in this or that --and a boat load of other inconsistencies.
Without asking the situation, and taking a guess, try this:
form {
display:inline;
}
(if you are attempting to use form "drop-down menus" this will eliminate the line-break added after the form element)
One thing that becomes quickly apparent is the difference in how individual browsers handle HTML elements.
Forms, lists, headings are some of the few that come to mind where the differences between browser rendering can be very noticeable.
For instance, headings: h1, etc. Opera and Mozilla (NS6.x as well) correctly place a space before and after headings. IE incorrectly does NOT use any preceding spacing. A heading placed in a div (with no padding of its own) will rest flush against the top of the container (in IE) while Opera, Mozilla and NS6.x will display the (correct) spacing preceding the heading.
You can see an example of this (my-profile-url+css_lists.htm) - if viewed with IE you will not notice any "gaps" prior to the headings; they will all appear flush to the top of the test divs. If viewed with Opera, Moz or NS6, you will see the "spacing" above the headings on each of the first three test divs.
I used the following CSS to control heading spacing on the divs that follow.
h2.top-margin-fix {
margin-top:0px;
}
Tedster also uses CSS to place his headings flush against the <p> content.
Another browser "interpretation" that can cause dismay with its unexpected results is for the common LIST.
Opera adds a right margin or "padding" where MSIE and NS6 do not. The extra spacing to the right of a LIST is correct according to the W3C specs, but since IE and NS6 do not interpret it that way, the allow a "list" to extend flush against the right boundry of the containing element. The fix?
ol,ul {
margin-right:0;
}
Okay, you say why not write it like this:
ol,ul {
margin:0;
}
Well in this case, the default top, left and bottom spacing of IE, Opera, Moz and NS6 are in close agreement. So no additional margins need be declared other that margin-right. Assigning margins all around could lead to unsatisfactory results.
Experience will teach you where you need to add CSS to control uniform display. That is why, even with the new "Web Standards" compliant browsers, testing is still crucial. I've yet to find a situation where I could not get uniform display by "tweaking" my CSS.
- papabaer
Under the File menu, you will find the Output Setting > HTML Settings... and there you can select either regular HTML output or CSS based layers.
-meannate
meannate, thats the best news I have heard for weeks.
Off to play.
meannate, I think you have made anyone who reads this whole thread through very, very happy... :)
Ulead PhotoImpact has the same ability to save slices as CSS.
Its located under 'web properties'
As does Fireworks
Ah-ha! That is how I learned CSS. My designer and I have been using ImageReady for a couple of years and found the slice using CSS feature to be of great benefit!
You also have the ability to slice using class or id. It makes creating graphical navigation structures a breeze. I take the CSS and JavaScript that ImageReady produces and I place them in external files. Then I take the navigational graphics and place those in includes. Talk about site management, this is it!
