Jump to content

Liquid Site in Dreamweaver


ciulmer

Recommended Posts

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?

Link to comment
Share on other sites

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.

 

;)

 

Stefan

Link to comment
Share on other sites

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

 

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/

Edited by ciulmer
Link to comment
Share on other sites

After a few days of trying to get the site to liquid I realized liquid wasnt what I wanted! :rolleyes: 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?

Link to comment
Share on other sites

After a few days of trying to get the site to liquid I realized liquid wasnt what I wanted! :rolleyes: 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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Rules are good.

 

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

br />   "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.


IE Conditional Comments


You are not using Internet Explorer.











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

Hope this helps.

Edited by jlhaslip
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...