Results 1 to 2 of 2

Thread: Image Placement Problem

  1. #1
    Join Date
    Oct 2008
    Posts
    163

    Image Placement Problem

    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:




    You can see the actual page HERE

    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

  2. #2
    Join Date
    Oct 2008
    Posts
    163
    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

Similar Threads

  1. Help With Image Map With Rollovers and More
    By porphyrins in forum General Questions
    Replies: 1
    Last Post: 03 Dec 2008, 02:57 AM
  2. Image Centering Problem
    By acidvisor in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 16 Jan 2007, 03:18 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •