22 replies [Last post]
Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Hello, this is my first time posting here.
Im hoping i can get a little help in getting the code correct to fit a jpeg. correctly in the margin/border.

The Problem im having, is where the jpeg. is going, there is an invisible margin/border, thats not allowing it to stretch to the full size.
The margin/border is all across the top horizontally, and all across the right side vertically.

I can post a url of where the image is (its a website, im not sure if im allowed to post it, so im sorry if ive done something wrong. Please feel free to change my post around if ive broken any rules)
http://www.hatzijewellers.com.au
The image is on the home page, its called the "Online Store now open".
Ive managed to centre it so the margin/border looks equal everywhere. Changing the size of the image doesnt help. Ive tried that.
The code ive put is:

<span><img class="alignnone size-full wp-image-2372" title="Hatzi jewellery" src="http://hatzijewellers.com.au/wp-content/uploads/2012/10/Hatzi-online-Store.jpg" alt="" width="470" height="120"</span>

What can i do to get it to fit in correctly?
Thank you so much, and i appologise if my post on here is all over the place.
Thank you.

//mod edit: Please use the bbcode [code][/code] tags or the code button to mark source code. Fixed. ~gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Fixed?

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
If you're using Win, add the .exe extensions to convert and identify.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

gary.turner wrote: It appears

gary.turner wrote:

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
If you're using Win, add the .exe extensions to convert and identify.

cheers,

gary

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Invalid html

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

AttachmentSize
hatzi.jpg 81.68 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Hi Gary, Thank you so much

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.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Ok i have played around with

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,

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

What do you want to do about

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Hi Gary, Thank you so much

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.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

actually, yes i do see the

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

This oughta be close

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>
Note the new image size, 546x170.

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. Wink 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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

lol thanks gary,Is it

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The styles may be found in

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

hi Gary Thanks again for all

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I'm not a WP fan, so couldn't

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. Wink There's bound to be a searchable index or something that will deal with that issue.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Hi Gary, thought id give you

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Re unwritable style sheets:

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. -->

Once you fix things in the stylesheets, be sure to remove the edits from the html. It is a poor practice to use the style attribute in html.

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>

would be better (imo) as
<title>Hatzi Jewelers, your source for diamond rings and jewelry</title>

Is your spelling of jewelry and jeweler a Brit thing? It looks funny to me, though is apparently legit. Also, I've seen "sightholder" should that not be "site holder" or "site-holder"? Have two or three people, not a part of the writing, read everything with a critical eye, looking for misspelled words, grammar errors and simply clumsy phrasing. These all cause negative impressions, which as everyone knows, one oh-bleep wipes out ten atta-boys and two will kill a hundred.

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Regards your writeable

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Hello again, Im so sorry for

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not exactly as I remember it, but close enough

.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 {}

And the x window dump attached. Don't forget the img width and height attributes.

cheers,

gary

AttachmentSize
hatzi-xwd.jpg 91.38 KB

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Hi Gary, That photo u

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>

is that correct?
Thanks again Gary

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

No

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;">
==============
And, the img height and width attributes need to be edited to reflect the 546x170px size.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Diamonds
Diamonds's picture
Offline
Regular
Last seen: 10 years 12 weeks ago
Timezone: GMT+11
Joined: 2012-10-22
Posts: 12
Points: 13

Ok thank u Gary, i dont have

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>

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Not a copy/paste action

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>
For each element where I've indicated a change, edit the existing code to reflect the changes.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.