Simple CSS problem...PLEASE Help

Discussion in 'Web Design' started by ballerz4life, Mar 31, 2010.

  1. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    Hello,

    I am using Interspire shopping cart and I am having 1 problem redesigning the site. With most pictures that I want to replace all I have to do is find out the name of the picture and name the new picture the same thing and whoola...picture gets replaced and I am happy.

    Now I am trying to replace the black box on the left hand side of all the pages with a picture that is the same the size. The problem is...it looks like the code is calling for a picture here SideBg.gif, but really it is not. I have deleted the picture and the box still shows up. It appears that the code is just making a black box there instead, now I can change the size of the box but I need to replace it with a picture.

    Here is the code:

    Code:
    /* Left Content Area */
    
    .Left {
    	background: url(../images/black/SideBg.gif) 0 0 no-repeat;
    }
    .Left {
    	float: left;
    	min-height: 500px;
    	width: 184px;
    	font-size: 0.85em;
    	margin-right: 15px;
    }
    
    .Left h2 {
    	font-size: 1.5em;
    	font-weight: normal;
    	margin: 10px 5px 5px 10px;
    }
    
    .Left ul {
    	margin: 0;
    	padding: 0;
    }
    
    .Left li {
    	clear: both;
    	list-style: none;
    	margin: 0;
    	padding: 3px 0;
    }
    
    .Left .BlockContent {
    	margin: 0 10px 0 10px;
    }
    
    .Left li {
    }
    
    .Left li a {
    	text-decoration: none;
    }
    
    .Left li a:hover {
    	text-decoration: underline;
    }
    .Left #SideCategoryList li{
    	padding: 3px 0 0 0;
    }
    .Left #SideCategoryList li ul {
    	padding-left: 15px;
    }
    
    Again, I need to replace the SideBg.gif with my own picture, can someone please help me with this.

    Thanks
     
  2. voyevoda

    voyevoda Regular Member Premium Member

    Joined:
    Mar 21, 2010
    Messages:
    217
    Likes Received:
    97
    Location:
    Eastern Front
    The "black box" is still there because the .Left class is specifying that any object with that class has a width of 184 pixels and a minimum height of 500 pixels.

    Either replace the SideBg.gif with your own image or add "display: none;" to the .Left class to make it go away.
     
  3. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    OK, I will try this and let you know.

    Thank you
     
  4. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    OK, so I used the "display: none;" code and it did make the box disappear but it still will not detect my new picture.

    Before I asked for help I changed the picture a few times and nothing happened, even if I deleted SideBg.gif it still showed the black box.

    Like I said in OP, any other picture that I need to replace on the site I just name my picture the same thing and it works...with the exception of this one.

    Any other ideas...

    Thanks
     
  5. ballerz4life

    ballerz4life Junior Member

    Joined:
    Jun 26, 2008
    Messages:
    101
    Likes Received:
    42
    Can someone guide me in the right direction here...thanks
     
  6. webchick11

    webchick11 Newbie

    Joined:
    Feb 24, 2009
    Messages:
    37
    Likes Received:
    12
    Location:
    US
    Just name your new picture SideBg.gif and make sure you upload it to /images/black folder. If the old and new pictures are the same size, this should work just fine.

    I rarely use .gif files anymore, I mostly use .png - so make sure that you have the file name correct.