CSS - using layers

thedude

New Member
I have been trying to figure out how to design a creative user interface with CSS using layers. The problem that I am running into is that I cannot figure out how to create a layout using curves. Is there a way to create what I need in Fireworks, and then export it to Dreamweaver? I am having a hard time figuring out how to get the results I need in CSS without slicing. If anyone has any suggestions I am all ears.

Thanks

thedude
 

StephanieCordray

New Member
Yes there is. Make your graphics, export each piece separately as a single image file. Create your layers to the exact dimension of the graphic that is supposed to go inside it... if you plan on adding text over them, that is. Set the graphic as the background. Or if you aren't going to be putting text over it, insert the graphic into its chosen layer.
 

thedude

New Member
Thanks for the feedback. Is there a way to do that by just using CSS? Say I design a graphic in Fireworks, and then just apply it to a style sheet. It sounds like it would be easier to create the graphic and apply it to a style sheet. I am trying to figure out the best way to create a more complex user interface using CSS. I use to design what I needed in Fireworks and then export the HTML and place it in my code. Now I want to figure out a more professional way to do it. Any suggestions? Thanks
 

StephanieCordray

New Member
I'm not sure what you mean by more professional using css over html... it's really a combination of both. Those who use css like the handiness of having all pages refer to the css file to provide consistency to the entire site without all the work of having to code each individual page. However to answer your question:

Yes, you can use css to deal with layout, too. When using css in this manner, you assign classes to either the layers or table cells, whichever you prefer to use. In the css file where that class is define, you assign the graphic as an attribute of that class.

For example say you have a class called footer. For that footer class you define how your links display, the color of the text and how it is aligned, height, width, and so on. You can also add the graphic as a definition, either as just a graphic to be included in that class or as a background. Each class will have its own set of definitions.

I'm no expert in css yet but I think that's a pretty fair explanation. Any others who might know more, please come along and correct anything you see that is wrong.
 
Top