Adobe Community: Liquid Page Layout

Currently Being Moderated

1. mytaxsite.co.uk,

Sep 13, 2012 9:10 PM in reply to Keitodd29

Report

If you post a link here of your test page then we can provide the css code to enter manually to make the appropriate changes.

Good luck.

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

2. Sudarshan Thiagarajan,

Sep 14, 2012 1:18 AM in reply to Keitodd29

Report

Ideally, use the bgcolor in your body element. Use another div such as wrapper or container to hold your content. Provide margins as desired for this main content container. For example:

CSS:

body{
bgcolor: #ccc;
}
#wrapper{
margin: 6%;
}

HTML:

<body>
   <div id="wrapper">
   content here
   </div>
</body>

|

Mark as:

Currently Being Moderated

3. Keitodd29,

Sep 14, 2012 8:09 AM in reply to mytaxsite.co.uk

Report

Hi,

Thanks to the both of you for getting back. This url will take you to the Deamweaver liquid page layout I am working on with the commentary in the text and code areas of the layout still in place. http://tonydi.ipage.com/az_ecart/index.php

I am woking on a background image to replace the blue color and I would like it to surround the main page content with the background image.

Your assistance is greatly appreciated.

Thanks

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

4. Sudarshan Thiagarajan,

Sep 14, 2012 8:34 AM in reply to Keitodd29

Report

Most common workaround:

az_hp_layout.css - line 2

under body, change margin:

margin: 6%;

6% is what you wanted but in my opinion, will be too big a spacing. You could play with the values - start with around 30px or 40px and see what you like best.

Best practice:

Don't touch the body element code.

Under line 40 of your az_hp_layout.css, for container class, add margin:

margin: 40px auto;

Change the value from 40px to whatever you prefer. This will offset anything inside 'container' div by the marign value you provide. The auto tag is to center the container on screen. If you remove auto, your container element will by default be shown on the left hand side with 40px margin on left, top and bottom.

Trust this helps.

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

5. Sudarshan Thiagarajan,

Sep 14, 2012 8:38 AM in reply to Keitodd29

Report

Another best practice - not related to your question, but thought of pointing it out to you:

I see that you've written your container element to be a class. Key page elements such as header, container & footer are ideally used only once per page. It's best that you write these as Div ID's instead of Classes. Instead of .container, you will have #container. This helps you target object-specific CSS rules to your elements. If you decide to change to ID, your HTML code will be <div id...> instead of <div class...>

You can read about this here:

http://www.w3schools.com/css/css_id_class.asp

http://www.tizag.com/cssT/cssid.php

|

Mark as:

Currently Being Moderated

6. Keitodd29,

Sep 14, 2012 12:14 PM in reply to Sudarshan Thiagarajan

Report

Hi Sudarshan,

Thanks, I made the change from 6% to Margin: 40px auto. It worked and does look better and is visible in my Web browsers. I went to the links you gave me and read the tutorials. They were very helpful.

I want to make the other change you suggested, but I want to make sure I am doing it correctly:

1. Change the .container to #container in my external css file az_hp_layout.css keeping all the properties.

2. Change the <div class="container"> to <div #container> that follows <body> tag and in front of the <div class="header" tag ….etc?

Is this correct?

Once I get the header, navitation, and footer squared away, I plan on using this as a template for my other pages.

Thanks

|

Mark as:

Currently Being Moderated

7. Jon Fritz II,

Sep 14, 2012 12:17 PM in reply to Keitodd29

Report

Change <div class="container"> to <div id="container">

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

8. Sudarshan Thiagarajan,

Sep 14, 2012 10:37 PM in reply to Keitodd29

Report

As I had written earlier, ID is for targeted elements (mostly one instance per page) and CLASS is for multiple instances.

In CSS, .container means the wrapper is a CLASS. #container means the wrapper is an ID.

Depending on the CSS you write, your HTML should have <div class="container"> if your CSS contains .container and <div id="container"> if your CSS contains #container.

Ideally, container, header, footer, navigation should be div ID's.

2. Change the <div class="container"> to <div #container> that follows <body> tag and in front of the <div class="header" tag ….etc?

Is this correct?

In your case, if you have changed .container to #container in your CSS file, your HTML should have <div id="container">. This is correct.

Btw, have you tried a shot at one of the readily deployable CMS environments? They should help you a lot - you'll only have to write minimal code. My favorites are concrete5 & drupal at the moment.

|

Mark as:

Currently Being Moderated

9. Keitodd29,

Sep 17, 2012 11:14 AM in reply to Sudarshan Thiagarajan

Report

Hi Sudarshan,

Thanks for all your suggestions, and all of your suggestions have worked out. By the way, Thanks for introducing me to concrete5 & drupal. I installed concrete5 and I have a question.

Q. I am looking for your opinion... What is the best way to make use of Dreamweaver, concrete5 & drupal?

Financially, I need to get my new e-commerce site up as soon as possible. I am a 69 year old newbie to both Dreamweaver, concret5 & drupal and I need to get my e-commerce site up and running as soon as posable. My knowledge has come a long way using tutorials, videos, trial and error. I feel I am at the point of putting it all together.

Your opinion, suggestions, and help as always is greatly appreciated.

Thanks,

keitodd29

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

10. Sudarshan Thiagarajan,

Sep 17, 2012 11:19 AM in reply to Keitodd29

Report

Really interesting to find out about your inquisite learning curve!

There really is no right or wrong way. DW can merge with either C5 or Drupal - not both. You cannot use C5 and Drupal together on one site.

Considering you mentioned you're looking at an e-commerce site, I'd suggest you take a look at Magento. A great platform for e-commerce websites. Lot of renowned companies use it. http://www.magentocommerce.com/

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

11. Sudarshan Thiagarajan,

Sep 17, 2012 11:21 AM in reply to Keitodd29

Report

Magento also has a Community Edition which can be downloaded from here: http://www.magentocommerce.com/download - this is for advanced users who can code/ theme/ style/ customize their websites. Familiarity with code is recommended.

In your instance, I'd recommend the use of Magento Small business edition which will help you get a great looking e-commerce store online in no time!

|

Mark as:

Currently Being Moderated

12. Keitodd29,

Sep 17, 2012 3:11 PM in reply to Sudarshan Thiagarajan

Report

Hi Sudarshan,

What exactly is a community edition? Is this download free or will it have to be converted to monthly pricing?

Thanks!

|

Mark as:

3,731 posts
Oct 15, 2010

Currently Being Moderated

13. Sudarshan Thiagarajan,

Sep 17, 2012 9:16 PM in reply to Keitodd29

Report

Community Edition is open-sourced. I'm not sure if you've heard about 'SugarCRM'. If you have, it's pretty much the same. All functionality is packed into Community edition too. You wont have to convert it to monthly pricing. You can use it for as long as you want, provided, you're familiar with code and you can do customization yourself.

Enterprise Edition is provided to you as SaaS (Software as a Service). Customized & Hosted for you with 24/7 support. For an enterprise plan, you'll be on a monthly/ yearly plan.

|

Mark as:

Dreamweaver

Liquid Page Layout

Sep 13, 2012 7:05 PM

More Like This

Bookmarked By (0)

Answers + Points = Status