PDA

View Full Version : Image Placement Problem



Vance
15 Apr 2009, 11:50 AM
I am having a really bad day with this and I'm ready to give up. Chances are I've done something simple and stupid but I've been looking at it way to long and just can't see it.

First off, what I am trying to do is create a column where an image of an arrow will display in a uniform manner down the column and it's placement be adjustable. Next to this, in another column, will be a brief description of the iteme being offered for sale.

I got the description to display correctly, but for some reason I just can not get the arrow image to display at all.

What I am trying to get is this:

http://lola-lynn.com/store/images/junk.jpg


You can see the actual page HERE (http://lola-lynn.com/store/index.html)

My code so far is as follows:

<style type="text/css">
body {
background-color:#990000;
margin:0;
padding:0;
}
#container {
width:691px;
margin:0 auto;
height:755px;
}
#head1 {
background-image:url('../store/images/cart-head.jpg');
width:691px;
height:65px;
background-repeat:no-repeat;
}
#head2 {
background-image:url('../store/images/head2.jpg');
width:691px;
height:167px;
background-repeat:no-repeat;
}
#left {
float:left;
background-image:url('../store/images/left.jpg');
width:145px;
height:600px;
background-repeat:repeat;
}
#mid {
float:left;
background-image:url('../store/images/mid.jpg');
width:337px;
height:600px;
background-repeat:repeat;
}
#new {
float:left;
background-image:url('../store/images/new.jpg');
background-repeat:no-repeat;
width:308px;
height:32px;
margin-top:8px;
margin-left:12px;
}
#right {
float:left;
background-image:url('../store/images/right.jpg');
width:209px;
height:600px;
background-repeat:repeat;
}
#bestseller {
float:left;
background-image:url('../store/images/bestseller.jpg');
background-repeat:no-repeat;
width:180px;
height:25px;
margin-top:30px;
margin-left:10px;
}
#colA {
float:left;
width:35px;
height:17px;
padding-top:30px;
margin-left:-8px;
}
#colB {
width:145px;
margin-left:35px;
}
#bottom {
float:left;
background-image:url('../store/images/bottom.jpg');
width:691px;
height:65px;
background-repeat:no-repeat;
}
#footer {
padding-top:25px;
color: #FFF;
width: 991px;
height: 22px;
font-size: 12px;
clear:both;
text-align:center;
}
.tag {
color:#FFF;
text-align:center;
font-size: 12px;
width: 991px;
height: 20px;
font-family:sans-serif;
}
div.menu {
width:120px;
padding-top:0px;
margin-left:10px;
border:0px;
text-align:left;
}
a {
color:#FFF;
font-size:12px;
border-style:none;
}
div.menu a {
display:block;
font-size:12px;
width:100%;
padding: 10px;
padding-left: 15px;
font-weight:bold;
border-top:1px;
color:#000;
text-decoration:none;
line-height:10px;
font-family:sans-serif;
}
html>body div.menu a {width:auto;}
div.menu a:hover {
color: red;
font-size:14px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="head1">
</div>
<div id="head2">
</div>
<div id="left">
<div class="menu">
<a href="index.html">Home</a>
<a href="specials.html">Specials</a>
<a href="videos.html">Video's</a>
<a href="photos.html">Photo's</a>
<a href="autographs.html">Autograph's</a>
<a href="merchandise.html">Merchandise</a>
<a href="contact.html">Contact Us</a>
</div></div>
<div id="mid">
<div id="new">
</div></div>
<div id="right">
<div id="bestseller">
<div id="colA">
<div style="background-image:url('../store/images/arrow.jpg')"></div>
<div id="colB">
<p>This is a test to see if this really works or not</p>
</div></div></div></div>
<div id="bottom">
</div>
<p>&nbsp;</p>
<div id="footer">
&copy; 2009 &nbsp;&nbsp;&nbsp; Lola-Lynn.com
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; All Rights Reserved
</div>




Any help with this would be greatly appreciated by a brain-dead old fart.

Thanks,
Vance

Vance
15 Apr 2009, 11:59 AM
I feel so stupid.

I figured it out.

I changed the way of calling the arrow image up to:

<img src="../store/images/arrow.jpg" alt="Alt Text" style="width:30px; float:left; margin-top:77px; margin-left:-8px;">

And I also did away with the #colA and it seems to work.

If one of you experts would be interested in taking a look at this anyway to let me know if there is a better way to do, I would appreciate it.

Thanks,
Vance