Need help trying to get this jpeg. to fit correctly

It appears you've managed to get it fitted. True?

It would be a kindness to your client and the visitor were you to resize the image you deliver rather than to transmit a huge image and requiring the browser to resize it. For one thing, a resized image will save about 80% of the bandwidth. For another, a browser is not a particularly sophisticated image manipulation application.

To resize the image, use ImageMagick or The GIMP, as both are noticeably superior to Photoshop for resizing this type image.

For IM, in the command-line interface,

gt@lavern ~
$ convert Hatzi-online-Store.jpg -scale 470x120\! +repage hatzi.jpg
 
gt@lavern ~
$ identify Hatzi-online-Store.jpg
Hatzi-online-Store.jpg JPEG 1366x768 1366x768+0+0 8-bit DirectClass 464KB 0.000u 0:00.110
 
gt@lavern ~
$ identify hatzi.jpg
hatzi3.jpg JPEG 470x120 470x120+0+0 8-bit DirectClass 83.6KB 0.000u 0:00.002

cheers,

gary

gt@lavern ~
$ convert Hatzi-online-Store.jpg -scale 470x120\! +repage hatzi.jpg
 
gt@lavern ~
$ identify Hatzi-online-Store.jpg
Hatzi-online-Store.jpg JPEG 1366x768 1366x768+0+0 8-bit DirectClass 464KB 0.000u 0:00.110
 
gt@lavern ~
$ identify hatzi.jpg
hatzi3.jpg JPEG 470x120 470x120+0+0 8-bit DirectClass 83.6KB 0.000u 0:00.002

Hi Gary,
Thank you for the response.
Its actually not fixed. The invisible margin/border is at the top horizontally and right side vertically. Ive just tried to centre it so it looks normal, until i work out the issue.

So any help would be greatly appreciated.

Is it really worth resizing the picture smaller?

Thanks again.

You seem to have been throwing stuff at the wall to see what would stick. The html has a lot unneeded nesting and spurious margins and padding; none of which is the least bit elegant. Check the W3C validator and correct the errors. Debugging invalid syntax leads to fragile fixes.

If I have a moment, I'll look at the code with an eye toward improvement. No promises, though.

Yes! Do resize the image. Attached is the reduced version I made with ImageMagick. Note the vast differences in rendered quality and the reduction in file size. Feel free to simply download my image and use as you will.

cheers,

gary

Hi Gary,
Thank you so much for your help.

The truth about the hatzijewellers site, is i paid a webdesigner to help me, and although im happy with all his work, once i paid him he doesnt seem very interested in helping anymore.

I personally am very basic at hmtl coding, but know enough to move around the site.

I will play around with the jpeg and post new url and code of it on here.

My main focus was to try get the jpeg to fit in the whole white space provided, but there is an invisible border on the top and right side of the white space, preventing me to stretch the image all the way to the edge. I thought some coding would over right that margin.

Thank you so much for all your help. Its very much appreciated.

Ok i have played around with photo shop, and made a new jpeg, so borders (from bevel effect) look all equal.
And the size is only 74.5 kb

have a quick look at www.hatzijewellers.com.au

New code is here:

I just wish i could stretch the image to cover all the white parts. But an invisible margin prevents me.
Thank you and kind regards,

What do you want to do about the arrow? Leave space for it? Left margin for arrow? Or, not?

You really should use IM for your image scaling; compare the jagged lines in the PS image to the smooth lines from IM.

cheers,

gary

Hi Gary,
Thank you so much for all your help.
I personally cannot see the difference.
I will try look at it again and comopare the 2.
I will look into IM and see how i go. Thank you so much Gary.

The arrow i want to keep.

Thank you again for all your help. very much appreciated.

actually, yes i do see the difference now that i compare the 2 side by side, thanks gary.

On .top-box, delete height, and set padding to 0.

On .box-button set {margin: 28px 0;}.

On .box-text, delete padding-bottom.

And,

<span>
  <img class="alignnone 
              size-full 
              wp-image-2372" 
       width="546" 
       height="170" 
       alt="" 
       src="http://hatzijewellers.com.au/wp-content/uploads/2012/10/hatzi-jewellers-online.jpg" 
       title="Hatzi jewellery" 
       style="display:block;" />
</span>

I think that's all I did. That's some really ugly document structure and coding. I'm glad it's not yours, 'cause I've been biting my tongue not to say anything. It works, so that's a plus. It's a royal pita to debug though, even for a wp based site. There are lots of coding styles, but if it can't be easily read and understood with the Mark Ⅰ human eyeball, it's a failed bit. That's my opinion, and I seem to be in the minority. Oh, well.

cheers,

gary

lol thanks gary,
Is it possible to put all this:

On .top-box, delete height, and set padding to 0.

On .box-button set {margin: 28px 0;}.

On .box-text, delete padding-bottom

in the code itself?

reason im asking, is the area the picture is in, doesnt give me options at all to change anything about padding and stuff. Its just a small sction, that was probably meant for text mainly, but i added the picture.

Thanks again Gary.

The styles may be found in the styles sheets.

.top-box edits, style.css around line 162

.box-button, same file, line 176

.box-text found in colorstheme.css line 59

the image size is in the html, as you've edited before.

cheers,

gary

hi Gary
Thanks again for all your help.

I found where everything is, but i can save the changes i made.
Word press says something about i need to make file writable or something.
Any ideas?

Thanks

I'm not a WP fan, so couldn't be bothered to learn the ins and outs. WP is sort of a Swiss Army Knife of content management systems. It does everything you'd ever want, but at the cost of tears and bloody cuts for trying to make it yours. It is my opinion that store front sites should be to purpose written CMSes that integrate orders, inventory, shipping, receiving and have accounting cost rules, e.g. lifo/fifo, built in.

This is the point where the proper answer is RTFM. There's bound to be a searchable index or something that will deal with that issue.

cheers,

gary

Hi Gary,
thought id give you a courtesy message, since you have been more than nice with your help.

Unfortunately ive been trying to message my webdesigner with help in why i cant have a writable stylesheet.
And i have gotten no response from him.

So im kind of stuck until i get some feedback from webdesigner.

Thanks so much for all your help though.
Ive never met/spoken to anyone who is so well acknowledged with html code/websites etc etc as u
i feel like i should have gotten you to make me a website lol
so thank u for everything.

Do u know of any SEO tips? (its a different catorgory altogether, i know. Just thought id ask lol)

thanks again.

Until you can get a response from your dev, add the changes directly to the elements in the html, like so:

<div class="top-box" style="height: auto; padding: 0;">...
<!-- Height defaults to auto, so since you cannot delete it in the
     stylesheet, you reset it to the default in the html. Padding
     defaults to zero on the div element, so when you can access the 
     file, simply delete the padding property also. -->
 
<div class="box-button" style="margin: 28px 0;">....
 
On <div class="box-text" style="padding-bottom: 0;"> 
<!-- Same as .top-box, delete padding-bottom in stylesheet when you
     can. -->

Regarding SEO, I'm no expert. There are a few things to remember. Use a vocabulary the public would use, but don't overuse the words; The search engines tend to think you're trying to game them if you do. Don't even think about trying to game the system. Brin and Page are smarter than you or me, and they're especially smarter than the soi-disant SEO experts.

Google specifically ignores the "key-words" meta element. So don't worry about it all that much.

Use the meta description to specifically describe what's on that page. Google uses it, when it's available, as the page description on the search results page. Give your potential visitors an honest representation of the page.

The same applies to the title element, and don't overdo. This

<title>Diamond Engagement Rings, Diamond Wedding Rings, Diamond Rings, Diamond Jewellery from Hatzi Jewellers</title>

<title>Hatzi Jewelers, your source for diamond rings and jewelry</title>

Since you have brick and mortar stores, the location/s/ should be included in the description and in the page's prose. Google et al will key results to the location of the searcher when it can.

More important for business than seo is to have the website's url on all printed media, on any vehicles, and in all advertising. These will affect local trade and website visits a lot more than the search engines. (That from dimly remembered studies.)

Hope I haven't steered you wrong.

cheers,

gary

Regards your writeable stylesheet: You have not go correct permissions set on your theme directory and files, it sounds as though you are attempting to use the WP dashboard file editor but that requires the server user be able to access the files, this is in the same fashion WP is able to use the Media Library to upload files and write (save) them to certain directories. Contact your host and request the permissions are adjusted for the theme folder so the server user can access them in a 'write' mode, however do NOT let them simply set all files to 777 it's about the user/group being set correctly. Failing that you best bet is download the files via SSH or FTP work on them locally then upload back to site but I'm worried here that you will be working on a live production site? and unless you know what you are doing you should avoid directly editing production files.

As for your web developer, I often here stories like this, however you will need support of a developer so you may want to look through the WP jobs board when the need arises.

Hello again,
Im so sorry for my absence, i must have done something to my website to make it crash and not work at all. I had to call my webdesigner to fix the problem, and he did so. Its now back up and running as usual.
I also asked him about the jpeg to fit in correctly, but he seems quite busy at this time, so im still stuck with my problem :/

hugo - thank u so much for the input. i will lokk into this.

gary- im currently researching SEO and how it works, seems like its not easy trying to get high google rankings in searches, thank you for the input.
Jewellery is spelt this way in Australia, which is where i am from. Looks odd huh lol

In regards to my jpeg issue, i still havent fixed it. the new url for the jpeg to sit in place is:
<span><img class="alignnone size-full wp-image-2372" title="Hatzi jewellery" src="http://hatzijewellers.com.au/site/wp-content/uploads/2012/10/hatzi-jewellers-online-store-image.jpg" alt="" width="470" height="120"</span>

what should it look like if i was to copy and paste it exactly how u stated i could, with html code for it to fit in correctly.

Thanks again Gary.

.top-box {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #DBDBDB;
    border-top: 7px solid #EFE6D0;
    color: #2B2B2B;
    }
 
.top-box {
    font-family: 'Cabin Condensed',sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    left: -20px;
    line-height: 34px;
    overflow: hidden;
    position: absolute;
    top: -215px;
    width: 580px;
    }   
 
.box-button {
    float: left;
    margin: 28px 0;
    }
 
.box-text {}

cheers,

gary

Hi Gary,
That photo u attached is pretty much exactly how i want it.
So i copy the html code like this:

<span><img class="alignnone size-full wp-image-2372" title="Hatzi jewellery" src="http://hatzijewellers.com.au/site/wp-content/uploads/2012/10/hatzi-jewellers-online-store-image.jpg" alt="" width="470" height="120"
 
.top-box {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #DBDBDB;
    border-top: 7px solid #EFE6D0;
    color: #2B2B2B;
    }
 
.top-box {
    font-family: 'Cabin Condensed',sans-serif;
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    left: -20px;
    line-height: 34px;
    overflow: hidden;
    position: absolute;
    top: -215px;
    width: 580px;
    }   
 
.box-button {
    float: left;
    margin: 28px 0;
    }
 
.box-text {}
</span>

Those changes are for the stylesheet/s/. You don't have access yet?

In that case, use the style attribute for each of those elements for each property that was changed. E.g.

<div class="top-box"
     style="height: auto;
            width: 580px;">
==============
div class="box-button"
    style="margin: 28px 0;">
==============
<div class="box-text"
     style="overflow: visible;
            padding-bottom: 0;">
==============

cheers,

gary

Ok thank u Gary,
i dont have access to style sheets, is using html to change this bad?

So i copy and paste like this:

<span>
<div class="top-box"
     style="height: auto;
            width: 580px;">
div class="box-button"
    style="margin: 28px 0;">
<div class="box-text"
     style="overflow: visible;
            padding-bottom: 0;">
 
<img class="alignnone size-full wp-image-2372" title="Hatzi jewellery" src="http://hatzijewellers.com.au/site/wp-content/uploads/2012/10/hatzi-jewellers-online-store-image.jpg" alt="" width="470" height="120"</span>

This is an editing issue. You need to go to this part of the html,

    <div id="my_requestquotewidget-2">
      <div class="top-box">
	<div class="box-button">
	  <a href="http://hatzijewellers.com.au/site/online-store/" class="button-link"></a>
	</div><!-- end 'button' -->
 
	<div class="box-text">
	  <span><img class="alignnone size-full wp-image-2372" title="Hatzi jewellery" src="http://hatzijewellers.com.au/site/wp-content/uploads/2012/10/hatzi-jewellers-online-store-image.jpg" alt="" width="546" height="170" /></span>
	</div>
      </div>
    </div>

cheers,

gary