Need a little layout help

If you look on my home page, the text to the left of the graphic is too close to the graphic ... and I would like to have a little more space between the text and the photo.

Let me say it has been a long time since I have messed with any of the php or css pages, so if it is in there, I might need a little help on exactly what I need to alter ... and if it is in the coding, I will need to know what the code is to put in or change.

Pawsome Dogz

Thanks for any and all help!! Jules

I am intrigued by your business... Do people actually, seriously, buy carnival costumes to dress their pets up in?

Not a criticism, or course... just curious. If there is a market in this, and you're filling the gap, then that's great. I just find it rather strange that people would do this to their pets...

Anyway... your image taz_banner.jpg is 500px X 500px.

You can effect a quickfix by re-sizing this to 350px X 350px

I am not familiar with the cherryzen template, so can't advise on the css. But a simple resize of your image will stop it floating out of the DIV.

I think you should look for, and edit
languages/english/html_includes/CUSTOM/define_main_page.php

I would wrap the image, and the text in two different divs, one for the text, and one for the image, and play with the width/padding/float/margin

I tried with firebug and setting the image to 350 doesn't solve it.

DISCLAIMER
schoolboy is far more expert, and into it it than I am, hence no garantee for my suggestion, that's how I would do it ;)

@schoolboy
you wouldn't believe what some pet owners would do to thei poor little friends!

@Keneso is absolutely correct.

This content is governed by whatever HTML you have inserted into "define_main_page.php".

This can be edited in your Admin area (tools >>> define pages editor >>> define_main_page.php )

I don't know what HTML editor you have embedded in your zencart installation, but you can TOGGLE to HTML mode to edit the HTML, and then you can follow Kenesco's advice and enclose the elements in DIVS with appropriate ID's, thus giving you the opportunity to add CSS declarations to these ID's

schoolboy:

I am intrigued by your business... Do people actually, seriously, buy carnival costumes to dress their pets up in?

Not a criticism, or course... just curious. If there is a market in this, and you're filling the gap, then that's great. I just find it rather strange that people would do this to their pets...

Anyway... your image taz_banner.jpg is 500px X 500px.

You can effect a quickfix by re-sizing this to 350px X 350px

I am not familiar with the cherryzen template, so can't advise on the css. But a simple resize of your image will stop it floating out of the DIV.

Sorry for the late response ... busy morning.

Regarding pet garments ... it is estimated that over $50 Billion dollars is spent by Americans alone on their pets. The US is far behind other countries, where pet garments are a huge business to get into. However, in the US, the pet market is the second fastest growing retail industry (second only to consumer electronics).
http://womeninbusiness.about.com/od/businessopportunities/a/petprod-service.htm

Now, I'm going to reply to the other post, as I would rather alter the page code, so I don't have to reduce the image size.

HUGz! Jules

keneso:

I think you should look for, and edit
languages/english/html_includes/CUSTOM/define_main_page.php

I would wrap the image, and the text in two different divs, one for the text, and one for the image, and play with the width/padding/float/margin

I tried with firebug and setting the image to 350 doesn't solve it.

Can you give me the code? I am not a code expert and do not want to screw it up.

Or, should I go post this in the Cherry-Zen support forum?

Thanks bunches!! Jules

Hi Jules

This is basic HTML - not "code".

We don't really deal with requests to "teach" html on this forum, because it is a language that is universal to ALL websites.

The same goes for CSS.

The reasons we don't use this forum to teach this stuff are:

1. There are hundreds of tutorial sites that already do this, and far better than can be accomplished on this forum

2. To offer it here would be to "re-invent the wheel".

3. This aspect of web-mastering is universal - not specific to zencart. It is expected that people managing their own sites have this knowledge, or at least know where to obtain it.

Recommend you visit w3schools.com where there are excellent tutorials on HTML and CSS.

Sorry to come across so nerdy about this, but the forum is really for issues that are specific to zencart...

Put this in your
languages/english/html_includes/CUSTOM/define_main_page.php

You can do this by either go to your
admin >>> tools >>> define pages editor >>> define_main_page.php - as suggested by schoolboy
and paste the code in the box, and save.

Or you can open the file which is located in the path above
CUSTOM is the CherryZen folder, if you don't see it there, copy it from the
languages/english/html_includes folder, and put it in there.
Then you open the file, and paste the code, save it, and upload it to the correct folder (again the path above).

<div id="homeText">
<p>
Welcome to our online store ... take a mosey around.
</p>
<p>
We are so excited and blessed to now be a branding partner with Swarovski.  All garments come with a Swarovski hang tag, serving as a sign of authenticity, integrity and the highest standard of design.
</p>
<p>
We are working on the website and adding products as we can, so please check back.  If there are supplies or products that you are looking for, please contact us.  I have many friends that also have online stores, and they carry a variety of vitamins, supplements, treats, etc.
</p>
<p>
Thank you so much for stopping by!  We love it when friends come by, especially if you brought treats!
</p>
<p>
Woof, slurps and tail wags!
</p>
<p>
Julee & the No-No Crew
</p>
</div>

<div id="homeMainImg">
<img src="http://www.pawsomedogz.com/images/taz_banner.jpg" />
</div>
<div class="clearBoth"></div>

Now you open the file
includes/templates/CUSTOM/css/stylesheet.css
and paste/add the following into it, at the end of it is ok.

#homeText {
width: 319px;
color: #990000;
float: left;
font-weight: bold;
}
#homeMainImg {
width: 502px;
float: right;
}

It might need some tweaking, but to start should be fine.
I'll be able to see this tomorrow, in case first thing to try, decrease the width: 319px to 309, or 300 if 319 messes up.

schoolboy:

Hi Jules

This is basic HTML - not "code".

We don't really deal with requests to "teach" html on this forum, because it is a language that is universal to ALL websites.

The same goes for CSS.

The reasons we don't use this forum to teach this stuff are:

1. There are hundreds of tutorial sites that already do this, and far better than can be accomplished on this forum

2. To offer it here would be to "re-invent the wheel".

3. This aspect of web-mastering is universal - not specific to zencart. It is expected that people managing their own sites have this knowledge, or at least know where to obtain it.

Recommend you visit w3schools.com where there are excellent tutorials on HTML and CSS.

Sorry to come across so nerdy about this, but the forum is really for issues that are specific to zencart...

Well, I have never run into that here on the forum at all! When I say 'coding' I am using that term loosely to cover both HTML and CSS ... both of which I have always had people here to help me with.

I know enough about both HTML and CSS to get by, but I do not know enough to always do it on my own. Which is why I have always come here to the forum for help.

Your response has really floored me.

Jules

Keneso, thank you so much for the help!! You are the best!

I will give it a go ... hopefully not mess it up, and make you proud. :smartalec:

Thanks and HUGz! Jules

Jules... I hope you did not take what I said the wrong way... It's great that kenso found the time to compile a workable bunch of HTML, and of course, any forum helper has the discretion to do just that.

But I am thinking ahead... perhaps when the kenso's of the world are not around to assist, or are just too busy...

You will benefit greatly from learning the principles and some of the techniques of HTML and CSS.

I started knowing nothing, so bought "HTML For Dummies" back in 1995.

My very first web page - seen in an early version MOSAIC browser, was:

... and I had it visible on-screen within 60 seconds of opening that book.

Well pooh. I did as instructed and my left column flipped over to the right side of the page. So, I took out the HTML and went back to what I had in there, until someone can help me figure it out.

However, even after I removed the HTML and the SCC from the style sheet, the left column is still over on the right. :huh:

Schoolboy, I do understand if you don't have time to help me with the HTML and CSS, and that is fine. As I said, I know enough HTNL and CSS to get by. The forum I posted this in says for help with layout, which is why I came here.

Keneso, when you (or somebody else) has time ... I need help figuring out why my left column jumped over to the right.

Thanks bunches! Jules

2:02 pm update: It must have been a cache issue, as the left column has now jumped back to the left side ... using my original HTML and CSS. I still need help with the HTML and CSS that Keneso helped me with.

HUGz! Jules

I do agree with schoolboy.

I'm not a guru in html, nor css, being in the position schoolboy referred to, but since I have the time, and by helping I learn here I am.

Now to your problem:
In order for me to assist you, I would need you to put the code in, regardless of it messing the layout, so that I can see it, and find what to change.
You can try it yourself too if you wish, by getting the firbug plugin for firefox, and play with the code.

Try loading it w/o the float: left/right declaration.

Let me know when you load bak the code.

keneso:

I do agree with schoolboy.

I'm not a guru in html, nor css, being in the position schoolboy referred to, but since I have the time, and by helping I learn here I am.

Now to your problem:
In order for me to assist you, I would need you to put the code in, regardless of it messing the layout, so that I can see it, and find what to change.
You can try it yourself too if you wish, by getting the firbug plugin for firefox, and play with the code.

Try loading it w/o the float: left/right declaration.

Let me know when you load bak the code.

Guys, I am SO sorry. I have had something come up ... as soon as I can get this done, I will shout back!

Thanks bunches! Jules

NekkidFish:

Guys, I am SO sorry. I have had something come up ... as soon as I can get this done, I will shout back!

Thanks bunches! Jules

I noticed that your text and image are set in a div called 'content'.

All I would maybe do is add some padding to that div..

In your stylesheet 'search' for the following code..

#content {
float: right;
line-height: 1.6;
margin-right: -165px;
position: relative;
width: 100%;
}

and maybe add a line to make it read like this..

#content {
float: right;
line-height: 1.6;
margin-right: -165px;
position: relative;
width: 100%;
padding: 3px 3px 3px 3px;
}

and an example guide for which numbers to change and what they do is as follows..

top padding is 3px, right padding is 3px, bottom padding is 3px, left padding is 3px

Have a play around with changing each padding setting and see if that gives you the result that you desire. To revert back, simply remove the padding: 3px 3px 3px 3px; code that I've shown you..

Hope that helps you out in some way,

PS this our site: www.buybenchmark.co.uk

I noticed that your text and image are set in a div called 'content'.

All I would maybe do is add some padding to that div..

That doesn't solve her problem, both the text, and image are in the same container; she has to put them into separate divs, and style them acordingly.

keneso:

That doesn't solve her problem, both the text, and image are in the same container; she has to put them into separate divs, and style them acordingly.

You are right indeed sir..
:oops: