Layout Customization

[faithtong]

Hi,

I am wondering if there's anyone who can help me on my layout. My website is using "Mother_Earth" template and have made some changes to the colour of sideboxes. When I browsed to my page, www.dreampiece.com.au/index.php, it seems to me everything is in the right order & position, but when I tried to browse the same page using another laptop, all the layout get messed up, the border lines cross over my left sideboxes. In addition, why is there a big space at the right of my page which I can scroll over to?

Besides this, I have just added the paypal logo & SSL logo at the tpl_bottom file, eventually it pulls my bottom banner to another line. How can I position my bottom banner at the right position and pull these 3 objects in order with a reasonable margin? Is this possible?

I'm sorry for these dumb questions. And any of your helps, comments, suggestions will be highly appreciated. Thanks & have a nice weekend!

[tony_sar]

base on your background design. with white centre box , your page width should be 750px , but now you are using %.

Before modifying your stylesheet. make sure you keep a current copy on your local computer .
in your stylesheet.css locat following rule.
your stylesheet.css is located in includes/templates/mother_earth/css/stylesheet.css
#mainWrapper {stylesheet.css (line 172)
background-image:url(../img/content_bg.gif);
background-position:center center;
background-repeat:repeat-y;
text-align:left;
vertical-align:top;
width:87%; << set this to 750px
}

Then locate this rule in same style

#headerWrapper {stylesheet.css (line 186)
background-image:url(../img/header.jpg);
background-repeat:no-repeat;
height:150px;
left:160px; << remove this line
position:relative;
}

Then in same stylesheet locate this rule

#navCatTabsWrapper {stylesheet.css (line 271)
background-image:url(../img/bar.jpg);
background-repeat:repeat-x;
color:#000000;
font-size:10px;
font-weight:bold;
height:26px;
margin-left:0;
margin-right:0;
position:absolute;
text-align:left;
top:140px;
width:760px; << set this to 750px
}

[faithtong]

Hi Tony,

Thanks for your quick response. I am truly thankful for your kind help and have made changes as suggested. As you can see, all the right side-boxes are still crossing the border of the lines, it is getting worse if I am browsing product pages.

For your reference,

Product page:
http://www.dreampiece.com.au/index.p...&products_id=1

main page:
http://www.dreampiece.com.au/index.php

This is what happened when I tried to load the default CSS in mother_earth template. Any suggestion?

[tony_sar]

locate this code stylesheet.css (line 402)


.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix {
padding:20px; << remove this line.
}

this should also help you with other post regrading banner and your SSL logo in footer.

hope this helps.

[tony_sar]

also
stylesheet.css (line 380)


table {
padding-left:8px; << remove this as well.
padding-right:8px;
}

[faithtong]

Dear Tony,

Thanks again for your quick help. Indeed your suggestion has solved my right categories box, it looks great when I browsed using Firefox but when I navigate the page via IE, the bottom banner still go to another line. Why is that so?

Thank you so much and may God bless you always!

[Meshach]

Dear Tony,

Thanks again for your quick help. Indeed your suggestion has solved my right categories box, it looks great when I browsed using Firefox but when I navigate the page via IE, the bottom banner still go to another line. Why is that so?

Thank you so much and may God bless you always!

When developing I usually make a separate stylesheet(s) for IE.

So if you want to target IE6 only you would use this:

<!--[if lt IE 7]><link rel="stylesheet" type="text/css" src="ie6.css" media="screen" /><![endif]-->

And for IE7 use this:

<!--[if lt IE 8]><link rel="stylesheet" type="text/css" src="ie6.css" media="screen" /><![endif]-->

Legend:

lt = less than
gt = greater than

Hope that makes sense to you?

[faithtong]

Dear Meshach,

Thanks for your suggestion. I will create a separate css for IE, but how to make these 3 objects line on the same row? Any idea?

Thank you and have a nice day!

[Meshach]

Dear Meshach,

Thanks for your suggestion. I will create a separate css for IE, but how to make these 3 objects line on the same row? Any idea?

Thank you and have a nice day!

Try putting margin-left:50px; on the banner div. (In your IE only stylesheet).

[faithtong]

Hi,

Thanks for your suggestion! I have already inserted the margin-left to this banner six. However, it still can't pull the banner to the same row with 2 of my images but just giving some space before the banner show in a new line.