CSS and DWT Problem (Full Version)

All Forums >> [Web Development] >> Expression Web Help



Message

obialor -> CSS and DWT Problem (1/9/2007 17:12:33)

I am learning to use the DWT and CSS. I have published a dummy website on a subdomain in order to illustrate my problem.
It is a 2-column layout with a header, a navigation area, a content section and a footer.
The problem is that the text in the content area overflow the footer in some of the web pages.

Please click to see the problem:
www.cli.sfjweb.com or
http://www.cli.sfjweb.com/Our%20Services.htm
See also this page: http://www.cli.sfjweb.com/Contact%20Us.htm

How can I create a DWT content section that is flexible to take 200 words or 600 words? Look at the column. How can I make it
adjust to the length of the content section? Any additional advice or comments will be appreciated.

Obi



Thomas Brunt -> RE: CSS and DWT Problem (1/10/2007 14:56:06)

I took a look at the source code you have, but the formatting of the code makes it very difficult to figure out what's going on.

Have you considered using one of the stock Expression templates as a staring point? You can then modify that dwt to suit your needs.

You can find more information on that at the url below.

http://www.firstexpression.com/css-tools/template-setup.htm

t



jurgen -> RE: CSS and DWT Problem (1/10/2007 16:57:06)

quote:

div style="position: absolute; width: 700px; height: 23px; z-index: 4; left: 10px; top: 556px"


Your style in the footer div is absolute. As a matter of fact all your divs are absolute positioned. In your case the footer will always show up 10 pixels from the left and 556 pixels from the top of the monitor. no matter what is in your content div. If you want to make this flexible you need to put your footer div inside of the content div.



obialor -> RE: CSS and DWT Problem (1/10/2007 18:30:07)

Jurgen:
Thank you for your helpful comment.
1. How do I put the footer div inside the content div?
2. You said: "all your divs are absolute positioned" What do you advise as an alternative? For example, I made the banner div relative, and it moved from that position and did show well.

I appreciate your help.

Obi



obialor -> RE: CSS and DWT Problem (1/10/2007 18:36:38)

Thanks for your reply. Yes, I have looked at some of the stock EW templates. Modifying them to suit me appears more difficult than trying to create a new one.
1. Which of the divs do you advise to be positioned absolute and which relative or other? I believe that my main problem is with positioning.
2. What are the advantages of nesting some of the divs?

Thank you.

Obi



Tailslide -> RE: CSS and DWT Problem (1/11/2007 2:42:11)

I don't use EW or DWTs - but in general terms with web design absolutely positioning large chunks of your page is a "Bad Idea". It's not that it doesn't work, it's just that it's hard to get right. Absolutely positioned layouts tend to be more fragile.

I tend to use the normal flow of the page and floating to position divs. Floats have their own drawbacks but they're easier to get to grips with than AP. Absolute Positioning is fine for small stuff like maybe a search box for example - but I would advise against using it for big content divs.



obialor -> RE: CSS and DWT Problem (1/11/2007 17:14:22)

What is the alternative to Absolute positioning? Floating positioning is not in EW.

Obi


quote:

I don't use EW or DWTs - but in general terms with web design absolutely positioning large chunks of your page is a "Bad Idea". It's not that it doesn't work, it's just that it's hard to get right. Absolutely positioned layouts tend to be more fragile.

I tend to use the normal flow of the page and floating to position divs. Floats have their own drawbacks but they're easier to get to grips with than AP. Absolute Positioning is fine for small stuff like maybe a search box for example - but I would advise against using it for big content divs.



Tailslide -> RE: CSS and DWT Problem (1/11/2007 17:17:00)

Yes it must be in there somewhere! Seriously! They probably just call it something stupid and different like they (and DW) like to call divs "layers".



jurgen -> RE: CSS and DWT Problem (1/11/2007 23:41:18)

obialor,

I made a quick image, maybe that will show you visually how it should work.

Think about divs like those are boxes. Every box can be inside another box. Each box can ne styled with your style sheet. Hope this explains it a little bit better...



[image]local://upfiles/20595/C935DFBE5F5D4B13B43533A7865E6A36.jpg[/image]



obialor -> RE: CSS and DWT Problem (1/12/2007 9:44:59)

Jurgen:

I thank you very much. You 'quick image' helped a great deal to explain the concept. I am still struggling with CSS, layers and DWT. If you know an link that explains this very well, kindly communicate.

Obi



Thomas Brunt -> RE: CSS and DWT Problem (1/12/2007 15:17:41)

If you try playing aroud with modifying a stock EW template, the concepts will become a lot easier to understand.

Here is a good introduction to the basic concepts of css.

http://www.outfront.net/tutorials_02/adv_tech/css1.htm



obialor -> RE: CSS and DWT Problem (1/12/2007 17:28:10)

Thank you for the advice. I will play around stock EW and I believe I will learn something from the exercise. I have also printed the Intro to CSS in the link you provided. Thank you too for this.

Obi



jurgen -> RE: CSS and DWT Problem (1/12/2007 19:44:14)

Hello Obi,

here is another link to understand some basics of css:

CSS tutorials



obialor -> RE: CSS and DWT Problem (1/12/2007 23:21:49)

Thanks for the link. I see you are the global moderator. I am just wondering why one needs to write an html code for a footer when one can achieve the same result instantly through a layer.

Obi



jurgen -> RE: CSS and DWT Problem (1/12/2007 23:45:32)

quote:

ORIGINAL: obialor

Thanks for the link. I see you are the global moderator. I am just wondering why one needs to write an html code for a footer when one can achieve the same result instantly through a layer.

Obi


As far as I can tell, you can insert layers everywhere on your page. Using FP or DW those layers will be positioned "absolute" all the time. The end result will be the same and you have an html code anyways. You can however style all layers anyway you want with your style sheet. The layers are nothing different than a <div> in your code ....



jurgen -> RE: CSS and DWT Problem (1/13/2007 0:19:10)

Let me explain a little bit more here. I will take your footer as an example:

Your code for your footer say:
quote:

<div style="position: absolute; width: 700px; height: 23px; z-index: 4; left: 10px; top: 556px" id="layer4" class="style3">

Your div class is "style3":
quote:

.style3 {
color: #FFFFFF;
border-style: solid;
border-width: 1px;
background-color: #000000;
}

There is nothing in your style for the div id "layer4"

That means this div (or box) is positioned absolute on the screen 700 pixel wide and 23 pixel high. 10 pixel away from the left side of the screen and 556 pixel down from the top of the screen. The div class "style3" will show this "box" with a black background and white typing.

There are two things which are a little bit different with CSS. One is the "class" which has a dot in front like .stylexyz .... the other is the "id" which will have a pound sign in front, like #layerxyz.
Make another style for your layer4 and call it #layer4. In there you can control how the <div id=layer4> -------- </div> is styled. Including the position.
For now, try to take out the height of 23px completely and you will see that the height of your footer will ajust to the height of your font.

Hope I make sense.......



obialor -> RE: CSS and DWT Problem (1/13/2007 18:48:00)

You are a very good teacher. It is beginning to make sense at last but not completely. The missing link is probably style sheets and divs. Let me admit that although I manage 20 simple websites produced with FP, because of the simplicity of FP especially with Shared Borders and Themes, I never wrote any codes for any of the websites. I am not frightened of coding because I am prepared to invest time to learn it.

Right now, I am in a sort of hurry to have a quick overview of EW and then after settle and learn it in detail.

The dummy website you reviewed was coded by EW. My questions are:

1. Does the style sheet control the positioning? How do I edit the code?
2. What will be the effect of putting the footer layer or div inside the main content layer?

3. Can I edit my copy or content in Ms Word and copy and paste directly into EW?

Many thanks for all your help.

Obi



jurgen -> RE: CSS and DWT Problem (1/13/2007 20:19:24)

quote:

You are a very good teacher. It is beginning to make sense at last but not completely. The missing link is probably style sheets and divs. Let me admit that although I manage 20 simple websites produced with FP, because of the simplicity of FP especially with Shared Borders and Themes, I never wrote any codes for any of the websites. I am not frightened of coding because I am prepared to invest time to learn it


Yes I know, with FP or DW or any other descent program, in design mode you can do web pages pretty quick and easy. You realy should look into the code of the sites you work on. Learning and knowing the code (which is actually the html code) will help you in the long run. Problem with design mode is that where ever you put your divs or layers the program thinks that's where you want it to be and creates the absolute position code for you.

quote:

1. Does the style sheet control the positioning? How do I edit the code?


You can control the position, and for that matter anythings else, with your styles. In your case the styles are in your html code between <style type="text/css"> and </style>. Other styles are scattered all over the code like font face or color. You can edit (add) easily more styles or different styles right between your style tags. As I said earlier the styles are within your html code. Now think about it:
You can take the style code and put it in a seperate file called a style sheet. And now you link all your other pages to this file. Guess what, if you need to change anything - background color, fonts, size, etc you just have to change it in this file once and all other pages will be edited for that. It sure comes in handy when you have 50+ pages. unless you want to go back to every page and change what you need to change..... [:D]

quote:

2. What will be the effect of putting the footer layer or div inside the main content layer?


This is actually not to much of an effect. But again imagine that as an example: Your main content layer is styled for a certain font size and color. Any other layer or div will have the same style and you don't have to worry about it.

quote:

3. Can I edit my copy or content in Ms Word and copy and paste directly into EW?


I would not advice to do it. You should rather use notepad or wordpad in plain text format. Word is putting many unseen coding in the document and it most probaly will screw up the copy.

- J



obialor -> RE: CSS and DWT Problem (1/13/2007 23:28:32)

I tried to cut my footer div and paste it into the content div but it did not allow me to do so. If I had succeeded, according to you, the div will not retain the dark background on white letters?

Obi

quote:

quote:

2. What will be the effect of putting the footer layer or div inside the main content layer?

This is actually not to much of an effect. But again imagine that as an example: Your main content layer is styled for a certain font size and color. Any other layer or div will have the same style and you don't have to worry about it.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375