Layout: layouts using css

started by Tsampoy on Jan 5, 2004 — RSS Feed

Tsampoy Tsampoy
Posts: 1

hi! i have an existing website and uses css w/a 3 column layout. since i'm just a newbie to webdesign, i realized my layouts turn out to be plain. are there any tutorials wherein i can place graphics on my layouts without using tables just css? and also just want to know if there are disadvantages when using iframes? thanks for any help!  

Joe Gillespie Joe Gillespie
Posts: 528

Well..... there are lots of sites where you could find that kind of information.

This ones are my some favorites:
http://www.w3.org/

http://www.webstandards.org/
http://www.westciv.com/style_master/
http://www.w3schools.com/css/

http://www.thenoodleincident.com/tutorials/box_lesson/

http://www.alistapart.com/  (here search for CSS in the right side menu)

And here: search and read all the editorials...  
http://www.wpdfd.com/editorial/index.htm

Vladimir Vladimir
Posts: 53

With CSS, practically anything is possible. Try wrapping more sections in DIVs and by controlling the borders, backgrounds, etc., you can get a lot of variety.

If you are talking about layouts that are based on sliced images in tables, a solution is to create the graphic in Fireworks then export as CSS rather than HTML.

In my opinion, iframes are good since they are way more flexible than regular frames and can give more control over the webpage dimensions since the text would not scroll out of the screen. You could try wrapping the iframe in a DIV to apply styles, or merely wrapping the text within the iframe in DIVs.

Dzblack Dzblack
Posts: 33

Vlad...how do you "EXPORT" from Fireworks as CSS instead of HTML?

Your previous post is confusing to us. Exporting from Fireworks has always been as jpeg or gif for us.

Please explain.

Ladynred Ladynred
Posts: 5

If you want to see some awesome examples of pure CSS layout with graphics, check out this site:

http://www.csszengarden.com/

Its fabulous stuff !

Vladimir Vladimir
Posts: 53

Hi, remember in Fireworks MX you can export slices to HTML tables? Now with MX 2004 you can export to CSS Layers.

Go to File > Export > Save as type: CSS Layers

I haven't tried this yet, but it should work.

Now under "Source" drop-down list, you can select 'Fireworks Slices' (if you already sliced the image in FW) so that each layer holds a 'slice' of the image.

Or choose 'Fireworks Layers' so that each CSS layer corresponds to a FW layer. (I believe this makes the loading time longer.)

I'm not sure about the 'Fireworks Frames' option, but you can try it out.

Dzblack Dzblack
Posts: 33

Ok and yes, one can add behaviors and all sorts of things to Fireworks graphics. However, we save all that for Dreamweaver.

In our case, we use Fireworks ONLY to generate graphics and slice them up for use in Dreamweaver.

We have always been told to not use Fireworks for anything other than graphics and slicing.

Using Dreamweaver and CSS for all structural layout of gif's and jpeg's makes more sense. Its also less complicated.

Cece Cece
Posts: 8

I have found the read very interesting on CSS.  

The comments have been around trying to make CSS easier, like WYSIWYG, but it really isn't. The fact is that you really need to read and learn the code. I found it easier to imagine each part of a web page as different elements, (ie text is an element, headline is an element, photo 1 is element, etc.) You can group these elements together to make another element. Each element has a name, which becomes your id or class name.  I would think traditional designers would welcome this, as the concept is the same as how layouts were created before computers. You move each element (namely logo, bar, text) around on a piece of paper.

The best thing about CSS is you can move these elements around without affecting the other elements (unless your position is relative or static). This is why we can print a web page without a navigation bar, send a file to a PDA without creating another web page. How cool is that? Less work, too!

I think a good understanding of the box model and how each CSS value affects the box model is a good beginning.  Then learn how NS4 and IE4 displays the instructions, knowing that there is no way(!!!!) these browsers will display the same layout as modern browsers.

Joe Gillespie Joe Gillespie
Posts: 528

think a good understanding of the box model and how each CSS value affects the box model is a good beginning.  Then learn how NS4 and IE4 displays the instructions, knowing that there is no way(!!!!) these browsers will display the same layout as modern browsers.

These users are in a pretty small minority now and I find their reasons for sticking with these old browsers unconvincing. You can use @import to give them basic text without the fancy layout stuff but beyond that, I see no reason to support obsolete browsers. You gotta draw the line somewhere!

Jdenny Jdenny
Posts: 65

Yup and YUP!

I think it's good to draw the line at version 4 browsers, an you can give them a message in the page to inform them the need to upgrade (or tell them to complain to the computer admin about old browser software).

I also think that learing the both the box models and document tree is fundimental to understanding CSS.

Global Marketing Global Marketing
Posts: 1

hey you can use the ap element to show and hide images.. but for that u will need to put images into div we have examples on http://www.rbts.in .. after adding images into div u can go to ap element panel and you can show hide images using behaviours.

Sabri Dino Sabri Dino
Posts: 45

yerinde köpek egitimi
arkadaşlık siteleri
Web tasarımı
istanbul eskort
kopekegitimi
bayaneskort
5651 sayılı yasa

Maskodok Eko Maskodok Eko
Posts: 171

TOP SEO | Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply