• Registered: April 26, 2009
  • Posts: 24

Topic: Liquid Site in Dreamweaver

Im having problems creating a "liquid" site within Dreamweaver. I learned basic HTML back in high school (over 10 years ago) so I understand some basic's about html. I enjoy using Dreamweaver and have purchased the CS3 tutorials. I first created the site in a table and it looked pretty good. I then seen the tutorial about CSS which is new to me so I decided to give it a try. Ive tried looking at some templates that are liquid but cant find what creates the liquid look. How can I do this within Dreamweaver?

Vote up Vote down

  • From: Montreal Canada
  • Registered: December 19, 2008
  • Posts: 3,543
  • Reputation: 3

Re: Liquid Site in Dreamweaver

These days, this is all done via CSS. Just load up a Dreamweaver liquid layout template and look at the CSS code.

I'm sure someone around here can go into a some detail about the actual CSS you can use to achieve this . Hint: look to margin settings in your CSS.

In the olden-days, we used to create liquid layouts with table width's set to percentages.

... But that is old-school and should be avoided.

wink

Stefan

Practical web design training videos: KillerSites University

Vote up Vote down

  • From: Montreal Canada
  • Registered: December 19, 2008
  • Posts: 3,543
  • Reputation: 3

Re: Liquid Site in Dreamweaver

One last thing, with IE8 and Firefox 3, you can now use CSS tables to get this done MUCH, MUCH easier.

.. The problem is that IE7 does NOT support CSS tables (they basically work like HTML tables) so we are stuck using the standard CSS methods.

Stefan

Practical web design training videos: KillerSites University

Vote up Vote down

  • Registered: April 26, 2009
  • Posts: 24

Re: Liquid Site in Dreamweaver

I tried looking at a few of Dreamweavers templates and came up with more questions than answers yikes

Im gonna go back through your tutorials and see if i missed something but figured i'd ask here as well.

I used the Draw AP Div like in your tutorials to make the site below. But noticed the DIV TAG icon just to the left and figured id poke around with it. Was wondering what it is that differs between the two icons. The DRAW AP DIV, is this the CSS tables that you talk about?

I threw this up on my site to get some comments or ideas.

w ww.ulmerso nline.com/rebu ilders/

Last edited by ciulmer (May 8, 2009 6:15 pm)

Vote up Vote down

  • Registered: April 26, 2009
  • Posts: 24

Re: Liquid Site in Dreamweaver

After a few days of trying to get the site to liquid I realized liquid wasnt what I wanted! roll I now have my site to about how I want it and pretty much completed. Nice easy simple information site. But now ive run into another problem. I noticed Firefox displays the site perfectly, IE on the other hand looks like its having troubles with the Main content div and my 2 random picture div's that are floating right.

Is there any way to adjust this?

Another thought that crossed my mind while doing this was, is it possible to have your site detect which browser is being used and direct it to a more friendlier version of the site?

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: Liquid Site in Dreamweaver

ciulmer wrote:

After a few days of trying to get the site to liquid I realized liquid wasnt what I wanted! roll I now have my site to about how I want it and pretty much completed. Nice easy simple information site. But now ive run into another problem. I noticed Firefox displays the site perfectly, IE on the other hand looks like its having troubles with the Main content div and my 2 random picture div's that are floating right.

Is there any way to adjust this?

Another thought that crossed my mind while doing this was, is it possible to have your site detect which browser is being used and direct it to a more friendlier version of the site?

The best solution would be to design for a standard compliant browser (Firefox, Opera, etc) and then hack it for IE using IE Conditional Comments to provide the specific CSS for IE users.

Make sure you are sending a Strict Doctype for the pages to avoid IE going into Quirks Mode.

My signature goes here --> X

Vote up Vote down

  • Registered: April 26, 2009
  • Posts: 24

Re: Liquid Site in Dreamweaver

My current setup I use Firefox as my default browser. I was an avid IE user until my cousin showed me Firefox with a few addons (firebug caught me eye)

Im going to look into the Conditional comments thing as well as the Strict Doctype. But would you mind giving me a quick run down or examples on what you mean with both? Possible direct me in the direction of some good posts / info?

Thanks a ton

Vote up Vote down

  • Registered: April 26, 2009
  • Posts: 24

Re: Liquid Site in Dreamweaver

Put a space in the link above, finally got around to reading the rules.....

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 527

Re: Liquid Site in Dreamweaver

Rules are good.

First, read this Topic: http://www.killersites.com/forums/topic … 0-july-06/ about html versus xhtml, then pick a Doctype from the list found here. The Html 4 strict is the suggested one.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

IE conditionals are described best at the Micro$haft site. Link, but here are some examples to play with.
Put them into a new page and then look at the page using an IE Browser. Then use Opera or Firefox to see the same page.

<div>
<h3>IE Conditional Comments</h3>

<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>

<!--[if IE]>
       <p> According to the conditional comment this is Internet Explorer</p>
        <![endif]-->
<!--[if IE 6]>
       <p> According to the conditional comment this is Internet Explorer 6</p>
        <![endif]-->
<!--[if IE 7]>
        <p>According to the conditional comment this is Internet Explorer 7</p>
        <![endif]-->
<!--[if gte IE 5]>
        <p>According to the conditional comment this is Internet Explorer 5 and up</p>
        <![endif]-->
<!--[if lt IE 6]>
       <p>According to the conditional comment this is Internet Explorer lower than 6</p>
        <![endif]-->
<!--[if lte IE 5.5]>
        <p>According to the conditional comment this is Internet Explorer lower or equal to 5.5</p>
        <![endif]-->
<!--[if lte IE 6]>
        <p>According to the conditional comment this is Internet Explorer lower or equal to 6</p>
        <![endif]-->
<!--[if gt IE 6]>
        <p>According to the conditional comment this is Internet Explorer greater than 6</p>
        <![endif]-->
</p>
</div>

Add the styles for IE to the head section of your page inside a set of the above Conditional Comments
Hope this helps.

Last edited by jlhaslip (May 8, 2009 8:27 pm)

My signature goes here --> X

Vote up Vote down

  • Registered: April 26, 2009
  • Posts: 24

Re: Liquid Site in Dreamweaver

Thanks for the conditional comments! Which do you suggest?

Question for you though. How do I fix my site with these conditional comments so that IE views them properly?

For example ive been revamping the site I built with things im learning along the way. I added a bordered edge to my container div to make it pop out more. Firefox shows it just as I built it (or as it should look) but IE doesn't show anything period. Its funny how something like Dreamweaver (which I assume to believe is one of the leading HTML writers?) helps create the site and the only thing that apparently understands or views the code properly or the way it should be viewed is Firefox....(possibly others but FF and IE are the only 2 I currently test under)

So basically what I am asking is, how do I know how to write the code correctly for IE? Is there some HTML 4.0 IE Optimized I dont know about?

If theres a post about this please point me in its direction and again thanks for the help!

Vote up Vote down