Log In · Register

 
 
 Closed TopicStart new topic
Pictures overlapping Text?, Last Question, lol
wordstoasong
post May 6 2008, 04:16 PM
Post #1


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
http://tammys-tackshop.webs.com/

Need help fixing my pictures in my site. With help, I fixed my image map coding and now, my images are overlapping the text. Any help?

Here are the following codes in the areas needed.

Bio Code:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tammy’s Tack Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    margin:0;
    padding:0;
    background-color:#1f80d9;
}
#container {
    position:relative;
    width:800px;
    height:619px;
    margin:auto;
}
#container img {
    position:absolute;
    left:0;
    top:0;
    border:0;
}
#contents {
    position:absolute;
    left:410px;
    top:58px;
    width:374px;
    height:464px;
    overflow:auto;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:14px;
    color:#003;
}
#contents h1 {
    font-size:14px;
    margin:14px 10px;
}
#contents p {
    margin:14px 10px;
}
</style>

</head>
<body>

<div id="container">

<img src="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png" usemap="#map1" alt="">
<map name="map1">
<area shape="rect" coords="16,492,108,526" href="http://tammys-tackshop.webs.com/index.htm" alt="home" title="home">
<area shape="rect" coords="16,527,73,560" href="http://tammys-tackshop.webs.com/bio.htm" alt="bio" title="bio">
<area shape="rect" coords="16,561,125,600" href="http://tammys-tackshop.webs.com/gallery.htm" alt="gallery" title="gallery">
<area shape="rect" coords="252,492,384,526" href="http://tammys-tackshop.webs.com/products.htm" alt="products" title="products">
<area shape="rect" coords="277,527,353,560" href="http://tammys-tackshop.webs.com/faq.htm" alt="faq" title="faq">
<area shape="rect" coords="266,561,360,600" href="http://tammys-tackshop.webs.com/order.htm" alt="order" title="order">
</map>

<div id="contents">
<img src="http://a921.ac-images.myspacecdn.com/images01/91/m_d7da0e7ed59101b515d73476965f2200.jpg" align="LEFT">
<p>
I recently started this small, one-woman business. My passion for horses and the lack of near-by tack shops made me want to make my own “funky” horse tack for all, ranging from polo wraps to saddle pads.</p>
<p>
I first got into making polo wraps by searching online lazily one day. There were simple instructions and I wanted to try and make my own, for fun of course. Sponge Bob Square Pants was the first set I made.  After a wide range of responses from online forums, I decided to create my shop.</p>
<p>
My polo wraps and saddle pads are made from soft fleece, of any color, design or pattern. Velcro tabs are on all my wraps, and each saddle pad has girth straps. I do create pre-made products, which can be found on Ebay.  Everything is handmade if not stated. </p>
<p>
Any questions, comments or feedback can be sent to me at: tammystackshop@gmail.com</p>

</div>

</div>

</body>
</html>



Gallery Code
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tammy’s Tack Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
    margin:0;
    padding:0;
    background-color:#1f80d9;
}
#container {
    position:relative;
    width:800px;
    height:619px;
    margin:auto;
}
#container img {
    position:absolute;
    left:0;
    top:0;
    border:0;
}
#contents {
    position:absolute;
    left:410px;
    top:58px;
    width:374px;
    height:464px;
    overflow:auto;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:14px;
    color:#003;
}
#contents h1 {
    font-size:14px;
    margin:14px 10px;
}
#contents p {
    margin:14px 10px;
}
</style>

</head>
<body>

<div id="container">

<img src="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png" usemap="#map1" alt="">
<map name="map1">
<area shape="rect" coords="16,492,108,526" href="http://tammys-tackshop.webs.com/index.htm" alt="home" title="home">
<area shape="rect" coords="16,527,73,560" href="http://tammys-tackshop.webs.com/bio.htm" alt="bio" title="bio">
<area shape="rect" coords="16,561,125,600" href="http://tammys-tackshop.webs.com/gallery.htm" alt="gallery" title="gallery">
<area shape="rect" coords="252,492,384,526" href="http://tammys-tackshop.webs.com/products.htm" alt="products" title="products">
<area shape="rect" coords="277,527,353,560" href="http://tammys-tackshop.webs.com/faq.htm" alt="faq" title="faq">
<area shape="rect" coords="266,561,360,600" href="http://tammys-tackshop.webs.com/order.htm" alt="order" title="order">
</map>

<div id="contents">
<b><u>Tammy's Tack Shop: Gallery</b></u>
<br><br><b>Polo Wraps</b>
<br><img src="http://i27.tinypic.com/snyjxh.jpg"><img src="http://i29.tinypic.com/1zoeycy.jpg"><img src="http://i29.tinypic.com/mto7wx.jpg"><img src="http://i29.tinypic.com/29gj4li.jpg">
<br><br><b>Saddle Pads</b>
<br><img src="http://i31.tinypic.com/1685rav.jpg"><img src="http://i31.tinypic.com/s42mg9.jpg">

</div>

</body>
</html>


Thank you. =]
 
venti-anemoi
post May 6 2008, 04:25 PM
Post #2


torn
*****

Group: Official Designer
Posts: 953
Joined: Oct 2004
Member No: 55,718
It looks fine on my computer........

Could you post a screenshot of what it looks like on yours?
 
wordstoasong
post May 6 2008, 04:41 PM
Post #3


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
Oh I just fixed it. :P

From changing this:
CODE
#container img {
    position:absolute;
    left:0;
    top:0;
    border:0;
}


To this:
CODE
#imgmap {
    position:absolute;
    left:0;
    top:0;
    border:0;
}


Now I have a blue border. :/
Any help fixing that would be great. =]
 
miyashu
post May 6 2008, 04:50 PM
Post #4


cake or DEATH
*****

Group: Staff Alumni
Posts: 631
Joined: Sep 2005
Member No: 223,586
for the main image, you could set its border attribute to 0 like this:

CODE
<img src="http://i61.photobucket.com/albums/h54/teelerthekitty/Art/Banners/tammystackshop.png" border="0" usemap="#map1" alt="">
 
wordstoasong
post May 6 2008, 05:17 PM
Post #5


Senior Member
***

Group: Member
Posts: 30
Joined: Jan 2008
Member No: 612,365
Thank you. It's fixed now. =]
 
miyashu
post May 6 2008, 06:13 PM
Post #6


cake or DEATH
*****

Group: Staff Alumni
Posts: 631
Joined: Sep 2005
Member No: 223,586
You're welcome!

Topic closed. If you need this re-opened, just pm me or another staff member.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic