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> </p>
<div id="footer">
© 2009 Lola-Lynn.com
All Rights Reserved
</div>
Any help with this would be greatly appreciated by a brain-dead old fart.
Thanks,
Vance
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> </p>
<div id="footer">
© 2009 Lola-Lynn.com
All Rights Reserved
</div>
Any help with this would be greatly appreciated by a brain-dead old fart.
Thanks,
Vance