/    Sign up×
Community /Pin to ProfileBookmark

Image Spacing Issue–bad HTML?

I am building a web site for my new online jewelry business using ProStores ([url]www.prostores.com)[/url]. I didn’t realize when signing up for the service that I was restricted to their designs so I created my own images for the site. I used to work as a web designer using Dreamweaver (I have now been out of the country for several years so am a little behind on the technology), but I never got into much coding. Now, after racking my brain trying to figure out what the issue is with my header, I have no idea how to fix it. I did a validation test and it looks like there are quite a few issues, most of them already exisiting in the ProStores code. I really just wanted to insert my images and links in the header…It shouldn’t be that hard, should it? Here is my site:

[url]www.karmavidajewelry.com[/url]

I would really appreciate any help on this.

to post a comment
HTML

5 Comments(s)

Copy linkTweet thisAlerts:
@cbVisionSep 22.2008 — The link you posted seems to have images in the header..

http://www.karmavidajewelry.com/images/store_version1/logo.gif

http://www.karmavidajewelry.com/images/store_version1/go.gif

http://www.karmavidajewelry.com/images/store_version1/nav_left.gif

...images for the navigation

Are you trying to replace these images?
Copy linkTweet thisAlerts:
@scrmbledeggsauthorSep 22.2008 — I actually got one of the spacing issues worked out. But i am still trying to get the arrow ("go.gif") closer to the search box at the top of the page. Ive tried everything i can think of and still it is all the way at the right-hand side of the page.

I have already replaced the text links that are provided by the ProStores code. I replaced their text with my images (the images currently seen on www.karmavidajewelry.com). I added the code for the search box as well. Do you have any idea how to move the image "go.gif"?

thanks for your help!
Copy linkTweet thisAlerts:
@cbVisionSep 22.2008 — It looks like you have everything in this table:

<!-- START SEARCH BUTTON -->

<TABLE height="94" cellSpacing="0" cellPadding="0" width="312" align="center" border="0">
<tr valign="top">
<!-- word search -->

<td class="navbar">
<form action="/servlet/Categories" method="post">
<strong>Search</strong>
<td class="leftnav"><input type="text" size="15" name="keyword" /></td>
<td valign="top" align="left" class="leftnav"> <input type="image" src="/images/store_version1/go.gif" border="0" alt="GO"></td>
</form>
</td>
</TR>
</TBODY>
</TABLE>

<!-- END SEARCH BUTTON -->


You need to specify widths for you TD cells and apply padding and margins for placement. Try this:

<!-- START SEARCH BUTTON -->

<table align="center" border="0" cellpadding="0" cellspacing="0" height="20" width="312" style="padding-bottom: 50px; padding-left: 100px">
<tbody><tr valign="top">
<!-- word search -->

<td class="navbar" width="55px" style="padding-top: 4px;">
<form action="/servlet/Categories" method="post">
<strong>Search</strong>
</form></td><td class="leftnav" width="120px"><input size="15" name="keyword" type="text"></td>
<td class="leftnav" align="left" style="padding-top: 10px;"> <input src="/images/store_version1/go.gif" alt="GO" border="0" type="image"></td>


</tr>
</tbody>
</table>

<!-- END SEARCH BUTTON -->
Copy linkTweet thisAlerts:
@scrmbledeggsauthorSep 22.2008 — well, i tried the code you suggested and it only made the header much longer. now i think the search box and button and label "Search" are all even more spread out. do you know why that might be?

thanks again.
Copy linkTweet thisAlerts:
@cbVisionSep 22.2008 — My apologies, I just whipped something up real quick and tested in in Firefox. It looks better in Firefox, but in IE, it's definitely spread out. You just need to add paddings to the cells and margins to the table to get the correct positioning.
×

Success!

Help @scrmbledeggs spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...